Wish to raise your subsequent internet design challenge with some creativity and aptitude? On this instructional, we’ll display you the best way to create floating blurb modules and construct a options phase that captivates the person’s consideration as you scroll. By way of the use of Divi’s flexible blurb module and including scroll results, you’ll be able to turn out to be static layouts into dynamic sections that exhibit your content material.

In the event you’re focused on exploring the blurb module’s inventive probabilities and finding out how scroll results can upload some attention-grabbing motion on your web site, this put up is a wonderful useful resource for you.

Let’s get began!

Preview

Here’s a preview of what we can design. The blurb at the left slides up and stays floating in position, grabbing consideration in an instant. At the proper, the blurbs are printed in my view, every highlighting a novel carrier function.

Here’s how the design will glance on cellular. Each and every blurb will seem with a delicate slide-in scroll impact.

What You Wish to Get Began

Prior to we commence, install and activate the Divi Theme and you should definitely have the most recent model of Divi in your web site.

Now, you’re ready to start out!

The way to Create Floating Blurb Modules with Divi

We can create a dynamic options phase for this design the use of 4 blurb modules. Within the left column, we can use sticky results to make one blurb module go with the flow, taking pictures consideration with a big symbol and heading textual content that introduces the advantages of the carrier. 3 smaller blurb modules will seem sequentially in the precise column, every with an icon and a few textual content. By way of the use of Divi’s scroll results, we will in my view expose the blurbs, developing an immersive person revel in that successfully communicates key options.

Create a New Web page with a Premade Format

Let’s get started via the use of a premade format from the Divi library. We can use the SaaS Product Touchdown Web page from the SaaS Product layout pack for this design.

Upload a brand new web page on your web site and provides it a identify, then make a selection the method to Use Divi Builder.

Click on Browse Layouts to make use of a premade format from the Divi library.

Seek for and make a selection the SaaS Product Touchdown Web page format.

Make a choice Use This Format so as to add the format on your web page.

Now, we’re in a position to construct our design.

Enhancing the Format for the Floating Blurb Modules

We can create a dynamic options phase the use of the content material from the products and services row and extra pictures from the format. To start out, upload a brand new phase underneath the hero phase.

Subsequent, upload a row with two columns.

You’ll additionally delete the phase underneath with the 3 modules since we can recreate them with the blurb module right through this instructional.

Including the Blurb Modules

Column 1

Within the left column, upload a brand new blurb module.

Upload the next content material to the blurb.

• Name: Analyze and Arrange your Information Without difficulty
• Frame: Description textual content
• Symbol: saas-24.png, which comes with the format pack.

Design Settings

Subsequent, transfer over to the design tab and alter the identify textual content settings as follows:

• Name Heading Degree: H2
• Name Font: Poppins
• Name Font Weight: Semi Daring
• Name Textual content Dimension: 48px desktop, 32px pill, 24px cellular
• Name Letter Spacing: -0.02em
• Name Line Top: 1.2em

Within the frame textual content settings, alter the next:

• Frame Font: Poppins
• Frame Font Weight: Medium
• Frame Textual content Dimension: 16px desktop, 15px pill, 14px cellular
• Frame Letter Spacing: -0.02em
• Frame Line Top: 1.8em

Column 2

In the precise column, upload a brand new blurb module.

Upload the next content material to the blurb.

• Name:Content material Control
• Frame: Description textual content
• Symbol: saas-icon-01.png

Design Settings

Within the design tab, start via opening the picture and icon settings. Set the picture width to 60px and set the alignment to the left.

Subsequent, alter the styling for the identify textual content as follows:

• Name Heading Degree: H3
• Name Font: Poppins
• Name Font Weight: Semi Daring
• Name Textual content Dimension: 36px desktop, 20px pill, 16px cellular
• Name Letter Spacing: -0.02em
• Name Line Top: 1.4em

Within the frame textual content settings, alternate the next choices:

• Frame Font: Poppins
• Frame Font Weight: Medium
• Frame Textual content Dimension: 16px desktop, 15px pill, 14px cellular
• Frame Letter Spacing: -0.02em
• Frame Line Top: 1.8em

Subsequent, open the spacing settings. We’ll upload a most sensible and backside margin since we wish every blurb at the proper to look one by one. By way of the use of vh (viewport peak) to set our margin, we will make certain that the blurb module and its margin will soak up all the peak of the display screen. In a while, we’ll upload some scroll results to give a boost to the impact. We gained’t have a sticky scroll impact on pill and cellular, in order that the margin might be a lot smaller.

• Margin most sensible and backside on desktop: 50vh
• Margin most sensible and backside on pill and cellular: 4vh

In any case, open the animation settings and set the picture/icon animation to no animation.

Replica to create 2 extra blurbs

Now, the primary blurb module is created and styled. Replica the module two times to create two extra blurb modules in the precise column.

Open the settings for the second one blurb and alter the next:

• Name:Information Control
• Frame: Description textual content
• Symbol: saas-icon-05.png

Subsequent, alter the content material for the 3rd blurb.

• Name: CRM Control
• Frame: Description textual content
• Symbol: saas-icon-03.png

Because it’s the remaining blurb, we don’t want a big backside margin. Adjust the spacing settings.

• Margin Backside on desktop: 4vh

Allow Floating Blurb Modules with Scroll Results

Now, our design is in position, and we will upload the scroll results to create the dynamic format.

Column 1

First, open the settings for column 1. Navigate to the Scroll Results phase within the complicated tab and alter the next choices to get the column to keep on with the highest.

• Sticky Place Desktop: Persist with Most sensible
• Sticky Place Pill and Cell: Do No longer Stick
• Sticky Most sensible Offset Desktop: 30vh
• Sticky Most sensible Offset Pill and Cell: 0vh
• Backside Sticky Restrict: Phase

Blurb 1

Subsequent, navigate to the settings for the blurb in column 1. We can upload a scroll turn out to be impact with some vertical movement to focus on the column when it slides into view.

• Allow Vertical Movement: Sure
• Set Vertical Movement
  • Beginning Offset: 10
  • Mid Offset: 30%, 0
  • Finishing Offset: 0

Column 2 Blurbs

For the blurbs in column 2, we can use some vertical movement to create a scroll impact that can seize your person’s consideration. Drag the arrows to increase the mid offset to 20-70% to stay the blurb within the heart longer. The cellular model provides a extra delicate slide-in impact. Adjust the next scroll impact choices for every blurb in column 2.

• Allow Vertical Movement: Sure
• Set Vertical Movement Desktop
  • Beginning Offset: 4
  • Mid Offset: 20%-70%, 0
  • Finishing Offset: 80%, -4
• Set Vertical Movement Pill and Cell
  • Beginning Offset: 4
  • Mid Offset: 30%, 0
  • Finishing Offset: 0

And that’s it! The floating blurb module format is now entire.

Ultimate Consequence

Let’s check out our floating blurb module phase in motion.

And right here’s the way it appears to be like on cellular.

Ultimate Ideas

Divi’s blurb module makes it simple to show concise data callouts and an attention-grabbing symbol or icon. Scroll results mean you can create inventive layouts that information the person’s consideration, just like the floating blurb modules we designed on this instructional. For extra tutorials on Divi’s blurb module, take a look at Creative Interactive Blurb Modules Using Divi’s Transform & Hover Options and 5 Creative Divi Blurb Module Designs.

Have you ever added scroll results to a blurb module on your personal designs? Tell us within the feedback!

The put up How to Create Floating Blurb Modules with Divi seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more