Custom Divi Blurb Module Design With Hover & Zoom Effect

In this tutorial I will show you how to create a beautiful Blurb module design with hover & zoom effect. We will apply custom design styles to the Divi blurb module to achieve better hover effects and make our module more interactive so it will gather more attention. This section is great for featuring blog categories and tags but you can get creative and use it for whatever you need!

  • To install this modification you will need the Divi Theme by Elegant Themes installed.
  • You can follow this tutorial or download Ready-To-Use Page Layout with CSS code embedded.
VIDEO

Divi Blurb Customization Video Tutorial

1

Add section and columns

  1. Add Standard Section and select 4 columns layout.
  2. Add Blurb module to one column (we will be adding classes and edit settings of each module. After modules in 1st column are ready we will copy them to other 3 columns).
2

Apply row settings for gutter size

  1. Open row settings and go to the design tab and click on Sizing.
  2. Tick on Use Custom Gutter Width and set Gutter Width to 2.
3

Editing Blurb Module Settings

In this step we will be editing Blurb Module settings. We need to remove description text, add Blurb title, Module Link URL and select or upload image.

BLURB GENERAL SETTINGS

  1. Open Blurb Module Settings.
  2. Add Title and remove Body description.
  3. Add Module Link URL.
  4. Upload new or select existing Image from media library.

BLURB DESIGN SETTINGSDivi Blurb Module by default comes with an animation. For design we are creating today it’s not very appealing so we are going to remove animations.

Open Animation settings and update Image/Icon Animation to No Animation.

BLURB ADVANCED SETTINGS

Go to Advanced blurb tab open CSS ID & Classes and add et_pb_blurb_cat into CSS Class field.

4

Duplicate blurb modules & update content

Now it’s time to duplicate our modules. We need Blurb module in each column

Update new modules – titles, images and module links

5

Adding CSS

In this last step we need to add some CSS to Divi > Theme Options > Custom CSS section or copy and paste it to our child theme’s style.css file.

To achieve final results and finish our custom Divi Blurb with Hover & Zoom Effect we need to add the following CSS code:

Live Preview

AMERICA

EUROPE

AFRICA

ASIA