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 page 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.

0.2.36

• New: the admin menu of VEFflipBox now has three pages: Settings, Guide (getting started, settings guide, diagnostic and support) and About. The support address moved to the Diagnostic and support tab, next to the text to copy. Old addresses still open the right screen.

0.2.35

• Changed: the titles of the admin sections use the accent color of the administration color scheme, like the page header, so that each group of settings stands out.
• New: when several VEF plugins are active on a site, their menu entries sit side by side between two separators instead of being scattered. A menu editor plugin keeps the last word, and the "vef_group_admin_menu" filter turns the grouping off.

0.2.34

• New: zoom on hover for the button of the back face, set for all the buttons on the Settings page and in each box.

0.2.33

• Fix: the colors of the builders are now accepted in every form: hex, rgb, hsl, color names, and colors of the palette of the builder, whether they come as a variable, as text or as a list.

0.2.32

• Fix: a color of the Divi palette (global color) chosen in a module is also read when Divi hands it over already resolved as a color variable.

0.2.31

• Fix: a color of the Divi palette (global color) chosen in a module is now read on the page when it reaches the server with escaped quotes, so the button colors show on the front end like in the builder.

0.2.30

• Fix: the colors of the button of the back face and the tint and shadow colors were ignored in Divi 5 unless they were plain hex colors. A color of the Divi palette (global color), rgb(), rgba(), hsl() and hsla() colors are now read.
• Fix: a box with a link on the whole module now shows the pointer of a link on the page.

0.2.29

• Fix: a title size set in the builder now wins over the default of the settings page. Switching on "Title follows box width" in a module no longer stays without effect because "Title fits its length" is on by default (and the other way round).

0.2.28

• Fix: the icon of the Divi 5 module was cut on the right and at the bottom in the list of modules. It is now drawn on the grid used by Divi.

0.2.27

• New icon for the module, the block and the widget in the lists of Divi 5, the block editor and Elementor: two opposite horizontal arrows, the same as the flip icon of the box.

0.2.26

• The readme now has screenshots, a longer description and a short presentation of the other V-IMAGES plugins. No change in the code.

0.2.25

• The package no longer contains internal maintenance scripts. The readme now describes the overlay options, the click trigger and the live preview of the Settings tab.

0.2.24

• Code: a note for translators added to a text of the Settings page (result of the Plugin Check tests of WordPress.org: no other finding).

0.2.23

• The blur settings (glass behind the title, image under the overlay) are now a strength from 0 to 40 that grows faster toward the top, so the whole scale is useful instead of the visible effect ending in the first quarter. The default look is unchanged (the default of the glass blur is now 28); a blur you had set before is weaker and may need to be raised.
• In the block editor, the lines of the Colors panel are now named Background, Overlay and Text, so the names fit the narrow sidebar.

0.2.22

• Fix: the blur of the glass behind the front title was not drawn by some browsers (Firefox, in particular) because the box turns in 3D. On the page, the blur is now made with a blurred copy of the image placed behind the title, which every browser draws. The editors are unchanged.

0.2.21

• The preview in the Settings tab now offers three sample images (landscape, blue diagonals, colored shapes), so the blur and the overlay are easier to judge.

0.2.20

• The titles of the panels of the block settings in the block editor now use the color of the admin color scheme, which makes the list of options easier to read.

0.2.19

• New: a blur for the background image under the overlay of each face, in Divi 5, the block editor, Elementor and the Settings tab, for a frosted look. It has no effect on a plain color.
• The About tab now links to the VEFmusic and VEFpressKit pages on v-images.com, and announces VEFmultiBooking.

0.2.18

• New: the opacity of the color layer above the image, on the front face and on the back face, in Divi 5, the block editor and Elementor. Choose a color (black, for example) and how much of it shows, so that the texts stay readable over an image. The Settings tab also sets a default overlay color and opacity for every box.
• The blur of the glass behind the front title can now be set in steps of 0.5 px, for a very light blur. The preview of the Settings tab shows the blur and the overlay over a pattern.

0.2.17

• New: choose how a box turns over, on hover or on click, in the Settings tab and on each box in Divi 5, the block editor and Elementor. With a click, a small icon with two arrows shows visitors that the box turns over, and links are allowed on the front face. With a hover, links are still removed from the front face, and the builders now say so in a warning.
• New: the Settings tab is simpler. A live preview of a real box follows the settings as you change them, the Simple mode shows the settings most sites need and the Advanced mode shows them all, sections open and close with a summary of their values, and a setting that depends on another one only appears when it is turned on. No setting was removed.

0.2.16

• New: three more box shapes, Wide (2:1), Wide (3:1) and Tall (1:2). With a square box in a row of four columns and a Wide (2:1) box in a row of two columns, both rows have almost the same height, and the boxes stay responsive.

0.2.15

• New: a button on the back face, below the text. Set its label and link on each box; style it (colors, also on hover, font size and weight, padding, border, corner radius, position, shadow with color and opacity) once for the whole site in the Settings tab, and per box in Divi 5, the block editor and Elementor. A style chosen on a box wins over the Settings tab.

0.2.14

• The plugin now ships a LICENSE file (GNU GPL version 2) and a README.md, like the other V-IMAGES plugins. The plugin header no longer repeats the author's website as the plugin website.

0.2.13

• The author is now given the same way as in the other V-IMAGES plugins: the contributor name and the author link in the readme.

0.2.12

• The sizes that adapt to the box are now grouped in one place, "Fluid sizes" (Settings tab, Divi 5, block editor and Elementor): first the titles, then the texts. For each face, a title can follow the width of the box and/or fit its length (one or two lines); a text can follow the width of the box. The title and the text now have their own settings: before, one option covered both. Default values saved in the Settings tab are carried over; in a box where only the fluid text was set in the builder, turn on "Title follows the box width" to keep the title fluid.
• The Settings tab now shows "Font sizes" after the fluid sizes.

0.2.11

• In the Settings tab, the section "Fluid text" is now called "Automatic fluid" (it covers the title and the text), and "Font sizes" comes after "Automatic title size".

0.2.10

• New: the automatic title size can now use one line or up to two lines, for each face separately (Settings tab, Divi 5, block editor and Elementor). With two lines, a long title can be larger in a narrow box.
• The default padding of the glass behind the front title is smaller (6 px), so that the title keeps more room.
• Fixed: in the Settings tab, the arrows of the font size fields no longer add a stray decimal.

0.2.9

• New: a glass (frosted glass look) behind the title of the front face only, so that the rest of the face stays sharp. Settings: on or off, blur, tint color and opacity, padding, corner radius, border and position (left, center or right). In the Settings tab (defaults) and in Divi 5, the block editor and Elementor. The glass hugs the title; with the automatic title size it takes the full width. Visitors who ask for less transparency get a nearly opaque tint.

0.2.8

• New: the fluid text and the automatic title size are now set for each face separately (front and back), in the Settings tab and in Divi 5, the block editor and Elementor. Boxes saved before keep their settings: a face without its own value uses the one that was shared by both faces.
• In the Settings tab, the font sizes now come right after the fluid text.

0.2.7

• New: separate settings for the title and the text of the front face and of the back face: color, font family, weight, style, letter case, letter spacing, alignment and line height. They are in the block editor (a panel for each of the four texts) and in the Settings tab (a default for each). Elementor gets a title alignment and a text alignment on each face; Divi 5 and Elementor keep their own font settings, and use the default of the Settings tab where nothing is chosen.
• A setting left empty changes nothing: the theme decides. A value chosen in the builder always wins over the default of the Settings tab.

0.2.6

• Fix: the live preview of the Divi 5 Visual Builder failed to draw the box. It is drawn again, with the default settings of the Settings tab.
• No language file is shipped any more: the French translation comes from translate.wordpress.org.

0.2.5

• New: a Settings tab on the VEFflipBox admin page, with the default value of every setting of the box: shape, flip direction, flip speed, vertical alignment, title tag, font sizes of the titles and of the texts (front and back, in px, rem or em), fluid text (on or off, full size from box width, minimum size) and automatic title size (on or off, width, maximum size). The values are saved with a button, and a second button restores the built-in defaults.
• A box uses these defaults as long as nothing is chosen for it in the builder. A setting chosen in the builder always wins. Divi 5 and the block editor now offer a "Default" choice on each setting, Elementor too; the sliders and size fields stay empty until you use them, and the reset button of a slider goes back to the default.
• Existing boxes look the same: until you change the defaults, they are the values that were built in before.
• The Divi 5 Visual Builder script was rebuilt (the description of the front title was out of date in the previous build).
• Divi 5: the heading level of the titles is still chosen in the font settings of each title; the title tag default applies to the block editor and to Elementor.
• The help page, the Help button of WordPress and the About tab describe the new tab.

0.2.4

• New: a link on the whole box, in the block editor (panel "Link") and in Elementor (setting "Link of the box"). Divi 5 already has the link options of the module. A click follows the link, except on a link of the back face; on a touch screen the first tap turns the box over and the second tap follows the link; with the keyboard, Enter follows the link and Space turns the box over. The link can open in a new tab.
• The help page describes the link of the box.

0.2.3

• No more links on the front face. A link is possible on the whole module (Divi 5) or in the text of the back face only: the front face is the one a visitor touches to turn the box over.
• Block editor: the link button and the Ctrl+K shortcut are gone from the title and the text of the front face. Elementor and Divi 5 show a note on the front text.
• On every page, a link already saved on the front face is removed when the page is shown (its text stays). Links of the back face are not touched.
• The help page tells where a link is possible, and has a new question about it.

0.2.2

• The help page now has its own entry in the admin menu (it was under Settings). The old address still works: it is redirected to the new one.

0.2.1

• New look for the help page (Settings > VEFflipBox): a header in the colors of your WordPress admin color scheme, tabs with icons, and cards.
• Getting started: the requirements as status cards, the first flip box in six numbered steps, links to the other tabs, and the steps of each builder, the good-to-know notes and the common questions in folding sections. Nothing was removed.
• Settings guide: buttons to jump to a section, and each builder name of a setting shown as a small label.
• About: a new "Where to find what" section and the main features as cards.
• The Help button of WordPress now has a few short topics on each tab.
• The page works on small screens (the tabs scroll inside their own bar). The old addresses (?page=vefflipbox&tab=guide) still work.
• The box itself (Divi 5 module, block, Elementor widget) is unchanged.

0.2.0

• New: the block editor block and the Elementor widget, with the same box, the same settings and the same stylesheet as the Divi 5 module. In the block editor the title and the text are typed directly on the box and the toolbar chooses the face; in Elementor the setting "Face shown in the editor" does the same.
• New: the code is organised to welcome other small extensions one day: shared core, features, thin adapters for each builder, and one folder per builder.
• The help page now covers the three builders, with the name each builder gives to each setting.
• Fix: the script that fits the titles to the box failed in the block editor canvas.
• The Divi 5 module is unchanged: its pages and its HTML stay as they were.

0.1.9

• New: help page under Settings > VEFflipBox, with four tabs: Getting started (requirements, steps, common questions), Settings guide (what each setting of the module does), System info (a text to copy when asking for support) and About. The contextual Help of WordPress is available on that screen, and a Help link is added to the plugin row. French translation included.
• New: "Title Size" setting. Either the webmaster sets the size of the titles with the Divi font settings (as before), or the size is automatic: each title is kept on one line and its size is calculated so that it spans the chosen part of the width of the box (100% = from one edge to the other, inside the padding of the face), whatever its length and the size of the box. Settings: the part of the width and the largest size. A small script measures the titles; it also works in the Visual Builder and follows the resizing of the box.

0.1.8

• Fix: with the fluid text size enabled, a font size set in the Design tab in rem or em (Divi saves it in rem by default) was ignored and the texts stayed limited to 26 px (titles) and 16 px (texts). Sizes in px, rem and em are now read, and the maximum keeps the exact unit chosen in the Design tab.

0.1.7

• Fix: the inner padding of each face (20 px) was applied but the Padding fields of the Style tab stayed empty. They now show the real values (20 px on each side) and can be changed.

0.1.6

• New: "Box Shape" setting (square, portrait, landscape, wide). The size of the box now follows its width and never depends on the size of its titles and texts, like the other Divi modules. A height set in the Sizing options replaces the shape. A text longer than the box is cut at the edge of its face.
• Fluid text size is simpler: the font sizes of the Design tab become the maximum sizes, and only two settings remain: the box width from which the texts have their full size, and the minimum size. Enabling it no longer changes the layout.
• Fix: the texts of the front face stayed visible after the half turn on some computers. The texts of each face are now shown and hidden exactly at the half turn.
• The fluid text settings of 0.1.5 are replaced by the new ones.

0.1.5

• New: fluid text size. The title and the text of the box follow its width between a minimum and a maximum size set in the module.
• Fix: the texts of the front face stayed visible after the half turn on some computers. The texts of each face are now shown and hidden exactly at the half turn.

0.1.4

• Smoother flip: fixed a short blank moment in the middle of the animation (both faces were hidden for a few frames), softer start of the movement, and the rotating part is prepared in advance to avoid a stutter on the first frame.

0.1.3

• The module and the plugin are now named VEFflipBox.

0.1.2

• Fix: in the Visual Builder, clicks and text editing on the back face reached the front face and mixed the two faces. The face turned away is now hidden and not clickable.
• The box now stays turned over while the text of its back face is being edited.

0.1.1

• Fix: false 'Divi 5 not found' notice when Divi is used as a theme.

0.1.0

• First version.