Title Box Shortcode

Last Updated on

The Title Box shortcode will help you create a fancy box surrounding your title content and styling it in many ways.

In this article, we will explain displaying Title Box shortcode and configuring some styles.

To see the Title Box shortcode in action, you may check out the demo page.

Title Box Shortcode - demo

In this article


Displaying Title Box

To add Title Box shortcode in a page or post to show in front end of the website please follow steps below:

1
Add or edit an existing page.
2
In Visual Composer section, Click + button.

Title Box Shortcode - visual composer screen

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

Title Box Shortcode - add element

4
When the shortcode is added, a new pop-up screen called Title Box Settings opens. Configure the settings as required. Other settings are explained in next sections.

Title Box Shortcode - Title Box Settings

SettingDescripiton
Content Your need to add the title contents here, you can format the size, color.. with the text editor options.
5
Click Save Changes and Publish or Update the page to check the result.

Configuring Title Box Settings

There are some more settings in Title Box Settings pop-up which allow you to configure the style of Title Box.

x
Info: To open the pop-up again, mouse over the shortcode and click on the Pen button.

Configure the Layout Settings

SettingDescripiton
Margin Top Define a top margin for this title (min: -40px – max: 500px).
Margin Bottom Define a bottom margin for this title (min: 0px – max: 500px).
Letter Spacing This option sets the spacing between each character (min: 0px – max: 10px).
Line Height (important) Since every font family with different sizes need different line heights to get a nice looking highlighted titles you should set them manually. as a hint generally (font-size * 2) – 2 works in many cases, but you may need to give more space in between, so we opened your hands with this option (min: 12px – max:500px).
Align This option sets the alignment for the title. Available options are: Left, Center, Right.

Configure the Style Settings

SettingDescription
Text Color Set the title text color.
Highlight Background Color Set the background color for the box.
Highlight Color Opacity The opacity of the highlight background (min: 0 – max: 1).
Font Size Size of the title text (min: 12px – max: 70px).
Font Weight This option sets the font weight for the title. Available options are: Default, Lightest, Lighter, Light, Normal, Medium (500), Semi-Bold (600), Bold, Bolder, Extra Bold.
Stroke Width Using this option you can set a frame around the title (min: 0px – max: 10px).
Stroke Color Set the stroke color.
Font Family This option sets the collection of fonts for your title text. Also, you can choose a single font for it, however using non-safe fonts can affect page load and performance. It also may affect the way your font looks in different browsers.

Adding a Viewport Animation

To make the Title Box shortcode visible on the scroll with animation, there is a setting in Title Box settings pop-up which is called Viewport Animation. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read Configuring shortcode’s entrance animation article.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket