Divi’s blurb module makes it easy to turn an image or icon grouped with a heading and a couple of body text. It’s a great way to focus on some choices or products and services and merchandise or even showcase steps in a process. All the way through the blurb module settings, you’ll have whole keep an eye on over the styling and also will add unique animations to the blurb modules to have the same opinion them stand out in your internet web page.

In this tutorial, we will show you 4 other ways you’ll practice animation effects in your blurb module. Whilst you’re on the lookout for a way as a way to upload some movement in your internet web page design with Divi, this tutorial is for you.

Let’s get started!

Sneak Peek

Right here’s a preview of what we will design.

Blurb Animation 1: Slide Animation

Blurb Animation 2: Flip Animation

Blurb Animation 3: Bounce Animation

Blurb Animation 4: Fade Animation

What You Need to Get Started

Previous to we begin, set up and turn on the Divi Theme and also you will have to no doubt have the newest style of Divi in your internet web page.

Now, you’re in a position to start!

4 Techniques to Animate Your Divi Blurb Module

Create a New Internet web page with a Premade Construction

Let’s get began by means of the use of a premade structure from the Divi library. For this design, we will use the Coaching Landing Internet web page from the Training Structure Pack. Get started by means of together with a brand spanking new internet web page in your internet web page and giving it a reputation. Next, make a choice the strategy to Use Divi Builder.

We will be able to use a premade structure from the Divi library for this example, so make a choice Browse Layouts.

Next, search for and make a choice the Coaching Landing Internet web page structure.

Select Use This Construction as a way to upload the structure in your internet web page.

Now, we’re ready to build our design.

Blurb Animation 1: Slide Animation

For our first blurb animation tutorial, we’re going to make use of the content material subject material inside the My Services phase of this internet web page. In this phase, the supplier title and icon are displayed the use of blurb modules.

Since our content material subject material is already in a blurb module, we can leap right kind into together with the animation. Open the settings for the principle blurb module for the career educating supplier, then navigate to the animation settings inside the design tab. For this design, make a choice the slide animation style.

With the slide animation style determined on, we can further customize one of the simplest ways the animation turns out and behaves. I’m atmosphere the animation trail to the left, reducing the animation duration quite bit to 800ms, and atmosphere the animation intensity at 35%.

Now, we need to practice the identical animation to the rest of the blurb modules in this phase. To do so, simply click on at the 3 dots inside the Animation phase header, then make a choice Prolong Animation Types.

Next, make a selection to extend the animation sorts to All Blurbs throughout This Phase, then click on on Prolong to make use of the changes.

Now, all the blurbs have the identical animation affect. Alternatively, I need to add quite lengthen to provide the animation a staggered affect and provide some visual distinction between the blurbs when they load. Open the animation settings for the Life Coaching blurb, then set the Animation Prolong to 150ms. By way of together with this lengthen, the Life Coaching blurb will animate quite after the principle Occupation Coaching blurb, rising a satisfying at the back of agenda affect.

Next, add an Animation Prolong to the two ultimate blurbs. For the third blurb (Smartly being & Wellness), set the Animation Prolong to 300ms.

For the total Finance Coaching blurb, set the Animation Prolong to 450ms.

Final Outcome

Right here’s the completed design with the slide-left animation.

Blurb Animation 2: Flip Animation

For the second blurb animation, we will use the identical products and services and merchandise phase and practice a flip-style animation to each blurb. Open the settings for the principle blurb and navigate to the Animation settings inside the Design tab. Next, make a choice the flip animation style.

Set the Animation Trail to Center. Next, set the Animation Intensity all the means up to 100%. Additionally, bump the Animation Starting Opacity to 70%. After all, set the Animation Pace Curve to ease.

Next, extend the animation style to all the blurbs inside the phase.

Final Outcome

Right here’s the structure with the flip-style animation performed to all the blurbs.

Blurb Animation 3: Bounce Animation

For the third animation, let’s switch without delay to the Let’s Expand phase inside the structure. The structure is made with image and text modules, so we’ll first wish to recreate the structure the use of blurb modules.

Recreating the Construction with Blurb Modules

Get began by means of together with a brand spanking new blurb module to the structure.

Then, regulate the content material subject material to match the original example.

• Determine: Being Happy
• Body: Lorem ipsum dolor take a seat down amet, consectetur adipiscing elit. Donec sed finibus nisi, sed dictum eros.
• Image: coaching-35.png

Inside the design tab, regulate the following possible choices underneath the Determine font settings.

• Determine Font: Belleza
• Determine Text Color: #000000
• Determine Text Size Desktop: 32px
• Determine Text Size Tablet: 16px
• Determine Text Size Cellular: 15px

Next, regulate the body text color.

• Body Text Color: #000000

Repeat the ones steps to recreate all 4 sections with the blurb module, then delete the former sections.

Blurb Animation

With our structure whole, we can add our animation settings. Open the settings for the principle blurb and navigate to the Animation settings underneath the Design tab, then make a choice the Bounce animation style.

Next, set the animation sorts as follows:

• Animation Trail: Up
• Animation Duration: 650ms
• Animation Pace Curve: Ease-Out

Prolong the animation sorts to the other blurbs.

I need to add a staggered lengthen to the animations for each blurb so that the animations aren’t going down similtaneously. Set the following animation duration for the blurbs.

• Animation Prolong for Blurb 2: 300ms
• Animation Prolong for Blurb 3: 600ms
• Animation Prolong for Blurb 4: 900ms

Final Outcome

Right here’s the completed design with the soar blurb animations.

Blurb Animation 4: Fade Animation

For the total example, we’re moving without delay to the Why Choose Us phase of the Coaching Landing Internet web page template. The structure for the three blurbs is in this day and age prepare the use of an icon module and a text module. We’ll get began by means of recreating the phase the use of a blurb module.

Recreating the Construction with Blurb Modules

To begin out, add a blurb module to the principle column.

Next, remove the title from the blurb module and add the body content material subject material.

Permit the icon chance inside the image and icon settings, and then make a choice the leaf icon for the principle blurb.

Next, switch to the design tab and open the Image & Icon settings. Set the icon color, image/icon width, and image/icon alignment.

• Icon Color: #c2beaa
• Image/Icon Width: 32px
• Image/Icon Alignment: Left

In the end, set the text color and alter the street height inside the body text settings.

• Body Text Color: #293b45
• Body Line Best: 1.8em

Repeat the steps to recreate all 3 sections.

Blurb Animation

Now that each phase is laid out the use of a blurb, we can practice our animation sorts. For this structure, we will create a simple fade animation affect mixed with an icon animation. Open the Animation settings inside the Design tab, then make a choice the fade animation style for the principle blurb.

Next, set the animation settings as follows:

• Animation Duration: 700ms
• Animation Pace Curve: Ease-In-Out
• Image/Icon Animation: Bottom To Top

Prolong the animation settings to the other two blurb modules inside the phase.

After all, add some lengthen to the second and third module animations.

• Animation Prolong for Blurb 2: 200ms
• Animation Prolong for Blurb 3: 400ms

Final Outcome

And that is the total design with the fade animation and bottom-to-top icon animation.

Final Outcome

Let’s take another take a look on the general blurb animation designs.

Blurb Animation 1: Slide Animation

The main animation uses a slide-left animation style.

Blurb Animation 2: Flip Animation

This animation uses a flip-style animation.

Blurb Animation 3: Bounce Animation

In this animation, the blurbs have a bounce-up animation style performed.

Blurb Animation 4: Fade Animation

After all, the fourth animation features a fade animation affect.

Final Concepts

Divi’s blurb module can be used to creatively blow their own horns your products and services and merchandise or highlight key problems in your internet web page. Additionally, by means of together with animations in your design, you’ll emphasize the blurbs and draw your shopper’s eye in opposition to that content material subject material. In this tutorial, we covered merely 4 possible choices for the way in which you’ll animate your blurb module; then again, there are endless designs you’ll reach with Divi’s design possible choices and the customizability of the animation settings. For added on the blurb module, check out this tutorial: Find out how to Get Ingenious together with your Blurb Icon Background in Divi.

Have you ever ever performed animation sorts to Divi’s blurb module in your designs? Let us know inside the comments!

The put up 4 Tactics to Animate Your Divi Blurb Module gave the impression first on Sublime Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more