Elementor Flip Card Widget

A lightweight, zero-dependency WordPress plugin that adds a fully customisable Flip Card widget to Elementor. Click the card to reveal a styled back face — every aspect of both faces is controlled directly from the Elementor panel with no custom CSS required.

Requirements

Installation

Option A — As a Plugin (Recommended)

1. On your server, navigate to wp-content/plugins/.
2. Create a new folder named elementor-flip-card.
3. Place elementor-flip-card.php inside that folder so the path reads:

   wp-content/plugins/elementor-flip-card/elementor-flip-card.php

4. In your WordPress admin, go to Plugins → Installed Plugins.
5. Find Elementor Flip Card Widget and click Activate.

Option B — As a Code Snippet

1. Install a code snippet plugin such as WPCode or Code Snippets.
2. Create a new snippet, set the type to PHP Snippet.
3. Paste the entire contents of elementor-flip-card.php into the snippet body.
4. Save and activate the snippet.

Note: If Elementor is not active when this plugin loads, a dismissible admin notice will appear reminding you to install and activate Elementor first. The widget will register automatically once Elementor is running.

Usage

1. Open any page or post in the Elementor editor.
2. In the widget panel, search for "Flip Card" (it lives in the General category).
3. Drag the widget onto your canvas.
4. Configure content and styles using the three-tab panel described below.

Controls Reference

Content Tab

Card Settings

Front Face — Content

Back Face — Content

Style Tab

Both the Front Face and Back Face have identical, fully independent style sections.

Background

Layout & Spacing

Header Typography

Body Typography

Icon (shown when an icon is selected)

Back Button (shown when Button Text is not empty)

How It Works

The flip animation is driven entirely by CSS 3D transforms — no jQuery or heavy libraries. A small vanilla JavaScript listener toggles the class is-flipped on the card wrapper when clicked (or when Enter/Space is pressed for keyboard accessibility). The CSS perspective and rotateY / rotateX properties handle the rest.

All styles are injected as inline CSS via wp_add_inline_style, so no separate stylesheet file is needed and there are no extra HTTP requests.

Accessibility

• The card wrapper is rendered with role="button" and tabindex="0" so it is reachable and activatable via keyboard.
• Pressing Enter or Space triggers the flip, matching standard button behaviour.
• The optional flip icon carries aria-hidden="true" so screen readers ignore it.
• The back-face button uses a standard <a> tag and stops click propagation so it can be activated independently without re-flipping the card.

Customisation Notes

• Changing the flip speed — find .efc-flip-card-inner in efc_get_inline_css() and adjust the transition duration (default 0.65s).
• Starting on the back face — add the class is-flipped to the wrapper via a custom HTML attribute or a small JS snippet after page load.
• Multiple cards on one page — all instances are independent; each manages its own flipped state.

File Structure

elementor-flip-card/
└── elementor-flip-card.php   ← Everything in one file

All PHP, CSS, and JavaScript lives in the single plugin file. There are no build steps, no node_modules, and no external dependencies beyond Elementor itself.

Changelog

1.0.0

• Initial release.
• Front and back face content controls: header, body (WYSIWYG), icon, HTML tag selector.
• Back face optional CTA button with URL, external link, and nofollow support.
• Full independent style sections for both faces: solid / gradient / image backgrounds, typography groups, padding, alignment, border radius, box shadow.
• Horizontal and vertical flip directions.
• Keyboard-accessible flip interaction.
• Inline CSS and JS — zero extra HTTP requests.

License

GPL-2.0+ See https://www.gnu.org/licenses/gpl-2.0.html for details.