The Post Navigation widget for Elementor allows you to add seamless next and previous post navigation, helping visitors explore your content effortlessly. With customizable styles, icons, and layouts, you can match the navigation to your site’s design while improving engagement and readability.
Let’s look at each of the options in the Post Navigation widget for Elementor below.
How to Use the Post Navigation Widget for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Post Navigation”
- Hover over the widget in the search results and click install
The Post Navigation widget is designed to work only inside a single post or product template in Elementor. It allows users to navigate between posts or products using previous and next buttons.
Step 1: Create or Edit a Single Post Template
- In WordPress, go to Templates > Theme Builder in Elementor.
- Click Add New and choose Single Post (for blog posts) or Single Product (for WooCommerce products).
- If you already have a template, open it for editing.
Step 2: Add the Post Navigation Widget
- Inside the Elementor editor, search for Post Navigation in the widget panel.
- Drag and drop the widget into the template where you want the navigation buttons to appear.
- Customize the design and layout using the widget settings.
Step 3: Publish the Template
- Click Publish and set the conditions for the template (e.g., apply to all blog posts or products).
- Click Save & Close to activate the template
General Settings
Prev Icon
Set the icon for the previous button.
Next Icon
Set the icon for the next button.
Show Labels
Enable to display text labels alongside navigation icons.
Prev Label
Set the text for the previous button.
Next Label
Set the text for the next button.
Show Post Titles
Enable to display post titles instead of labels.
Button Gap
Adjust the spacing between navigation buttons.
Alignment
Set the alignment of navigation elements.
- Inherit – Uses the default alignment from the parent element or global settings.
- Start – Aligns content to the start of the container.
- End – Aligns content to the end of the container.
- Center – Aligns content in the middle of the container.
- Space Between – Distributes content evenly, placing the first item at the start and the last item at the end, with equal space between elements.
Post Navigation Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
Button Styling
Set the button typography, background, color, padding, border, shadow and radius.
Button Hover Styling
You can set the button background, and color on hover.
Post Navigation Design Example For Elementor
Here are some live use case for the Post Navigation Widget.
We hope this guide helped you explore the powerful features of the Post Navigation Widget. With its easy-to-use previous and next buttons, you can enhance user engagement and make content discovery effortless. If you have any questions or need further assistance, feel free to reach out.
