Adding hover effects to Divi fullwidth portfolio grid

I love Divi. LOVE. But, sometimes it can be somewhat humdrum out of the box. I also love CSS animation and many of the amazing things found on Codrops. Applying Codrops awesomeness can be somewhat difficult because of the Divi structure. I’m going to show you how to apply a pretty cool hover effect from Codrops to the Divi Fullwidth Portfolio module.

Divi’s Fullwidth Portfolio Module pulls its data from the Projects custom post type. This makes the output somewhat hard to style because of the Divi Builder. To add these effects, we’re going to have to create a custom module and a few files. Hopefully, you are already using a child theme. This is customization 101; always use a child theme. If you don’t have one yet, you can download one from my github repo.

example from Codrops

Let’s get started! We are going to create one folder, one new file and add a little to our style.css and functions.php files. The folder is going to be called custom-modules. In this folder will go a file called cfpm.php. You can really name this anything but you will have to call it later in functions.php so keep it simple.

'description'=>__('Select the categories that you would like to include in the feed.','et_builder'),

),

'posts_number'=>array(

'label'=>__('Posts Number','et_builder'),

'type'=>'text',

'description'=>__('Control how many projects are displayed. Leave blank or use 0 to not limit the amount.','et_builder'),

),

'show_title'=>array(

'label'=>__('Show Title','et_builder'),

'type'=>'yes_no_button',

'options'=>array(

'on'=>__('Yes','et_builder'),

'off'=>__('No','et_builder'),

),

'description'=>__('Turn project titles on or off.','et_builder'),

),

'show_date'=>array(

'label'=>__('Show Date','et_builder'),

'type'=>'yes_no_button',

'options'=>array(

'on'=>__('Yes','et_builder'),

'off'=>__('No','et_builder'),

),

'description'=>__('Turn the date display on or off.','et_builder'),

),

'background_layout'=>array(

'label'=>__('Text Color','et_builder'),

'type'=>'select',

'options'=>array(

'light'=>__('Dark','et_builder'),

'dark'=>__('Light','et_builder'),

),

'description'=>__('Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.','et_builder'),

),

'auto'=>array(

'label'=>__('Automatic Carousel Rotation','et_builder'),

'type'=>'yes_no_button',

'options'=>array(

'off'=>__('Off','et_builder'),

'on'=>__('On','et_builder'),

),

'affects'=>array(

'#et_pb_auto_speed',

),

'depends_show_if'=>'on',

'description'=>__('If you the carousel layout option is chosen and you would like the carousel to slide automatically, without the visitor having to click the next button, enable this option and then adjust the rotation speed below if desired.','et_builder'),

'description'=>__("Here you can designate how fast the carousel rotates, if 'Automatic Carousel Rotation' option is enabled above. The higher the number the longer the pause between each rotation. (Ex. 1000 = 1 sec)",'et_builder'),

),

'admin_label'=>array(

'label'=>__('Admin Label','et_builder'),

'type'=>'text',

'description'=>__('This will change the label of the module in the builder for easy identification.','et_builder'),

),

'module_id'=>array(

'label'=>__('CSS ID','et_builder'),

'type'=>'text',

'description'=>__('Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.','et_builder'),

),

'module_class'=>array(

'label'=>__('CSS Class','et_builder'),

'type'=>'text',

'description'=>__('Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.','et_builder'),

Next, we’re going to add code to functions.php in order to call the file and override the parent theme’s module. If you already have an opening php tag, make sure not to include the one below. This is where we will be calling our previous file so you might need to change the cfpm if you named yours something else.

10 Comments

I have a problem with this customization.
Can you explain to me what is the module, code, ???? that I must install to run the portfolio like in your homepage.
I have a filtered portfolio installed in my homepage. I install everything according to your rules but nothing else and nothing changes.

Hello Bruno,
This tutorial uses the fullwidth portfolio module with the grid layout, not the filtered portfolio grid. You would choose “Fullwidth Section” (purple), then insert “Fullwidth Portfolio” and choose “grid” although it will still work with the carousel layout. The filterable grid in a standard section module, not a fullwidth one and the two use different builder modules.

Hi Ray,
You would need to swap out the_title() in line 188 with the_excerpt(). You would then also need to add your description to the excerpt field toward te end of the admin page. Let me know if that works.

Hi D,
To create a custom module folder, you will need to have FTP/SFTP access to your site or access to your files via your host control panel. FTP/SFTP is something you will get through your hosting service. Once you get access, you will need to add the new folder into your child theme folder.