Today we’ll be doing a step by step tutorial on how to create a Flipbox Effect In Divi without coding. Creating Flipbox effect in Divi isn’t easy as it requires some coding and it’s really difficult for novice user, and that’s why Divi Supreme developed this Divi creative module called as Divi Flipbox Module. We’ve made it very easy to create Flip boxes in Divi with just a few steps. There are many Flipbox animation to choose from as well.
Why use Flipbox your Divi Design?
It’s one of the best way to create Call-to-Action in Divi with styles. Not only that, the Flip Box module makes your content more interesting with an interactive before and after effect.
Let’s start creating a Flipbox Effect in Divi!
First of all, Open up the Visual Builder and create a 3 column row or any preferred column row of your choice.
In the first column, insert the Supreme Flipbox module.
Once you’re done with that, It’s now time to create a Flipbox animation. Click on the + Add New Item button to add a new flip box item. Here you can enter your Title, Subtitle and Description. You can do the following in the Text panel.
Now go under the Image & Icon tab and enable the use of Icon(You can use Image you’ve got an image to use) and select your desired Icon from Divi’s Icon Library. We’ve selected the following Icon
Moving on to the next one as we’re done with that It’s time to make some design changes to the front side of the Flipbox. Under the Design tab, open up the Text Panel and change the alignment of the text to the Center.
Now open up the Image & Icon Panel and here you can make design changes to the Icon. We’ve made the following changes:
- Icon Color – #8300e9
- Use Icon Font Size –> Icon Size: 60px
Now go to the Title Panel and make some design changes to the Title text Panel:
- Title Heading Level – H1
- Title Font – Montserrat
- Title Weight: Bold
- Title Text Color: #000
So now you can move on to the Body Text panel and make these changes:
- Body Font: Montserrat
- Body Text Size: 13px
We’re literally done with that and now It’s time to add some extra design to the Card with Corner Radius and Box Shadow. You can go to Border Panel and add some Corner Radius as 10px and now go to Box Shadow and add Shadow Like this:
- Vertical Position – 15px
- Blur Strength – 65px
- Shadow Color – rgba(0,0,0,0.12)
Now the front side of the card is ready and now it’s time to start working on the Back side of the Flip box, click on the Back icon on the top left corner to go back to the main area and then duplicate the Flip card by clicking on this Icon. We are duplicating because we wanted to same style on the Back side of the Fiip box.
By clicking on the Icon you’ll see another Flipbox item. Please note that we need to have only Two Flipbox items as the Flipbox automatically recognises the first card as the Front Side and the second card as Back Side to avoid problems. Now open up the second item settings and change your text here to whatever you want.
And we’re going add a button here as well for this go to Button Panel under the Content tab and add some text to the button and enter the URL for the button here
Now go to the Design tab and open up the Button panel to design our button. You’ll have to enable the switch Use Custom Styles for the button and you can then easily design your button the same way you design buttons in Divi.
Anyway, we’ve made these changes to the button:
- Button Text Size – 18px
- Button Text Color – #fff
- Button Background – #8300e9
- Border width – 0px
- Border Radius – 3px
- Button Font – Montserrat
- Disable switch – Show Button Icon
- You can also setup box shadow for the button
Alright we’re done with both Card Items, now come back to main settings and open up the Design tab and from there go to Sizing –> Height and enter 330px here.
Tips when using the Divi Flipbox Module. Try to set your height for all responsive devices. Flipbox requires a height in order to work properly. If you’re seeing your content overflowing or going out of the box, try increasing the height of the flipbox under Sizing Tab.
Now time for the Animations, we’re going to now play with animation for the flip box for this go to Animation and choose your Animation Type and Effect from here you also have an option called as 3D Effect to add some 3D rotation to the Flip box when flipped. We’ll show you every animation below.
Animation demo #1
Animation Type = Flip
Flip Effect = Flip Right / Flip Down
Web Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Powerful Site
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Logo Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
For Business
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Animation demo #2
Animation Type = Flip
Flip Effect = Flip Right / Flip Down
3D Effect = Enabled
Web Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Powerful Site
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Logo Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
For Business
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Animation demo #3
Animation Type = Zoom In
Web Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Powerful Site
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Logo Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
For Business
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Animation demo #4
Animation Type = Zoom Out
Flip Effect = Zoom Out / Zoom Out Up
Web Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Powerful Site
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Logo Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
For Business
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Animation demo #5
Animation Type = Fade
Web Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Powerful Site
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
Logo Design
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
For Business
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
There you go and that’s how you can easily create Flip boxes in Divi with Divi Supreme Flipbox Module. Would you like to have this Free Layout on your page if you don’t want to go through every step then you may simply click on the button below to download this Design for Free. To use it simply extract the .Zip file and you’ll see a .json file now Drag and Drop it to Visual Builder and click on Import button to simply import it.
So guys, that’s it for today’s tutorial we hope that you find it helpful if so don’t forget to share your thoughts in the comment section below. We’d love to see what you guys think about it.
How to access the Divi Flip Box Module
The Flip box module is also added to the Lite(Free) version of Divi Supreme but with only Flipping Animation available to you. if you want to have all the features of Flip Box Module then 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 Divi Flip Box module in the comments section below.
Or try out the Divi Supreme Lite
Divi Supreme Lite Offers 20 Modules and 3 Beautiful Extensions and using them you can easily extend your Divi website’s functionality.
Thanks everyone at Divi Supreme. Your Divi Supreme Lite package is amazing, especially for us newbies still learning coding, that would make our designing cool effects like these a very time consuming process. Also that this Lite package is completely free is extremely generous of you. I will be going pro with you once I start making money from my web designs. Thanks again you guys and gals rock !!