How to Create a 3-Step Blurb Reveal on Hover with Divi

Posted on July 14, 2019 by in Divi Resources | 4 comments

How to Create a 3-Step Blurb Reveal on Hover with Divi

A lot of company websites out there share a preview of their approach at some point. When creating an approach section, you can handle it in the traditional way, or you can try to add more interaction to it. If you’re looking for a way to make the second option happen, you’re going to love this post.

In this tutorial, we’ll show you how to create a 3-step blurb reveal using Divi’s new sizing options. We’ll start off by showing the title, continue by displaying three arrows that lead to the steps, and complete the effect by revealing the animated blurbs. You’ll be able to download the 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

blurb reveal

Mobile

blurb reveal

Download the 3-Step Blurb Reveal Layout for FREE

To lay your hands on the 3-step blurb reveal 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.

Let’s Start Recreating!

Subscribe To Our Youtube Channel

Add New Section

Default Gradient Background

The first thing you’ll need to do is add a new section to the page you’re working on. Open the section settings and add the following gradient background to it:

  • Color 1: #ffa3ad
  • Color 2: #ffcea3
  • Gradient Direction: 122deg

blurb reveal

Hover Gradient Background

Modify the gradient background on hover:

  • Color 1: #000000
  • Color 2: #ffffff
  • Gradient Type: Radial
  • Radial Direction: Top
  • Start Position: 36%
  • End Position: 26%

blurb reveal

Spacing

Move on to the design tab and add some custom top and bottom padding next.

  • Top Padding: 1vw
  • Bottom Padding: 1vw

blurb reveal

Overflow

Later on this post, we’ll play around with the height of the section. To make sure nothing exceeds the section container, we’re going to hide the overflows in the visibility settings.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

blurb reveal

Add Row #1

Column Structure

Once you’ve completed the section settings, you can continue by adding the first row to the section using the following column structure:

blurb reveal

Add Text Module to Row

Add H2 Content

Add a new Text Module to the row’s column and enter some H2 content of your choice.

blurb reveal

H2 Text Settings

Move on to the design tab and change the H2 text settings accordingly:

  • Heading 2 Font: Montserrat
  • Heading 2 Font Weight: Semi Bold
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #ffffff
  • Heading 2 Text Size: 2vw (Desktop), 5vw (Tablet), 6vw (Phone)
  • Heading 2 Letter Spacing: -2px

blurb reveal

Add Row #2

Column Structure

Continue by adding the second row using the following column structure:

blurb reveal

Spacing

Without adding any modules yet, open the row settings and add some custom top and bottom padding across different screen sizes.

  • Top Padding: 2vw (Desktop), 4vw (Tablet), 5vw (Phone)
  • Bottom Padding: 2vw (Desktop), 4vw (Tablet), 5vw (Phone)

blurb reveal

Display

To make sure all columns appear next to each other on smaller screen sizes, we’re going to add one single line of CSS code to the main element of the row.

display: flex;

blurb reveal

Add Arrow Text Module to Column 1

Add Symbol

We’ll use this row to add the animated arrows. Add a new Text Module to the first column of the row and add the ‘↓’ symbol to the content box.

blurb reveal

Text Settings

Move on to the design tab and change text settings.

  • Text Alignment: Right
  • Text Color: #ffa3ad
  • Text Size: 4vw (Desktop), 6vw (Tablet), 8vw (Phone)

blurb reveal

Spacing

Add some custom margin values to the spacing settings next.

  • Top Margin: -3vw
  • Bottom Margin: 8vw

blurb reveal

Transform Rotate

Rotate the module in the transform settings.

  • Left: 45deg

blurb reveal

Animation

And add a custom animation using the following settings:

  • Animation Style: Slide
  • Animation Direction: Center
  • Animation Delay: 1000ms

blurb reveal

Add Arrow Text Module to Column 2

Add Symbol

Continue by adding a new row to the second column and add the ‘↓’ symbol to the content box.

blurb reveal

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Alignment: Center
  • Text Color: #ffa3ad
  • Text Size: 4vw (Desktop), 6vw (Tablet), 8vw (Phone)

blurb reveal

Spacing

Add some custom top margin next.

  • Top Margin: 1vw

blurb reveal

Animation

And apply the following animation settings:

  • Animation Style: Slide
  • Animation Direction: Center

blurb reveal

Add Arrow Text Module to Column 3

Add Symbol

On to the last arrow Text Module in column 3. Add the ‘↓’ arrow to the content box.

blurb reveal

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Alignment: Left
  • Text Color: #ffa3ad
  • Text Size: 4vw (Desktop), 6vw (Tablet), 8vw (Phone)

blurb reveal

Spacing

Add some negative top margin next.

  • Top Margin: -3vw

blurb reveal

Transform Rotate

Rotate the module in the transform settings.

  • Left: 315deg

blurb reveal

Animation

And complete the module’s settings by adding the following animation:

  • Animation Style: Slide
  • Animation Direction: Center
  • Animation Delay: 1000ms

blurb reveal

Add Row #3

Column Structure

Once you’ve completed the second row, you can continue by adding a new row using the following column structure:

blurb reveal

Sizing

Without adding any modules yet, open the row settings and modify the width and max width values in the sizing settings.

  • Width: 100%
  • Max Width: 100%

blurb reveal

Spacing

Add some custom padding values across different screen sizes next.

  • Top Padding: 2vw (Desktop), 8vw (Tablet), 6vw (Phone)
  • Bottom Padding: 2vw (Desktop), 8vw (Tablet), 6vw (Phone)
  • Left Padding: 10vw (Desktop), 0vw (Tablet & Phone)
  • Right Padding: 10vw (Desktop), 0vw (Tablet & Phone)

blurb reveal

Display

Add one single line of CSS code to the main element of the row to make sure all columns appear next to each other on smaller screen sizes.

display: flex;

blurb reveal

Overflow

In the last part of this tutorial, we’re going to change the row’s height. To prepare for that, we’ll need to make sure nothing exceeds the row container by hiding the overflows in the visibility settings.

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

blurb reveal

Add Number Text Module to Column 1

Add Content

Time to start adding modules! Add a new Text Module to the first column and enter a number.

blurb reveal

Gradient Background

Add a gradient background to the module using the following settings:

  • Color 1: #ffa3ad
  • Color 2: #ffcea3
  • Gradient Direction: 122deg

blurb reveal

Text Settings

Move on to the design tab and change the text settings accordingly:

  • Text Font: Montserrat
  • Text Font Weight: Ultra Bold
  • Text Alignment: Center
  • Text Color: #ffffff
  • Text Size: 2vw (Desktop), 4vw (Tablet), 8vw (Phone)
  • Text Line Height: 1em

blurb reveal

Spacing

Add some top and bottom padding across different screen sizes as well.

  • Top Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Bottom Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)

blurb reveal

Border

And complete the module’s settings by adding ’20px’ to each one of the corners in the border settings.

blurb reveal

Clone Number Text Module Twice & Place Duplicates in Remaining Columns

Continue by cloning the Text Module in column 1 twice and place the duplicates in the two remaining columns of the row.

blurb reveal

Change Numbers

Make sure you change the number in each one of the duplicates.

blurb reveal

Add Blurb Module to Column 1

Add Content

The second module we need in the first column is a Blurb Module. Enter some content of your choice.

blurb reveal

Select Icon

Continue by selecting an icon.

blurb reveal

Background Color

And change the background color into white.

  • Background Color: #ffffff

blurb reveal

Icon Settings

Move on to the design tab and change the icon settings accordingly:

  • Icon Color: #ffcea3
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 4vw (Desktop), 5vw (Tablet), 6vw (Phone)

blurb reveal

Title Text Settings

Modify the title text settings too.

  • Title Font: Montserrat
  • Title Font Weight: Bold
  • Title Text Alignment: Center
  • Title Text Color: #000000
  • Title Text Size: 1vw (Desktop), 2vw (Tablet), 4vw (Phone)

blurb reveal

Body Text Settings

Along with the body text settings.

  • Body Text Alignment: Center
  • Body Text Size: 0.6vw (Desktop), 1.3vw (Tablet), 2vw (Phone)
  • Body Line Height: 2.5em

blurb reveal

Spacing

We’re also giving our module the desired shape by adding the following custom padding values across different screen sizes:

  • Top Padding: 3vw (Desktop), 5vw (Tablet), 7vw (Phone)
  • Bottom Padding: 3vw (Desktop), 5vw (Tablet), 7vw (Phone)
  • Left Padding: 1vw
  • Right Padding: 1vw

blurb reveal

Border

Add ’20px’ to each one of the corners in the border settings next.

blurb reveal

Box Shadow

And create a bit of depth by adding a subtle box shadow.

  • Shadow Color: rgba(0,0,0,0.07)

blurb reveal

Animation

Last but not least, add an animation to the module.

  • Animation Style: Slide
  • Animation Direction: Center
  • Animation Delay: 1000ms

blurb reveal

Clone Blurb Module Twice & Place Duplicates in Remaining Columns

Once you’ve completed the Blurb Module in column 1, you can clone it three times and place the duplicates in the two remaining columns of the row.

blurb reveal

Change Content of Both Duplicates

Make sure you change the content for each one of the duplicates.

blurb reveal

Modify Row #3 Sizing Settings

Default Height

Now, to make the hover effect work, we’re going to open the last row’s settings and go to the sizing settings. Once there, we’ll modify the height across different screen sizes.

  • Height: 6vw (Desktop), 18vw (Tablet), 24vw (Phone)

blurb reveal

Hover Height

We’ll bring back the height to normal on hover.

  • Height: auto

blurb reveal

Modify Section Sizing Settings

Default Height

Open the section settings next and change the height accordingly:

  • Height: 7vw (Desktop), 15vw (Tablet), 20vw (Phone)

blurb reveal

Hover Height

Bring back the height on hover and you’re done!

  • Height: auto

blurb reveal

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

blurb reveal

Mobile

blurb reveal

Final Thoughts

In this post, we’ve shown you how to create a 3-step blurb reveal using Divi’s new sizing options. The outcome of the example is highly responsive and allows you to add extra interaction to your page. We hope this tutorial inspires you to create your own alternative 3-step designs as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Premade Layouts

Check Out These Related Posts

4 Comments

  1. Good lord! After a tutorial of this length I should be able to pilot the Space Shuttle!

  2. Thanks for given valuable information..

    Thanks & Regards,
    GA Insurance Brokers

  3. This would be really cool if I actually HAD the default and hover options for background! What gives? I have the most up to date version of DIVI. Why do I not have this?

Join To Download Today

Pin It on Pinterest