Divi’s blurb module makes it simple to show a picture or icon grouped with a heading and a few frame textual content. It’s a good way to spotlight some options or services and products and even reveal steps in a procedure. Throughout the blurb module settings, you have got complete keep watch over over the styling and will even upload distinctive animations to the blurb modules to lend a hand them stand out for your web page.

On this educational, we can display you 4 other ways you’ll observe animation results on your blurb module. In the event you’re searching for some way so as to add some motion on your web page design with Divi, this educational is for you.

Let’s get began!

Sneak Peek

Here’s a preview of what we can design.

Blurb Animation 1: Slide Animation

Blurb Animation 2: Turn Animation

Blurb Animation 3: Leap Animation

Blurb Animation 4: Fade Animation

What You Wish to Get Began

Sooner than we start, install and activate the Divi Theme and be sure you have the newest model of Divi for your web page.

Now, you are prepared to begin!

4 Techniques to Animate Your Divi Blurb Module

Create a New Web page with a Premade Structure

Let’s get started through the use of a premade structure from the Divi library. For this design, we can use the Training Touchdown Web page from the Coaching Layout Pack. Start through including a brand new web page on your web page and giving it a name. Subsequent, make a choice the strategy to Use Divi Builder.

We can use a premade structure from the Divi library for this situation, so make a choice Browse Layouts.

Subsequent, seek for and make a choice the Training Touchdown Web page structure.

Make a choice Use This Structure so as to add the structure on your web page.

Now, we’re able to construct our design.

Blurb Animation 1: Slide Animation

For our first blurb animation educational, we’re going to use the content material within the My Products and services phase of this web page. On this phase, the carrier name and icon are displayed the use of blurb modules.

Since our content material is already in a blurb module, we will soar proper into including the animation. Open the settings for the primary blurb module for the profession teaching carrier, then navigate to the animation settings within the design tab. For this design, make a choice the slide animation genre.

With the slide animation genre decided on, we will additional customise the best way the animation seems to be and behaves. I’m atmosphere the animation course to the left, lowering the animation period a bit bit to 800ms, and atmosphere the animation depth at 35%.

Now, we need to observe the similar animation to the remainder of the blurb modules on this phase. To take action, merely click on the 3 dots within the Animation phase header, then make a choice Prolong Animation Types.

Subsequent, make a choice to increase the animation kinds to All Blurbs during This Phase, then click on Prolong to use the adjustments.

Now, all of the blurbs have the similar animation impact. Then again, I need to upload a bit lengthen to offer the animation a staggered impact and supply some visible difference between the blurbs after they load. Open the animation settings for the Lifestyles Training blurb, then set the Animation Extend to 150ms. By way of including this lengthen, the Lifestyles Training blurb will animate rather after the primary Occupation Training blurb, developing a pleasant not on time impact.

Subsequent, upload an Animation Extend to the 2 ultimate blurbs. For the 3rd blurb (Well being & Wellness), set the Animation Extend to 300ms.

For the overall Finance Training blurb, set the Animation Extend to 450ms.

Ultimate Consequence

Here’s the finished design with the slide-left animation.

Blurb Animation 2: Turn Animation

For the second one blurb animation, we can use the similar services and products phase and observe a flip-style animation to every blurb. Open the settings for the primary blurb and navigate to the Animation settings within the Design tab. Subsequent, make a choice the turn animation genre.

Set the Animation Route to Heart. Subsequent, set the Animation Depth all of the manner as much as 100%. Moreover, bump the Animation Beginning Opacity to 70%. After all, set the Animation Velocity Curve to ease.

Subsequent, lengthen the animation genre to all the blurbs within the phase.

Ultimate Consequence

Here’s the structure with the flip-style animation implemented to all of the blurbs.

Blurb Animation 3: Leap Animation

For the 3rd animation, let’s transfer directly to the Let’s Develop phase within the structure. The structure is made with symbol and textual content modules, so we’ll first must recreate the structure the use of blurb modules.

Recreating the Structure with Blurb Modules

Get started through including a brand new blurb module to the structure.

Then, alter the content material to check the unique instance.

• Name: Being Glad
• Frame: Lorem ipsum dolor take a seat amet, consectetur adipiscing elit. Donec sed finibus nisi, sed dictum eros.
• Symbol: coaching-35.png

Within the design tab, alter the next choices below the Name font settings.

• Name Font: Belleza
• Name Textual content Colour: #000000
• Name Textual content Measurement Desktop: 32px
• Name Textual content Measurement Pill: 16px
• Name Textual content Measurement Cellular: 15px

Subsequent, alter the frame textual content colour.

• Frame Textual content Colour: #000000

Repeat those steps to recreate all 4 sections with the blurb module, then delete the previous sections.

Blurb Animation

With our structure whole, we will upload our animation settings. Open the settings for the primary blurb and navigate to the Animation settings below the Design tab, then make a choice the Leap animation genre.

Subsequent, set the animation kinds as follows:

• Animation Route: Up
• Animation Period: 650ms
• Animation Velocity Curve: Ease-Out

Prolong the animation kinds to the opposite blurbs.

I need to upload a staggered lengthen to the animations for every blurb in order that the animations aren’t taking place concurrently. Set the next animation period for the blurbs.

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

Ultimate Consequence

Here’s the finished design with the jump blurb animations.

Blurb Animation 4: Fade Animation

For the overall instance, we’re transferring directly to the Why Make a choice Us phase of the Training Touchdown Web page template. The structure for the 3 blurbs is recently arrange the use of an icon module and a textual content module. We’ll get started through recreating the phase the use of a blurb module.

Recreating the Structure with Blurb Modules

To start, upload a blurb module to the primary column.

Subsequent, take away the name from the blurb module and upload the frame content material.

Allow the icon choice within the symbol and icon settings, after which make a choice the leaf icon for the primary blurb.

Subsequent, transfer to the design tab and open the Symbol & Icon settings. Set the icon colour, symbol/icon width, and symbol/icon alignment.

• Icon Colour: #c2beaa
• Symbol/Icon Width: 32px
• Symbol/Icon Alignment: Left

Finally, set the textual content colour and regulate the road top within the frame textual content settings.

• Frame Textual content Colour: #293b45
• Frame Line Peak: 1.8em

Repeat the stairs to recreate all 3 sections.

Blurb Animation

Now that every phase is laid out the use of a blurb, we will observe our animation kinds. For this structure, we can create a easy fade animation impact mixed with an icon animation. Open the Animation settings within the Design tab, then make a choice the fade animation genre for the primary blurb.

Subsequent, set the animation settings as follows:

• Animation Period: 700ms
• Animation Velocity Curve: Ease-In-Out
• Symbol/Icon Animation: Backside To Best

Prolong the animation settings to the opposite two blurb modules within the phase.

After all, upload some lengthen to the second one and 3rd module animations.

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

Ultimate Consequence

And here’s the overall design with the fade animation and bottom-to-top icon animation.

Ultimate Consequence

Let’s take some other have a look at the overall blurb animation designs.

Blurb Animation 1: Slide Animation

The primary animation makes use of a slide-left animation genre.

Blurb Animation 2: Turn Animation

This animation makes use of a flip-style animation.

Blurb Animation 3: Leap Animation

On this animation, the blurbs have a bounce-up animation genre implemented.

Blurb Animation 4: Fade Animation

After all, the fourth animation includes a fade animation impact.

Ultimate Ideas

Divi’s blurb module can be utilized to creatively show off your services and products or spotlight key issues for your web page. Moreover, through including animations on your design, you’ll emphasize the blurbs and draw your person’s eye towards that content material. On this educational, we coated simply 4 choices for the way you’ll animate your blurb module; alternatively, there are never-ending designs you’ll reach with Divi’s design choices and the customizability of the animation settings. For extra at the blurb module, take a look at this educational: How to Get Creative with your Blurb Icon Background in Divi.

Have you ever implemented animation kinds to Divi’s blurb module to your designs? Tell us within the feedback!

The submit 4 Ways to Animate Your Divi Blurb Module gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more