How to create a Flipbox to Flip On-Click in Divi

Our Flipbox Module can be used to create beautiful looking Flip boxes in Divi with so many interactive animations and 3D effect. It will surely make your website look attractive. And the recently added feature to the Flipbox Module will make you say, “Wow, now I can Flip the Flipbox on-click rather than on-hover! How cool is this!”

And that’s what we’re going to see in this very quick tutorial. We’ll see how to flip the Flipbox on-click or on-button click.

Let’s Get Started

First of all, you’ll need to enable the Divi Builder on the page you want and insert the Divi Supreme Flipbox Module. You can follow this article to learn how to create Flipbox using our Flipbox Module.

Below we’ve created a standard Looking Flipbox with Icon and Text on Front with more Info on the back.

Currently, when you’ll Hover over it It will Flip. So let’s see how to Fip it On click. Open the Flipbox Module Settings -> Design -> Animation and change the Trigger Animation to Click.

And now If you’ll go to frontend and try to click on the Flipbox you’ll see It will flip on click like this

That looks pretty cool, right? You can change the content according to what you want. So let’s see how to flip the Flipbox on Button Click for this first we need a button on the front side of the Card. All you’ve to do is Open the Card Item Settings -> Button and simply add Button Text and URL

You can go to the Design tab -> Button to style the button. So now as we’ve successfully added the button now we’ve to change the Click On method for the Flipbox. Go to main settings -> Design tab -> Animation -> Click On and choose Button from the Dropdown.

And that’s it now when you’ll click on the Button the Flipbox will flip like this

That looks cool, right? And it’s a new and  creative way to showcase your content. Let us know what you think about this in the Comments Section below we’d love to hear from you.

Have a great day!

How to access the Divi Flipbox Module

The Flipbox Module is also included in the Lite/Free version of Divi Supreme but to get all the features of Flipbox like the one shown in the Tutorial, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today, and don’t forget to share your experience with the Flipbox Module in the comments section below.

 

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 18 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

4 Comments

  1. Stellio

    Great tutorial! I will be implementing this to some new sites for sure! Keep it up 😀

    Reply
    • Divi Supreme

      Hope you like it Stellio! with LOVE !

      Reply
  2. S Mishra

    Thank you for this awesome information. This blog helped me so much.

    Reply
  3. J Barman

    Thank you so much for this amazing guide! It is very rare to see so much valuable content.

    Reply

Leave a Reply to Stellio Cancel reply

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

Divi Supreme
Divi 5 is coming soon, and we are diligently converting all our Modules to the Divi 5 Infrastructure. Take a look at a Quick Demo →
Divi 5 is coming soon. Take a quick look at a demo of our modules in Divi 5.