Cyber Monday Sale Ends in

0Days

0Hours

0Minutes

0Seconds

Buy Lifetime Membership
×
Create Divi blurbs with advanced flip box

Nov 12, 2019 | Divi Resources

Creating Divi Blurbs with Advanced Flip Box: Part 1

In this blog post, we’re going to discuss about Advanced Flip Box module’s layout 1 and its features. Plus, we will also create some awesome Divi flip boxes using the same Divi blurb layout of this new module of Divi Blurb Extended plugin.

Advanced flip box module

Advanced Flip Box: Layout 1 and its all features

In the last post, we discussed that layout 1 of Advanced Flip Box module allows user to create stylish Divi flip boxes that can animate in four directions: Top, Bottom, Left, and Right. In addition to the flip directions, user can also customize the background with color, image or gradient. Just like the below Divi blurb examples.

Advanced Flip Box layout 1

Similarly, we will create awesome blurb boxes in this blog post using every option. So, you can use new Advanced Flip Box module effectively while creating your own blurb boxes.

Step 1: Some requirements

Before you start making blurb boxes, make sure you’ve updated the Divi Blurb Extended plugin and Divi theme. In most cases, this new module will work in earlier version of Divi theme. But for best practices, try to update your Divi theme to Divi 4.0.

Step 2:

Select your page where you want to create blurb boxes. And go to the Front End builder for engaging user experience while creating blurb boxes using Advanced Flip Box module.

Step 3:

First, insert a regular section, then choose row with 3 columns. After adding the row section, you’ll get insert module pop up. And from this setting, add Advanced Flip Box module, you’ll get it in 2nd column of 1st row of Divi module settings.

Inserting advanced flip box module

After adding the new Advanced Flip Box module, we will get Advanced Flip Box settings.

Step 4: More on Advanced Flip Box settings

Select Layout: layout 1

Flip Direction: Top

Advanced flip box module content settings

Keep 3D Depth Effect as “Yes” for 3D visual representation of the Divi flip box. And for Brandishing our blurb box we can check “Shake on flip” to Yes but in this case leave it untouched. This option helps Flip Box swing back and forth after the flip.

Flip Speed: The speed limit for flipping a blurb box is unto 10000 ms. In our case, we will set it 800 ms. And make sure you’ve not checked the “Shake on Flip” option.

Flip Box Content

Here, we have two options. One for Front content and one for Back Content. Give your Flip Box Front title and Content (if needed).

Flip box content front content settings

In Back content settings, we get extra customization. Just like the blog editor.

Flip box content back content settings

Flip Box Element Settings

Again we get two options. For both Front and Back side of the Flip Box.

Flip box front element settings

Here we can choose either Icon or Image. Check “Use Icon on Front” option. Same for the Back Elements settings.

Flip box back elements settings

In Back Elements settings, check on Display Button on Back and fill up the required details.

Divi Flip Box Background

Leave front background empty. And for back side choose color code: #AE1AE7

Divi flip box background color settings

Leave link, Background and Admin label settings untouched and move to the Design sub settings.

Step 5: Design setting of Advanced Flip Box module

Front Image/Icon Style

Set Icon color to #AE1AF7. And Top as the Image/Icon placement.

Front image/icon placement setting

Check Icon Font size and set it to 52px. Leave Style Icon untouched. Because it will place the icon in three styles: Square, Circle and Hexagon.

Back Image or Icon Style

Back image or icon style setting

Keep placement Top and choose color code #FFFFFF. Check “Use Icon Font Size” and set it to 40px.

Leave Style Icon untouched.

Front Text Style

General = Center

General front text style

Title Front Text Style

Title front text style

Set Title Heading level = H4

Title Font= Montserrat 

Leave Title Font Style untouched

Text Color = #333333

Title text settings

Set Title Text Size= 24px

Title Letter Spacing = 0px

And Title Line Height = 1em. Leave Title text shadow untouched.

Title Content Style = None

Back Text Style 

General Text Alignment = Left

General text alignment

Title

Heading Level = H4

Title Font and Weight = Montserrat, Medium

Title Text Color = #FFFFFF

Text Size = 16px

Title letter Spacing = 0px

Title Line Height = 1em

Content Back Text Style

Back text style content setting

Body Font and Weight = Montserrat, Medium

Body Text Color = #FFFFFF

Text Size = 14px

Letter Spacing = 0px

Body Line Height = 1.7em

Step 6: Back Button Style
Back button styling

Check “Use Custom Styles For Button” as “Yes”.

Button Text Size and Color = 16px and #FFFFFF

Back button border styling

Set Border Width and Radius as 0px.

Show button icon option

Use button font as Montserrat and Font weight as medium. Don’t forget to check “Show Button Icon” as Yes, and unchecked the “Only Show Icon on Hover For Button”.

Divi flip box back button styling

Set Button Icon Placement “Right” and Alignment “Left.”

Button Margin Left = -1em 

Button margin setting
Step 7: Front Box Style

Front Content Alignment = Center

Front Rounded Corners = 10px for Top Left, Right and Bottom Right Corners.  And 62px for Bottom left corner.

Front box styling

Front Border Styles = Front Border Width with 26px

Border Color = Transparent

Border Style = Solid

Box Shadow = Choose 2nd option

Divi flip box front box styling
Step 8: Front Box Style
Divi flip box back box style

Back Content Alignment = Center

Back Rounded Corners = 10px for Top Left, Right and Bottom Right Corners.  And 62px for Bottom left corner.

Box shadow options

Border Color = #333333

Back Border Style = Solid

Box Shadow = None

Step 9: Sizing and final touch
Advance flip box sizing setting

Content width = 550px

Min Height = 290px

Width = 102%

Max Width = 124%

Now, after following all these steps. Go to Row section settings. And in Design menu, select sizing. Check ” Use Custom Gutter Width” as “Yes”. In addition to this step, check “Equalize Column Heights” as “Yes”, too.

Column height setting

Save settings, and congratulate yourself because you’ve successfully created a new and beautiful blurb box using all new Advanced Flip Box module.

Advanced Flip Box layout 2

If you haven’t purchased the Divi Blurb Extended plugin, then do it now because it’s so easy to create Divi blurbs with this plugin.

Divi Extended Cyber Monday Sale
Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Start a Travel Blog with WordPress and Divi AI

How to Start a Travel Blog with WordPress and Divi AI

A travel blogger can earn $1,000,000+ annually! Don’t believe it? Watch out for Nomadic Matt, an aspiring name in travel blogging. This income includes his nomad journey blogs and New York Times Best Selling Books. Matt’s empire doesn’t build in a day, he has...

Divi Extended Cyber Monday Sale
Cyber Monday Popup