Flip Box Shortcode

Updated on October 15, 2019

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.

Flip box shortcode - demo


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:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

Flip box shortcode - Visual Composer screen

3In the Add Element pop-up screen, search for Flip Box and click on it to be added to the page.

Flip box shortcode - Add element

4When the shortcode is added, a new pop-up screen called Flip Box Settings will open that allows you to configure the shortcode settings.

Flip box shortcode - Flip box settings

5Configure the settings as required. More settings are explained in the next sections.
Setting Description

Flip DirectionDefines the flip direction of boxes. There are two options available: Horizontal and Vertical
Icon TypeDetermines whether to use an image or icon for the front side of the box.
ImageSets an image for the front side of the box.
Front TitleDefines a title for the front side of the box.
Back TitleDefines a title for the back side of the box.
Front DescriptionDefines a description for the front side of the box.
Back DescriptionDefines a description for the back side of the box.
6Click on Save Changes and publish or update the page to check the result.

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 URLSets 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 TargetSets the option for how the button link should open: in the same window or new window.
Button TextAdds 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 ColorSets the background color of the flip box button, using the pop-up color chooser.
Button Hover Background ColorSets the background color of the flip box button on mouseover, using the pop-up color chooser.
Button Text SkinSets 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 HeightSets the minimum height that the box can have.
Icon SizeSets the size of the Icon inside the box. This option is only available if you choose to have an icon inside your box.
Icon ColorSets 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 WeightSets the font weight of the flip box title

Configuring the Front-side Styling

Setting Description

Front Background ColorSets the color of the box’s front panel background, using the pop-up color chooser.
Front Title Font SizeSets the font size of the front panel title.
Front Title ColorSets the color of the front panel title inside the box, using the pop-up color chooser.
Front Description Font SizeSets the font size of the front panel description.
Front Description Font ColorSets the color of the front panel description, using the pop-up color chooser.

Configuring the Back-side Styling

Setting Description

Back Background ColorSets the color of the box’s back panel background, using the pop-up color chooser.
Back Title Font SizeSets the font size of the back panel title.
Back Title Font ColorSets the color of the back panel title inside the box, using the pop-up color chooser.
Back Description Font SizeSets the font size of the back panel description.
Back Description Font ColorSets 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.

Did this answer your question?