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:
| Setting | Description |
|---|---|
| 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. |
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:
| Setting | Description |
|---|---|
| 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.
| Setting | Description |
|---|---|
| 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.
| 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: 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.
