How to Add Pagination in Elementor

Updated: October 8, 2022

You can use Elementor to build nearly all types 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.

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.

Adding Pagination to Pages

One of the common questions regarding the pagination in Elementor is that is it possible to add pagination to pages? The answer is yes.

By default, the Posts widget of Elementor displays the blog posts on your website, but you can set it to display pages and even custom post types. Whichever the post type you display, you can set the pagination. To set the Posts widget to display pages, open the Query block under the Content tab. On the Source dropdown, select Pages.

Next, you can go to the Pagination block to set the pagination as we have covered above.

The Bottome Line

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. Learn more

12 thoughts on “How to Add Pagination in Elementor”

  1. Hi,
    I have a problem with this pagination.
    When I click on the numbers of pagination it doesn’t move to the next page but still on the same page. I tried to click on other numbers but nothing happens.

    • That’s a bug due to which a lot of people have moved to different page builder including myself. Pagination doesn’t work with elementor and they haven’t even bothered to fix it. Also if you choose load more option it populates duplicate posts.

  2. Is this still an issue? Shouldn’t there be someplace where it can be fixed. I.e. where it follows the standard way for pagination. On my site it shows it as
    When it should be
    So WordPress redirects to the main blog page. because it can’t find the page

  3. How can we remove a pagination number from the page title?

    if 2nd page has link : –> look at the page title, it will be yoursite Page 2
    How can I remove the ‘Page’ word or can add a custom title

    Note: – I’m using a licensed version of latest Elementor pro

    Thanks in advance

    • Hi Famokun. Pagination also works for pages. You can simply set the source to Pages. You can set the source on the Query block under the Content tab

  4. There is not a single mention in your entire article that this is a feature reserved only for Elementor Pro, I find this highly misleading and fraudulent to get more clicks.

    You should do the ethical thing and rename the title by adding the word “Pro”


Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.