Pagination Element


As part of Avada Layouts, available in Avada 7.0 and up, 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.

In Avada 7.2, new 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 facilitatesthe 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.

Example of the Pagination Element
Avada Website Builder

868,152 Businesses Trust Avada

Avada Website Builder

868,152 Businesses Trust Avada

Avada Website Builder

868,152 Businesses Trust Avada

Layout Styles

With Avada 7.2, 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.


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.

Pagination Style - Text

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.

Pagination Style - Text With Preview

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.

Pagination Style - Sticky Preview

Element Options

Location: The edit screen within each Element.

Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab

  • Layout – Choose the layout of the pagination element. Select from Text, Text With Preview, or Sticky Preview.

  • Preview Position – Only available with Text With Preview selection in Layout Option. Make a selection for preview position. Choose from Bottom, or Top.

  • Same Taxonomy Term – Whether next/previous link should be in a same taxonomy term or not. Choose from Yes, or No.
  • Taxonomy – Only available when Same Taxonomy Term is set to Yes. Select taxonomy to get next/previous link from. Choose from Post Categories, Post Tags, Post Formats, Product Categories, Product Tags, Portfolio Categories, Portfolio Skills, Portfolio Tags, and FAQ Categories.

  • Swap Post Order – Select from Yes, or No. This determines whether or not next/previous buttons should invert the logic of the post order.

  • Margin – In pixels or percentage, ex: 10px or 10%.

  • Element Visibility – Allows you to control the Element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the Element.

  • CSS ID – Allows you to add an ID for the Element.

Design Tab

  • Height – Controls the pagination section height. In pixels.

  • Text Alignment – Make a selection for pagination text alignment. Choose from Distributed, Left, or Right.

  • Text Font Size – Controls the font size for the pagination text. Enter value including CSS unit (px, em, rem), ex: 10px. Leave empty for default value.

  • Text Color – Controls the text color of the pagination section text. Leave empty for default value.

  • Text Hover Color – Controls the text hover color of the pagination section text. Leave empty for default value.

  • Separator Border Size – Controls the border size of the separators. In pixels.

  • Separator Border Color – Controls the border color of the separators. Leave empty for default value.

  • Z Index – Value for preview section’s z-index CSS property, can be both positive or negative.
  • Preview Height – Controls the preview section height. In pixels.

  • Preview Width – Controls the preview section width. In pixels.

  • Preview Visible Area Width – Controls the preview section width that is displayed before hover. In percentage.

  • Preview Background Color – Controls the background color of the pagination section.

  • Preview Text Color – Controls the text color of the preview section text.

  • Preview Text Font Size – Controls the font size for the preview text. Enter value including CSS unit (px, em, rem), ex: 10px

  • Box Shadow – Set to “Yes” to enable box shadows.

  • Box Shadow Position – Set 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 Radius – Set the blur radius of the box shadow. In pixels.

  • Box Shadow Spread Radius – Set 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 Color – Controls the color of the box shadow.

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

Global Options

Layout Elements do not have any Global Options.

Avada Website Builder

868,152 Businesses Trust Avada

Avada Website Builder

868,152 Businesses Trust Avada

Avada Website Builder

868,152 Businesses Trust Avada