Using Divi’s Fold Animation to Make Blurbs Bloom

Welcome to part 4 of this 6 part series that will teach you how use Divi’s new Animation options to design awesome page sections. I’m going to be walking you through how to build the different sections of our live demo page in order to show you techniques for adding animations to your website. The Animation features truly are fun and easy to use. And with the Visual Builder, you can see your creation come to life every stage of the way. Come and join me as we explore the power of Divi animations.


In our last post, I showed you a few creative ways to design and animate 4 blurb modules orgainized for a step by step process.

Today, we are going to be building Section 6 of our animation demo page. This section showcases some great design and animation for displaying featured products or downloads. The use of color and the blooming effect of the animation on those blurb modules really make the section stand out.

Let’s dive in!

Here is a Sneak Peek of What We Will Be Building in Today’s Post

animation

Using Divi’s Fold Animation to Make Blurbs Bloom

Subscribe To Our Youtube Channel

Building Section 6

Add and Customize Your Section

Using the Visual Builder, Let’s start by adding another regular section to our layout. Then add a three column (one-half one-fourth one-fourth) row to your section.

animation

Before we add our first module, go to the section settings and update the following:

Under the Content tab…

Background Color: #00252d

animation

Under the Design tab…

Custom Padding: 80px Top, 80px Bottom

Save Settings

Add a Header Using the Text Module

Now let’s go back to our three column row and add a Text Module in the left column. Update the Text Settings as follows:

Under the Content tab…

Add the following h1 header in the text tab of the content box:

<h1>Build Like You Mean It</h1>

animation

Under the Design tab…

Header Font: Lato, Bold (B)
Header Font Size: 38px
Header Text Color: #ffffff
Header Line Height: 1.3em

NOTE: Because our content has an h1 header, only the header text options will work to style it.

Custom Margin: 20px Bottom

Animation Style: Slide
Animation Direction: Left
Animation Intensity: 16%

animation

NOTE:This animation gives the header a slight slide to the left. The key here is to give it a lower intensity so that the slide doesn’t cover as much ground or take too long to complete.

Save Settings

Add Text Using Another Text Module

Normally, you would probably just go ahead and add the rest of your text under the h1 header in the same text module. But since we want to add a different animation effect to the h1 header and the text under it, we will need to create another text module. Go ahead and add a text module under the one you just created and update the settings as follows:

Under the Content tab…

Content: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.”

Under the Design tab…

Text Color: Light
Text Font Size: 18px
Text Text Color: rgba(255,255,255,0.66)
Text Line Height: 1.9em
Custom Margin: 40px Bottom

Animation Style: Slide
Animation Direction: Left
Animation Intensity: 8%

NOTE: Notice how the animation settings for this text has a slightly lower intensity (8%) than the header text above it (16%). That means that it will appear to be moving faster because it is traveling less distance at the same duration. Even though both text modules take the same amount of time (duration) to complete the animation, because they start at a different intensity levels, they will move at different speeds. It is like two racers beginning and ending the race at the same time with one of them having a significant head start.

animation

Save Settings

Add a Button

Now let’s add a Button Module below the two text modules in the left column. Then update the settings as follows:

Under the Content tab…

Buttom Text: Download all
Button URL [enter url]

Under the Design tab…

Use Custom Styles for Button: YES

Button Text Size: 15px
Button Text Color: #01254c
Button Background color: #ffcd1c
Button Border Width: 0px
Button Border Radius: 65px
Button Letter Spacing: 1px
Button Font: Bold (B), Uppercase (TT)

animation

Custom Padding: 10px Top, 30px Right, 10px Bottom, 30px Left

Animation Style: Slide
Animation Direction: Left
Animation Intensity: 16%

NOTE: This animation effect matches the first text module animation.

animation

<Under the Advanced tab…

Let’s not forget to add that wonderful glow effect using the box shadow css property. Find the Main Element box under Custom CSS and add the following:


box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);

Save Settings

Add You First Blurb Module

That’s it for our left column. Now let’s add a Blurb Module to the middle column (which is the first one-fourth column).

animation

Update the settings as follows:

Under the Content tab…

Title: Divi
Use Icon: YES
Icon: [select icon]

Background Gradient Colors: #8b56ff, #5d3dff
Gradient Type: Linear
Gradient Direction: 140deg

Under the Design tab…

Icon Color: #ffffff
Text Color: Light
Text Orientation: Center
Header Font: Bold (B), Uppercase (TT)
Header Letter Spacing: 10px

Custom Margin: 12% Bottom
Custom Padding: 40px Top, 30px Right, 30px Bottom, 30px left

Animation Style: Fold
Animation Direction: Left
Animation Delay: 200ms

NOTE:The animation direction of the each of the blurb modules will be different. This first one unfolds to the left.

Under the Advanced tab…

Here is where we can add that glow effect to our module and indent the header just a tad.

Add the following CSS to the Main Element box:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);

Add the following CSS to the Blurb Title box:

text-indent: 10px;

animation

Save Settings

Duplicate the Blurb Module to Build the Next Three Blurbs

Now that we have our first Blurb Module designed and animated, we can duplicate the module to create the remaining blurbs.

Hover over the Blurb Module and click the duplicate module icon. In the new duplicated module that appears below update the settings as follows:

Under the Content tab…

Title: Bloom
Icon: [select new icon] Background Gradient Colors: #ff56f9, #c43dff

animation

Under the Design tab…

Animation Direction: Down

NOTE: The folding animation has a down direction on this blurb.

animation

Under the Advanced tab…

Replace the CSS in the Main Element box with the following:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);

Save Settings

Make another duplicate of the blurb module and drag that duplicate to the far right column. Then update that Blurb Module with the following settings:

Under the Content tab…

Title: Extra
Icon: [select new icon] Background Gradient Colors: #56ffda, #38d5ea

Under the Design tab…

Animation Direction: Up

NOTE: The folding animation has a up direction on this blurb.

animation

Under the Advanced tab…

Replace the CSS in the Main Element box with the following:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);

Make another duplicate of the blurb module you just updated in the right column so that it appears directly underneath. Then update that Blurb Module with the following settings:

Under the Content tab…

Title: Monarch
Icon: [select new icon] Background Gradient Colors: #f2743a, #ff5656

Under the Design tab…

Animation Direction: Right

NOTE: On this blurb the animation unfolds to the right.

Under the Advanced tab…

Replace the CSS in the Main Element box with the following:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
NOTE: Since these 4 blurbs will all share the same style and delay, this creates a reverse flower-blooming effect as all 4 of the modules will fold out in different directions.

animation

Save Settings

Now let’s get the spacing right by updating your row settings as follows:

Under the Design tab…

Use Custom Width: YES
Custom Width: 1366px
Use Custom Gutter Width: YES
Gutter Width: 2

Custom Padding: 80px Top, 0px Right, 160px Bottom, 0px Left
Coumn 1 Custom Padding: 140px Top

Build the Second Row

Now we are ready to create the next row for our section. To speed things up, we are going to be duplicating and copying design elements from our previously designed row and modules.

First let’s add a new one-column row to our section. Then update the row settings with the following:

Use Custom Width: YES
Custom Width: 1366px
Use Custom Gutter Width: YES
Gutter Width: 2

Save Settings

Next copy the first text module in the first row you created that contains the h1 title. Then update the settings as follows:

Under the Content tab…

Replace the current h1 tag with the following:

<h1>Don't Settle for Less</h1>

Under the Design tab…

Text Orientation: Center
Animation Style: Flip
Animation Intensity: 70%

Save Settings

Next copy the button module from the previous row and paste it under the text module you just finished updating in the second row. Then update the button module as follows:

Under the Content tab…

Button Text: Join Today

Under the Design tab…

Button Alignment: Center

Animation Style: Flip
Animation Intensity: 70%

NOTE: The button and the header above it both have the same animation.

animation

Save Settings

Now for our last row. Create a new row with a one-half one-half column structure. Before adding your modules, update the row settings as follows:

Under the Design tab…

Use Custom Gutter Width: YES
Gutter Width: 2

Save Settings

Next, copy the purple “Divi” Blurb module from your previous row and paste it into the left column of your new row. Then update the following settings:

Under the Content tab…

Title: Builder
Icon: [select new icon] Background Gradient Colors: #ff568e, #ff3d5d

NOTE: The animation direction should already be “left” if you copiied the correct blurb module. If not make sure it is.

Under the Advanced tab…

Replace the CSS in the Main Element box with the following:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);

Save Settings

Next copy the bluegreen “Extra” blurb module at the top of the far right column in the first row you created. Then paste it in the right column of your new third row.

Then update the blurb settings as follows:

Under the Content tab…

Title: Serene
Icon: [select new icon] Background Gradient Colors: #3da4ff, #385eea

NOTE: The animation direction should already be “up” if you copiied the correct blurb module. If not make sure it is.

Under the Advanced tab…

Replace the CSS in the Main Element box with the following:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);

Save Settings

That’s it.

Bonus: Download These Sections for Easy Import

As a bonus perk we’ve packaged the sections built in today’s tutorial into a free download that you can get using the email opt-in form below. Simply enter your email and the download button will appear. Don’t worry about “re-subscribing” if you’re already part of our Divi Newsletter. Re-enter your email will not result in more emails or duplicates. It will simply reveal the download.

Enjoy!

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.


You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To use these downloads, start by locating the zipped file called Animation_Effects_Part_4.zip in our downloads folder. Unzip it to reveal the following imports.

Animation Effects Part 4 (section 1).json

Animation Effects Part 4 (section 2).json

Navigate in your WordPress Admin to Divi > Divi Library > Import & Export. When the portability modal pops up, click the import tab and the button labeled choose file.

Select the json file you prefer and click “Import Divi Builder Layouts”. Once the import is complete navigate to the post or page you would like to add one of the above sections to.

Activate the visual builder. Navigate to the part of the page you would like to add one of the above sections to. When you click the add new section icon, you will be presented with the option to “Add From Library”. Choose this option and select the layout you want.

add-section-from-library

Wrapping Up

I hope you enjoyed building this stunning section together. The combination of color, glowing shadows, and creative animation make this an outstanding layout for showcasing your own downloads or products.

Coming Up

In part 5 I’m going to be showing you how to successfully incorporate the Roll animation style to mobile phones within your sections.

animation

I look forward to hearing from you in the comments below.

Cheers!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post Using Divi’s Fold Animation to Make Blurbs Bloom appeared first on Elegant Themes Blog.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: