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)

AFkHxtc0Jmb qT9T2PfdRtaYoGhTBwPGvi5ZF

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)

xpaeti7t8ysyHw0YO18T9x6vxDpzXJYZN 1qH0KZNSJKSbpKkXSYXrw0UWRy UilsUM6bD pyF1qvZ1SAVYU1UPyuqKSvQ0HgofhG8KPEthxXSnR

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)

ak1m38PWWAcYv2t1n0rROn NbIbJGhSSEPq RTIsbUMC2iBJy4C7QAsaWUVwfD1yczZcg kpjhs4gvenEw4EWiEVc0LO294b4yXZ0TfOXwhXuqcEhDYzlRBbm2R4 eoksE TBWoH

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).

N6B5KIHCQd2QEba1bzfnYh2HhgzUmdeMllWFORBjw6tYQ3ny4HxIATv9DLHa3q1jqlt6hwT9Dy 5v htI qVVelWRfRXFFTdR6yqdeBFzpItALv7ajxhSdoxsOigRDLq84FnUm B

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.

bpOTpk4uCB0NqzrSDeLlZQY2kIKXfN raGsTObWU5YvqLtiBVsyciymrdbZkUx9DmO1ejkXeTzv8i6gNwdxZVL dHTHrbgErgXeYJs6DHSWy1v4INpZ3aKybpO0e48P8Zfuy5VCC

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. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

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