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.
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:
| Setting | Descripiton |
|---|---|
| Content | Your need to add the title contents here, you can format the size, color.. with the text editor options. |
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.
Configure the Layout Settings
| Setting | Descripiton |
|---|---|
| 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
| Setting | Description |
|---|---|
| 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.
