Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Style And Customize The Divi Post Navigation Module

Nelson Miller Profile Orange
In this tutorial, I will show you how to style and customize the Divi Post Navigation module with CSS for navigating previous and next posts and pages.

▶️ Please watch the video above to get all the exciting details! 👆

Customize The Text Of The Divi Post Navigation Previous And Next Buttons

The first thing you may want to do is customize the text of the navigation links. In the video, I show how we said “Previous Demo” and “Next Demo,” but this all depends where you use it. If you have this in a Divi Theme Builder template for blog posts, you could leave it blank to show the previous and next blog post titles, or say something like “Previous Post” or just “Previous.”

customizing the text of the Divi post navigation module

Adjust The Divi Post Navigation Text Link Design Settings

The next step is to start adjusting some of the basic settings that are included in the Post Navigation module design tab under the Links Text toggle. It is very strange, but the way this is made in Divi they act as links rather than buttons. This is why you need this tutorial and snippet.

Divi Post Navigation module link text design settings

So go ahead and start with things like the font, font weight, text size, and line height. But don’t set the link text color in the Divi settings. I know this sounds weird, but we need to do this with CSS instead. The reason for this is because if you use the Links Text Color, it does not apply to the arrows. By using CSS, it also applies to the arrows. You can see what I mean in the video.

Change The Divi Post Navigation Text Links Into Buttons

Now that we have some basic design styles set, let’s continue by adding some CSS to style and customize the Divi post navigation links to look more like buttons. We are adding a background color, border, padding, rounded border, hover effect, and a transition speed.

Divi Post Navigation default previous and next links

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*style the Divi Post Navigation buttons*/

.et_pb_posts_nav .nav-previous a,
.et_pb_posts_nav .nav-next a {
	color: #ffffff;
	background: #0048ff;
	border: 2px solid #0048ff;
	padding: .7em 1.3em;
	border-radius: 50px;
	transition: all 0.3s ease-in-out;
}


/*style the Divi Post Navigation buttons on hover*/

.et_pb_posts_nav .nav-previous a:hover,
.et_pb_posts_nav .nav-next a:hover {
	color: #0048ff;
	background: transparent;
	border: 2px solid #0048ff;
	transition: all 0.3s ease-in-out;
}

Here’s how the links now look as buttons with the CSS added! Much better!

Divi Post Navigation style with CSS previous and next links

And here’s how it looks when you hover over one of the buttons.

previous and next links Divi Post Navigation style with CSS on hover

Obviously you can change the colors, padding, border, border radius, transition speed, etc! I hope this gets you started and that you enjoyed this tutorial!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

25 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Nicole Denton <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    I am trying to replace the arrow icons using this CSS. I just can’t get it to work. Do you have any suggestions? THANKS!

    .et_pb_posts_nav span.nav-next .meta-nav {
    content: “\f0a9” !important;
    font-family: FontAwesome !important;
    font-weight: 900 !important;

    Reply

Comments By Others

  1. Jane

    Thanks for the great workaround! Wondering if, along with this css, it would be possible to center the NEXT button at the bottom of the first post. I have my nav working just like your example, but on the first page, the NEXT button is slightly off to the right (because there is no PREVIOUS button yet). It’s totally not the end of the world, but looks a little goofy just on the first and last pages where the second buttons don’t exist. Thanks in advance!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Jane,
      I’m glad you like our tutorial! As for your question, I don’t know of any way you could target just that first page, sorry. It’s probably fine if it is off center, visitors will understand how blog pagination works.

      Reply
  2. Jurrie Eilers

    Dear Nelson,

    I love your tutorials and snippets. Google sends me directly to you! Now I have this problem: on mobile, the navigation sends me to some random place of the target page, not to the top. Is there a way to add #top to all the links?

    Have a great day!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Jurrie,
      I’m so glad to hear that you are finding our tutorials! You can always try the search bar on our blog as a starting point too 🙂 As for your question, I didn’t quite understand. I believe you may be asking about anchor links. If the link is not going to the anchor, then I am not sure why that would be happening. I am also not clear on your question about adding the anchor link #top on all links.

      Reply
  3. Michaux Pierre

    Hi!
    Is there a way on top of the next/previous buttons to add the name of the post dynamically?
    Thank you,
    Pierre

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Michaux!

      The post name are added with the Next and previous links automatically. Please make sure you’re using the latest version of the theme.

      Reply
  4. Shana Liberman

    I would like to change the arrow and have no next for buttons.

    Reply
  5. Vince

    How do you change the arrow icons itself? I want to use one of the built in arrow icons.

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hey Vince,

      Could you please elaborate the issue a little more and share the URL of the exact page where the module is present?

      Reply
  6. Sophie

    Hi!
    Thanks for this guide 🙂 I would like to remove any text (instead of %title for instance, I would like to make this part blank, I just would like to display the arrows, no text). Do you have any idea of how to do it? Thanks!

    Reply
    • Tobias Heger <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Sophie,

      a bit messy, but it should work…

      Divi Post Navigation Module > Content > type in a blank space to the Previous Link and/or Next Link
      Divi Post Navigation Module > Advanced Tab > Custom CSS > Previous Link Arrow and/or > Next Link Arrow display:none;

      Custom CSS:
      span.nav-previous a:before {
      content: “\3c”;
      font-family: “ETMODULES”;
      font-size:14px;
      }
      span.nav-next a:after {
      content: “\3d”;
      font-family: “ETMODULES”;
      font-size:14px;
      }

      It works also with Fontawesome:
      span.nav-next a:after {
      content: “\f152”;
      font-family: “Font Awesome 6 free”;
      }

      Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hey Sophie,

      Could you please share the URL of the page in order for me to investigate it further?

      Reply
  7. Martin

    Hey,

    What about if I changed the color in the display settings before I used this CSS. Now it seem like it doesn’t matter how much I try to change the CSS color of the text. It doesn’t change besides if I change in the settings.. wierd huh?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      I’m not sure what you mean. But it sounds like you are asking why the settings and the CSS conflict? That would be perfectly normal and expected, you should use one or the other for any of the components.

      Reply
  8. Gurbir Singh

    How can we show all/few posts by a particular Author? I want to create a page where I will list all my authors and their posts.

    Reply
      • Gurbir

        In the builder, I couldn’t find it. Can you please share any of your blog’s URL?

      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

        Divi has this option in the Theme Builder (not the builder). So go to Divi>Theme Builder. From there check for a template such as “All Author Pages” and add the blog module to the template and turn on the toggle in the Blog module for “Posts For Current Page”

  9. Josué

    Very good!! thxx <3

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Shopping cart0
There are no products in the cart!
You may be interested in…
$19.00$22.50

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$19.00$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$20.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

Graphic showcasing Divi Assistant features and toolset.
From: $69.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Divi Search Helper Plugin By Pee Aye Creative
From: $29.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Continue shopping
0