help center

Search
Close this search box.
On this page

Post Navigation widget

Last Update: March 27, 2024
Important
This widget is a REQUIRED element on the Single Post Template. If this widget is not added to the Single Post Template, the Elementor editor will not load. For more information, see Create a single post template.

Add the widget

Post Navigation widget
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Post Navigation widget?

The Post Navigation widget is a Theme Element. It is one of the available Single Post Template widgets used to dynamically display links to the previous and next posts on a website, typically at the end of each blog post.

This allows site visitors to navigate to the previous or next post without returning to the main blog page.

Common use case

Sophie is revamping a website to improve user experience and increase engagement. They update the single post template to include a sleek design with visually appealing elements. As part of this redesign, Sophie integrates the Post Navigation widget at the bottom of each post.

When visitors read one of the site’s blogs, they’ll find the navigation links below the post. With just a click, readers can easily navigate to the previous or next blog without returning to the main/archive blog page.

Post Navigation widget 6

Additional use cases

  • Recipe blogs allow readers to navigate between different recipe posts seamlessly.
  • Enhance user experience on photography portfolio websites by implementing navigation links to browse photo galleries easily.

Add a Post Navigation widget: Step-by-step

  1. Add the Post Navigation widget to the canvas. For details, see Add elements to a page.
    Important
    This widget is a REQUIRED element on the Single Post Template. If this widget is not added to the Single Post Template, the Elementor editor will not load. For more information, see Create a single post template.
  2. In the Content tab, Under the Post Navigation section, use the Label toggle to show or hide the previous/next labels.
    Post Navigation widget 5
  3. In the Previous Label field, specify the text for the label representing the previous post. You can enter custom text or use Dynamic Tags to generate the label dynamically.
    Post Navigation widget 9
  4. In the Next Label field, set the text for the label representing the next post. You can enter custom text or use Dynamic Tags to generate the label dynamically.
    Post Navigation widget 8
  5. Use the Arrows toggle to show or hide the navigation arrows.
    Post Navigation widget 1
  6. In the Arrows Type field, from drop-down options, choose an icon to represent the navigation arrows.
    Post Navigation widget 10
  7. Use the Post Title toggle to show or hide the title of the previous or next post.
    Post Navigation widget 7
  8. Use the Borders toggle to show or hide borders around the widget.
    Post Navigation widget 4
  9. In same Term field, determine whether the next post must belong to the same taxonomy term as the current post; this lets you set a taxonomy per each post type.
    Post Navigation widget 3

Settings for the Post Navigation widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Post Navigation widget 13

Show or Hide the Previous/Next labels.

Enter the text or use a Dynamic Tag for the Previous label in the field.

Enter the text or use a Dynamic Tag for the Next label.

Show or Hide the navigation arrows.

Select an icon to represent the navigation arrows.

Show or Hide the title of the previous or next post.

Show or hide borders around the widget.

Indicates whether the next post must be within the same taxonomy term as the current post, this lets you set a taxonomy per each post type.

Style tab

Post Navigation widget 12 Post Navigation widget 12

Choose the color of the labels for Normal and Hover states.

In the Hover state, you can set Transition Duration. This is the length of time it takes for the label to change its appearance.

Set the label’s typography options. Learn more about Typography.

Post Navigation widget 14

Choose the color of the labels for Normal and Hover states.

In the Hover state, you can set Transition Duration. This is the length of time it takes for the label to change its appearance.

Set the title’ typography options. Learn more about Typography.

Post Navigation widget 2 Post Navigation widget 15

Determine the color of the navigation arrows for Normal and Hover states.

In the Hover state, you can set Transition Duration. This is the length of time it takes for the label to change its appearance.

Set the size of the navigation arrows for better visibility.

Adjust the spacing between the arrows and the accompanying text.

Post Navigation widget 15 Post Navigation widget 17

Choose the color of the borders around the widget.

Set the thickness or size of the borders.

Define the spacing between the borders and the text for a balanced appearance.

Advanced tab

The Advanced tab provides options to control widget position, adjust spacing, add custom code, and more.

Post Navigation widget 11

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article