Image Box Item Shortcode

Updated on November 17, 2017

Image Box item shortcode is one of the Jupiter shortcodes that allows a user to add different images inside stylish boxes with many options.

In this article, we’ll explain about configuring Image Box item shortcode.


Displaying Image Box Item Shortcode

To add the shortcode:

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

Image box item shortcode - visual composer screen

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

Image box item shortcode - add element

4When the shortcode is added, a new pop-up screen called Image box Item Settings opens. It gives you the ability to configure the shortcode settings.

Image box item shortcode - Image box item settings

5Configure the settings as required. Other settings are explained in next sections.
SettingDescription

Icon Type  Sets image or video inside your Image Box Shortcode. Available options: Image, Video.
Item Image Upload your desired image. This option will open up Media section of WordPress. This option is available if you choose Image as the Icon Type.
Item Title Adds a title for your Image Box shortcode.
Description Add the main description for your Image Box shortcode.
6Click Save Changes and publish or update the page to check the result.

Configuring Image Box Item Settings

After you added the Image box Item shortcode, a pop up window will appear where you can set options for this shortcode. Below is the detailed description of each option for Image box Item shortcode.

Adding Video to Image Box

There are 4 settings which allow you to add video in different formats:

SettingDescription

Background Video (.MP4)  If you choose Video as your Icon Type, then you need to upload different versions of your video with corresponding Codec/Extension to guarantee the cross browser compatibility. Use this option to add your video in MP4 format.
Background Video (.WebM) Adds your video in WebM format.
Background Video (.OGV) Adds your video in OGV format.
Preview Image Adds a placeholder for your video as image for mobile devices. This is something mandatory for those devices as most mobile devices do not support auto play of video and they need to open up extra app to be able to play the video.

Adding Button to Image Box

Two settings are available for you to add a button to Image Box shortcode:

Setting Description

Button Text Adds the text of your button. If you leave this button blank then no button will be added to your Image Box.
Button Url Sets a website address or URL which your Image Box shortcode button will link to. Don’t forget to include https:// to your link address.

Configuring Image Box Item Styling

Among styling options you can select background color for button, set font for title and others.

SettingDescription

Add Padding To Image?  Using this option you can decide if you want the image have a padding inside the box or stick into edges of it.
Background Color  Sets the background color of Image Box, using the pop up color chooser.
Description Color Sets the color of Image Box description, using the pop up color chooser.

Configuring Title Styling

There are options that allow to set font, color for the Image Box title.

SettingDescription

Title Font Size Sets the font size of your Image Box shortcode title. You can use both the slider or enter the number directly into the box.
Title Font Weight Sets the font weight of your Image Box shortcode title. Available options: Default, Lightest, Lighter, Light, Normal, Medium (500), Semi-Bold (600), Bold, Bolder, Extra Bold.
Title Color  Sets the color of Image Box title, using the pop up color chooser.

Configuring Button Styling

3 options allows to configure button styling. They are described below:

Setting Description

Button Background Color Sets the background color of Image Box button, using the pop up color chooser.
Button Text Color Sets the color of Image Box button text, using the pop up color chooser.
Button Hover Background Color Sets the background color of Image Box button while mouse is hovering over it, using the pop up color chooser.

 Adding an Extra Class Name

Extra Class Name field in the setting 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 Adding custom CSS class to a shortcode article for further explanation.

Did this answer your question?