Here is an example grid configuration for the module with some example projects:
Areas to Consider When Creating a Divi Filterable Portfolio
Like all modules of Divi , the Filterable Portfolio module comes with a lot of features that we can customize to our needs and desires. Therefore, most of the features that come with the module can be modified in the tab About Design from the module settings mode. We can edit the following areas and many more:
Project Name
Project Category
VignetteDivi: How to customize elements of the "Filterable Portfolio" module grid
Affordable Gaetan | Divi , Divi Tutorial
Do you want to know how to customize the grid elements of the Filterable Portfolio module with Divi ? Follow us in this tutorial…
It’s important to have an area on your WordPress website to sess website to showcase your concepts. If you’re a brand builder, you can use a portfolio to showcase your work. Moreover, we telephone number identifier philippines can even go a step further and add different categories to our projects. It’s here What does the Divi Filterable Portfolio module do? .
With this module, we are able to showcase our hard work in a simple and organized way.
In today’s tutorial, we’ll be customizing individual grid elements of the Filterable Portfolio module. We’ll be using layouts from the free layout packs Divi Sessions and Divi Online Yoga Instructor to offer a free per-purchase Divi .
As with everything about Divi , we have the ability to customize this module to fit our needs and desires. However, before we get into styling, let’s learn a little more about the module.
What is Divi’s Filterable Portfolio module?
Items are part of custom post types and work the same way as posts. You can find them in your WordPress dashboard.
Here you will create your personal projects that will populate your Filterable Portfolio module. The module provides us with two ways to display our projects: in a grid format or in a full-width format . For us, we will use and customize the grid format.
With the Filterable Portfolio module, we will be able to showcase our recent projects. Users of our website will see a filter bar at the top of our portfolio grid. From there, they can browse through the different portfolio categories that we allow to be displayed in the module.
Here is an example grid configuration for the module with some example projects:
Areas to Consider When Creating a Divi Filterable Portfolio
Like all modules of Divi , the Filterable Portfolio module comes with a lot of features that we can customize to our needs and desires. Therefore, most of the features that come with the module can be modified in the tab About Design from the module settings mode. We can edit the following areas and many more:
Project Name
Project Category
Vignette
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!
How We’ll Customize Divi’s Filterable Portfolio 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 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