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’s Background Type is set to Image. Enable Overlay is off by default; Overlay Color appears when the overlay is enabled.
Ultimate Flipbox → Front Background Image → Enable Overlay
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Set Background Type to Image.
- The Enable Overlay control appears only when the background type is Image.
- Turn on Enable Overlay.
- Adjust Overlay Color, which appears when the image background is selected and overlay is enabled.
- Preview the overlay.
- Click Update to save the page.
Ultimate Flipbox → Back Background Image → Enable Overlay
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Back tab.
- Set Background Type to Image.
- Turn on Enable Overlay.
- Adjust Overlay Color after the overlay is enabled.
- Preview the back overlay.
- Click Update to save the page.
Post Flipbox → Front Background Image → Enable Overlay
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Check the Featured Image switch.
- If Featured Image is off, locate Background Image.
- Choose a separate image using Background Image. This control appears only when Featured Image is off.
- Set Background Type to Image.
- Turn on Enable Overlay.
- Adjust Overlay Color after the overlay is enabled.
- Preview the front overlay.
- Click Update to save the page.
Post Flipbox → Back Background Image → Enable Overlay
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Back tab.
- Set Background Type to Image.
- Turn on Enable Overlay.
- Adjust Overlay Color after the overlay is enabled.
- Preview the back overlay.
- Click Update to save the page.
Story Flipbox → Verify Whether Overlay Controls Exist
- Open Elementor Editor.
- Select the Story Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Review the front-side background controls.
- Review the back-side background controls.
- The version 2.1.7 source does not register the same Enable Overlay and Overlay Color controls for Story Flipbox.
- Use only the controls exposed by this widget.
Check Overlay Contrast and Click Update
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Check text contrast against the image overlay.
- Check icon contrast against the image overlay.
- Click Update to save the page.
- Test the published page separately; editor preview is not a live test.
Enable an image overlay
- Select a Ultimate Flipbox or Post Flipbox widget in Elementor.
- Open the front or back container style settings and set Background Type to Image.
- Choose or configure the background image. In Post Flipbox, check whether the Featured Image switch is enabled; the separate Background Image control is conditional on that switch being off.
- Turn on Enable Overlay.
- Adjust Overlay Color and preview the text and icon over the image. The source’s default overlay color is semi-transparent black (rgba(0, 0, 0, 0.5)).
Troubleshoot missing controls
If Overlay Color is not visible, verify that the background type is Image and Enable Overlay 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.
For other background choices, read Style Flipbox Backgrounds. For two-color backgrounds, see Apply Background Gradients.
Screenshot to add: the image background settings with Enable Overlay enabled and the Overlay Color control visible. This is a placeholder, not an existing screenshot.
Return to Presets, Styling, and Responsive Layouts for the complete styling and responsive-layout guide.