How To Style And Customize The Divi Post Navigation Module Tutorial by Pee Aye Creative

How To Style And Customize The Divi Post Navigation Module

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

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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!

24

Last updated Aug 31, 2021 @ 11:16 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

8 Comments

  1. Josué

    Very good!! thxx <3

    Reply
  2. 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)

        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”

  3. 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)

      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

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Tutorials On YouTube

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

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart