Pagination Element
Last Update: May 22, 2024
As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we are looking at the Pagination Element.
Options were added to the Pagination Element to further enhance the Element for use with the Avada WooCommerce Builder.
How To Use The Pagination Element
The Pagination Element allows you to place pagination anywhere in a Content or Page Title Bar Layout Section, in any Single Post, Portfolio, WooCommerce Product, or Custom Post Type Layout. The Pagination Element is unique, in that if needed, it can be placed twice in a Layout Section, whereas many of the other Layout Elements can only be placed once. This facilitates the common layout of having pagination both above and below the content.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Pagination Element.
The Pagination Element can be placed anywhere in you Layout Section, but in most cases you will want to place the Element at the very top, and/or the very bottom of the Content Element. There is a range of options with the element about how it displays. See the options panels below for specific details on that. This element does not include the Load More or Infinite Scroll options, as these are found in the Blog and Portfolio Elements. This Element is designed for Single Post, Portfolio and Product Layouts.
See below, for an example of the Pagination Element in a Single Post Layout, displaying just below the Content Element on the Taxi Demo. Follow this link for a live example.
Layout Styles
New Layouts styles were introduced to the Pagination Element. These allow for more suitable product pagination in the Avada WooCommerc Builder, but can also be useful in posts and portfolios and anbywhere else pagination is required.
Text
This is the traditional style of pagination, typically placed at the top and/or bottom of the post. You can place the Previous / Next links to the left, or the right, or distribute them on either aside of the column. Here, in the screenshots below, you can see the Pagination Element added below the product in a WooCommerce Product Layout.
Text With Preview
This is the same as the Text style of Pagination, but a preview of the next post/portfolio item/product etc. is shown upon rollover of the Previous or Next link. Both of these styles are displayed where you position them in the layout.
Sticky Preview
The Sticky Preview style of pagination displays a small sticky thumbnail at either edge of the screen in the middle of the viewport. You can determine the preview height and control how much of the sticky preview is displayed before hover, and when you hover, it displays fully. With this style, it doesn’t matter where the Element is placed in the Layout, as it always displays in the middle of the viewport.
Element Options
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.