How to Style Divi’s Single Post to Match the New Elegant Themes Post Design

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.

Let’s get started.

How to Style Divi’s Single Post to Match the New Elegant Themes Post Design

Subscribe To Our Youtube Channel

Implementing The Design in Divi

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.

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

Website Content Width: 960
Theme Accent Color: #f92c8b

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

Body Text Size: 16
Header Font: Default
Header Font: Default

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

Meta Text Size: 20
Header Text Size: 58

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.

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.

Editing the Post Template

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:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( ".entry-title, .post-meta" ).insertBefore( jQuery( ".single-post article.et_pb_post" ) );
});
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#comment-wrap" ).insertAfter( jQuery( ".single-post article.et_pb_post" ) );
});
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#respond.comment-respond" ).insertAfter( jQuery( "#comment-wrap" ) );
});
</script>

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.

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:

h1.entry-title {text-align:center;
font-size: 58px;
font-weight: 600;
letter-spacing: 1px;
color: #20292f;
padding-top: 40px;
}

.single-post #main-content {
background: #f7f9fb;
}

.post-meta {
text-align:center; 
margin-bottom: 80px;

}

p.post-meta, .post-meta a {
color: #71818c !important;
font-size: 20px !important;
}

.single .et_pb_post {
margin-bottom: 27px;
box-shadow: 0px 20px 150px #d6dee4;
}

.et_pb_post .entry-content {
padding: 40px;
line-height: 26px;
}

.et_pb_post .entry-content p:first-of-type {
padding-top: 40px;
}
.et_pb_post .entry-content p {
padding-bottom: 40px;
}

.with-border {
border-radius: 4px;
box-shadow: 0px 20px 150px #d6dee4;
}

ol.commentlist > li.comment, #respond{
background-color: #fff !important;
padding: 40px !important;
box-shadow: 0px 20px 150px #d6dee4;
margin-bottom: 80px;
}

h1#comments {
margin-bottom: 40px;
}

h3#reply-title {
    font-size: 35px;
    letter-spacing: 0px;
}

.comment_area .comment-reply-link, .form-submit .et_pb_button {
font-size: 14px;
color: #71818c;
font-weight: 600;
text-transform: uppercase;
margin-top: 10px;
float: right;
display: inline-block;
padding: 8px 16px;
border-radius: 60px;
background-color: #f7f9fb;
border: 2px solid #e9eff5;
position: inherit;
float: right;
}

.form-submit .et_pb_button:hover {
padding: 8px 16px;
}

.comment-reply-link.et_pb_button:hover:after {
opacity: 0;
}

#commentform textarea {
background-color: #f7f9fb;
border: 2px solid #eff1f3;
font-size: 18px;
padding: 20px;
color: #20292f;
}

.comment-body {
padding: 0 0 0 100px;
}

@media only screen and (max-width: 768px) {
h1.entry-title {
    font-size: 48px;
}
}

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

.single.et_pb_pagebuilder_layout.et_full_width_page #main-content .container {
max-width: 960px;
}
.single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper {
width: 100%;
padding-top: 0px;
}
.et_pb_pagebuilder_layout .entry-content, .et_pb_pagebuilder_layout .et_pb_post .entry-content {
padding: 0 0 0;
}

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!

Final Thoughts

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.