Dropcaps Shortcode

Last Updated on

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

In this article


Displaying a Dropcap

To add the shortcodes:

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

Dropcaps Shortcode - visual composer screen

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

Dropcaps Shortcode - add element

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

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

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

predefined style for the dropcap character.

SettingDescription
Fill ColorThis 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.
ParagraphUse 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket