Unlike the Fixed Widgets and Modular Widgets, Layer Widgets refer to some modules that can be applied across different areas of the sites. These widgets are all customizable in terms of looks and placements.
For these widgets, there are two basic layer areas to set up the widgets, based on its location on a page.
Promo Area
This area encompasses the upper section of a page just underneath the Header Navigation and some categorization (if in the Product Search Page)
Content Area
Content areas refer to the all the areas underneath the Promo Area
On top of that, there are six different layer placements for these widgets, based on which page the widgets will be displayed.
Anywhere — the widget will be displayed on all layer placements
Home Landing Page — the widget will only be displayed on the homepage
Product Landing Page — the widget will only be displayed on the product landing pages
Product Detail Page — the widget will only be displayed on the product detail page (this includes Deals, Accommodation, Flights, and Activities)
Product Search Page — the widget will only be displayed on the product search page (this includes Deals, Accommodation, Flights, and Activities)
Product Detail Page — the widget will only be displayed on the pages to follow the product detail page, in which customers need to fill some useful information
A. Promo Banner Layer Widget
Promo Section Layer Widget allows you to create a dynamic strip banner that sits elegantly atop your page, demanding attention without compromising the user experience. With the ability to customize every detail, from colors to content, this widget transforms ordinary web pages into interactive and engaging experiences in a simple way.
It’s a modest but standout widget with a user-friendly click-to-close functionality. Users can seamlessly interact with the banner and choose to dismiss it at their convenience, ensuring a non-intrusive and enjoyable browsing journey.
The widget will look like this on the site.
How to set up Promo Banner Layer Widget:
From your TRAVLR Dashboard, go to Widget
Under the Promo area section, click the Add Widget button and choose Promo Banner Layer Widget from the dropdown (P.S.: Do not mistake this with Promo Banner Widget – which is a completely different widget).
Fill out the Title (this will only be an identifier and will not show anywhere on the site) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
You can add a logo or icon by clicking on the + button on the Icon or Logo field.
Add the Description which you can format with our WYSIWYG editor. After that, you can add a CTA link by adding the URL and the Link Text.
Choose the Text Color, Background Color, and the Border Color from the color picker field.
Click Publish when done
B. CTA Banner Layer Widget
CTA Banner Layer Widget lets you craft responsive image banners which you can place anywhere on your site. This all-around tool empowers you to personalize every aspect, from text and buttons to links and scripts, creating impactful Calls-to-Action (CTAs). Make your brand standout by seamlessly integrating icons into your banners.
This is how the banner will look like on the site.
In this comprehensive guide, we'll walk you through the step-by-step process of harnessing the full potential of the CTA Banner Layer Widget. Learn how to design visually stunning banners that not only capture attention but also drive action.
How to set up CTA Banner Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose CTA Banner Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
You can add a Heading and a Subheading copy by filling the respective fields. Upload a logo or icon by clicking on the + button on the Icon or Logo field.
Choose the Text Color and Background Color from the color picker field. If you want to make the banner in full width, switch on the Full Width toggle
You can add a background image that will override the background color by switching on the Image toggle. After that, you can choose the placement of the image.
To add responsiveness to the image, you can also add a Breakpoint Image by clicking the Add Breakpoint Image button. When adding a breakpoint image, you can upload your preferred image and set the minimum size for which the image will be displayed.
Now, you can add a button by filling the fields in the Action Button section. You can customize the copy, the colors, the shape, and the action that will happen if the button is clicked – whether it’s opening a URL or running a script.
Click Publish when done
C. Action Button Layer Widget
Action Button Layer Widget is a strong tool to specifically enhance product detail pages with bolder presence. This tool allows users to seamlessly integrate an additional button, tailor-made to your specifications, creating a visually appealing and user-centric experience.
This is how the widget will look like on the site.
In this guide, we will dive into the basic setup of Action Button Layer Widget.
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Action Button Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
Fill out the Label – which will be displayed on the site as the button copy.
Choose the Text Color, Background Color, and Border Color from the color picker field. You can also change the button style whether it’s square or rounded.
To add a button icon next to the Label, switch on the Icon toggle (With Icon?), then you can upload the icon (preferably PNG or SVG) and change its position relative to the label.
You can also customize the click behavior of the Action Button Layer Widget by choosing from the dropdown – whether it will trigger a URL Access or PopUp Dialog. When you choose URL Access, you can fill out the URL; when you choose PopUP Dialog, you can fill in the identifier.
Click Publish when done
D. Shortcut Section Layer Widget
Upgrade your website with the easy-to-use Shortcut Section Layer Widget to give you some extra visual navigation to specific URLs. This widget allows you to add card-style navigations to any page of the website. You have the control for this navigation – as you can change the visual of it, the URL, and the labels.
Normally, the Shortcut Section Layer Widget will appear underneath the main content area of a page. However, you can put this widget anywhere on a landing page that allows customizable widget areas. This guide breaks it down in simple steps, helping you enhance your site with a personal touch.
This is how the widget looks like on the site.
How to set up Shortcut Section Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Shortcut Section Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
Fill out the content section – the Heading and the Sub-heading.
Choose the Text Color and Background Color from the color picker field.
To add the Shortcut Card, click the Add Shortcut Item button. A new Shortcut Item editor will appear. You can upload the background image, fill out the Card copy, and the target URL.
You can add as many shortcut items as you want. The system will automatically configure the card's position.
Click Publish when done
E. FAQ Section Layer Widget
Improve user interaction and streamline information on your website with our FAQ Section Layer Widget. This flexible tool makes it easy for you to smoothly include a frequently asked questions section presented in an accordion style. In this guide, we'll walk you through the simple steps to maximize the potential of this widget, empowering you to provide clear and organized information for your audience.
The widget will look like this on the site.
How to set up the FAQ Section Layer Widget
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose FAQ Section Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
Fill out the content section – the Heading and the Sub-heading.
Choose the Text Color and Background Color from the color picker field.
To add the Shortcut Card, click the Add Shortcut Item button. A new Shortcut Item editor will appear. You can upload the background image, fill out the Card copy, and the target URL.
You can add as many shortcut items as you want. The system will automatically configure the card's position.
Click Publish when done
F. USP Layer Widget
Transform your platform’s narrative with our dynamic USP Layer Widget. This innovative tool empowers users and site admins to seamlessly blend icons and rich-text, creating engaging widgets that transcend the limitations of flat image banners. Beyond aesthetics, the USP Layer Widget enhances SEO efforts by offering customizable, rich-format text.
In this guide, we will explore the steps to craft compelling sections that not only captivate but also elevate your site's visibility.
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose USP Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
Choose the Text Color and Background Color from the color picker field.
To add a USP section item, click the Add USP Section Item button. A new Shortcut Item editor will appear. Fill in the description section with the copy you want to use underneath the icon. It’s all customizable with our WYSIWYG editor.
Afterwards, you need to upload the icon image (preferably SVG or PNG) on the Icon Image uploader.
You can add as many shortcut items as you want; but, we recommend having just three to four points for clarity. The system will automatically configure the USP Section position.
Click Publish when done
G. Hero Layer Widget
Introducing the Hero Layer Widget, designed to bring the spotlight to your content just like our signature hero carousel banner. This widget, a standout feature on platforms powered by our system, now lets users effortlessly emulate that dynamic look on static pages, such as Destination Guide pages.
This is how the widget will look like on the actual site. Normally, you can add a heading in the middle of the banner.
How to set up Hero Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Hero Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
You can add a Heading copy that will be displayed in the middle of the hero banner. However, this is completely optional.
To add the image banner, upload your preferred image by clicking on the + button on the Background Image section. The ideal image size is 2850x1108 pixels (with maximum size of 1MB).
Click Publish when done
H. Video Hero Layer Widget
Now, take a step further into the realm of dynamic content presentation with our Video Hero Layer Widget. With this, you can emulate the impact of our signature hero carousel banner and take it up a notch by seamlessly integrating embedded videos. Whether you're showcasing a destination or telling a captivating story, this widget elevates your static pages.
In this guide, we'll guide you through the simple steps to effortlessly enhance your content with the Video Hero Layer Widget.
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Video Hero Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
You can add a Heading copy that will be displayed in the middle of the hero banner. However, this is completely optional.
You can also add a Description within the Video Hero by using our rich-text editor.
To add the video, paste the embed code of your preferred video to the Embed Code field.
Click Publish when done
I. Image Carousel Layer Widget
Get ready to add a touch of magic to your pages with our Image Carousel Layer Widget. It lets you effortlessly create image galleries that can either auto-play or let your visitors take the wheel with navigation buttons. In this guide, we'll show you how to make your content shine using the friendly and easy-to-use Image Carousel Layer Widget.
This is how the widget looks like on the site.
How to set up Image Carousel Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Image Carousel Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
To add an image to the gallery, click the Add Image Carousel Item button. Afterward, an editor will appear.
Fill in the title for the image item and upload the image by clicking the + button. You can add as many images as possible by repeating the process.
Click Publish when done
J. Description Section with Action Layer Widget
Spice up your website's messages with the Description Section featuring an Action Layer Widget. This handy tool lets you drop intriguing text blocks anywhere on your site, plus, you can throw in a personalized Call-to-Action (CTA) button. It adds a touch of interactivity to your site, turning your content into something that not only tells but also sells.
This is how the widget will look like on the site.
How to set up Description Section with Action Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Video Hero Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
The Content section will house all the customization elements for the text block. You can choose the style whether it will be a full-width block or contained block by switching on the Full Width toggle. Fill in the Title, the Description (customize it with the rich-text editor), and label (which will display as a tag). You can also add an optional Thumbnail.
You need to add the Action Button by filling up the Action Button section. Fill up the Label, choose the respective colors, and choose the Button Style.
You can also customize the click behavior of the Action Button by choosing from the dropdown – whether it will trigger a URL Access or PopUp Dialog. When you choose URL Access, you can fill out the URL; when you choose PopUP Dialog, you can fill in the identifier.
Click Publish when done
K. Description Section with Map Layer Widget
Another text block you can use to enhance your platform is the Description Section with Map Layer Widget. This widget allows you to elevate the site with a dynamic fusion of textual information and interactive maps. In this guide, we'll explore how to seamlessly integrate location details, narratives, and visual elements, providing a richer experience for your users.
How to set up Description Section with Map Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Video Hero Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
The Content section will house all the customization elements for the text block. You can choose the style whether it will be a full-width block or contained block by switching on the Full Width toggle. Fill in the Title, the Description (customize it with the rich-text editor), and label (which will display as a tag). You can also add an optional Thumbnail.
As for the Map section, all you need to do is to input the Longitude and Latitude values of the destination you would like to feature.
Click Publish when done
L. Text Accordion Layer Widget
Add a new dimension of content organization on your platform with the Text Accordion Layer Widget. This innovative tool empowers users to create text blocks that can be expanded or collapsed, striking the perfect balance between detail and brevity. In this guide, we'll walk you through the simple steps to incorporate this widget, offering a seamless and interactive way to present information on your website.
How to set up Text Accordion Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Text Accordion Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
Fill out the Heading of the text block. This step is completely optional.
To add an accordion text block, click the Add Text Accordion Item button. A new editor will appear.
Fill in in the Title that will appear as the non-collapsible text area on the site. Fill in the Description using the rich-text editor. This section will appear as the text blocks which can be expanded and collapsed. You can add as many text accordion items as you want.
Click Publish when done
M. Embed Video Layer Widget
Embark on a journey to elevate your website's multimedia experience with the Video Embed Layer Widget. This versatile tool allows users to seamlessly embed videos from third-party sites like YouTube or Vimeo by adding the embed code. In this guide, we'll walk you through the straightforward steps to integrate captivating video content effortlessly. Let's explore how the Video Embed Layer Widget can bring life and vibrancy to your platform in just a few simple clicks.
How to set up Embed Video Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Ember Video Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
Copy and paste the embed code of your preferred code to the Embed Code section.
Click Publish when done
N. Article Section Layer Widget
This is your gateway to effortlessly showcase existing articles from your platform on any page. This dynamic tool empowers users to curate and highlight compelling content, providing a seamless and engaging reading experience. In this guide, we'll navigate through the steps to effectively integrate and feature articles, allowing you to enhance the depth and richness of your website's content.
How to set up Article Section Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Article Section Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
Fill out the Article Section Title that will appear on top of the article selections.
To add an article, click the Add Article Section Item button. A new editor will then appear. Choose an article you would like to feature from the dropdown. You can repeat this process as many times as you want.
Click Publish when done
O. Custom Article Section Layer Widget
This powerful tool takes the capabilities of the Article Section Layer Widget a step further, allowing you to seamlessly link out to external articles. Customize the thumbnail, snippet, and URL for a personalized touch. In this guide, we'll walk you through the simple steps to leverage the Custom Article Section Layer Widget, enabling you to effortlessly spotlight external articles on your platform.
How to set up the Custom Article Section Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Custom Article Section Layer Widget from the Dropdown
Fill out the Title (for internal use only) and choose the layer placement from the dropdown under “The layer the widget should be associated with” field.
Fill out the Article Section Title that will appear on top of the article selections.
To add an article, click the Add Article Section Item button. A new editor will then appear.
Fill out the Title and the Description (this will appear as the article snippet). Upload the thumbnail by clicking the + button, and finally fill out the custom URL to the character. You can repeat this process to add more articles.
Click Publish when done
P. Placeholder Layer Widget
This widget is used to bring the Layer Widget you set up on the other placement to a different placement (for example, a layer widget with Deals Landing Page placement to the Homepage). This is a powerful tool to simplify the process you need to take to set up the widgets. To use this widget, you need to first set up the Layer Widget on another placement.
How to set up a Placeholder Layer Widget:
From the TRAVLR Dashboard, go to Widgets
Under the Content Section, click the Add Widget button and choose Placeholder Layer Widget from the Dropdown
Choose which Layer Widget you would like to emulate; then, choose the Placement of that Layer Widget.
Click Publish when done
To set up a Placeholder Layer Widget, you need to go to the Homepage Editor.
From the TRAVLR Dashboard, go to Pages. Then select Landing Pages and Home
Click the + button to add a new widget. Choose Placeholder Layer Widget
Choose which Layer Widget you would like to emulate; then, choose the Placement of that Layer Widget.
Click Publish when done