1. Home
  2. Image Box Shortcode

Image Box Shortcode

Updated on December 14, 2021

Image Box shortcode is one of the Jupiter shortcodes that allows a user to add different images inside stylish boxes with many options. You can show them as a slideshow or column based.

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

To see the Image Box shortcode in action, you may check the demo page.

Image box shortcode - demo

Displaying Image Box Shortcode

To add the shortcode:

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

Image box 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 shortcode - add element

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

Image box shortcode - Image box settings

5Configure the settings as required. Other settings are explained in next sections.
SettingDescription
Show As?  Sets the style how you want to display Image Box. Two options are available: Slideshow, Column Based.
Slideshow Navigation? Turns on/off the slider next/previous navigation. The option is available if you select to show as Slideshow.
Slides Per View  Sets the number of boxes per view.
How many columns? Sets the number of columns. The option is available if you select to show as Column Based.
Item Padding Sets the padding value between boxes.
Animation Speed Sets the speed of animation effect while changing between each slide or column.
Slideshow Speed Sets delay time between each slide or column change. If set to zero the autoplay will be disabled, any number above zero will define the delay between each slide transition.
6Click Save Changes and publish or update the page to check the result.
7When you add the shortcode in a page, a box will appear with + sign inside. Use that to add Image Box Item Shortcode inside to make column based views.

Image box shortcode - add image box item

Configuring Image Box Settings

After you added the Image Box 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 shortcode.

SettingDescription
Icon Type Sets image or video inside your Image Box Shortcode. Available options: Image, Video.
Item Image Use this option to upload your desired image. This option will open up Media section of WordPress. It’s available if you choose Image as the Icon Type.
Add Padding To Image? You can decide if you want the image have a padding inside the box or stick into edges of it.
Item Title Adds a title for your Image Box Shortcode.
Description Adds the main description for your Image Box Shortcode.

Adding Button to Image Box

Two options allow 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 http:// to your link address.

Adding Video to Image Box

If you choose Video as your Image Box Shortcode Icon Type, then you need to upload different versions of your video with corresponding Codec/Extension to guarantee the cross browser compatibility.

Setting Description
Background Video (.MP4) Adds 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.

Configuring Image Box Styling

To colors for title, button and background color or style the font you need edit the following options. Each option has a description which you can find below:

SettingDescription
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 3 settings in Image Box Item Settings pop-up which allow you to style the 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: Light, Normal, Bold, Bolder, Extra Bold.
Title Color  Sets the color of Image Box title, using the pop up color chooser.

Configuring Button Styling

There are 3 settings available to style the button inside Image Box:

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?