Download our Filterable Portfolios Layout pack for Divi.
It is FREEBIE FRIDAY and for this edition, we have 2 FREE Dynamic Filterable Portfolio Layouts that have been hand-crafted just for you! What do we mean by dynamic, we mean that you can use any module to select what your portfolio is filtered by.
You can use a Blurb or a Text Module as we did in these layouts, or you can use any other module like a Button or Image if that makes more sense.
Best of all, they are easy to customize to fit your brand or site and can be used with any Divi.
NOTE: Next week we will be releasing a detailed tutorial on the code used to make all of this happen, stay tuned!
Preview:
Divi Portfolio Filtered with a Blurb Module
Divi Portfolio Filtered with a Text Module
We’ve got 2 gorgeous FREE Divi Filtered Portfolio Layouts for you this week:
Divi Portfolio Filtered with a Blurb Module
This layout used a Blurb Module to illustrate the versatility using this method. It also contains some custom CSS and jQuery to make the magic happen.
Divi Portfolio Filtered with a Text Module
This layout used a text module for the filters and we removed the Title and Meta Data as well as the spacing to create a more visual portfolio style.
Using the Dynamic Filtered Portfolio Layouts:
NOTE: Make sure that you already have projects created on your site along with categories assigned to them. This layout will not work as expected without that. Also, make sure that you use the category slugs for each of the filter triggers and in the code module detailed below.
Step 1) Import the layout pack into the Divi Library
Similar to importing any layout pack we release, Import the JSON file directly into the Divi Library. Once it is imported you will see that 2 Dynamic Filtered Portfolio Layouts have been added to your library.
Step 2) Add the Layout Section to a Page.
Go to the page where you would like to use the Portfolio Layout and import it from the Divi Library as a Section.
Step 3) Customize the Layout
You can easily customize either of these Portfolio Layouts just by editing the imported layout right on the page where you imported it, just use the regular Divi settings.
Make sure that your product category slug is the same ID used on your filter trigger settings (see next image). Here it is filter-item-1.
Make sure that the ID assigned on the Advanced Tab matches your category slug. Here it is filter-item-1.
You also need to make sure that your category slugs match the ones here in the Code Module at the bottom of the page. Here it is filter-item-1, filter-item-2 , and filter-item-3.
You can also edit the color of the line of your active filter here.
I would like to have an “All” button (like the default module has) is that possible?
I followed the instructions exactly and could not get this to work.
Hello, great post.
how can i show the excerpt please ?
Thankyou