Pagination Element

Last Update: September 2, 2025

The Avada Pagination Element offers navigation controls that enable users to navigate between multiple pages of content, such as blog posts, portfolios, or product listings. The Element displays numbered links, next and previous buttons, or a “load more” functionality, depending on your chosen style.

Watch the video below for a visual overview of the Element, view the Avada Pagination Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Pagination Element

The Avada 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 can be placed twice in the layout to facilitate a content layout that features pagination both above and below the content, improving usability and reader engagement.

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 your Layout Section. Still, in most cases, you will want to put the Element at the very top, and/or the very bottom of the Avada Content Element.

There is a range of options for the Element about how it displays. Refer to the options panels below for specific details. This Element does not include the Load More or Infinite Scroll options, as these are found in the Blog and Portfolio Elements, and it 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 Avada Taxi website’s single post.

Example of the Pagination Element

Layout Styles

The Pagination Element includes three layout styles: “Text”, “Text With Preview”, and “Sticky Preview” which allow for more suitable product pagination in the Avada WooCommerce Builder, and is also be helpful in posts and portfolios and anywhere 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 set the Previous/Next links to the left, or the right, or distribute them on either side of the Column. In the screenshot below, you can see the Pagination Element added below the product in a WooCommerce Product Layout.

Pagination Style - Text

Text With Preview

This is the same as the Text style pagination layout style, but a preview of the following post/portfolio item/product, etc. is shown upon rollover of the Previous or Next link. Both of these styles are displayed in the position you place them in the layout.

Pagination Style - Text With Preview

Sticky Preview

The Sticky Preview style of pagination displays a small, sticky thumbnail at either edge of the screen, positioned 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 shows fully.

Pagination Style - Sticky Preview

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.

General

HeadingDescription
LayoutChoose the layout of the pagination element.
Preview PositionMake a selection for preview position.
Same Taxonomy TermWhether next/previous link should be in a same taxonomy term or not.
TaxonomySelect taxonomy to get next/previous link from.
Swap Post OrderWhether or not next/previous buttons should invert the post order logic.
MarginIn pixels or percentage, ex: 10px or 10%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
HeightControls the pagination section height. In pixels.
Text AlignmentMake a selection for pagination text alignment.
Text Font SizeControls the font size for the pagination text. Enter value including CSS unit (px, em, rem), ex: 10px
Text ColorControls the text color of the pagination section text.
Separator Border SizeControls the border size of the separators. In pixels.
Separator Border ColorControls the border color of the separators.
Z IndexValue for preview section's z-index CSS property, can be both positive or negative.
Preview HeightControls the preview section height. In pixels.
Preview WidthControls the preview section width. In pixels.
Preview Visible Area WidthControls the preview section width that is displayed before hover. In pixels.
Preview Background ColorControls the background color of the pagination section.
Preview Text ColorControls the text color of the preview section text.
Preview Text Font SizeControls the font size for the preview text. Enter value including CSS unit (px, em, rem), ex: 10px
Box ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow ColorControls the color of the box shadow.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.