Divi drop cap solutions

Aug 25, 2020 | Divi Resources

How to add Divi drop cap inside single post content & blog pages

If you’re wondering how to add a drop cap in Divi’s archive posts’ excerpt and content of the single blog post, then stop doing that. Because in this blog post, we’re going to see how we can add drop cap either into the blog page’s post excerpt or in the post content.

So, without taking any further moment, let’s get started!

Add Divi drop cap for the blog page excerpt


Blog page without Divi drop cap using native Divi blog module

Blog page without Divi drop cap

Step 1: Insert Divi blog module

To add Divi drop cap inside the post excerpt of a blog page, first, you need to go to the page where you have created your archive. However, if you haven’t created the blog page before, then simply create a new page.

WordPress new page creation with Divi builder

Once the page created deploy Divi Visual Builder and insert the Divi Blog module.

Native Divi blog module

Step 2: Add class name

Now, after inserting the native blog module, go to its advanced settings. Then in the CSS Class input field of the CSS ID & Classes settings, insert el-blog CSS Class name.

Divi drop cap class name for native blog module

Step 3: Insert the Custom CSS

Once added the CSS class in the blog module’s advanced settings, save it. And then go to Divi Theme Options.

Divi theme option

In the General tab, scroll a bit and then in the Custom CSS field, past the following custom CSS.

.el-blog .post-content-inner:first-letter {
display: block;
font-size: 26px;
font-weight: 500;
margin: 0 4px 0 0;
}

Divi drop cap custom css for native blog module

Once added the custom CSS, Save Changes, and refresh your blog page to see changes.

Divi drop cap final result for native blog module

In addition to the Divi Theme Options to add custom CSS, you can also add that in your theme’s style.css file. However, it’s recommended that you make changes to your site’s child theme.

Add drop cap for Divi Blog Extras blog pages


Blog page created using Divi Blog Extras

Blog pages created using Divi Blog Extras without Divi drop cap.

Step 1: Insert Divi Blog Extras module

Likewise the above steps, first, you need to either create a new page or edit existing ones to add drop cap in the blog pages created using Divi Blog Extras plugin. Then, once the page created and deployed the Divi builder, insert Divi Blog Extras module.

Divi Blog Extras module

Step 2: Add class name

Now, after inserting the Divi Blog Extras module, go to its advanced settings. Then in the CSS Class input field of the CSS ID & Classes settings, insert el-blog-extras CSS Class name.

Divi Blog Extras advanced settings with drop cap class name

Step 3: Insert the Custom CSS for drop cap

Once added the CSS class in the module’s advanced settings, save it. Then go to the Divi Theme Options, and similar to the above steps, add below Custom CSS.

.el-blog-extras .el-dbe-blog-extra .post-data:first-letter {
display: block;
font-size: 26px;
font-weight: 500;
margin: 0 4px 0 0;
}
Divi blog extras drop cap custom css

Once added the custom CSS, Save Changes, and refresh your blog page to see changes.

Divi Blog Extras drop cap result

Add Divi drop cap for a single post content


Single post content without Divi drop cap

Post Content without Drop Cap

To add drop cap in article’s content area there’s nothing much you need to do. Just go to the Divi Theme Options and add the following custom CSS.

.single .et_pb_post .entry-content:first-letter {
display: block;
font-size: 26px;
font-weight: 500;
margin: 0 4px 0 0;
}

Single post content custom css for drop cap

Once added the custom CSS, Save Changes, and refresh your blog page to see changes.

Single post content with drop cap

That’s it, we’ve successfully added Divi drop cap for blog page and single post content.

Posted By:
Divya
Divya is a WordPress theme Wizard at Elicus. She loves bringing design ideas to life.

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.

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.

How to create custom Divi contact form message pattern

How to create custom Divi contact form message pattern

For an online venture, a contact form works similarly to the visiting card of an offline business. Interested customers contact you whenever they want. And a contact form available on the website does the same. Interested users contact you whenever they want. If...

Divi Marketplace Guide: Plugins, Child Themes & Layouts

Divi Marketplace Guide: Plugins, Child Themes & Layouts

The new Divi Marketplace by the Elegant Themes has taken its share in the web development world. Now, Divi developers around the world can easily share their awesome products to hundreds of thousands of users. A much like independent PlayStore and AppStore for the...