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.
Displaying a Dropcap
To add the shortcodes:
1Add or edit an existing page.
2In the Visual Composer section, Click on the + button.
3In the Add Element pop-up screen, search for Dropcaps and click on it to be added to the page.
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
- Square Default Color
- Circle default Color
- Square Custom Color
- Circle Custom Color
predefined style for the dropcap character.
| Setting | Description |
|---|---|
| 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.
