{"id":204,"date":"2026-10-17T14:16:25","date_gmt":"2026-10-17T14:16:25","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=204"},"modified":"2026-10-18T00:10:17","modified_gmt":"2026-10-18T00:10:17","slug":"styling-layout-responsive","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/styling-layout-responsive\/","title":{"rendered":"Presets, Styling, and Responsive Layouts"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Open the Flipbox Widget in Elementor<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the relevant Flipbox widget.<\/li>\n<li>Open the <strong>Content<\/strong> tab when changing presets or layout settings.<\/li>\n<li>Open the <strong>Style<\/strong> tab when changing appearance.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Content \u2192 Layout Settings \u2192 Select Preset<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the relevant Flipbox widget.<\/li>\n<li>Open the <strong>Content<\/strong> tab.<\/li>\n<li>Expand <strong>Layout Settings<\/strong>.<\/li>\n<li>Locate <strong>Select Preset<\/strong>.<\/li>\n<li>Choose <strong>Default<\/strong>, <strong>Simple<\/strong>, <strong>Bold<\/strong>, or <strong>Clean<\/strong>.<\/li>\n<li>Read the overwrite warning: selecting a preset replaces the widget&#8217;s current settings.<\/li>\n<li>Preview the front of the card.<\/li><li>Preview the back of the card.<\/li>\n<li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style \u2192 Container Box Settings \u2192 Front\/Back Background<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the relevant Flipbox widget.<\/li>\n<li>Open the <strong>Style<\/strong> tab.<\/li>\n<li>Open <strong>Container Box Settings<\/strong>.<\/li>\n<li>Select the <strong>Front<\/strong> tab.<\/li>\n<li>For Ultimate Flipbox or Post Flipbox, locate <strong>Background Type<\/strong>.<\/li><li>Set <strong>Background Type<\/strong> to <strong>Simple<\/strong>, <strong>Gradient<\/strong>, or <strong>Image<\/strong>.<\/li>\n<li>For <strong>Story Flipbox<\/strong>, locate <strong>Front Background Color<\/strong> instead of expecting the same <strong>Background Type<\/strong> options.<\/li>\n<li>Select the <strong>Back<\/strong> tab.<\/li>\n<li>Configure the back-side background using the controls available for that widget.<\/li>\n<li>If using an image background in Ultimate Flipbox or Post Flipbox, open the overlay controls only after selecting <strong>Image<\/strong>.<\/li>\n<li>Preview the front side.<\/li><li>Preview the back side.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style \u2192 Title Style, Description Style &#038; Icon Style<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the relevant Flipbox widget.<\/li>\n<li>Open the <strong>Style<\/strong> tab.<\/li>\n<li>Open <strong>Title Style<\/strong>.<\/li>\n<li>Adjust the available front or back title typography controls.<\/li>\n<li>Open <strong>Description Style<\/strong>.<\/li>\n<li>Adjust the available front or back description typography controls.<\/li>\n<li>Open <strong>Icon Style<\/strong>.<\/li>\n<li>Adjust the icon appearance controls available for the selected widget.<\/li>\n<li>Open <strong>Button Style<\/strong> if that section is available for the selected widget.<\/li>\n<li>Preview the result.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style \u2192 Container Box Settings \u2192 Front\/Back Border &#038; Padding<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the relevant Flipbox widget.<\/li>\n<li>Open the <strong>Style<\/strong> tab.<\/li>\n<li>Open <strong>Container Box Settings<\/strong>.<\/li>\n<li>Select the <strong>Front<\/strong> tab.<\/li>\n<li>Locate <strong>Front Border<\/strong>.<\/li><li>Enable the custom setting for <strong>Front Border<\/strong> to expose its border controls.<\/li>\n<li>Locate <strong>Front Padding<\/strong>.<\/li><li>Adjust <strong>Front Padding<\/strong> for the front side.<\/li>\n<li>Select the <strong>Back<\/strong> tab.<\/li>\n<li>Locate <strong>Back Border<\/strong>.<\/li><li>Enable the custom setting for <strong>Back Border<\/strong> to expose its border controls.<\/li>\n<li>Locate <strong>Back Padding<\/strong>.<\/li><li>Adjust <strong>Back Padding<\/strong> for the back side.<\/li>\n<li>Locate the element-level <strong>Padding<\/strong> control for the selected element, where available.<\/li><li>Locate the element-level <strong>Margin<\/strong> control for the selected element, where available.<\/li>\n<li>Preview the front side.<\/li><li>Preview the back side.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Content \u2192 Layout Settings \u2192 Layout Orientation<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the relevant Flipbox widget.<\/li>\n<li>Open the <strong>Content<\/strong> tab.<\/li>\n<li>Expand <strong>Layout Settings<\/strong>.<\/li>\n<li>Locate <strong>Layout Orientation<\/strong>.<\/li>\n<li>Choose <strong>Vertical<\/strong> for a grid.<\/li>\n<li>When using Vertical orientation, adjust <strong>Number of Columns<\/strong> for the available responsive breakpoints.<\/li>\n<li>Choose <strong>Horizontal<\/strong> for a carousel.<\/li>\n<li>When <strong>Layout Orientation<\/strong> is <strong>Horizontal<\/strong>, locate <strong>Slides Per View<\/strong>.<\/li><li>Adjust <strong>Slides Per View<\/strong> for the current breakpoint.<\/li><li>Locate <strong>Horizontal Slides Gap<\/strong>.<\/li><li>Adjust <strong>Horizontal Slides Gap<\/strong>; these controls appear only in Horizontal orientation.<\/li>\n<li>Preview the layout.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Preview the Flipbox and Click Update<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the relevant Flipbox widget.<\/li>\n<li>Open Elementor&#8217;s <strong>Responsive Mode<\/strong> from the top toolbar.<\/li>\n<li>Preview the card at <strong>Desktop<\/strong> width.<\/li><li>Preview the card at <strong>Tablet<\/strong> width.<\/li><li>Preview the card at <strong>Mobile<\/strong> width.<\/li>\n<li>Check the front-side content.<\/li><li>Check the back-side content.<\/li><li>Check the card spacing.<\/li><li>Check text wrapping.<\/li><li>Check carousel navigation if present.<\/li>\n<li>Click <strong>Update<\/strong> to save the page.<\/li>\n<li>Open the published page.<\/li><li>Verify the result on the published page; editor preview alone is not a live-device test.<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\">Choose a styling topic<\/h2>\n\n\n<ul class=\"wp-block-list\"><li><a href=\"\/docs\/flipbox-addon-for-elementor\/flipbox-presets\/\">Apply a Flipbox Preset<\/a> \u2014 start with Default, Simple, Bold, or Clean.<\/li><li><a href=\"\/docs\/flipbox-addon-for-elementor\/style-flipbox-backgrounds\/\">Style Flipbox Backgrounds<\/a> \u2014 set a base color or image where supported.<\/li><li><a href=\"\/docs\/flipbox-addon-for-elementor\/apply-flipbox-background-gradients\/\">Apply Background Gradients<\/a> and <a href=\"\/docs\/flipbox-addon-for-elementor\/configure-flipbox-overlays\/\">Configure Flipbox Overlays<\/a> \u2014 adjust gradient or image-overlay controls where available.<\/li><li><a href=\"\/docs\/flipbox-addon-for-elementor\/style-flipbox-typography\/\">Style Flipbox Typography<\/a>, <a href=\"\/docs\/flipbox-addon-for-elementor\/configure-flipbox-icons\/\">Configure Flipbox Icons<\/a>, <a href=\"\/docs\/flipbox-addon-for-elementor\/customize-flipbox-borders\/\">Customize Flipbox Borders<\/a>, and <a href=\"\/docs\/flipbox-addon-for-elementor\/adjust-flipbox-spacing\/\">Adjust Flipbox Spacing<\/a>.<\/li><li><a href=\"\/docs\/flipbox-addon-for-elementor\/configure-flipbox-grid-layout\/\">Configure the Flipbox Grid Layout<\/a>, <a href=\"\/docs\/flipbox-addon-for-elementor\/configure-flipbox-carousel-layout\/\">Configure the Flipbox Carousel Layout<\/a>, and <a href=\"\/docs\/flipbox-addon-for-elementor\/test-flipboxes-on-mobile\/\">Test Flipboxes on Mobile<\/a>.<\/li><\/ul>\n\n\n<h2 class=\"wp-block-heading\">A reliable styling workflow<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>Select the relevant widget in Elementor and confirm which content and Style controls it exposes.<\/li><li>Change one visual setting at a time, then preview both the front and back of the card.<\/li><li>Check text contrast, spacing, navigation, and interaction at desktop and smaller breakpoints.<\/li><li>Click <strong>Update<\/strong> to save your page, then inspect the published result.<\/li><\/ol>\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explore presets, background styling, typography, borders, spacing, icons, grid layouts, carousels, and mobile checks for Flipbox Addon for Elementor.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"template":"","class_list":["post-204","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":21,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/204\/revisions"}],"predecessor-version":[{"id":751,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/204\/revisions\/751"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}