Divi Shortcode – Adding & Customizing the Tooltip

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:

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:

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

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:

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:

In this example, I add an Oval Border to the Dropcap.
In this example, I add an Oval Border to the Dropcap.
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

Instagram Training




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

Big Discounts for Domains, Hosting, SSL and more

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business

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…

Code Snippet Syntax Highlighter that Works with Divi – Review

Code Snippet Syntax Highlighter that Works with Divi – Review

This is one of those plugins that’s only going to appeal to a certain number of people. People like me who have a need to add syntax code to websites. But if you’re one of those people, then I recommend you get the plugin — Divi Code Snippet Module — from the creator of Divi Booster. I tried 3 or 4 plugins in WordPress, every one of them …

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).

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