The ornamental title shortcode allows you to add decorative titles to your website. It also has different sets of options like the fancy title shortcode.
In this article, we’ll explain how to configure the ornamental title shortcode.
To see the ornamental title shortcode in action, check out the demo page.
Displaying the Ornamental Title Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Content | Adds the actual text for the title. You can use the standard WordPress editor feature for a more detailed styling of the text. This option will only be available if you set the Title As option to Text. |
| Tag Name | Sets a tag you want to use as the holder of the title. We strongly suggest that you use a tag other than h1, since the Page Title section of the page uses the same tag and having more than one h1 tag on a page is not good for SEO. |
| Title As | Gives two options for the title. One uses text for the content and the other one uses an image. Available options are: Text and Image. |
| Title Image | Upload an image which will show as the title in the shortcode. This option will be only available if the title is set as Image. |
Configuring the Ornamental Title Settings
There are general settings that allow to configure the Ornamental title shortcode to your needs. In order you want to change color or set some styling, you can edit the following options described below.
Configuring Ornamental Title Styling
| Setting | Description |
|---|---|
| Text Color | Sets the color of the title. This option will only be available if the title is set to Text. |
| Text Transform | Sets the case of the title text. This option will only be available if the title is set to Text. Available options are: Default, None, Uppercase, Lowercase, and Capitalize. |
| Ornamental Style | Sets the style of the ornamental shortcode. Select one of the graphical representations that you like. |
| Ornament Color | Adds the color of the extra decorative lines you chose in the Ornamental Style option. |
| Ornament Thickness | Sets the thickness of the extra ornamental lines you chose in the Ornamental Style option. |
Configuring the Font Settings
If you want to style the font of the text content, you can use the following options:
| Setting | Description |
|---|---|
| Font Family | Sets the font of the title. This option will only be available if the title is set to Text. |
| Font Size | Sets the font size of the title. This option will only be available if the title is set to Text. |
| Font Weight | Sets the font weight of the title. This option will only be available if the title is set to Text. Available options are: Lightest, Lighter, Light, Normal, Bold, Bolder, and Extra Bold. |
| Font Style | Sets the style of the title. This option will only be available if the title is set to Text. Available options are: Normal and Italic. |
Configuring the Ornamental Title Spacing
There are two settings that allow you to add some space above and under the title.
| Setting | Description |
|---|---|
| Margin Top | Adds a margin to the top of the ornamental title shortcode. |
| Margin Bottom | Adds a margin to the bottom of the ornamental title shortcode. |
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 through 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 settings 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 stylesheet or JavaScript file.
You can read Adding custom CSS class to a shortcode article for further explanation.
