Custom Divi Blurb Module Design With Hover & Zoom Effect

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.

Divi Blurb Customization Video Tutorial


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).

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.

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.


  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.


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


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


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





Real Estate Lead Generation & Appointment Setting Machine

How To Start A Blog?

Cheap Email Marketing Services