Ornamental Title Shortcode

Updated on October 10, 2017

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.

Ornamental title shortcode - demo


Displaying the Ornamental Title Shortcode

To add the shortcode:

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

Ornamental title shortcode - visual composer screen

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

Ornamental title shortcode - add element

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

Ornamental title shortcode - Ornamental title settings

5Configure the settings as required. More settings are explained in the next sections.
SettingDescription

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 NameSets 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 AsGives 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 ImageUpload an image which will show as the title in the shortcode. This option will be only available if the title is set as Image.
6Click on Save Changes and publish or update the page to check the result.

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

SettingDescription

Text ColorSets the color of the title. This option will only be available if the title is set to Text.
Text TransformSets 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 StyleSets the style of the ornamental shortcode. Select one of the graphical representations that you like.
Ornament ColorAdds the color of the extra decorative lines you chose in the Ornamental Style option.
Ornament ThicknessSets 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 FamilySets the font of the title. This option will only be available if the title is set to Text.
Font SizeSets the font size of the title. This option will only be available if the title is set to Text.
Font WeightSets 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 StyleSets 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 TopAdds a margin to the top of the ornamental title shortcode.
Margin BottomAdds 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.

Did this answer your question?