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.
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.
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.
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.
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.
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.
Step 5 — Finally, click the Update button.
Congrats! Now you’re able to add appealing flipboxes to your Elementor-built pages.