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.