How to Add Dropcaps in Elementor for Free (Elementor Dropcaps Tutorial)

In this Elementor dropcaps tutorial, I’ll show 2 different ways to create, add or use dropcaps for free on your Elementor website. We’ll use an Elementor extension called the HT Mega Addons.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Dropcaps Tutorial

Install the HT Mega Addons for Elementor

On your WordPress dashboard, go to Plugins > Add New, search for the HT Mega Addons, install and activate it (00:59)

After you activate your plugin, click on it on the dashboard menu, then under Elements find the Dropcaps option and enable it (00:37)

To Read: How to Add Dynamic Year in Elementor & WP Themes Copyright Footer

Add Dropcaps to your Elementor Page Content

Example 1

With your Dropcaps feature enabled, go to your Pages section and open up any Elementor page or section (Edit with Elementor) where you want to add drop caps.

In your Elementor editor, go to your Widgets area and search for the Dropcaps widget then drag it to your canvas (01:07)

Your dropcap will now show up on your page, and in the Edit Dropcaps area on the left, under Content > Style, you have 5 styles you can choose from (01:21)

Select style 5 then go to the Style section, under Color, select a text colour of your choice.

Go to the Dropcap Latter option, under Color select a text (letter) colour, and under Background Type, you can give it a different colour (02:12).

Example 2

Go to your widgets area and drag the dropcap widget to another section of your page.

Select your widget then under Content > Style, select style 2. 

Under Style select your preferred text colour as well as the colour of your dropcap letter and a background colour (03:43).

You can even choose to give a gradient background, and you can make more changes like changing the angle, giving it some padding, adding animations, etc.

When you’re done, click the Update button then reload your page to preview your results (04:21)

Elementor dropcaps tutorial with HT Mega Addons

Also Read: How to Add a Free Elementor Content Switcher (switch custom content or elementor templates)

In closing

That’s how you can add dropcaps in your text on your Elementor website for free and in just a matter of minutes.

For any questions or comments, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.

Also Read. . .

Newsletter Subscription (EF)

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot


Elementor is the WordPress most popular page builder with over 10 million active users