How We’ll Customize Divi’s Filterable Portfolio Module
Posted: Sun Dec 22, 2024 6:44 am
Filter text
Hover thumbnail
Pagination
This is not a complete list, and we haven’t even started to discuss how CSS can add a deeper level of customization to this module!
As mentioned before, for this tutorial we will use two layouts:Divi Conference et Divi Online Yoga Instructor . Below you can find an overview of what we will accomplish in this tutorial.
Divi Conference layout elements arrangement
Customizing Divi’s Filterable Portfolio Grid Elements
Divi Online Yoga Instructor layout elements
Customizing Divi’s Filterable Portfolio Grid Elements
You can easily download both layouts from the Divi builder.
Now let’s get started!
See also: Divi: Choose between telephone number identifier philippines grid and full-width layouts for the Filterable Portfolio module
Divi Filterable Portfolio Customizer: “Divi Conference Board”
First, we need to install the event page template from the Divi Conference Layout Pack After creating a new page in WordPress and activating the Divi Builder, we will enter the Divi library.
Enter the Divi Layout Library
Click on the « Load from Library » icon to enter the Divi Layout Library
Find layouts in the Divi Layout Library
Using the search function in the Divi Layout Library, search for the layout “ Conference Event Page ”.
Installation Layout
After selecting a layout, click Use this layout to install the layout to your page.
Removing and replacing image modules
We will remove the Image Module shown below to make room for the filterable Portfolio Module we will customize. Click “ Remove ” while hovering over an image to remove the photo.
Insert Divi's filterable portfolio module
With the Image Module removed, we can now make room for the filterable portfolio module. We’re going to click on the “ Add Module ” icon (the grey plus sign) and then select the module in the Modules modal that appears.
Set the number of posts and portfolio layout
By default, this module will showcase your work in a single column. However, we will use the default grid layout with 4 columns.
Therefore, we recommend choosing a multiple of 4 (4, 8, 12, 16, etc.) as the number of posts for your portfolio.
For this tutorial, we will use 12 items in the grid.
Start customizing Divi's filterable groups: Title and Meta Text
Now that our project is displayed in a grid, let’s link up some design elements from our chosen template. In this case, we’ll be using the styles provided by the Divi Conference Layout Pack in our new module.
Text Style
Text alignment: Center
Text color: Dark
Title text style
Title Heading level: H2
Title font: Krona One
Text color: #000000
Meta text styles
Meta font: Default (Open Sans)
Meta text color: #ff6651
Web hosting hebergement web
Now that we’ve styled the headers in our portfolio grid, let’s make some changes to the actual shapes of the project thumbnails themselves.
Change project thumbnail borders and corner radius
In our Divi Conference Layout pack, we use a unique combination of rounded corners to give unique shapes to some of the keyframes in the pack. Let’s apply this style to the thumbnail of our module.
picture
picture:
Corner rounding: 50px 50px 50px 0px
Border Style: All
Border width: 3px
Color: #000000
Border style: Solid
Hover thumbnail
Pagination
This is not a complete list, and we haven’t even started to discuss how CSS can add a deeper level of customization to this module!
As mentioned before, for this tutorial we will use two layouts:Divi Conference et Divi Online Yoga Instructor . Below you can find an overview of what we will accomplish in this tutorial.
Divi Conference layout elements arrangement
Customizing Divi’s Filterable Portfolio Grid Elements
Divi Online Yoga Instructor layout elements
Customizing Divi’s Filterable Portfolio Grid Elements
You can easily download both layouts from the Divi builder.
Now let’s get started!
See also: Divi: Choose between telephone number identifier philippines grid and full-width layouts for the Filterable Portfolio module
Divi Filterable Portfolio Customizer: “Divi Conference Board”
First, we need to install the event page template from the Divi Conference Layout Pack After creating a new page in WordPress and activating the Divi Builder, we will enter the Divi library.
Enter the Divi Layout Library
Click on the « Load from Library » icon to enter the Divi Layout Library
Find layouts in the Divi Layout Library
Using the search function in the Divi Layout Library, search for the layout “ Conference Event Page ”.
Installation Layout
After selecting a layout, click Use this layout to install the layout to your page.
Removing and replacing image modules
We will remove the Image Module shown below to make room for the filterable Portfolio Module we will customize. Click “ Remove ” while hovering over an image to remove the photo.
Insert Divi's filterable portfolio module
With the Image Module removed, we can now make room for the filterable portfolio module. We’re going to click on the “ Add Module ” icon (the grey plus sign) and then select the module in the Modules modal that appears.
Set the number of posts and portfolio layout
By default, this module will showcase your work in a single column. However, we will use the default grid layout with 4 columns.
Therefore, we recommend choosing a multiple of 4 (4, 8, 12, 16, etc.) as the number of posts for your portfolio.
For this tutorial, we will use 12 items in the grid.
Start customizing Divi's filterable groups: Title and Meta Text
Now that our project is displayed in a grid, let’s link up some design elements from our chosen template. In this case, we’ll be using the styles provided by the Divi Conference Layout Pack in our new module.
Text Style
Text alignment: Center
Text color: Dark
Title text style
Title Heading level: H2
Title font: Krona One
Text color: #000000
Meta text styles
Meta font: Default (Open Sans)
Meta text color: #ff6651
Web hosting hebergement web
Now that we’ve styled the headers in our portfolio grid, let’s make some changes to the actual shapes of the project thumbnails themselves.
Change project thumbnail borders and corner radius
In our Divi Conference Layout pack, we use a unique combination of rounded corners to give unique shapes to some of the keyframes in the pack. Let’s apply this style to the thumbnail of our module.
picture
picture:
Corner rounding: 50px 50px 50px 0px
Border Style: All
Border width: 3px
Color: #000000
Border style: Solid