How to Add Arrow Icon to Pagination in Divi Blog Module

Improving the user experience is important in web design. A website that is easy to use must have a clear navigation system. Pagination elements for Divi blogs facilitate easy navigation between pages that display several blog entries.

The Divi Blog module has built-in pagination but does not have eye-pleasing indicators by default. As a result, users could sometimes miss the navigation options.

This article will walk you through how to add an arrow icon to the pagination in the Divi Blog module. Including the icons will give visitors a more noticeable visual indicator and enhance your blog’s user experience in general.

How to Add Arrow Icon to Pagination in Divi Blog Module

Alright, adding the arrow icon to pagination in the Divi Blog module is quite simple. All you have to do is add the CSS snippet to the Blog module. But before we begin, we want to make sure everything goes according to plan.

Turn on the Pagination Option

Go to the Divi Visual Builder. Afterward, you can insert the Blog module or edit the existing one.

After adding the Blog module, you can customize this module to your preference. Keep in mind that the pagination element is activated by default. In case you unintentionally turn it off, please make sure that option is selected (Content tab -> Elements).

Add the CSS Snippet

Once you’ve ensured that the pagination element is turned on, it’s time to add the CSS snippet to the Blog module. In the Divi Blog module settings, navigate to the Advanced tab -> Custom CSS.

Here is an example of a CSS snippet that you can apply to add the icon and replace the default indicator pagination (« Older Entries and Next Entries ») in the pagination element.

selector .alignleft a:before {
  font-family: ETModules;
  content: "\23";
  visibility: visible;
  background: #0571f5;
  border: 2px solid #ffffff;
  padding: 7px 20px;
  border-radius: 5px;
  margin-left: 17px;
}
selector .alignleft a {
  visibility: collapse;
}

selector .alignright a:after {
  font-family:ETModules;
  content: "\24";
  visibility: visible;
  background: #0571f5;
  border: 2px solid #ffffff;
  padding: 7px 20px;
  border-radius: 5px;
  margin-right: 17px;
}
selector .alignright a {
  visibility: collapse;
}

What Does the Code Do?

• Selectors:
  • .alignleft: This class targets the left of the pagination indicators.
  • .alignright: This class targets the right of pagination indicators.
• Left and right-aligned indicators (alignleft a and .alignright a):
  • visibility: collapse;: This hides the default text content of the pagination indicator.
• Left and right indicators content (.alignleft a:before and .alignright a:after):
  • font-family: ETModules;: It sets the font family for the icons to “ETModules”. ETMODULES is Divi’s built-in icon collection that uses specific Unicode characters to represent these icons. Read here to learn more about Divi’s built-in icon collection and how to insert Unicode into the CSS snippet.
  • content: "\23" or "\24";: These lines insert the characters at those Unicode code points. Character "\23" represents an arrow pointing left (←) and "\24" represents an arrow pointing right (→).

Overall, this CSS snippet creates styled buttons for pagination indicators using Divi’s built-in icon collection (ETMODULES) and hides the default text content. However, you can modify the CSS snippet above if you prefer to replace the default pagination indicator with a different text. Here is an example:

selector .alignleft a:before {
  content: "Previous Posts";
  visibility: visible;
  background: #0571f5;
  border: 2px solid #ffffff;
  padding: 7px 20px;
  border-radius: 5px;
  margin-left: 17px;
}
selector .alignleft a {
  visibility: collapse;
}

selector .alignright a:after {
  content: "Next Posts";
  visibility: visible;
  background: #0571f5;
  border: 2px solid #ffffff;
  padding: 7px 20px;
  border-radius: 5px;
  margin-right: 17px;
}
selector .alignright a {
  visibility: collapse;
}

The Bottom Line

This article shows how easily you can replace the pagination indicators in the Divi Blog module with an arrow icon or different text. Replacing the default pagination indicator with the arrow icons or your preferred text will allow you to create pagination indicators that streamline with the style of your Divi Blog module post type (posts, pages, media, or projects).

Last but not least, please don’t hesitate to play around with the property values in the CSS snippet to achieve the best appearance of your pagination element.