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

How-to-add-dropcaps-in-elementor

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

Leave a Comment

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

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

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

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG

Get My Free WordPress
Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design journey.

Intermediate and advanced WordPress users have found it helpful too.

By joining my list, I promise you’ll never be spammed! 🙂

cropped img of the toolkit