{"id":208,"date":"2026-10-17T14:16:25","date_gmt":"2026-10-17T14:16:25","guid":{"rendered":"http:\/\/plugin-docs.com\/?post_type=doc&#038;p=208"},"modified":"2026-10-18T00:18:09","modified_gmt":"2026-10-18T00:18:09","slug":"configure-flipbox-overlays","status":"publish","type":"doc","link":"https:\/\/dragwyb.com\/docs\/configure-flipbox-overlays\/","title":{"rendered":"Configure Flipbox Overlays"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Flipbox overlays are implemented through image-overlay controls in version 2.1.7 for Ultimate Flipbox and Post Flipbox. The controls appear when the side&#8217;s <strong>Background Type<\/strong> is set to <strong>Image<\/strong>. <strong>Enable Overlay<\/strong> is off by default; <strong>Overlay Color<\/strong> appears when the overlay is enabled.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ultimate Flipbox \u2192 Front Background Image \u2192 Enable Overlay<\/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>Set <strong>Background Type<\/strong> to <strong>Image<\/strong>.<\/li><li>The <strong>Enable Overlay<\/strong> control appears only when the background type is Image.<\/li>\n<li>Turn on <strong>Enable Overlay<\/strong>.<\/li>\n<li>Adjust <strong>Overlay Color<\/strong>, which appears when the image background is selected and overlay is enabled.<\/li>\n<li>Preview the overlay.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ultimate Flipbox \u2192 Back Background Image \u2192 Enable Overlay<\/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>Set <strong>Background Type<\/strong> to <strong>Image<\/strong>.<\/li>\n<li>Turn on <strong>Enable Overlay<\/strong>.<\/li>\n<li>Adjust <strong>Overlay Color<\/strong> after the overlay is enabled.<\/li>\n<li>Preview the back overlay.<\/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 Front Background Image \u2192 Enable Overlay<\/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>Check the <strong>Featured Image<\/strong> switch.<\/li>\n<li>If <strong>Featured Image<\/strong> is off, locate <strong>Background Image<\/strong>.<\/li><li>Choose a separate image using <strong>Background Image<\/strong>. This control appears only when <strong>Featured Image<\/strong> is off.<\/li>\n<li>Set <strong>Background Type<\/strong> to <strong>Image<\/strong>.<\/li>\n<li>Turn on <strong>Enable Overlay<\/strong>.<\/li>\n<li>Adjust <strong>Overlay Color<\/strong> after the overlay is enabled.<\/li>\n<li>Preview the front overlay.<\/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 Back Background Image \u2192 Enable Overlay<\/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>Back<\/strong> tab.<\/li>\n<li>Set <strong>Background Type<\/strong> to <strong>Image<\/strong>.<\/li>\n<li>Turn on <strong>Enable Overlay<\/strong>.<\/li>\n<li>Adjust <strong>Overlay Color<\/strong> after the overlay is enabled.<\/li>\n<li>Preview the back overlay.<\/li><li>Click <strong>Update<\/strong> to save the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Story Flipbox \u2192 Verify Whether Overlay Controls Exist<\/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>Review the front-side background controls.<\/li><li>Review the back-side background controls.<\/li>\n<li>The version 2.1.7 source does not register the same <strong>Enable Overlay<\/strong> and <strong>Overlay Color<\/strong> controls for Story Flipbox.<\/li>\n<li>Use only the controls exposed by this widget.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Check Overlay Contrast 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>Check text contrast against the image overlay.<\/li><li>Check icon contrast against the image overlay.<\/li>\n<li>Click <strong>Update<\/strong> to save the page.<\/li>\n<li>Test the published page separately; editor preview is not a live test.<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\">Enable an image overlay<\/h2>\n\n\n<ol class=\"wp-block-list\"><li>Select a Ultimate Flipbox or Post Flipbox widget in Elementor.<\/li><li>Open the front or back container style settings and set <strong>Background Type<\/strong> to <strong>Image<\/strong>.<\/li><li>Choose or configure the background image. In Post Flipbox, check whether the <strong>Featured Image<\/strong> switch is enabled; the separate Background Image control is conditional on that switch being off.<\/li><li>Turn on <strong>Enable Overlay<\/strong>.<\/li><li>Adjust <strong>Overlay Color<\/strong> and preview the text and icon over the image. The source&#8217;s default overlay color is semi-transparent black (rgba(0, 0, 0, 0.5)).<\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\">Troubleshoot missing controls<\/h2>\n\n\n<p class=\"wp-block-paragraph\">If <strong>Overlay Color<\/strong> is not visible, verify that the background type is Image and <strong>Enable Overlay<\/strong> is turned on. These specific overlay controls were not found in the Story Flipbox container styling reviewed, so do not expect the same options there.<\/p>\n\n\n<p class=\"wp-block-paragraph\">For other background choices, read <a href=\"\/docs\/flipbox-addon-for-elementor\/style-flipbox-backgrounds\/\">Style Flipbox Backgrounds<\/a>. For two-color backgrounds, see <a href=\"\/docs\/flipbox-addon-for-elementor\/apply-flipbox-background-gradients\/\">Apply Background Gradients<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Screenshot to add:<\/strong> the image background settings with Enable Overlay enabled and the Overlay Color control visible. 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>Enable Overlay for an image background and adjust Overlay Color in Basic Flipbox or Post Flipbox when those controls are available.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":204,"menu_order":0,"template":"","class_list":["post-208","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/208","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\/208\/revisions"}],"predecessor-version":[{"id":774,"href":"https:\/\/dragwyb.com\/docs\/wp-json\/wp\/v2\/doc\/208\/revisions\/774"}],"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=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}