Fancy Text Shortcode

Updated on January 9, 2018

Fancy Text 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 text with many beautiful styles to attract your viewers at first sight. To see a live demo of this feature please click here.

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

Displaying a Fancy Text Shortcode

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

1Add or edit an existing page.

2In the Visual Composer section, click on the + button.

fancy text Shortcode
3In the Add Element pop-up screen, search for Fancy Text and click on it to be added to the page

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

fancy text Shortcode
Setting Description

Content Add the text contents here. You can format the size, color, etc. with the text editor options. Please note that [p] tags will be striped out.

5Click on Save Changes and publish or update the page to check the result.

Configuring the Fancy Text Settings

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

Configure the Layout Settings

Setting Description

Line Height Use this option to set the spacing between each line of the Fancy Text. 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.
Margin Top Sets the space above the fancy text (min: 0px – max: 500px).
Margin Bottom Sets the space below the fancy text (min: 0px – max: 500px).
Align Sets the alignment for text. Available options are: Left, Center, Right, Justify.

Configure the Style Settings

Setting Description

Text Color Sets the color of the Fancy Text.
Hightlight Background Color Sets the background highlight color for the Fancy Text.
Hightlight Color Opacity Sets the background highlight color opacity for the Fancy Text.
Font Size Sets the font size of the fancy text (min: 12px – max: 70px).
Font Weight Sets the font weight for the text.
Font Family Sets the collection of fonts for your Fancy 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 fancy text shortcode visible on the scroll with animation, there is a setting in the fancy text 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 Text for a particular device (mobile, tablet, …), there is a setting in Fancy Text 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 Text shortcode, feel free to contact Artbees support team.

Did this answer your question?