The flip box shortcode allows you to add a box to the site with content on both the front and back. Upon mouseover, the box will flip to show the other side.
In this article we’ll describe how to create the flip box and configure its settings and styling.
To see a flip box shortcode in action, check out the demo page.
Displaying a Flip Box
To add the flip box shortcode into a page or post to show on the front end of the website please follow the steps below:
Setting | Description |
---|---|
Flip Direction | Defines the flip direction of boxes. There are two options available: Horizontal and Vertical |
Icon Type | Determines whether to use an image or icon for the front side of the box. |
Image | Sets an image for the front side of the box. |
Front Title | Defines a title for the front side of the box. |
Back Title | Defines a title for the back side of the box. |
Front Description | Defines a description for the front side of the box. |
Back Description | Defines a description for the back side of the box. |
Configuring the Button
There are a few settings for the button in the flip box settings pop-up. The settings allows you to add a button to the back side of the box.
Setting | Description |
---|---|
Button URL | Sets a website address or URL that your flip box shortcode button will link to. Don’t forget to include https:// at the beginning of your link address. |
Button Target | Sets the option for how the button link should open: in the same window or new window. |
Button Text | Adds text to your button. If you leave this button text option blank then no button will be added to your Image Box. |
Configuring the Button Styling
The follow settings allow you to customize the styling of the button.
Setting | Description |
---|---|
Button Background Color | Sets the background color of the flip box button, using the pop-up color chooser. |
Button Hover Background Color | Sets the background color of the flip box button on mouseover, using the pop-up color chooser. |
Button Text Skin | Sets the skin of the flip box button text. Available options are: Light and Dark. |
Configuring the Styling
After you’ve added the flip box shortcode, a pop-up window will appear where you can set its options. Below is a detailed description of each option for the flip box shortcode.
To style your flip box you’ll find these settings in the flip box pop-up window:
Setting | Description |
---|---|
Minimum Height | Sets the minimum height that the box can have. |
Icon Size | Sets the size of the Icon inside the box. This option is only available if you choose to have an icon inside your box. |
Icon Color | Sets the color of the Icon inside the box, using the pop-up color chooser. This option is only available if you choose to have an icon inside your box. |
Title Font Weight | Sets the font weight of the flip box title |
Configuring the Front-side Styling
Setting | Description |
---|---|
Front Background Color | Sets the color of the box’s front panel background, using the pop-up color chooser. |
Front Title Font Size | Sets the font size of the front panel title. |
Front Title Color | Sets the color of the front panel title inside the box, using the pop-up color chooser. |
Front Description Font Size | Sets the font size of the front panel description. |
Front Description Font Color | Sets the color of the front panel description, using the pop-up color chooser. |
Configuring the Back-side Styling
Setting | Description |
---|---|
Back Background Color | Sets the color of the box’s back panel background, using the pop-up color chooser. |
Back Title Font Size | Sets the font size of the back panel title. |
Back Title Font Color | Sets the color of the back panel title inside the box, using the pop-up color chooser. |
Back Description Font Size | Sets the font size of the back panel description. |
Back Description Font Color | Sets the color of the back panel description, using the pop-up color chooser. |
Adding an Extra Class Name
The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
Common Issues
A list of common issues that you may face while configuring Flip Box. The list will be updated regularly.
Button is not clickable on the back hoverbox in iOS
You may notice that when checking Flip Box element on iOS devices, you can’t click on the button added in the back hoverbox.
To fix it, you need add this code in Theme Options > Advanced > Custom CSS:
.vc-hoverbox-back {
z-index: 2;
}
If you experience some other issues, feel free to contact our support team for help.