Wpdaily

Daily WordPress News

How to Create Floating Blurb Modules with Divi

Want to elevate your next web design project with some creativity and flair? In this tutorial, we’ll show you how to create floating blurb modules and build a features section that captivates the user’s attention as you scroll. By using Divi’s versatile blurb module and adding scroll effects, you can transform static layouts into dynamic sections that showcase your content.

If you’re interested in exploring the blurb module’s creative possibilities and learning how scroll effects can add some eye-catching movement to your website, this post is an excellent resource for you.

Let’s get started!

Preview

Here is a preview of what we will design. The blurb on the left slides up and remains floating in place, grabbing attention immediately. On the right, the blurbs are revealed individually, each highlighting a unique service feature.

Here is how the design will look on mobile. Each blurb will appear with a subtle slide-in scroll effect.

How to Create Floating Blurb Modules with Divi Mobile Design

What You Need to Get Started

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

Now, you are ready to start!

How to Create Floating Blurb Modules with Divi

We will create a dynamic features section for this design using four blurb modules. In the left column, we will use sticky effects to make one blurb module float, capturing attention with a large image and heading text that introduces the benefits of the service. Three smaller blurb modules will appear sequentially in the right column, each with an icon and some text. By using Divi’s scroll effects, we can individually reveal the blurbs, creating an immersive user experience that effectively communicates key features.

Create a New Page with a Premade Layout

Let’s start by using a premade layout from the Divi library. We will use the SaaS Product Landing Page from the SaaS Product layout pack for this design.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

How to Create Floating Blurb Modules with Divi Use Divi Builder

Click Browse Layouts to use a premade layout from the Divi library.

How to Create Floating Blurb Modules with Divi Browse Layouts

Search for and select the SaaS Product Landing Page layout.

How to Create Floating Blurb Modules with Divi Select Layout

Select Use This Layout to add the layout to your page.

How to Create Floating Blurb Modules with Divi Use Layout

Now, we are ready to build our design.

Modifying the Layout for the Floating Blurb Modules

We will create a dynamic features section using the content from the services row and additional images from the layout. To begin, add a new section below the hero section.

How to Create Floating Blurb Modules with Divi Insert Section

Next, add a row with two columns.

How to Create Floating Blurb Modules with Divi Insert Row

You can also delete the section below with the three modules since we will recreate them with the blurb module throughout this tutorial.

How to Create Floating Blurb Modules with Divi Delete Section

Adding the Blurb Modules

Column 1

In the left column, add a new blurb module.

How to Create Floating Blurb Modules with Divi Insert Blurb Module

Add the following content to the blurb.

  • Title: Analyze and Manage your Data Effortlessly
  • Body: Description text
  • Image: saas-24.png, which comes with the layout pack.

How to Create Floating Blurb Modules with Divi Add Text and Image

Design Settings

Next, move over to the design tab and modify the title text settings as follows:

  • Title Heading Level: H2
  • Title Font: Poppins
  • Title Font Weight: Semi Bold
  • Title Text Size: 48px desktop, 32px tablet, 24px mobile
  • Title Letter Spacing: -0.02em
  • Title Line Height: 1.2em

How to Create Floating Blurb Modules with Divi Title Text Settings

In the body text settings, modify the following:

  • Body Font: Poppins
  • Body Font Weight: Medium
  • Body Text Size: 16px desktop, 15px tablet, 14px mobile
  • Body Letter Spacing: -0.02em
  • Body Line Height: 1.8em

How to Create Floating Blurb Modules with Divi Body Text Settings

Column 2

In the right column, add a new blurb module.

How to Create Floating Blurb Modules with Divi Add Blurb

Add the following content to the blurb.

  • Title:Content Management
  • Body: Description text
  • Image: saas-icon-01.png

How to Create Floating Blurb Modules with Divi Blurb Content

Design Settings

In the design tab, begin by opening the image and icon settings. Set the image width to 60px and set the alignment to the left.

How to Create Floating Blurb Modules with Divi Blurb Image Icon

Next, modify the styling for the title text as follows:

  • Title Heading Level: H3
  • Title Font: Poppins
  • Title Font Weight: Semi Bold
  • Title Text Size: 36px desktop, 20px tablet, 16px mobile
  • Title Letter Spacing: -0.02em
  • Title Line Height: 1.4em

How to Create Floating Blurb Modules with Divi Blurb Title Text

In the body text settings, change the following options:

  • Body Font: Poppins
  • Body Font Weight: Medium
  • Body Text Size: 16px desktop, 15px tablet, 14px mobile
  • Body Letter Spacing: -0.02em
  • Body Line Height: 1.8em

How to Create Floating Blurb Modules with Divi Blurb Body Text

Next, open the spacing settings. We’ll add a top and bottom margin since we want each blurb on the right to appear one at a time. By using vh (viewport height) to set our margin, we can ensure that the blurb module and its margin will take up the entire height of the screen. Later on, we’ll add some scroll effects to enhance the effect. We won’t have a sticky scroll effect on tablet and mobile, so that the margin will be much smaller.

  • Margin top and bottom on desktop: 50vh
  • Margin top and bottom on tablet and mobile: 4vh

How to Create Floating Blurb Modules with Divi Blurb Spacing

Finally, open the animation settings and set the image/icon animation to no animation.

How to Create Floating Blurb Modules with Divi Blurb Image Icon Animation

Duplicate to create 2 more blurbs

Now, the first blurb module is created and styled. Duplicate the module twice to create two more blurb modules in the right column.

How to Create Floating Blurb Modules with Divi Duplicate Blurb

Open the settings for the second blurb and modify the following:

  • Title:Data Management
  • Body: Description text
  • Image: saas-icon-05.png

Next, modify the content for the third blurb.

  • Title: CRM Management
  • Body: Description text
  • Image: saas-icon-03.png

How to Create Floating Blurb Modules with Divi Blurb 3 Content

Since it’s the last blurb, we don’t need a large bottom margin. Modify the spacing settings.

  • Margin Bottom on desktop: 4vh

How to Create Floating Blurb Modules with Divi Blurb 3 Margin

Enable Floating Blurb Modules with Scroll Effects

Now, our design is in place, and we can add the scroll effects to create the dynamic layout.

Column 1

First, open the settings for column 1. Navigate to the Scroll Effects section in the advanced tab and modify the following options to get the column to stick to the top.

  • Sticky Position Desktop: Stick to Top
  • Sticky Position Tablet and Mobile: Do Not Stick
  • Sticky Top Offset Desktop: 30vh
  • Sticky Top Offset Tablet and Mobile: 0vh
  • Bottom Sticky Limit: Section

How to Create Floating Blurb Modules with Divi Column 1 Scroll Effects

Blurb 1

Next, navigate to the settings for the blurb in column 1. We will add a scroll transform effect with some vertical motion to highlight the column when it slides into view.

  • Enable Vertical Motion: Yes
  • Set Vertical Motion
    • Starting Offset: 10
    • Mid Offset: 30%, 0
    • Ending Offset: 0

How to Create Floating Blurb Modules with Divi Blurb Scroll Effects

Column 2 Blurbs

For the blurbs in column 2, we will use some vertical motion to create a scroll effect that will capture your user’s attention. Drag the arrows to extend the mid offset to 20-70% to keep the blurb in the center longer. The mobile version adds a more subtle slide-in effect. Modify the following scroll effect options for each blurb in column 2.

  • Enable Vertical Motion: Yes
  • Set Vertical Motion Desktop
    • Starting Offset: 4
    • Mid Offset: 20%-70%, 0
    • Ending Offset: 80%, -4
  • Set Vertical Motion Tablet and Mobile
    • Starting Offset: 4
    • Mid Offset: 30%, 0
    • Ending Offset: 0

How to Create Floating Blurb Modules with Divi Column 2 Blurb Scroll Effects

And that’s it! The floating blurb module layout is now complete.

Final Result

Let’s take a look at our floating blurb module section in action.

And here’s how it looks on mobile.

How to Create Floating Blurb Modules with Divi Mobile Design

Final Thoughts

Divi’s blurb module makes it easy to display concise information callouts and an eye-catching image or icon. Scroll effects allow you to create creative layouts that guide the user’s attention, like the floating blurb modules we designed in this tutorial. For more tutorials on Divi’s blurb module, check out Creative Interactive Blurb Modules Using Divi’s Transform & Hover Options and 5 Creative Divi Blurb Module Designs.

Have you added scroll effects to a blurb module in your own designs? Let us know in the comments!

The post How to Create Floating Blurb Modules with Divi appeared first on Elegant Themes Blog.

Source