1. Home
  2. Flip Box Shortcode

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

Did this answer your question?