How to Add Pagination in Elementor

You can use Elementor to build nearly all sorts of websites. Including dynamic websites like online magazines or blogs. For sites like online magazines or blogs, one of the crucial enough elements is navigation.

Navigation allows you to split the content of your website into several pages. Say you have hundreds of articles that you want to display on the homepage. With navigation, you can split those articles into several pages. You can, for instance, display only 10 articles per page. To view other articles, you can use navigation.

The discussion about navigation might is broader than we mentioned above. But we want to focus on this context

Elementor allows you to add navigation to your website. You can find the navigation setting when working with the Posts widget and the Archive Posts widget. In this post, we will show you how to add navigation when working with those widgets.

Note: The Posts and Archive Posts widget are only available on Elementor Pro.

How to add navigation in Elementor with Posts and Archive Posts widgets

To get started, you can create a new page/post and edit it with Elementor. Or, you can also edit an existing page.

On the Elementor editor, add the Posts widget by dragging it from the left panel to the canvas area.

Once the widget is added, go to the left panel and open the Pagination option. Select the pagination type from the dropdown menu. In this example, we use Numbers.

By default, your pagination has the page limit of 5. You can change this option according to the number of articles you have. There is a crucial thing you need to note here. The page limit is the maximum number of the page your visitor can go to. If you have articles in a large number (say more than 100), you need to set the page limit to a higher number in order to allow your visitors to see the articles per page in the navigation. If you set the page limit to 5 — while you set posts per page to 10 — your visitor will only be able to see the last 50 posts of your website. WordPress (or Elementor more precisely) will hide older posts other than the last 50 posted.

In order to make your navigation keep short and neat, you can enable the Shorten option.

Customizing the navigation

To customize your navigation, you can open the Pagination option under the Style tab on the left panel.

You can set the font style, font size, and the font family in the Typography section. Click the pencil icon to open the typography setting.

To set the color of the navigation, you can click the color selector on the Colors section. There are 3 colors you can set: normal, hover, and active (the active page). You can set the space between numbers of the navigation on the Space Between section.

Once you are done, you can click the PUBLISH button to publish your page. Or, if you are editing a page, you can click the UPDATE button to apply the new changes.

Final words

Navigation is a crucial enough element on dynamic websites like online magazines or blogs. In Elementor, you can use the Posts widgets to display the articles on your website. You can also use the Archive Posts widget to display the archives on your website. Those widgets have a pagination setting option, allowing you to add navigation on any part of your website where you use them.

This page may contain affiliate links, which help support WP Pagebuilders.

Subscribe to our newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This