{"id":206,"date":"2026-10-17T14:16:25","date_gmt":"2026-10-17T14:16:25","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=206"},"modified":"2026-10-18T00:21:30","modified_gmt":"2026-10-18T00:21:30","slug":"style-flipbox-backgrounds","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/style-flipbox-backgrounds\/","title":{"rendered":"Style Flipbox Backgrounds"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Flipbox backgrounds control the surface behind each side of a card. Ultimate Flipbox and Post Flipbox expose a <strong>Background Type<\/strong> control for the front and back sides, with <strong>Simple<\/strong>, <strong>Gradient<\/strong>, and <strong>Image<\/strong> choices. Story Flipbox has separate <strong>Front Background Color<\/strong> and <strong>Back Background Color<\/strong> controls in its container styling.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ultimate Flipbox \u2192 Style \u2192 Container Box Settings \u2192 Front Background<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Ultimate Flipbox<\/strong> 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>Background Type<\/strong>.<\/li>\n<li>Choose <strong>Simple<\/strong>, <strong>Gradient<\/strong>, or <strong>Image<\/strong>.<\/li>\n<li>If Simple is selected, adjust <strong>Background Color<\/strong>.<\/li>\n<li>If Image is selected, configure <strong>Background Image<\/strong>.<\/li>\n<li>If Gradient is selected, use the conditional gradient controls described in the gradient guide.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ultimate Flipbox \u2192 Style \u2192 Container Box Settings \u2192 Back Background<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Ultimate Flipbox<\/strong> 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>Back<\/strong> tab.<\/li>\n<li>Locate <strong>Background Type<\/strong>.<\/li>\n<li>Choose <strong>Simple<\/strong>, <strong>Gradient<\/strong>, or <strong>Image<\/strong>.<\/li>\n<li>If Simple is selected, adjust <strong>Background Color<\/strong>.<\/li>\n<li>If Image is selected, configure <strong>Background Image<\/strong>.<\/li>\n<li>If Gradient is selected, use the conditional gradient controls described in the gradient guide.<\/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\">Post Flipbox \u2192 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 <strong>Post Flipbox<\/strong> 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>Featured Image<\/strong> if the card should use the post&#8217;s featured image.<\/li>\n<li>When <strong>Featured Image<\/strong> is off, use the separate <strong>Background Image<\/strong> control if you need a different image.<\/li>\n<li>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>Select the <strong>Back<\/strong> tab.<\/li>\n<li>Configure the back-side <strong>Background Type<\/strong> and its conditional controls.<\/li>\n<li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Story Flipbox \u2192 Style \u2192 Container Box Settings \u2192 Front\/Back Background Color<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Story Flipbox<\/strong> 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>Adjust <strong>Front Background Color<\/strong>.<\/li>\n<li>Select the <strong>Back<\/strong> tab.<\/li>\n<li>Adjust <strong>Back Background Color<\/strong>.<\/li>\n<li>The reviewed version 2.1.7 source registers <strong>Front Background Color<\/strong> and <strong>Back Background Color<\/strong>.<\/li><li>It does not register the same <strong>Background Type<\/strong> choices used by <strong>Ultimate Flipbox<\/strong> and <strong>Post Flipbox<\/strong>.<\/li>\n<li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Preview Front\/Back Backgrounds and Click Update<\/h2>\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>Elementor Editor<\/strong>.<\/li>\n<li>Select the <strong>Ultimate Flipbox<\/strong> widget.<\/li>\n<li>Preview the front background.<\/li><li>Preview the back background.<\/li>\n<li>Check text contrast against the background.<\/li><li>Check icon contrast against the background.<\/li><li>Check button contrast against the background.<\/li>\n<li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\">Set the card background<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>Select the widget and open its Style controls.<\/li><li>For Ultimate Flipbox or Post Flipbox, find the front or back container settings and choose the required <strong>Background Type<\/strong>.<\/li><li>For a simple background, adjust <strong>Background Color<\/strong>. For an image background, use the relevant image control; Post Flipbox also exposes a <strong>Featured Image<\/strong> switch for the front image background.<\/li><li>Repeat for the other side if you want the front and back to have different treatments.<\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\">Check readability<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Preview the actual text, icon, and button against each background. Images with busy details can reduce contrast; use the overlay controls when they are available, or choose a simpler color or image. The available background controls differ by widget, so do not expect every label to appear in Story Flipbox.<\/p>\n\n\n<p class=\"wp-block-paragraph\">For gradient settings, see <a href=\"\/docs\/flipbox-addon-for-elementor\/apply-flipbox-background-gradients\/\">Apply Background Gradients<\/a>. For image overlays, see <a href=\"\/docs\/flipbox-addon-for-elementor\/configure-flipbox-overlays\/\">Configure Flipbox Overlays<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Screenshot to add:<\/strong> the selected widget&#8217;s front and back background controls, including the available background type or color setting. This is a placeholder, not an existing screenshot.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Return to <a href=\"\/docs\/flipbox-addon-for-elementor\/styling-layout-responsive\/\">Presets, Styling, and Responsive Layouts<\/a> for the complete styling and responsive-layout guide.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Set the front and back card backgrounds using the controls available for your selected Flipbox widget.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":204,"menu_order":0,"template":"","class_list":["post-206","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/206","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\/206\/revisions"}],"predecessor-version":[{"id":783,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/206\/revisions\/783"}],"up":[{"embeddable":true,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/204"}],"wp:attachment":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/media?parent=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}