Dropcaps Shortcode

Updated on November 23, 2017

The dropcaps shortcode allows you to display an 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.

Dropcaps Shortcode - demo

Displaying a Dropcap

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.

5From the dropcaps character settings pop-up, enter a single character and click on Save the Changes button.
6Publish 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

  1. Square Default Color
  2. Circle default Color
  3. Square Custom Color
  4. Circle Custom Color

predefined style for the dropcap character.


Fill Color This option will be available if you set one of custom color options as the style. Use this option to set the fill color of Dropcaps.
Paragraph Use this option to add your desired text for the shortcode. The default WordPress editor will be available for you to do more detailed styling.

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?