Try Amazon Prime Video for FREE for One Month. Click for details.

Divi Shortcode – Adding & Customizing Dropcaps

By Divi Dude

Just look at the J in this article. Pretty cool, eh? It’s called a Dropcap, and Divi has a shortcode for them. I like the Dropcap, I really think it makes articles and paragraphs pop. Caution: don’t use them too often, overuse can be annoying and make any page look silly. I usually use them only in the first paragraph, but if I have a real, real, real long article, then perhaps I’d use them sparingly to help break up the page. Perhaps at the beginning of each new section. To use the Dropcap out of the box with Divi, you only need to use the shortcode. Typically, it’s best to do this on the very first letter, so using my example above with the word Just, this is what you would do:
[dropcap]J[/dropcap]ust
Notice how I break up the word and only use the Dropcap shortcode with the first letter, and then insert the square brackets in the middle the of word to close out the Dropcap. Here’s a short video on YouTube showing you how to use them. Below the video we will start customizing them (the first video does not show this, the second one at the bottom of the page does).

Skip the Tutorial and Watch Video

If you’d rather watch a video than read the tutorial, you can skip down to the bottom of this post.  There’s a video embedded. (although in all honesty, they’re slightly different content because they were created at different times.)

How to Customize the Dropcap Shortcode

If you did my example, then the Dropcap will come out black and at 48 pixels. By using the inspect tool in most modern browsers, we can see that the Dropcap code that Divi ships with is this:
.et-dropcap {
    display: block;
    float: left;
    margin: 0 7px 0 0;
    font-size: 48px;
    line-height: 1;
}
Now that we know what the class and the CSS is, we can customize it to fit our needs. As of the writing of this site, I have a green Dropcap with a drop-shadow.  Here’s a picture of what it looks like, in case by the time you’re reading this I have changed my site design. 
To get this, here are the changes to the Dropcap CSS I made:
.et-dropcap {
    margin: 0 10px 0 0;
    font-size: 88px;
    color: #32952d;
    text-shadow: 2px 2px 2px rgba(25,25,25,1);
}

If you wanted to make it red, then you’d change the color to something like #ff0000;.  If you wanted a drop-shadow that wasn’t as dark, you could change the opacity setting in the text-shadow code, which is the last number in the parenthesis, so maybe you’d finish the CSS code with (25,25,25,.5).  I created a video on how to add drop shadows to text, if you really want to know how. Let’s have some fun.  What if we wanted to add a solid box around our Dropcap, like this picture shows?

Then we’d change our CSS code to this:

.et-dropcap {
    font-family: serif;
    margin: 0px 7px 0 0;
    font-size: 88px;
    color: #fff;
    background: #ff0000;
    border-radius: 8px;
    padding: 3px;
    text-shadow: 2px 2px 2px rgba(25,25,25,0.5);
}
What we did here was ad a background color. Some of the things you could play with are border-radius. If you want hard corners, then just remove it from the code. If you want it rounder, then increase the pixels. The font color can change as well. In my example, I use a white font. But you can always change that to complementary color, like gold. In which case you would use #f2bd00; or something similar. If you don’t want a drop-shadow then remove the text-shadow code. So I played around with a bit, and came up with this. You’ll notice this time I made the changes mentioned in the paragraph above, plus added a drop-shadow to the box itself.

Here’s the CSS code I used to do this:

.et-dropcap {
    font-family: serif;
    margin: 0px 7px 0 0;
    font-size: 88px;
    color: #f2bd00;
    background: #ff0000;
    padding: 3px;
    text-shadow: 2px 2px 2px rgba(25,25,25,0.5);
    box-shadow: 2px 2px 2px rgba(25,25,25,0.5);
}
If we really wanted to get a little funky with the Dropcap customization, then we can add a border instead of a background. And offset the box-shadow a bit, and make it a solid grey.  We adjust the right margin a bit too.

Here’s the CSS code I used to do this:

.et-dropcap {
    font-family: serif;
    margin: 0px 12px 0 0;
    font-size: 88px;
    color: #f2bd00;
    border: 2px solid #ff0000;
    padding: 3px;
    text-shadow: 2px 2px 2px rgba(25,25,25,0.5);
    box-shadow: 5px 5px 0px rgba(125,125,125,1);
}
In this example, I add an Oval Border to the Dropcap.
In this example, I add an Oval Border to the Dropcap.
.et-dropcap {
    margin: 0 12px 0 0;
    font-size: 100px;
    line-height: 1;
    color: #ff0000;
    text-shadow: 2px 2px 2px rgba(25,25,25,.5);
    box-shadow: 2px 2px 2px rgba(25,25,25,.5);
    font-family: serif;
    border: 2px solid #ff0000;
    padding: 15px;
    border-radius: 50%;
}
The possiblities of what you can do with custom CSS and Divi’s Dropcap shortcode are infinite.  I just show you a few examples on this page, but feel free to play around with your favorite custom CSS settings and see what you can create.  Just remember, don’t overdue Dropcaps on your page, or else it will be very difficult to read and become bothersome to look at

How to Make Custom Divi Dropcaps Video

As promised, I also created a video that goes over much of this information (although in different order probably, and some different examples as I wrote this separate from recording the video).

Better Social Media




Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple

Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Affordable Domain Registration

Get $1.00 off.
DiviDudeWeb16

Popular Domains for just 99 Cents at Namecheap!

Legal Disclaimer

To support the publication of this website, this site runs banner ads and is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com. As an Amazon Associate I earn from qualifying purchases. Also other ads may result in commission payments or other compensation.

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business

 

Constant Contact

For Your Inner Nerd

Rolecosplay Movie Costumes

More From Divi Dude

Delete Spam Comments in Bulk Without Plugin on Cloudways

Delete Spam Comments in Bulk Without Plugin on Cloudways

Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…

MailerLite is an affordable, easy-to-use newsletter and email marketing platform

MailerLite is an affordable, easy-to-use newsletter and email marketing platform

For the longest time I used MailChimp. I was drawn to the 2,000 free subscribers.

But when MailChimp changed how they defined subscribers and made some other not so user friendly changes, I started looking for alternatives. Not just for the free tier, but for my paid subscriber lists (I have clients that send out newsletters and they need more bang for the buck than what many free tier offers).

Delete Spam Comments in Bulk Without Plugin on Cloudways

Delete Spam Comments in Bulk Without Plugin on Cloudways

Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This