Overview
This screen sets the default value of each setting of the flip box. Every box on your site uses these defaults, except for the settings you choose for it in the builder.
A value chosen in the builder always wins over the default. To go back to the default in Divi 5 or in the block editor, choose “Default” in the setting (or reset it); in Elementor, choose “Default” too.
Simple and advanced
The Simple mode shows the settings most sites need. The Advanced mode shows every setting, including the fluid sizes, the texts of each face and the details of the button and of the glass. No setting is removed: the mode only chooses what is shown, and the settings you do not see keep their values.
Short lists of choices (the box shape, the flip direction, the speed…) are shown as buttons, and each number has a slider next to its field, the font sizes in px included.
Each section opens and closes, and shows a summary of its values when it is closed. A setting that depends on another one (for example the blur of the glass) appears when the setting it depends on is turned on.
Live preview
The box next to the settings is drawn by the same code as the boxes of your site, with sample texts. It follows the settings of this page as soon as you change them, before you save. Use the buttons under it to see each face. The box turns over once when you change the flip direction or the speed, so that you see the effect at once. “Surprise me” tries a random combination of settings, and “Back to saved settings” returns to the values saved on the page.
Try on the box
Below the preview, “Try on the box” lets you judge the result on an image. Choose no image or one of five sample images (the blur and the overlay are easier to judge on a different background), put it on the front face, the back face or both, and give each face a color.
These choices are only there to help you look: they are not saved and they change nothing on your site. The colors and the images of your boxes are chosen box by box in the builder.
Settings of this box
Under the workshop, “Settings of this box” writes down what the box uses. “Saved as the defaults of your site” lists the settings of this page, the ones that become the defaults when you save them; a setting you changed since the page was opened is highlighted. “Chosen box by box in the builder” lists what you are trying in the workshop: the image, where it is placed and the color of each face.
Corners
Round the corners of the box, or cut them in a curve with a value below 0. Each corner takes a value from -100 to 200 px: 0 is a square corner, a positive value rounds it, a negative value digs a curve into it.
The slider “All corners” sets the four corners at once, and the ready-made shapes (Square, Soft, Round, Circle or pill, Arch, Leaf, Ticket, Wave) give a good starting point. Choose “Different corners” to give each corner its own value.
In the builder (Divi 5, block editor or Elementor), each corner can be set on a given box. A corner left empty uses the default of this page. A block saved with the single corner radius of the older versions keeps it until one of its corners is set. A corner cut in a curve hides the shadow of the box around it.
How the box turns over
On hover, the box turns over when the visitor hovers it (on a touch screen, on tap). On click, it turns over when the visitor clicks it or its small flip icon. With a click, links are allowed on the front face; with a hover, they are removed from it.
Fluid sizes
The front face and the back face each have their own settings. A title can follow the width of the box (its size shrinks when the box is narrow), and it can also fit its length: its size is then calculated so that the title fills the box, on one or two lines. A text can follow the width of the box too. You can use each option on one face and not on the other.
A setting made in a module always wins over the default of this page. If you switch on one of the two ways of sizing a title in a module, the other one is switched off for that module when it only comes from the default.
Glass behind the front title
The glass gives the title of the front face a blurred, tinted background of its own (a frosted glass look), so that the title stays readable on a busy image while the rest of the face stays sharp. It only exists on the front face.
Choose the blur, the tint and its opacity, the padding, the corner radius, the border and the position of the glass.
The blur needs something to blur: it shows over an image, not over a plain color. The blur setting is a strength from 0 to 40: the low values change the look in small steps and 40 is a very strong blur.
Overlay above the image
A color layer between the background image and the texts, on the front face and on the back face. Choose a color (black, for example) and its opacity so that the texts stay readable over a busy image. With no color, there is no layer. The blur softens the background image under the layer, for a frosted look.
Back face button
A button can be added below the text of the back face. Its label and its link are set on each box in the builder; the button only appears when it has both.
Here you choose how every button looks: colors (also on hover), font size and weight, padding, border, corner radius, position and shadow. A style chosen in the builder for a box replaces it.
Font sizes
The sizes of the titles and of the texts apply to the boxes where the builder does not set a size. Type a number and choose a unit: px, rem or em; in px, a slider sits next to the number. When a title or a text follows the box width, they are the maximum sizes; a title that fits its length ignores them.
Fonts and text
The “Fonts and text” section gives, as buttons, the settings that matter most: the font of the titles and of the texts (the fonts of your site, or the style of your theme), the weight of the titles, uppercase titles, italic titles and the letter spacing of the titles. Each choice applies to both faces.
To set one face on its own, use the Advanced mode (“Front face texts” and “Back face texts”). When the two faces differ, no button is selected.
Titles and texts
For each of the four texts (front title, front text, back title, back text), you can set the color, the font family, the weight, the style, the letter case, the letter spacing, the alignment and the line height.
A setting left on “Style of the theme” (or empty) does not change anything: the theme decides. A setting chosen in the builder always wins over the default.
Save and restore
The two buttons are under the form and under the preview, where they stay in view while you scroll the settings. A line above them tells whether what the preview shows is saved: “Changes not saved yet” or “Everything shown here is saved”.
- Save as site defaults — the settings of the page become the defaults of your site and apply at once to every box.
- Restore factory settings — goes back to the values built into the plugin. The button asks you to click a second time, so that nothing is lost by mistake. The settings chosen in the builder are not touched.