Flip Box
How to Configure and Style Flip Box #
Readers will leave your website unless you give them a reason to stay. You can earn their attention by adding Flip Box which adds a playful vibe to your website. This element is the right choice in terms of adding suspense to your content. You can add action to any boring content with Flip Box.
Flip Box lets you display nicely animated Flip Boxes to highlight any content inside your page with plenty of styling options.
How to Activate Flip Box #
To use this Sastra Addons element, find the ‘Flip Box‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Flip Box’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are done with step 1, this is the basic layout you are going to view.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will find the Front, Back & Settings.
Front #
From the ‘Front’ section, you can change Icon type, Title and Trigger (Box and Hover), you can individually change your ‘Front’ Content.
You can also choose an Icon Type out of these three: None, Icon and Image. ‘Icon’ is set in the default settings. You can then change it to your preferred icon.
If you choose ‘Image’ as ‘Icon Type’, you will view more options such as ‘Image’ and ‘Image Size’.
Back #
Under this section, all similar options to the ‘Front’ section. You can add your own link so that users will be redirected to that certain page.
You can individually change your ‘Back’ Content.
Settings #
From this ‘Settings’ tab, You can change Height, Animation, on 3D Animation with toggle, Animation direction (Left, Right, Top and Bottom), Animation Timing and Animation duration. If you want, you can even add border-radius as well.
Click to see Live Demo #
How to Style Flip Box #
Switch to the ‘Style’ tab to style all the features of Flip Box.
Front #
From this section, you change your ‘Front’ color, Distance, Typography, Alignment and background type. You can also add styling to your content padding, border and border radius as well.
Back #
From this section, all similar options to ‘Front’ section.
Final Outcome #
By following these mentioned steps and a bit more modifying & styling, your final outcome can look something like this.
This is how you can easily design animated flip boxes using Flip Box.
Getting stuck? Feel to Contact Our Support for further assistance.
