This feature available on All Plans
Contents
Widget Settings
Setup
Visibility
CSS Class
Adding Navigation
Customizing Page Titles
Overview
The Paging Widget allows you to add a more standard web page-like feel to the navigation and display of your campaign, where individual sections of your campaign appear as their own "page". In combination with a Navbar Widget, this allows you to set up easy navigation of the different sections of your campaign without having to use individual widget visibility settings and Action Widgets to accomplish the same thing. Also, each "page" will have its own unique URL, which makes sharing specific sections of the campaign a snap.
To add one of these widgets to your campaign, click the Paging Widget icon in the Add Widgets Panel, or click and drag the icon into your preview area.
Once you've added the Paging Widget, adding new pages/sections is as easy as adding Container Widgets to the Paging Widget. Click your Paging Widget to highlight it, then click the Container Widget icon to add your new container to the Paging Widget.
Each separate Container Widget in your Paging Widget counts as its own page. You can then add other widgets (including additional Container Widgets, if needed) inside of these containers to build out each page.
Note: Because of the way that the Paging Widget works (and its integration with the Navbar Widget), we recommend that the Paging Widget be at the top of your campaign, below your navbar.
Widget Settings
The widget settings popup is where you'll make any needed changes to your Paging Widget. To change the widget name, click on the pencil icon in the top-left (next to the name) then type your new name.
You will also see the CSS ID (starting with a #) of your new widget listed in the top-right corner of the popup.
You'll want to move through each item in the menu on the left side to make sure you've completely customized the Paging Widget in the way you'd like. You can navigate through these sections using the Back and Next buttons at the bottom.
When you're finished making changes to your widget, click the blue Save and Exit button.
Setup
In the Setup section, you'll find your Paging Options - this is where you'd set up how you want your campaign to scroll when your visitors click through the different pages in your campaign in the Navbar Widget. Your options are to Scroll to the top of the campaign, Scroll to the top of the Paging Widget, and to not scroll at all (Do not scroll).
Visibility
If you'd like to limit visibility of the widget to a specific date and time, only show the widget in your Builder, or limit in which country/countries the widget can be seen; you'd do so in the Visibility section. More information about these settings can be found in the Widget Visibility help doc.
CSS Class
In this section, you can add a CSS Class that will be associated with the Paging Widget - that way you can target it with custom CSS code. Rules and naming conventions are provided so that you don't use a class that won't work. Simply add your CSS class(es) to the Extra CSS Classes field.
Adding Navigation
While the Paging Widget will allow you to divide your campaign into separate pages, the easiest way to navigate between the pages is to add a Navbar Widget and link it to your Paging Widget. To do so, start by clicking the Navbar Widget icon in the Add Widgets panel.
In the widget settings window that pops up, click Paging Widget in the options on the left.
In the Paging Widget section, click on the radio button next to your Paging Widget, then click the Synchronize Links Now button.
You'll now see that the Container Widgets you've added to your Paging Widget are automatically added as links in your Navbar Widget, in the Middle section. You can move these links to the Left or Right section by clicking the icon on the left side (the three lines) of any of the links and dragging that particular link into the section of your choice.
You can also click and drag to reorder the way the pages are displayed on your navbar. The top-most link appears on the left side of your navbar in the campaign, then moves from left to right as you move down the list.
Note: Regardless of how the links are set up in the Navbar Widget, the Paging Widget will display the top-most container upon the first loading of your landing page. Keep this in mind when designing your campaign.
Customizing Page Titles & Paths
So now that you have your pages set up, and the navbar in place to navigate between pages, you'll notice that the names of your pages are all the same.
To change the titles of the pages that appear in the navbar, you'll need to update the titles of each of your main Container Widgets in the Paging Widget. Click the edit icon on your Container Widget to open the widget settings.
In the widget settings popup for your container, click on the pencil icon in the top-left corner (as covered in the Widget Settings section), and you'll see that you're then able to change the name of the widget. Type in your new widget name, then click the checkmark to lock the name in.
Before you exit the widget settings - you may want to consider changing the custom path for your page. On the right, you'll see a Custom Page Path field. This field allows you to set up a custom path to this specific page when you're sharing your campaign's URL.
Once you save your changes and close the widget settings popup, you'll see the change reflected in your navbar.
Also, when you publish your campaign as a landing page, you'll notice that when that particular page is clicked on, the URL will reflect the change you made to the path.
