Fancy Title Shortcode

Last Updated on

Fancy Title shortcode is one of the shortcodes available in The Ken theme which you can take advantage of. It allows you to display an extremely impressive title with many beautiful styles to attract your viewers at first click. To see a live demo of this feature please click here.

Ken Fancy Title Demo-fancy title shortcode

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

In this article


Displaying a Fancy Title Shortcode

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
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
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.

fancy title shortcode
Setting Description
ContentAdd 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
Note: To open the pop-up again, hover over the shortcode and click on the Pen button.

Configure the Layout Settings

Setting Description
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.
Text Line HeightUse this option to set the spacing between each line of the Fancy Title. 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.
Letter SpacingSets the letter spacing of the fancy title (min: 0px – max: 10px).
Margin TopSets the space above the fancy text (min: 0px – max: 500px).
Margin BottomSets the space below the fancy text (min: 0px – max: 500px).
AlignSets the alignment for text. Available options are: Left, Center, Right, Justify.
Tablet & Mobile Align Sets the alignment for title when it reaches to tablet/mobile sizes. Available options are: Left, Center, Right.

Configure the Style Settings

Setting Description
StyleSets the style of the Fancy Title shortcode. Please note that Alternative style will work only in page content and page sections with solid backgrounds. Available options are: Simple Title, Stroke, Standard, Avantgarde, Alternative, Underline.
Corner StyleSets the box corner style of the Fancy Title shortcode. Available options are: Pointed, Rounded, Full Rounded. This option is available when Stroke style is selected in the Style setting.
Stroke Style Border Width This option will be available if you set the style option to Stroke. Use this option to set the thickness of stroke border for the Fancy Title.
Stroke Style Border ColorThis option will be available if you set the style option to Stroke. Use this option to set the color of stroke border for the Fancy Title. If left blank given text color will be applied to border color.
Text Color Type Available options are Single Color and Gradient Color.
Text ColorSets the color of the Fancy Text.
Font SizeSets the font size of the fancy text (min: 12px – max: 70px).
Font WeightSets the font weight for the text.
Text TransformSets the fancy title case. Available options are: Default, None, Uppercase, Lowercase, Capitalize.
Font FamilySets 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.

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.

Configuring the Visibility for Devices

To hide/show the Fancy Title for a particular device (mobile, tablet, …), there is a setting in Fancy Title pop-up which is called Visibility For Devices. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read the Configuring shortcode’s visibility 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.

If you have any questions regarding the Fancy Title shortcode, feel free to contact Artbees support team.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket