Create blocks with flip functionality to reveal posts in a fun way. 

Using Flip Box  #

Make sure you have the Flip Box widget enabled from your Dashboard > Droit Addons > Elements.  

Step 1 #

Let’s start by searching the Flip Box widget from the left-hand side menu, and dragging the widget to your preferred section.

Elmentor page builder

Step 2 #

Now create as many flip boxes as you need from the column menu. Right-click on the column menu button from here you can create and duplicate or copy/paste DL for as many flip boxes you need.

Elementor page builder's column edit menu

Step 3 #

Make your flip box rotate vertical or horizontal from here.

Droit Flip Box widget's animated type menu

Step 4 #

Now to edit the content inside each box. For that click on each box and a menu will appear on the left-hand side of the screen, from here you can edit both the front part and back part of your flip box.

Let’s start with the front part, from here you can add image, icon, title, description, button text, and link.

Droit Flip Box widget's front content edit menu

Step 5 #

Same as before, now edit your back part content. You can add all the same things as the front part.

Droit Flip Box widget's back content edit menu

Step 6 #

Now to customize your front part icon, head over to the Style tab and start tweaking the values to your preference.

Droit Flip Box widget's front icon style edit menu

Step 7 #

You can do the same for your back part icon or give it a different look.

Droit Flip Box widget's back icon style edit menu

Step 8 #

From the front part style option, you can customize both your icon and content style for each front part of the flip box.

Droit Flip Box widget's front part style edit menu

Step 9 #

You can do all the same changes to your back part style or change it up for a different look.

Droit Flip Box widget's back part style edit menu

Step 10 #

You can further customize your button with typography, text color, background type and more.

Droit Flip Box widget's button style edit menu

Live Copy & Paste #

You can follow all the steps above and create your Flip Box section, or if you’re interested in skipping some steps, you can visit Flip Box widget’s live demo page and simply copy one of four preset styles from the Live Copy button. And paste it in your preferred section.

Droit Flip Box widget's live demo page
Elementor page builder's column edit menu

That’s it.

Powered by BetterDocs