Create Divi blurbs with advanced flip box

May 5, 2020 | Divi Resources

Creating Divi blurbs with Advanced Flip Box: Part 2

In this blog post, we’ll look at how to create flip boxes from the Advanced Flip Box module. We will use the layout 2 of the module to create interactive and appealing flip boxes. In the earlier post, we used the layout 1 to create some attractive flip box examples. If you want to learn how to use layout 1, then check out that post.

Now, without further, let’s make some exciting flip boxes.

Preview

Advanced Flip Box Layout 2 in motion

Before you start!

There are couple of things you need to do, to create flip boxes using the layout 2 of the Advanced Flip Box module.

  1. If you haven’t yet, purchase, install, and activate the Divi Blurb Extended plugin.
  2. Then, create a new page or edit an existing one where you want to display Divi blurbs.
  3. Deploy Divi Visual Builder
  4. And then choose the option “Build From Scratch”

After that, you will have a blank canvas to start designing in Divi.

Insert Row

This is the basic step required every time you want to create something in Divi Builder. For above flip box example, insert a 3 column row.

Insert row in Divi builder

Insert the module

Now add the Advanced Flip Box module in the first column of the row.

Advanced flip box module

Content

From the Flip Box Layout settings of the Content tab, chose layout 2.

From layout settings of the content tab choose layout 2nd

After choosing the layout, keep Flip Style as Fade, and input 900ms inside the Flip Speed input field.

Flip style and speed settings
Flip Box Content

Then, add front and back content of the flip box.

Add front and back content of the flip box
Choose Box Elements

After entering flip box content, choose what elements you want to display for your flip box on both the sides, front and back.

Flip box elements front side

Switch to Back Elements, and Check “Use Icon on Back” as “Yes,” and select one of the icon available.

Flip box elements back side

Then, to enable button on the back side of the flip box, check “Display Button on Back” as “Yes,” and input details as mentioned.

Flip box elements front side button settings
Add Flip Box Background

Background customizations of the flip box allows users to add color, gradient and an image behind content as well as other segments. In this case I’ve added color for both front and back of the flip box background.

Front Background Color: #101820FF

Back Background Color: #F2AA4CFF

Flip box background color setting

Design

Inside design tab of the flip box module, you get multiple options that make flip box even more beautiful and responsive.

Front Image/Icon Style

Here, you can customize your image or icon that you’ve used for the front flip box. This allows you to change placement of the image. Curve image corners, choose border styles, set image border width. And couple more options that brings charisma in presenting the image. Now, apply customization as mentioned.

Image/Icon Placement: Top

Front Image Rounded Corners: 60px

Front image or icon style

Image Border Width: 2px

Front Image Border Color: #F2AA4CFF

Flip box front image or icon style

Leave other settings as they are.

Back Image/Icon Style

This settings do exactly the same as above but for the back side of the flip box. For Back Image or Icon Style, perform customizations as follows,

Image/Icon Placement: Top

Icon Color: #06162F

And keep other settings untouched.

Front Text Style

This will allow you to make changes in the appearance of the text on the front side of the flip box.

General Text Alignment: Center

Title Heading Level: H4

Font: Berkshire Swash

Title Text Color: #F2AA4CFF

Body Font: Alike Angular

Font Weight: Bold

Body Text Color: rgba(255,255,255,0.67)

Flip box front text style

After applying these settings, your flip box would start to appear like the below screenshot.

Divi flip box
Back Text Style

We’ve already customized our front text style. Now, it’s time tweak back side text style of the flip box. And to do that, go to Back Text Style of the design tab, and perform following customization.

General Text Alignment: Center

Title Heading Level: H4

Font: Atma

Font Weight: Bold

Title Text Color: #06162F

Title Text Size: 32px

Letter Spacing: 1px

Body Font: Montserrat

Font Weight: Semi Bold

Body Text Color: rgba(255,255,255,0.67)

Divi flip box back text style
Back Button Style

Apply the following customization for the back button.

Use Custom Styles For Button: Check as “Yes

Button Text Size: 18px

Text Color: #FFFFFF

Button Background: #000000

Button Border Color: #000000

Font: ABeeZee

Font Weight: Bold

Flip box back button style

Show Button Icon: Check as “Yes

Select your desired button icon or look at the screenshot

Button Icon Color: #FFFFFF

Icon Placement: Right

Only Show Icon On Hover for Button: Check as “Yes

Button Alignment: Center

Left and Right Button Padding: 20px

Flip box back button padding setting
Front Box Style

To make flip box look even more attractive and interactive, we need to apply some more customization.

Front Content Alignment: Center

Front Rounded Corners: 30px

Box Shadow: Look at the screenshot

Shadow Horizontal Position: 0px

Shadow Color: #E09900

Divi flip box front box style
Back Box Style

Just like the Front Box Style, we need to tweak back-side of the flip box. This will make our flip box interactive from both angles. Therefore, apply the following tweaks as they are.

Front Content Alignment: Center

Front Rounded Corners: 30px

Box Shadow: Look at the screenshot

Shadow Horizontal Position: 0px

Shadow Color: #06162F

Flip box back box shadow style

After applying all these customization one by one, you’ll get the following flip box style.

Copy the layout to get preview design

To design similar flip box that shown in the preview, we have to copy the above flip box. You have to do it twice, then put it either side of the above flip box. Similarly to the following screenshot.

Divi advanced flip box

Now, apply following customization to achieve preview Divi flip box design. Similarly, as you did in the first place.

Left Flip Box Design

Flip Style: Zoom In

Flip Speed(in ms): 1100ms

Adjust Flip Box Front & Back Content. Such as title and content.

Adjust Flip Box Elements.

Back Image / Icon Style

Icon Color: #FFFFFF

Use Icon Font Size: Yes

Icon Font Size: 32px

Style Icon: Yes

Shape: Circle

Shape Background: #000000

Front Box Shadow Horizontal Position: -10px

Back Box Shadow Horizontal Position: -10px

Right Flip Box Design

Flip Style: Zoom Out

Flip Speed(in ms): 1100ms

Back Image / Icon Style

Icon Color: #FFFFFF

Use Icon Font Size: Yes

Icon Font Size: 32px

Style Icon: Yes

Shape: Circle

Shape Background: #000000

Front Box Shadow Horizontal Position: 10px

Back Box Shadow Horizontal Position: 10px

Now after these customization, you’ll get the final result of the flip box preview . Though, I’ve applied some customization to the center example of the layout.

Advanced Flip Box Layout 2 in motion

Summary

Above, I’ve shown you how you can create Divi flip box using the layout 2 of the Advanced Flip Box module. It’s part of the Divi Blurb Extended plugin that has options and layout to create flip box. And not only flip box, using this plugin you can also create custom Divi blurbs. So, if you want to design interactive and attractive blurbs and flip box for your Divi theme site, then go and try this plugin now!

Before you go, we want to know your views about this blog post. We also want to know that if you tried this plugin already, then what was your experience. Please share your thoughts in the comment section.

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 Choose the Right Divi Child Theme for Your Website?

How to Choose the Right Divi Child Theme for Your Website?

When we pick Divi to create a new website on WordPress, we make the best use of prebuilt Divi elements. The most preferred prebuilt Divi element which we always utilize are child themes. These Divi child themes allow you to create a professional business website or...

21 Rules of Designing a Website in 2025

21 Rules of Designing a Website in 2025

In 2021, we published an article with 33 effective tips on designing a website. Now, we're back with another rule for designing a website that you can follow in 2025 for any kind of website project. Combined, you'll have 54 rules for designing a website. With these...

How to Start Your Fashion Blog with Divi and WordPress

How to Start Your Fashion Blog with Divi and WordPress

Creating a fashion blog allows you to express your passion for style and initiate passive income. Fashion bloggers can earn from $10,000 to $50,000 monthly. Many fashion enthusiasts boost their revenue by collaborating with affiliate marketing programs, sponsoring...

Divi WooCommerce Extended