Dropcaps Shortcode

Updated on December 29, 2017

The dropcaps shortcode allows you to display an extremely impressive single character and emphasize a point of a section in your paragraph.

In this article, we will explain how to display dropcaps shortcode and configure the styles.

To see the dropcaps shortcode in action, check out the demo page.

Dropcaps Shortcode - demo


Displaying a Dropcap

Displaying a dropcap similar to the demo page requires the dropcaps and text shortcodes.

To add the shortcodes:

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

Dropcaps Shortcode - visual composer screen

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

Dropcaps Shortcode - add element

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

Dropcaps Shortcode - Dropcaps Settings

5From the dropcaps character settings pop-up, enter a single character and click on Save the Changes button.

Dropcaps Shortcode - Dropcaps character

6Add the text block shortcode to the page and from text settings, add some text to it.

Dropcaps Shortcode - adding text block

7Publish or update the page to check the result.

Configuring the Styling

The Style setting in the dropcaps settings pop-up allows you to choose the Simple or Fancy predefined style for the dropcap character. The Simple style, displays the character without any specific styling, but the Fancy style allows you to change some of the styling properties.

SettingDescription

Font SizeDefines the size of the dropcap character
PaddingDefines the spacing around the dropcap character
Background ColorDefines the background color of the dropcap character
Text ColorSets the text color of the dropcap character

Adding an Extra Class Name

The Extra Class Name field in the setting 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.

Did this answer your question?