The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →To create a two-sided flipbox in WordPress, add Elementor’s Flip Box widget, set its front and back content, choose an animation, and check that the revealed information works on mobile and with a keyboard. For a subtler effect, Elementor’s hover transforms can move, scale, rotate, or skew a compatible widget without turning it into a two-sided card.
Choose a flipbox or a simpler hover effect
A flipbox is an interactive card with a front face and a back face. It suits a card that needs to reveal extra details or a call to action. If you only want a small visual change—such as a card lifting or scaling on hover—use a hover transform instead. Both routes are available in Elementor’s documented controls, without requiring a separate flipbox plugin.
As an Amazon Associate I earn from qualifying purchases.
- Use the Flip Box widget when the card has distinct front and back content or an image overlay.
- Use a hover transform for a modest movement, rotation, scale, skew, or flip effect on a compatible widget.
Create a flipbox with Elementor
Elementor’s Flip Box widget provides separate front and back content, configurable animations, and a choice of whether a link applies to the button or the whole box. Follow this sequence in the page editor:
- Add the Flip Box widget to the page.
- In the front settings, enter a title and description. Choose no graphic, an image, or an icon.
- Set the front background to a color, image, or gradient. If you use an image, adjust the background overlay color so text remains legible.
- Configure the back with the detail or call to action you want visitors to see, and add a button if needed. Choose whether the link applies to the button alone or the entire box.
- Set the box height and border radius, then choose a transition: flip, slide, push, zoom-in, zoom-out, or fade. Flip and slide effects can be directed right, left, up, or down. Add 3D depth only if it suits the design and passes the mobile checks below.
- Style the typography and button states, then preview the card at desktop and mobile sizes. Check mouse, keyboard-focus, and touch-like interactions rather than relying on the editor preview alone.
Choose semantic title tags
The widget lets you choose heading tags or paragraph, span, or div tags for its title and description. Select a heading level that fits the page’s document outline; use typography controls to make text look the right size rather than choosing a heading tag for appearance alone.
Make a compatible widget respond to hover
For a smaller interaction, select a compatible widget and open Advanced > Transform. Elementor’s CSS Transform controls include rotation, offset, scale, skew, and horizontal or vertical flip. Set different values for Normal and Hover states, and adjust the duration to control how quickly the change happens.
These transform controls apply to widgets, not sections, columns, or inner sections. Elementor also allows responsive breakpoint-specific settings, so a movement that works with a mouse on desktop can be reduced or adjusted for narrower layouts.
Check keyboard access and hover content
Hover-revealed content should not be available only to someone using a mouse. The W3C’s WCAG 2.2 guidance for Success Criterion 1.4.13 says additional content triggered by pointer hover or keyboard focus must be dismissible, hoverable, and persistent, except where the criterion’s stated exception applies. It also explains that content triggered by pointer hover should be triggerable by keyboard focus.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →- Keyboard trigger: Confirm a keyboard user can reach the card and reveal its additional content with focus.
- Hoverable: Move the pointer from the trigger onto the revealed content. It should not vanish while the pointer is over that content.
- Persistent: The revealed content should remain visible while its trigger is active, rather than disappearing before it can be read.
- Dismissible: If the additional content obstructs or replaces other page content, provide a way to dismiss it without moving the pointer or keyboard focus.
- Assistive-technology check: Test the finished implementation with a screen reader. A WordPress.org support report about the specific Radius Blocks flipbox block described problems with screen-reader announcement and hidden back content being exposed before activation; it is an anecdotal report, not a finding about every flipbox widget.
These checks matter especially when the back face contains information visitors need, not just a decorative detail. A visual flip effect alone does not establish that its hidden content has suitable keyboard or screen-reader behavior.
Test mobile Safari and 3D depth
Elementor’s Flip Box documentation warns that Safari on mobile is partially incompatible with the optional 3D Depth effect. It describes parts of the flipbox showing through a navigation-menu dropdown and says its 3D Flip Box and Nav Menu widgets cannot be used together on iOS because of Safari support issues. Preview the actual page on the affected layout. If the problem appears, disable 3D depth or adapt the mobile layout, including responsive visibility where appropriate.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When to consider an addon
The WordPress.org listing for Flipbox Addon for Elementor describes a free plugin that requires Elementor. Its listing says it includes Basic, Post, and Story flipbox widgets, image, title, icon, description, and button content, grid and carousel layouts, and click or hover triggers.
Rank #4
Those are claims from the plugin listing, not independent evidence of accessibility, maintenance quality, performance, or compatibility with a particular WordPress and Elementor setup. Before adding the dependency, check its current compatibility information and test the interaction with keyboard and assistive technology on your own site.
Recommended Free Tools
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
