Dropcaps Shortcode

Last Updated on

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

In this article

Displaying a Dropcap

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

To add the shortcodes:

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

Dropcaps Shortcode - visual composer screen

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

Dropcaps Shortcode - add element

When 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

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

Dropcaps Shortcode - Dropcaps character

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

Dropcaps Shortcode - adding text block

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

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket