How to Highlight a Hovered Blurb Module by Blurring the Other Ones with Divi

How to Highlight a Hovered Blurb Module by Blurring the Other Ones with Divi

Whatever kind of website you’re building, chances are high that at some point, you’ll want to display a list of different services, steps and more. One of the easiest ways to approach creating such a list attractively is using Divi’s Blurb Module. Blurb Modules allow you to structure list content beautifully while providing you with endless design possibilities.

In today’s tutorial, we’ll take it one step further and show you how to highlight a hovered Blurb Module by blurring the other ones you’ve displayed. This is a great way to put the focus on one Blurb Module at a time, without allowing the other Blurb Modules to distract the reader. As soon as a visitor moves on to another Blurb Module, that one becomes the highlighted one instead. You’ll be able to download the layout’s JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

Mobile

hovered blurb module

Download The Hovered Blurb Module Layout for FREE

To lay your hands on the free hovered blurb module layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Let’s Start Recreating!

Add New Section

Background Color

Start by adding a regular section to a new page or the one you’re working on. Open the section settings and change the background color.

hovered blurb module

Spacing

Add some custom margin and padding values too.

  • Top Margin: 2vw
  • Bottom Margin: 2vw
  • Left Margin: 2vw
  • Right Margin: 2vw
  • Top Padding: 0px
  • Bottom

[…]

 



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top