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]ustNotice 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).
Must Have Plugins
Faster WordPress Hosting
Affordable Domain Registration
Get $1.00 off.
DiviDudeWeb16
Favorite WordPress Theme
Start Your Newsletter
For Your Inner Nerd
Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission.
More From Divi Dude
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
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
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…
Thanks for tutorial, I put the dropcap into my individual blog posts and looks great – but the first letter doesn’t show up on the Blog post Module page… what can I do to at least get a first letter to show on blog module page?Rut
Not sure what you mean here. I usually use the excerpt field to display what shows up in the blog posts modules (assuming we are talking about the same thing), instead of allowing it to take the first portion directly from the post itself.