Pagination 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.
Elementor allows you to add pagination to your website. You can find the pagination setting when working with the Posts widget and the Archive Posts widget.
In this post, we will show you how to add pagination when working with those widgets.
How to Add Pagination 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. By the way, the Posts widget is only available Elementor Pro.
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 pagination.
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 pagination keep short and neat, you can enable the Shorten option.
Customizing the Pagination
To customize your pagination, 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 pagination, 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 pagination 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.
You can further style the pagination via custom CSS.
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
Pagination 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 pagination on any part of your website where you use them.
10 thoughts on “How to Add Pagination in Elementor”
is it available only on elementor pro version?
Hi Shahbaj,
Yes, it is. Pagination is available on the Posts widget and the Archive Posts widget. You can read the tutorial here https://www.wppagebuilders.com/add-pagination-in-elementor/
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.
Thanks.
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.
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
mysite.com/blog/2/
When it should be mysite.com/blog/page/2/
So WordPress redirects to the main blog page. mysite.com/blog/ because it can’t find the page mysite.com/blog/2/
Me too. Still…
How can we remove a pagination number from the page title?
if 2nd page has link : https://yoursite.com/2/ –> 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
This is pagination for posts. Is there an option for pages?
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
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”