The custom box shortcode is a good option in Jupiter that allows you to create a box container of content with its own background color/image. Unlike page sections, custom boxes are not meant to divide your page into sections. They are just non-full-width boxes inside your page without the complexity of page sections. After you create a custom box you can add any content to it by clicking on the plus icon in Visual Composer just like in page sections.
In this article, we’ll explain how to configure the custom box shortcode.
To see the custom box shortcode in action, check the out demo page.
Displaying the Custom Box Shortcode
To add the shortcode:
| Setting | Description | |
|---|---|---|
Section Min Height |
Sets the minimum height of your custom box. Corner Radius |
Sets the curve intensity of the corner for the custom box. Set this option to 0 if you want to have pointed corners for your box. |
Configuring Custom Box Settings
After you’ve added the custom box shortcode, click on the pencil icon and a modal window will appear with the options.
Adding Spacing for the Custom Box
There are several settings in the custom box Settings pop-up that allow you to set the margin and padding values.
| Setting | Description | ||
|---|---|---|---|
Padding Top And Bottom |
Adds spacing on the top and bottom of the box. Padding Left And Right |
Adds spacing on the left and right of the box. Margin Bottom |
Sets the amount of space between the bottom of your custom box and the next shortcode. |
Configuring the Visibility for Devices
The Visibility For Devices field in the settings pop-up allows you to configure the visibility of the shortcode in different devices.
You can read the Configuring the visibility for devices article for further explanation.
Adding an Entrance Animation
The Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.
You can read the Configuring a shortcode’s entrance animation article for further explanation.
Adding an Extra Class Name
The 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 the Adding custom CSS class to a shortcode article for further explanation.
Configuring the Custom Box Styling
A separate tab is present in the custom box settings window to configure the styling – Styles and Colors. Each option is described below.
Configuring the Background Color
| Setting | Description | ||||||
|---|---|---|---|---|---|---|---|
Background Color Style |
Sets the background color style of the custom box. Available options are: Image, Single Color, and Gradient Color. Background Color |
Sets the background color of the custom box. This option will be available if you set the Background Color Style option to Image or Single Color. From |
Sets the starting point color of the gradient spectrum. This option will be available if you set the Background Color Style option to Gradient Color. To |
Sets the ending point color of the gradient spectrum. This option will be available if you set the Background Color Style option to Gradient Color. Style |
Sets the style of the gradient functionality. This option will be available if you set the Background Color Style option to Gradient Color. Available options are: Linear and Radial. Angle |
Sets the angle of the gradient functionality. This option will be available if you set the Background Color Style option to Gradient Color. Available options are: Vertical ↓, Horizontal →, Diagonal ↘, and Diagonal ↗. Gradient Fallback Color |
Sets a fallback color for the gradient functionality. This solid color will be used in cases where the viewer device’s browser does not support CSS 3 gradient functionality. This option will be available if you set the Background Color Style option to Gradient Color. |
| Drop Shadow | Enable this option to add a custom shadow feature. |
Configuring the Background Image
| Setting | Description | |||
|---|---|---|---|---|
Background Image |
Use this option to insert an image inside your custom box instead of a simple color. Click on the Upload button, select your image file and press the “insert into page” button. This option will be available if you set the Background Color Style option to Image or Single Color. Cover Whole Background |
If this option is enabled, then any image inside this page section will be re-sized according to the size of the container box. Since the browsers will try to keep the aspect ratio of the image, in some window sizes the image may be cut off automatically by the browser. Background Position |
Defines a position for your background image (if selected). The first value defines the horizontal position and the second, the vertical positioning. For example if you choose “center bottom” it means your background image inside this page section will be aligned horizontally in the center and vertically on the bottom. Available options are: Center Center, Left Center, Right Center, Left Top, Center Top, Right Top, Left Bottom, Center Bottom, and Right Bottom. Background Repeat |
Select this if you want your background image to be repeated or not. Available options are: No Repeat, Repeat, Horizontally Repeat, and Vertically Repeat. |
Overlay Styles
| Setting | Description |
|---|---|
Overlay Color |
Sets the overlay color for the custom box if you’re interested in having such a functionality for your box. |
Configuring the Border Styling
| Setting | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
Border Color Style |
Sets the style of the border color for the custom box. If set to none, there will be no border for the box. Available options are: None, Single Color, and Gradient Color. Border Color |
Sets the border color of the custom box. This option will be available if you set the Border Color Style option to Single Color. Border Style |
Sets the style of the border in the box. Available options are: Solid, Dashed, and Dotted. Border Width |
Sets the width of the border in the custom box. The value is in pixels for this option. From |
Sets the starting point color of the gradient spectrum for the border color of the box. This option will be available if you set the Border Color Style option to Gradient Color. To |
Sets the ending point color of the gradient spectrum for the border color of the box. This option will be available if you set the Border Color Style option to Gradient Color. Style |
Sets the style of the gradient functionality for the border color of the box. This option will be available if you set the Border Color Style option to Gradient Color. Available options are: Linear and Radial. Angle |
Sets the angle of the gradient functionality for the border color of the box. This option will be available if you set the Border Color Style option to Gradient Color. Available options are: Vertical ↓, Horizontal →, Diagonal ↘, and Diagonal ↗. Gradient Fallback Color |
Sets a fallback color for the gradient functionality for the border color of the box. This solid color will be used in cases where the viewer device’s browser does not support CSS 3 gradient functionality. This option will be available if you set the Border Color Style option to Gradient Color. |
Configuring Hover Options
The next tab in the custom box settings window is Hover Options. The settings are described below:
| Setting | Description | |||||||
|---|---|---|---|---|---|---|---|---|
Background Color Style |
Sets the background color style of the custom box on mouseover. Available options are: None, Image and Single Color, and Gradient Color. Background Color |
Sets the background color of the custom box on mouseover. This option will be available if you set the Background Color Style option to Image and Single Color. Background Image Effect |
Sets a desired effect for the Image Background on the custom box. The options for this item will vary depending on the previous option selection. Available options are: None, Zoom In, Blur, and Grayscale to Color. From |
Sets the starting point color of the gradient spectrum on mouseover. This option will be available if you set the Background Color Style option to Gradient Color. To |
Sets the ending point color of the gradient spectrum on mouseover. This option will be available if you set the Background Color Style option to Gradient Color. Style |
Sets the style of the gradient functionality on mouseover. This option will be available if you set the Background Color Style option to Gradient Color. Available options are: Linear and Radial. Angle |
Sets the angle of the gradient functionality on mouseover. This option will be available if you set the Background Color Style option to Gradient Color. Available options are: Vertical ↓, Horizontal →, Diagonal ↘, and Diagonal ↗. Gradient Fallback Color |
Sets a fallback color for the gradient functionality on mouseover. This solid color will be used in cases where the viewer device’s browser does not support CSS 3 gradient functionality. This option will be available if you set the Background Color Style option to Gradient Color. |
After the custom box shortcode is added to the page and the settings are configured, there will be a plus icon to add another shortcode inside the custom box
Note: Custom Box doesn’t have a link option by itself. If you want to add a link to it, it’s better you add it via a button or by using a text with a link inside it. However, you can make the whole custom box clickable using a trick like this: Make The Custom Box Clickable
