Drop caps – the use of a large first letter in a text – is a nice way to add a retro feeling to a magazine or a book website layout.

Even though drop caps have been around for 2000 years, it’s still a bit tricky to integrate them in modern web design. Here’s a tutorial on how to add global drop caps in Divi that will display automatically in all your posts (or pages and other post types).

After (with drop caps)

⚠️ Divi does actually provide a native drop cap shortcode but you have to paste it manually into every post. This tutorial creates a global sitewide drop cap for all your posts.

BONUS: Download a free Divi post template with a global drop cap

1. Enter your e-mail address below to subscribe to our newsletter.
2. Download the zip file containing the post template.
3. Extract the zip file on your hard drive.
4. Import the JSON file to the Custom Body template for posts in the Divi Theme Builder.

Tutorial: Add global drop caps to a Divi Theme Builder template

Using the Theme Builder gives you lots of design flexibility so I strongly recommend this method.

1. Add a CSS class to your Custom Body template

1. Go to Divi » Theme Builder
2. Edit the Custom Body template for All Posts (or any Custom Body template of your choice) by clicking the pen icon
   Don’t have a Custom Body template yet? Learn how to create a post template or use the default template method described further down.
3.  Hover the Post Content module and click the cogwheel to edit it
4. Click the Advanced tab and go to CSS ID & Classes and add the CSS Class dm-dropcap
5. Save and exit the Divi Theme Builder

2. Add a global dropcap with CSS

1. Go to Divi » Theme Customizer » Additional CSS
2. Add the CSS snippet below:

   /* Add drop cap to posts with default font */
   
   .dm-dropcap::first-letter {
   font-size: 75px;
   float: left;
   padding:0 12px 12px 0;
   line-height: 60px;
   color:#C2AB92;
   }

3. Save and preview on frontend.
4. Clear your browser and website cache if you don’t see the changes in frontend.

This will add a drop cap using your default font. Play around with the font-size, padding, line height and color to change the layout.

3. Change the drop cap font (the easy way)

The easiest way is to choose one of the five default fonts that are always available in all templates:

• Arial
• Georgia
• Times New Roman
• Trebuchet
• Verdana

Let’s create a nice retro vibe with the serif font Georgia by replacing the snippet above with the one below:

/* Add drop cap to posts using Georgia */

.dm-dropcap::first-letter {
font-size: 75px;
float: left;
padding:0 12px 12px 0;
line-height: 60px;
color:#C2AB92; 
font-family: 'Georgia',Georgia,"Times New Roman",serif;
}

Save and preview on frontend. Clear your browser and website cache if you don’t see the changes in frontend.

4. Add a Google font as a drop cap (advanced)

This is actually a bit tricky. The browser does only load the five default fonts mentioned above + any additional fonts that you already use on the specific page or template. In order to introduce a new Google Font as a drop cap, you need to add a snippet in the page header first. Here’s one example where I’m using the goofy Google font Henny Penny.

1. Go to Divi » Theme Options » Integration
2. Add the code below in the Add code to the < head > of your blog box and Save Changes:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">

    

3. Head over to Divi » Theme Customizer » Additional CSS and add the snippet below:

   /* Add drop cap to posts with the Henny Penny font */
   
   .dm-dropcap::first-letter {
   font-size: 75px;
   float: left;
   padding:0 12px 12px 0;
   line-height: 60px;
   color:#C2AB92;
   font-family: 'Henny Penny',display;
   }

4. Save and preview on frontend.
5. Clear your browser and website cache if you don’t see the changes in frontend.

If you want to add another Google Font you need to use the embed code and the CSS rule for that specific font. You can find it on the Google Fonts website. Watch the tutorial video for a thorough walkthrough.

Adding a drop cap to the default Divi post template

Still not convinced by the Divi Theme Builder? Well, we are using 2 000 years old drop caps, so why not use a depreciated Divi template! Here’s how you can add a drop cap to the default Divi post template.

1. Go to Divi » Theme Customizer » Additional CSS
2. Add the CSS snippet below:

   /* Add drop cap to the default Divi post template */
   
   .single .et_pb_post .entry-content::first-letter {
   font-size: 75px;
   float: left;
   padding:0 12px 12px 0px;
   font-family: 'Georgia',Georgia,"Times New Roman",serif;
   line-height: 60px;
   color:#C2AB92;
   }

3. Save and preview on frontend.
4. Clear your browser and website cache if you don’t see the changes in frontend.

Play around with the values and just remove the font-family line if you want to use the same drop cap font as the rest of the post body text.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How to create a Post Template with the Divi Theme Builder

👉 Free course: Create a website from scratch with Divi