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.
Displaying a Dropcap
Displaying a dropcap similar to the demo page requires the dropcaps and text shortcodes.
To add the shortcodes:
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.
| Setting | Description |
|---|---|
| Font Size | Defines the size of the dropcap character |
| Padding | Defines the spacing around the dropcap character |
| Background Color | Defines the background color of the dropcap character |
| Text Color | Sets 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.
