Back to contents

How to display services using the flipbox created with JetElements Animated Box widget

This tutorial reveals the process of using JetElements widget which is a part of a huge JetElements widgets set.

With the Animated Box widget of JetElements plugin, you will be able to present information in an attractive way in a flipbox form.

Animated Box widget

Creating and editing a two-sided flipbox

Step 1 — Firstly, open the page where you need to add a flipbox with Elementor editor. Secondly, find Animated Box widget among other widgets in Search panel on the left and drag it to the section.

Animated Box widget

Step 2 — Then, proceed to customize the Content, Style and Advanced blocks, where you can adjust a variety of settings of the Animated Box widget. Open the Content block and change the content’s settings of Animated Box.

Step 3 — Fill the front side of the flipbox with information which you want to display. You can choose the Content Type: default (determining vavailable options in Elementor) or the template (applying the certain template). Set the needed icon, which will be shown above the title of the animated box’s content. Besides, you can specify the title and add the subtitle text if it is needed. If you want to share an additional note about the services you can also type it in the Description field.

front side settings

Step 4 — Designing the back side of the flipbox is available in Back Side Content area. You can select a fitting icon, style up the title and the subtitle, the description using HTML tags to separate lines and define quotes, etc.
Additionally, on the back side there is the special feature – a clickable button, which isn’t displayed on the front part of the widget.

back side content settings

Step 5 — Furthermore, you can set the height of the flip box. Also, it is possible to apply a certain switch type and a spectacular animation effect to the widget in the Settings block. In order to do it just choose one of the multiple types and effects from the dropdown. After that, set the HTML tags to use for the title and the subtitle.

settings block

Styling up a flipbox

Moreover, you can customize the appearance of the widget as a whole and the included separate elements in Style block.
Step 1 — The General unit represents the general settings available for the widget, like padding, margin, the box’s height, background type to use for the box, etc.Also, you can adjust overlay, order and toggle button.

general style settings

Step 2 — Go ahead to style up such elements as an Icon, the Title, the Subtitle and Description. You can switch customizing settings for front and back sides.

Step 3 — Just click the Back mode to proceed to customizing the back side of the Animated Box widget. Set the Color, the Background Color, the responsive Margins, Paddings, specify an Alignment of the items.

Step 4 — Style up the Action Button by setting its Alignment, Icon Margin, Text Color, Padding, Box Shadow, etc.

action button style settings

Step 5 — Finally, click the Update button.

Congrats! Now you’re able to add appealing flipboxes to your Elementor-built pages.