This Flipbox Addon styling guide helps you style cards and choose a layout that fits your content. The plugin ZIP for version 2.1.7 includes Ultimate Flipbox, Post Flipbox, and Story Flipbox widgets. Their controls overlap, but some settings are widget-specific, so use the labels visible for the widget you selected.
Open the Flipbox Widget in Elementor
- Open Elementor Editor.
- Select the relevant Flipbox widget.
- Open the Content tab when changing presets or layout settings.
- Open the Style tab when changing appearance.
Content → Layout Settings → Select Preset
- Open Elementor Editor.
- Select the relevant Flipbox widget.
- Open the Content tab.
- Expand Layout Settings.
- Locate Select Preset.
- Choose Default, Simple, Bold, or Clean.
- Read the overwrite warning: selecting a preset replaces the widget’s current settings.
- Preview the front of the card.
- Preview the back of the card.
- Click Update to save the page.
Style → Container Box Settings → Front/Back Background
- Open Elementor Editor.
- Select the relevant Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- For Ultimate Flipbox or Post Flipbox, locate Background Type.
- Set Background Type to Simple, Gradient, or Image.
- For Story Flipbox, locate Front Background Color instead of expecting the same Background Type options.
- Select the Back tab.
- Configure the back-side background using the controls available for that widget.
- If using an image background in Ultimate Flipbox or Post Flipbox, open the overlay controls only after selecting Image.
- Preview the front side.
- Preview the back side.
- Click Update to save the page.
Style → Title Style, Description Style & Icon Style
- Open Elementor Editor.
- Select the relevant Flipbox widget.
- Open the Style tab.
- Open Title Style.
- Adjust the available front or back title typography controls.
- Open Description Style.
- Adjust the available front or back description typography controls.
- Open Icon Style.
- Adjust the icon appearance controls available for the selected widget.
- Open Button Style if that section is available for the selected widget.
- Preview the result.
- Click Update to save the page.
Style → Container Box Settings → Front/Back Border & Padding
- Open Elementor Editor.
- Select the relevant Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Locate Front Border.
- Enable the custom setting for Front Border to expose its border controls.
- Locate Front Padding.
- Adjust Front Padding for the front side.
- Select the Back tab.
- Locate Back Border.
- Enable the custom setting for Back Border to expose its border controls.
- Locate Back Padding.
- Adjust Back Padding for the back side.
- Locate the element-level Padding control for the selected element, where available.
- Locate the element-level Margin control for the selected element, where available.
- Preview the front side.
- Preview the back side.
- Click Update to save the page.
Content → Layout Settings → Layout Orientation
- Open Elementor Editor.
- Select the relevant Flipbox widget.
- Open the Content tab.
- Expand Layout Settings.
- Locate Layout Orientation.
- Choose Vertical for a grid.
- When using Vertical orientation, adjust Number of Columns for the available responsive breakpoints.
- Choose Horizontal for a carousel.
- When Layout Orientation is Horizontal, locate Slides Per View.
- Adjust Slides Per View for the current breakpoint.
- Locate Horizontal Slides Gap.
- Adjust Horizontal Slides Gap; these controls appear only in Horizontal orientation.
- Preview the layout.
- Click Update to save the page.
Preview the Flipbox and Click Update
- Open Elementor Editor.
- Select the relevant Flipbox widget.
- Open Elementor’s Responsive Mode from the top toolbar.
- Preview the card at Desktop width.
- Preview the card at Tablet width.
- Preview the card at Mobile width.
- Check the front-side content.
- Check the back-side content.
- Check the card spacing.
- Check text wrapping.
- Check carousel navigation if present.
- Click Update to save the page.
- Open the published page.
- Verify the result on the published page; editor preview alone is not a live-device test.
Choose a styling topic
- Apply a Flipbox Preset — start with Default, Simple, Bold, or Clean.
- Style Flipbox Backgrounds — set a base color or image where supported.
- Apply Background Gradients and Configure Flipbox Overlays — adjust gradient or image-overlay controls where available.
- Style Flipbox Typography, Configure Flipbox Icons, Customize Flipbox Borders, and Adjust Flipbox Spacing.
- Configure the Flipbox Grid Layout, Configure the Flipbox Carousel Layout, and Test Flipboxes on Mobile.
A reliable styling workflow
- Select the relevant widget in Elementor and confirm which content and Style controls it exposes.
- Change one visual setting at a time, then preview both the front and back of the card.
- Check text contrast, spacing, navigation, and interaction at desktop and smaller breakpoints.
- Click Update to save your page, then inspect the published result.
Source verification is based on the version 2.1.7 plugin files. Live Elementor testing has not been performed as part of this documentation update.