Fancy Title Shortcode

Last Updated on

The fancy title shortcode is one the most frequently used shortcodes in Jupiter. It allows you to display an extremely impressive title with many beautiful styles to attract your viewers at first click.

In this article, we will explain how to display the fancy title shortcode and configure the style.

Fancy Title Shortcode - demo

In this article


Displaying a Fancy Title

To add the fancy title shortcode to a page or post, follow the steps below:

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

Fancy Title Shortcode - visual composer section

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

Fancy Title Shortcode - add element

4
When the shortcode is added, a new pop-up screen called Fancy Title Settings will open. Configure the settings as required. More settings are explained in the next sections.

 

SettingDescripiton
Content Add the title contents here. You can format the size, color, etc. with the text editor options.
5
Click on Save Changes and publish or update the page to check the result.

Configuring the Fancy Title Settings

There are a few more settings in the fancy title settings pop-up that allow you to configure the style of your fancy title.

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

Configure the Layout Settings

SettingDescription
Tag Name For SEO reasons you might need to define your title’s tag names according to priority. Please note that H1 can only be used once on a page due to SEO. Try to use lower than H2 to meet SEO best practices.
Line Height If the hundred value is chosen, the default value set from the theme options will be used. Use this option if you wish to override the default line-height for this module by setting your own value (min: 50% – max: 150%).
Letter Spacing Sets the letter spacing of the fancy title (min: 0px – max: 10px).
Padding Top Sets the space above the fancy title (min: 0px – max: 500px).
Padding Bottom Sets the space below the fancy title (min: 0px – max: 500px).
Align Sets the alignment for title. Available options are: Left, Center, Right.
Responsive Align Sets the alignment for title when it reaches to tablet/mobile sizes. Available options are: Left, Center, Right

Configure the Style Settings

SettingDescription
Strip Tags? If enabled, all tags included in editor above (including br and p tags) will be stripped out, however, shortcodes inserted will be executed. Enabling this fixes the issue with Gradient Text colors on Safari or Edge.
Pattern? If you activate this option you will get a gray pattern like the image below, just to the right side of the title you have entered.
Text Color Type Available options are Single Color and Gradient Color.
Font Size Sets the font size of the fancy title (min: 12px – max: 70px).
Force Responsive Font Size? There are several specify settings: Font Size For Small Desktops, Font Size For Tablet, Font Size For Mobile.
Font Weight Sets the font weight for the title. Available options are: Default, Lightest, Lighter, Light, Normal Bold, Bolder, Extra Bold.
Font Style Sets the title style of fancy title as Normal or Italic.
Text Transform Sets the fancy title case. Available options are: Default, None, Uppercase, Lowercase, Capitalize.
Font Family Sets the collection of fonts for your Fancy Title. 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.
Drop Shadow Enable this option to add a custom shadow feature.

Adding a Viewport Animation

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

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 style sheet or JavaScript file.

You can read the Adding a 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