How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

In my previous blog post, I covered how to implement the new Elegant Themes Blog design on your website. Today, I’m going to show you how to design your single blog post like the new Elegant Themes blog posts. This requires a few modifications to the default post template and some custom CSS. After you implement this new design, you will be able to use the default editor or the Divi Builder for you blog post and still keep the same new design.

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

If you haven’t added the custom font Poppins using Google Fonts from the previous article, go ahead and do that now.

After Poppins in installed, you need to edit the default theme settings. From the WordPress Dashboard, go to Divi → Theme Customizer.

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

From the Theme Customizer, Select General Settings → Layout Settings and change the following:

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

Go back to General Settings in your Theme Customizer. Select Typography and change the following settings:

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

Go back to the Theme Customizer home screen and select Blog → Post and edit the following:

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

Save & Publish

Now it’s time to add a new post.

From the WordPress Dashboard, go to Posts → Add New. In the Divi Post Settings on the top right of the page, select Full Width for your page layout.

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

Give your post a title. Keep the default editor for now (don’t use the Divi Builder) and add your content. I’m using ‘lorem ipsum” mock content for now. Add a featured image (at least 960px in width). I’m using a mock image from unsplash.com.

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

In order to get the same design that Elegant Themes has for the blog post, we need to relocate the page title, the post meta and the comment section.

Go to Divi → Theme Options and add the following scripts of code:

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

The first script puts the headline and post meta above the article tag. The next two scripts puts the comments below the article tag. This allows for styling each of these sections separately using custom CSS.

If you look at your post now, it doesn’t really look much different, but the stage is set for our CSS styling.

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

All that is left to do is add some custom CSS. Go to Divi → Theme Options and enter the following in the Custom CSS text box:

If you want to use the Divi Builder for your post content, you can also add the following CSS:

That’s it. Now you have a blog post that looks like the Elegant Themes blog post design. The full width layout, shadowing, and spacing really makes the content pop!

How to Style Divi’s Single Post to Match the New  Post Design-ThemesReviewCentral

If you have any questions just let me know and I’ll do my best to assist you. My tutorial above was done on a relatively blank install with few plugins installed. If there is an error in a snippet above or an instruction I gave was unclear then I can help. If, on the other hand, you are having issues unique to your website you’ll need to create a support ticket so we can help you out.

I hope you enjoy the new design and I look forward to hearing from you in the comments.