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

Last Updated on September 22, 2022 by 2 Comments

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

The Divi 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!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

2 Comments

  1. WHY? Why can’t we easily and responsively change the number of rows in either portfolio module? I’ve tried so many CSS options and none work properly (rows keep breaking).

  2. This is a wonderful capability … just like so many of the fabulous features you have piled on to Divi over the years. Sadly, however, all the bloat used to produce all these features has made it impossible for those of us who would like to work efficiently with a lean, clean Divi (iike we bought a lifetime license to use) to even perform the most basic task like SAVING OUR WORK.

    Every other month I’m banging on the door at ET support to get help with saving / updating a page. This is nonsense and I will ask again, could you PLEASE offer Divi Lite? A wireframe only GUI that is free from all the thousands of lines of code associated with the Visual Builder?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today