With a View container, you can divide your content into multiple views. The View navigation element enables you to navigate within a View container or track the current view you are on. The View navigation element offers the following display types:
- Arrows (navigate)
- Counter (track)
- Arrows with counter (track and navigate)
- Numbers (track and navigate)
- Dots (track and navigate)
- Progress bar (track)
Arrows
The Arrows display type consists of two buttons that allow you to navigate to the previous or next index in your view container. The Arrows display type does not inform your users on which view they are currently at.
If you require more design flexibility, you also have the option to recreate the navigation using regular buttons and use the “View container navigation” button action.
Counter
The Counter display type is a variant that shows the current view index and the total number of views (e.g. 1 of 4). It is read-only and does not allow users to navigate the view container.
If you require more flexibility with your counter, you can also use a regular formula element and retrieve the current view index with EA_view and the number of views with EA_count, where EA stands for the View container reference.
The Counter has the following style setting:
- text size (default 15px)
Arrows with counter
The Arrows with counter display type combines the Arrows and Counter display types, with the counter positioned between the arrows. If your design requires greater flexibility, you can replicate this display type using standard buttons and the formula element.
Numbers
The Numbers display type provides view navigation and gives users insights into their position in the funnel. The numbers also function as buttons. If your view contains required questions, view navigation will be restricted by disabling buttons that do not satisfy the form validation conditions.
The Numbers display type cannot be replicated using regular buttons. This is because the number of buttons is automatically updated based on conditional logic settings in your Views.
The Numbers have the following style settings:
- active dot color (default is primary color)
- dot color (default is accent color)
- text size (default 15px)
Dots
The Dots display type functions similarly to the Numbers display type, except that it does not display actual numbers. Dots can be the preferred option when your View container contains conditional views that can influence the total view count based on question answers.
The Dots have the following style settings:
- active dot color (default is primary color)
- dot color (default is accent color)
Progress bar
The Progress bar display type shows the progress in relation to the total view count. A Progress bar motivates your users to complete the flow, ultimately increasing conversion rates for your content.
The Progress bar has the following style settings:
- active track color (default is primary color)
- track color (default is accent color)
- height (default 10px)
- gap (default 0px)
- border-radius (default 0px)
By default, a View navigation element is added when you add a View container to your canvas. You have the flexibility to position the View navigation anywhere on your canvas. Additionally, you can combine multiple View navigation elements to create advanced layouts.