(202) 750-1910
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
  • Facebook
  • X
  • Instagram
  • TikTok
  • Yelp
  • Google
  • Pinterest
  • WhatsApp
  • Threads
0 Items
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Partners
    • Systems Status
  • Services
    • Website Design
    • Managed Hosting
    • Accessibility Compliance
    • Content Builder
    • Multi-Language Websites
    • SEO
    • Social Media
    • Premier Property Promotion
    • Reputation & Review Management Services
    • Low Code/No Code Solutions for MVP Development
    • Citation Builder
    • Pricing
    • Get A Quote
  • Portfolio
  • Website Audit
  • Blog
  • Invest Local
  • Contact
Select Page

How to Style the Pagination in Divi’s Filterable Portfolio Module

Divi’s filterable portfolio module is a great and easy way to display your work and projects on your website. You can use categories to create different filters for your portfolio module, and it offers an easy way to keep an updated portfolio without having to modify your website design every time. Simply add a new project in the WordPress dashboard, then it will auto-populate in the portfolio module on your website as long as it is properly categorized.

In this tutorial, we will show you 3 different ways to style the pagination in Divi’s filterable portfolio module. By customizing this design, you can make the portfolio module fit with the overall design of your website and draw attention to the work you want to display.

Let’s get started!

Sneak Peek

Here is a preview of what we will design

Pagination Style One

Divi Filterable Portfolio Pagination Final Design 1

Divi Filterable Portfolio Pagination Final Design 1 Mobile

Pagination Style Two

Divi Filterable Portfolio Pagination Final Design 2

Divi Filterable Portfolio Pagination Final Design 2 Mobile

Pagination Style Three

Divi Filterable Portfolio Pagination Final Design 3

Divi Filterable Portfolio Pagination Final Design 3 Mobile

What You Need to Get Started

Install and Activate Divi

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

Add Portfolio Projects

In order for the portfolio to populate with projects once we add it to our page, we first need to add the projects in the WordPress dashboard. Select Projects in the WordPress dashboard sidebar, then add a new project. Make sure the project has a featured image and a category so that it can be filtered.

Divi Filterable Portfolio Pagination New Project

Now, you are ready to start!

How to Style the Pagination in Divi’s Filterable Portfolio Module

Create a New Page with a Premade Layout

Let’s start by using a premade layout from the Divi library. We will use the Painter Portfolio Page from the Painter layout pack for this design.

Add a new page to your website, give it a title, and select the option to Use Divi Builder.

Divi Filterable Portfolio Pagination Use Builder

We will use a premade layout from the Divi library for this example, so select Browse Layouts.

Divi Filterable Portfolio Pagination Browse Layouts

Search for and select the Painter Portfolio Page layout.

Divi Filterable Portfolio Pagination Search

Select Use This Layout to add the layout to your page.

Divi Filterable Portfolio Pagination Use Layout

Now we are ready to build our design.

Add the Filterable Portfolio Module

We will be replacing the existing portfolio content on this page with the filterable portfolio module. First, delete the existing portfolio section.

Divi Filterable Portfolio Pagination Delete Section

Next, insert a new section on the page, below the “recent work” section.

Divi Filterable Portfolio Pagination Insert Section

Then add a row with a single column to the section.

Divi Filterable Portfolio Pagination Row Layout

Add the filterable portfolio module to the new row.

Divi Filterable Portfolio Pagination Insert Module

Your filterable portfolio should populate with your projects, as long as they have been added to the project section of the WordPress dashboard.

Filterable Portfolio Settings

Now let’s customize the design of the filterable portfolio. Open the module settings, then change the post count to 6.

  • Post Count: 6

Divi Filterable Portfolio Pagination Post Count

Under elements, disable Show Categories.

  • Show Categories: No

Divi Filterable Portfolio Pagination Show Categories

Move over to the Design tab and open the Layout settings. Set the layout to Grid.

  • Layout: Grid

Divi Filterable Portfolio Pagination Layout

Next, open the overlay settings. Set the Zoom Icon Color, Hover Overlay Color, and Hover Icon Picker as follows:

  • Zoom Icon Color: #fdd23a
  • Hover Overlay Color: rgba(61,61,61,0.28)
  • Hover Icon Picker: Plus Icon

Divi Filterable Portfolio Pagination Overlay

Open the image settings, then add an image box shadow.

Divi Filterable Portfolio Pagination Box Shadow

Then, set the shadow color.

  • Shadow Color: #f2f2f2

Divi Filterable Portfolio Pagination Shadow Color

Next, change the title font settings as follows:

  • Title Font: Merriweather
  • Title Font Weight: Bold
  • Title Text Color#000000

Divi Filterable Portfolio Pagination Title Font

Set the title text size and line height.

  • Title Text Size: 25px
  • Title Line Height: 2em

Divi Filterable Portfolio Pagination Title Text

Move to the Filter Criteria Text section and change the font settings as follows:

  • Filter Criteria Font: Montserrat
  • Filter Criteria Font Weight: Bold
  • Filter Criteria Text Color: #000000

Divi Filterable Portfolio Pagination Filter Criteria Text

Now that most of our module design is complete, we can move on to customize the pagination styles.

Pagination Style One

For the first pagination style, we will set a different font color for the active page. Additionally, we will set the pagination text size to increase on hover. Let’s get started.

Within the filterable portfolio settings, open the pagination text settings. Customize the font as follows:

  • Pagination Font: Montserrat
  • Pagination Font Weight: Bold
  • Pagination Text Alignment: Right
  • Pagination Text Color: #000000

Divi Filterable Portfolio Pagination Style 1 Text

Set the text size. Then. use the hover settings to increase the text size on hover.

  • Pagination Text Size: 17px
  • Pagination Text Size on Hover: 21px

Divi Filterable Portfolio Pagination Style 1 Text Size

Finally, navigate to the Advanced tab and add the following custom CSS to the Pagination Active Page CSS section. This enables the yellow color on the active page.

color: #FDD23A !important;

Divi Filterable Portfolio Pagination Style 1 CSS

Final Design

And here is the final look for our first design.

Divi Filterable Portfolio Pagination Final Design 1

Divi Filterable Portfolio Pagination Final Design 1 Mobile

Pagination Style Two

The second pagination style we will design includes a background color behind the pagination, some hover color effects, and a different color for the active page.

Within the filterable portfolio settings, open the pagination text settings. Customize the font as follows:

  • Pagination Font: Merriweather
  • Pagination Font Weight: Bold
  • Pagination Text Alignment: Center
  • Pagination Text Color: #9e9e9e
  • Pagination Text Color on Hover: #000000

Divi Filterable Portfolio Pagination Style 2 Text

Next, set the text size and line height.

  • Pagination Text Size: 26px
  • Pagination Line Height: 2em

Divi Filterable Portfolio Pagination Style 2 Text Size

Move to the Advanced tab and add the following custom CSS to the Portfolio Pagination CSS section. This will add a background color and remove the border:

background:#f2f2f2;
border:none;

Divi Filterable Portfolio Pagination Style 2 CSS

Finally, add the following CSS to the Pagination Active Page CSS section to set a different text color for the active page.

color: #000000 !important;

Divi Filterable Portfolio Pagination Style 2 CSS Active

Final Design

Here is the final design for our second pagination style.

Divi Filterable Portfolio Pagination Final Design 2

Divi Filterable Portfolio Pagination Final Design 2 Mobile

Pagination Style Three

For our final pagination design, we will add a yellow circle behind the active page. We will also set a different font color for the active page and on hover.

Within the filterable portfolio settings, open the pagination text settings. Then customize the font as follows:

  • Pagination Font: Merriweather
  • Pagination Font Weight: Bold
  • Pagination Text Alignment: Center
  • Pagination Text Color: #000000
  • Pagination Text Color on Hover: #FDD23A
  • Pagination Text Size: 26px

Divi Filterable Portfolio Pagination Style 3 Text

Move to the Advanced tab and add the following custom CSS to the Portfolio Pagination CSS section to remove the border:

border:none;

Divi Filterable Portfolio Pagination Style 3 CSS

Finally, add the following CSS to the Pagination Active Page CSS section. This CSS will set a different text color and a circular background for the active page.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

Divi Filterable Portfolio Pagination Style 3 CSS Active

Final Design

Here is the final design for our last layout.

Divi Filterable Portfolio Pagination Final Design 3

Divi Filterable Portfolio Pagination Final Design 3 Mobile

Final Result

Now let’s take a look at all three final designs with our different pagination styles.

Pagination Style One

Divi Filterable Portfolio Pagination Final Design 1

Divi Filterable Portfolio Pagination Final Design 1 Mobile

Pagination Style Two

Divi Filterable Portfolio Pagination Final Design 2

Divi Filterable Portfolio Pagination Final Design 2 Mobile

Pagination Style Three

Divi Filterable Portfolio Pagination Final Design 3

Divi Filterable Portfolio Pagination Final Design 3 Mobile

Final Thoughts

The filterable portfolio module is easy to customize to fit with your website design, and you can quickly add new projects from the WordPress dashboard to keep your portfolio up-to-date. This module is great for designers, artists, photographers, and other creatives to show off their work with beautiful images and easy navigation. For more unique portfolio design ideas, check out this tutorial on creating a dynamic portfolio project template. Have you used the filterable portfolio module on your website? Let us know in the comments!

The post How to Style the Pagination in Divi’s Filterable Portfolio Module appeared first on Elegant Themes Blog.

Recent Posts

  • 7 Website Mistakes That Hurt Your Business

    7 Website Mistakes That Hurt Your Business

  • How AI Helps Us Help You

    How AI Helps Us Help You

  • Future-Proof Your WordPress Site in 2025

    Future-Proof Your WordPress Site in 2025

  • Why You Need Managed WordPress Hosting from Ask the Egghead

    Why You Need Managed WordPress Hosting from Ask the Egghead

  • Your Website Is More Than Just Curb Appeal

    Your Website Is More Than Just Curb Appeal

  • Top Website Mistakes That Hurt Your Business

    Top Website Mistakes That Hurt Your Business

  • Plugin of the Week: WPForms Made Simple

    Plugin of the Week: WPForms Made Simple

  • SEO Simplified: Boost Your Website Without Tech Skills

    SEO Simplified: Boost Your Website Without Tech Skills

  • Find Your Perfect Website Style

    Find Your Perfect Website Style

  • SEO Promises That Should Scare You

    SEO Promises That Should Scare You

Awards

  • Clutch Top Web Design Company Medical Websites 2024

    Clutch Top Web Design Company Medical Websites 2024

  • Clutch Top Web Design Company Government Websites 2024

    Clutch Top Web Design Company Government Websites 2024

  • UpCity National Excellence Winner 2024

    UpCity National Excellence Winner 2024

  • UpCity National Excellence Winner 2023

    UpCity National Excellence Winner 2023

  • UpCity National Excellence Winner 2022

    UpCity National Excellence Winner 2022

  • UpCity Local Excellence Washington DC 2021

    UpCity Local Excellence Washington DC 2021

  • UpCity Top Designer 2021

    UpCity Top Designer 2021

  • DesignRush Accredited Agency 2021

    DesignRush Accredited Agency 2021

  • Clutch Top Company Washington DC 2021

    Clutch Top Company Washington DC 2021

  • Digital.com Best SEO Firms Washington DC 2021

    Digital.com Best SEO Firms Washington DC 2021

Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

200 Massachusetts Ave NW
8th Floor Suite 133
Washington, DC 20001
(202) 750-1910

Ask the Egghead

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

Quick Links

  • Website Design
  • Social Media
  • SEO
  • Managed Hosting
  • Privacy Policy
  • Investors
  • Facebook
  • X
  • Instagram
Designed by The Egghead © 2015-2025 Ask the Egghead, Inc.