Free Download: Divi Filterable Portfolio Sections with Custom Hover Effects

by | Feb 11, 2018 | 16 comments

In this post I would like to share with you four Divi Filterable Portfolio section layouts with different custom hover effects applied to portfolio items on hovering over.

I decided to make it a FREE download rather than a DIY tutorial since this will allow Divi users to implement these effects on their sites with much less effort.

Check out the short demo video of these layouts with custom hover effects below or click the button to navigate to the live demo.

Demo

How To Download

This download is exclusive to our subscribers, so, in order to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive an email with the download link.

Requirements

These protfolio sections make use of the section dividers feature of Divi, so, at least Divi v3.0.101 is required in order for the divider shapes to show up in the section background.

But the rest of the styling and custom hover effects will work with earlier versions of Divi too.

Installation

The download is a single .zip file with separate folders for each section layout and a README.txt file which you need to read first before installation since it contains the instructions for installation of these layouts.

Each of the section layout folders is named accordingly and contains two files – the section layout JSON file which needs to be imported into the Divi Library, and a CSS file with the section custom styling and hover effect.

First import the JSON file of the section layout into the Divi Library.

Then add the CSS from the CSS file of the same section layout folder either into the Custom CSS field on Divi -> Theme Options page or into the Divi -> Theme Customizer -> Additional CSS field.

Alternatively, add the CSS to you child theme style.css file.

Next, go to the page where you would like to have your portfolio and add the imported section from the Divi Library. Then open the Filterable Portfolio module settings and select your project categories which you would like to show on your site.

Save everything and you are done, enjoy!

Hope these section layouts with custom hover effects will come in handy, this is the first free download I am offering but there’s more to come. So, subscribe and stay tuned!

Pin It on Pinterest

Shares
Share This