Beautiful Divi Post Navigation
Today I am going to show you how to customize the text and change the style of the Divi Post Navigation module. By default, Divi treats the links and…links, not buttons. So with a snippet of CSS we are going to make a major improvement to this module. I hope you learn something new today!
▶️ 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.”

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.

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.

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!

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

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!
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;
Please make sure you’re adding the font awesome CDN. You can add it in Theme options > Integrations > Head.
It seems you’re using a background image now. Do you want to keep it this way?
Thanks for your reply!
I already had the CDN added. It seems the content can’t be changed.
Here is an example: https://livingripples.au/profiles/experience/founder-innovator-and-advocate/