Custom Box Shortcode

Last Updated on

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.

Custom box shortcode - demo

In this article


Displaying the Custom Box Shortcode

To add the shortcode:

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

Custom box shortcode - visual composer screen

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

Custom box shortcode - Add element

4
When the shortcode is added, a new pop-up screen called Custom Box Settings will open that allows you to configure the shortcode settings.

Custom box shortcode - Custom box settings

5
Configure the settings as required. More settings are explained in the next sections.
SettingDescription
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.
6
Click on Save Changes and publish or update the page to check the result.

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.

SettingDescription
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

SettingDescription
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

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket