How to Create Drop Cap in Divi (in Single Post Template)

You’re in the right article if you seek inspiration to beautify your blog post. This article will show you how to create the drop cap in a single post template in Divi Builder without the help of any plugin.

Adding a drop cap to your single post template helps you grab more user attention. Anyway, what is the drop cap? A drop cap (dropped capital) is a decorative element at the beginning of a paragraph or section, where the first letter of the first paragraph is made larger and takes up several lines of text or the first few sentences, usually two or more lines.

Steps to Create the Drop Cap in a Single Post Template in Divi Builder

Step 1: Add a Post Content Module to the Single Post Template

On your WordPress dashboard, go to Divi -> Theme Builder. Once you enter the Divi Theme Builder screen, you can add a new single post template or select the existing one. Afterward, please insert a Post Content module into your single post template.

Once you insert a Post Module, don’t forget to save your template and apply the changes by clicking the All Changes Saved button.

Step 2: Add the Custom CSS

Next, we move on to the final step. We will add a simple CSS snippet into Divi Theme Option.

On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options screen, navigate to the General tab -> Custom CSS. Please copy the CSS snippet below and paste it into the available field.

.et_pb_post_content::first-letter{
    font-size: 4em;
      font-weight: bold;
      margin-right: 8px;
      float: left;
      line-height: 1;
  }

The Code Explanation:

The code above selects the first letter of the first paragraph element on the Post Content module using .et_pb_post_content::first-letter. Then, the drop cap applies by adding properties and values to the CSS snippet.

Once you add the Custom CSS, apply the changes by clicking the Save Changes button.

That’s it. You can see the result by adding a new post or viewing your existing post.

If you are happy with the result (as in the image above), keep it like this. But, if you want to customize it, you can edit the values on the CSS snippet, such as font size, font weight, etc.

The Bottom Line

This article shows how easily you can create a drop cap in a single post template in Divi Builder without the help of any plugins. A drop cap is usually used in news articles and documents. However, you can still add a drop cap for other content, such as your blog post. Adding a drop cap is one of the simple things you can try to make the reader’s eyes on your content.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.