Learn how to create a simple drop caps in your Divi theme projects. It’s just some CSS targeting the first letter of a Text Module. Follow along this tutorial to learn the same drop caps that I use for all my client’s websites when I think it’s suitable.

A simple drop caps helps the user locate faster the start of a blog post – or make the page design more attractive.

This is going to be a quick tutorial. It’s good to have a simple drop caps documented, so you know where to find it when you need it.

Without further ado, let’s begin!

How to create a simple drop caps in Divi theme

Layout

First, create a Text Module and add the following class inside Text Module Settings > Advance > CSS Class: drop-caps.

Don’t add blockquotes or other elements inside the Text Module with the class drop-caps. It may trigger the effect too. Leave it plain and create new modules for the rest of the content.

CSS

Then, add the following code inside Divi > Theme Options > Custom CSS.

/* -- Drop caps -- */
.drop-caps div::first-letter {
  background-color: transparent;
  color: #3F51B5;
  font-size: 50px;
  float: left;
  display: inline-block;
  font-family: 'Georgia', Helvetica, Arial, Lucida, sans-serif;
  text-align:center;
  border: solid 3px #3F51B5;
  margin: 5px 15px 0 0;
  padding: 20px;
}

I suggest that you play along all the properties of the drop caps to better understand how it works and design new creative drop caps styles.

I really like the font-family: Georgia to be the font in the drop caps, but there may have lots of good typographies to try.

Conclusion

Do you use drop caps in your Divi projects? Do you think it’s a nice feature to have in the design of your WordPress website?

Did you like this simple drop caps tutorial? Leave a comment or send me an email.

See ya!