Custom Box Shortcode

Updated on July 28, 2019

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


Displaying the Custom Box Shortcode

To add the shortcode:

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

Custom box shortcode - visual composer screen

3In 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

4When 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

5Configure 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.
6Click 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

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

Did this answer your question?