How To Add GLOBAL Drop Caps In Divi Posts + Free Template Download

2021-12-13 | Divi | 0 comments

Let's create an elegant retro layout with drop caps in your blog posts. And let's use the latest design tricks to create a global blog post template.
Skribent: Victor Duse
By Victor Duse

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

Before (without drop caps)

A WordPress post without a drop cap

After (with drop caps)

Drop cap with Georgia

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

Download a free Divi blog post template
  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.

The newsletter contains tips, guides and offers and is sent out approximately once a week. You can unsubscribe at any time. We will never sell or share your email address. Your email address is stored at Mailchimp.

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

 

CSS Class: dm-dropcap

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.

Drop cap with default font

This drop cap is using the same font as the rest of your post content.

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.

Drop cap with Georgia

This drop cap is using the classic serif font Georgia.

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?display=swap&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.

Drop cap with Henny Penny

This drop cap is using the goofy Google font Henny Penny.

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

Related posts

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.