VEFflipBox

VEFflipBox adds a box that turns over to your pages: a front face, a back face and a smooth flip between them. It is one plugin for three builders: a module for Divi 5, a block for the block editor and a widget for Elementor. The three print the same box, with the same engine and the same stylesheet, so a box looks the same wherever you made it.

Each face of the box has its own color or image, title and text. Everything else is set with the tools you already use in your builder: fonts, colors, sizes, spacing, borders, shadows and visibility.

What each face can have

• a background color and, if you want, a background image;
• a color overlay above the image, with its opacity and an optional blur of the image, to keep the text readable;
• a title and a rich text;
• its own border, padding, shadow and image filters;
• on the front face, an optional frosted glass behind the title, so the title stays readable on a busy image while the rest of the face stays sharp.

How the box behaves

• It turns over on hover, or on click if you prefer (with a small flip icon, and links allowed on the front face).
• On touch screens, a tap turns it over and another tap turns it back.
• Keyboard users can focus the box and press Enter or Space.
• The animation is shortened for visitors who prefer reduced motion.
• Box shape: square, portrait, landscape or wide. Flip direction: horizontal or vertical, normal or reverse. Speed: fast, normal or slow.
• The back face can show a button with its own label and link, fully styled (colors, border, shadow, size). The whole box can also be a link.

Text that fits the box

Titles and texts can follow the width of the box with fluid sizes: the font sizes of the Design tab (px, rem or em) are the maximum sizes, and you choose the minimum. A title can also be fitted to its length, so it fills the box on one or two lines.

Default settings for the whole site

A Settings tab in the VEFflipBox admin page sets the default of every setting once for the whole site, with a live preview, three sample images to judge the blur and the overlay, and a Simple and an Advanced mode: shape, flip direction, speed and trigger (hover or click), vertical alignment, title tag, font sizes of the titles and of the texts, color, font, weight, style, letter case, spacing, alignment and line height of the four texts (front and back, title and text), fluid sizes of the titles and of the texts, title fitted to its length (for each face), overlay above the image (color, opacity and blur, for each face), glass behind the front title, style of the button of the back face. A setting chosen in the builder on a given box always wins over the default.

Help and support

A help page (the VEFflipBox entry of the admin menu) explains how to add the module in six steps and what each setting does, shows the system information to copy when you ask for support, and tells where to find what. The Help button of WordPress gives a short help on each of its five tabs.

Compatibility

The block editor needs nothing more. Divi 5 (the Divi theme or the Divi Builder plugin) and Elementor are optional: the module and the widget appear only when they are active. Divi is a product of Elegant Themes and is not included.

Privacy

The plugin does not connect to any external service and does not collect any data. The About tab of the help page only contains links to other websites: nothing is loaded from them.

More from V-IMAGES

VEFflipBox is made by V-IMAGES.com (Eric Fabre). You may also like:

• VEFmusic: a free plugin for band websites, with an audio player, an album showcase, a show calendar, visitor ratings and SEO structured data. A separate paid extension, VEFmusic Pro, adds a shop and ticketing. More on v-images.com.
• VEFpressKit: a media kit (press kit) for any website, whatever your business.
• VEFmultiBooking, a flexible booking engine, is coming soon.