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.
Displaying Image Box Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| 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. |
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.
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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.
| Setting | Description |
|---|---|
| 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.
