How to Style Your Divi Blog Page to Look Like Elegant Themes’ New Design

Today I’m going to show you how to design your blog page like the new Elegant Themes blog using Divi’s Blog Module. The three major design modifications include: (1) changing the default three-column blog grid layout to only two columns, (2) placing the featured image below the headline and post meta, and (3) sizing the featured image for the new column width. These are accomplished by adding a few lines of code. Aside from that, the Divi Builder and some custom CSS will take care of the rest.

Let’s get started!

How to Style Your Divi Blog Page to Look Like Elegant Themes’ New Design

Subscribe To Our Youtube Channel

Implementing the New Elegant Themes Blog Design in Divi

Importing Poppins Font Using Google Fonts

Elegant Themes uses the font Poppins for the headers and body text. Since Divi doesn’t come with that font as an option currently, you can get it from Google Fonts easily for free. If you don’t want to go through the trouble for Poppins, you can use the Montserrat font that closely resembles Poppins and is built in to Divi. But for those who love the Poppins font like I do, it is worth the extra step.

First go a find the Poppins font in Google Fonts. Once you find it, click the button that reads “Select This Font”.

Once selected, click to toggle open the Font Family settings box that shows up at the bottom of the screen.

Once open, click the “customize” tab and make sure you select both “regular 400” and “semi-bold 600”.

Click back to the “Embed” section and copy the embed code that was generated.

Go to Divi → Theme Options. Under Integration, Add the following code in the text box labeled “Add code to the head of your blog”:

<link href="https://fonts.googleapis.com/css?family=Poppins:400,600" rel="stylesheet">

While still in Theme Options, go to the General section and enter the following CSS in the Custom CSS box:

body {
font-family: “Poppins”, sans-serif;
}

Now Poppins should be set as your default font.

Designing the Page Header

First add a Fullwidth Section with a Fullwidth Header Module to your layout.

Edit the Fullwidth Header Module Settings as follows:

Under General Settings:
Title: [add title]
Subheading Text: [add subheading text]
Text & Logo Orientation: Center

Under Advanced Settings:
Title Font Color: #20292f
Title Font Size: 35px
Subhead Font Color: #71818c
Subhead Font Size: 20px

Save & Exit

Click to edit the Fullwidth Section Module Settings.

Make sure the background color is set to the color white (#ffffff).

Save & Exit

Now your heading is in place.

Adding the Search Bar

To add the search bar, insert a standard section with a fullwidth column and edit the Section Module Settings. Under General Settings, change the following:

Custom Padding: Top 0px and Bottom 0px

Under Custom CSS, add the following CSS in the Main Element text box :

z-index: 10;

Save & Exit

Now click on the Row Module Settings. Under General Settings, change the following:

Custom Padding: Top 0px and Bottom 0px

Under Advanced Design Settings, change the following:

Custom Margin: Top 0px and Bottom 0px

Save & Exit

Insert a Search Module in your column.

Now edit the Search Module Settings. Under General Settings, change the following:

Hide Button: YES
Placeholder Text: “Search our blog…”

Under the Advanced Module Settings, change the following:

Max-Width: 300px
Button And Border Color: #eeeeee
Input Field Background Color: #f7f9fb
Placeholder Color: #bbbbbb
Input Font Size: 16px
Input Text Color: #71818c
Custom Margin: Top 0px, Bottom 0px
Custom Padding: Top 20px, Bottom 20px

Under Custom CSS, add the following CSS inside the Main Element text box:

margin: 0 auto;

Inside the Input Field box, add the following CSS:

border-radius: 60px;

Save & Exit

That’s it. Notice the search bar hugs the footer right now. That’s okay.

Designing the Blog Grid

Add another Standard Section and insert a fullwidth column.

Click to edit the Section Settings and, under General Settings, change the following:

Background Color: #f7f9fb

Under Custom CSS add the following:

CSS ID: skew
CSS Class: elegantdesign

Note: The “skew” ID will be use to create that very subtle diagonal (or skewed) line separating the header white background and the light gray content background. The “elegantdesign” class will be used to target all the custom CSS changes we will be making.

Save & Exit

Next insert the Blog Module in your column.

Edit the blog Module Settings. Under the General Settings, change the following:

Layout: Grid
Read More button: ON

Under Advanced Settings, change the following:

Header Font Size: 26px
Meta Font Size: 14
Meta Text Color: #71818c
Body Font Size: 16px

Save & Exit

Here is what you blog page should look like now:

We still have some big changes to make but so far so good.

Change the Read More Text and Styling the Button

To change the Read More text to read “View Full Post”, go to Divi → Theme Options. Under the Integration tab, enter the following script inside the “Add code to the head of your blog” text box:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".more-link").text("View Full Post");
});
</script>

While you are in the Theme Options, go to the General tab and enter the following CSS in the Custom CSS text box:

.elegantdesign a.more-link {
    font-size: 14px;
    color: #71818c !important;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 10px;
    float: none;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 60px;
    background-color: #f7f9fb;
    border: 2px solid #e9eff5;
}

.elegantdesign a.more-link:hover {
color: #20292f;
}

Now your blog grid should have the new buttons.

Implementing the Two-Column Grid Layout

By default, the blog grid has a three-columnn grid layout. To change this to a two-column layout, go to Divi → Theme Options and add the following CSS in the Custom CSS box:

@media only screen and ( min-width: 980px ) {
.elegantdesign .et_pb_column .et_pb_blog_grid[data-columns]::before { content: '2 .column.size-1of2' !important;
}
.elegantdesign .et_pb_column .column.size-1of2 {
width:47% !important;
margin-right:6%;
}}
@media only screen and ( max-width: 980px ) {
.elegantdesign .et_pb_column .et_pb_blog_grid[data-columns]::before { content: '2 .column.size-1of2' !important;
}
.elegantdesign .et_pb_column .column.size-1of2 {
width:100% !important;
margin-right:0%;
}
}

Now your grid should be two columns for any screen size bigger than 980px. For screens less than 980px the grid will change to a single column.

Changing the Position and Size of the Featured Image

Now that you have changed the columns from a three-column layout to a two-column layout using CSS, you may have noticed the quality of your featured images have suffered. This is because when you save a featured image, Divi saves a version of that featured image at a size specific to a three-column layout (400 x 250). But now that you have a wider column, the featured image is being stretched beyond its size and distorting the quality of the image. Therefore you need to change the size dimensions of the featured image from 400 x 250 to 600 x 300.

To do this you need to add a new function to your functions.php file in your theme files. Of course it is always best practice to create a child theme first. Once your child theme is created and activated on your website, access your site files via FTP using a software like Filezilla. Go to your child theme folder and create a new functions.php file. Make sure the file is named exactly “functions.php”.

There is no need to copy over your parent theme’s function.php file or code because your new functions.php file will not override the parent theme file. It is simply a way to add more functionality to your existing theme.

Once you have created a new functions.php file in your child theme folder, add the following at the very top of the file:

function gallery_size_h($height) {
return '600';
}
add_filter( 'et_pb_blog_image_height', 'gallery_size_h' );
function gallery_size_w($width) {
return '300';
}
add_filter( 'et_pb_blog_image_width', 'gallery_size_w' );

Important: Make sure you add the opening tag php tag at the very top of the functions.php file before the code.

That’s it. Now your featured images should be clear and not stretched or distorted when displayed on the two-column grid layout.

The ideal size of your featured images (when uploading them to your site) should be around 1200 x 600.

By default, your featured image displays above the blog title and post meta. To display the featured image below the blog title and post meta, go to Divi → Theme Options and add another script of code. Under Integration, add the following code in the text box labeled “Add code to the head of your blog”:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("article.et_pb_post").each(function(){
jQuery(">a:first-child, .et_pb_image_container", this).insertAfter(jQuery(".post-meta", this));
});
});
</script>

Now check out your blog page. The featured image is now displayed under the post title and meta.

There is a little overlapping of the image and the header but that will be fixed with some CSS adjustments.

Now we are ready for the final touches of CSS to make it all come together. Once again, go to Divi → Theme Options and enter the following CSS in the Custom CSS box:

#skew:before {
    content: '';
    -webkit-transform: skew(0, -7deg);
    transform: skew(0, -7deg);
    position: absolute;
    left: 0;
    right: 0;
    top: -120px;
    height: 340px;
    background: #ffffff;
}

.elegantdesign .entry-title {
margin-top: 0px;
padding-bottom: 20px;
}

.elegantdesign .et_pb_image_container {
margin: -20px -40px  40px;
}


.elegantdesign .et_pb_blog_grid .et_pb_post {
    margin-bottom: 80px;
    width: 100%;
padding: 40px;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-shadow: 0px 20px 150px #d6dee4;
border: none;
text-align:center;
}

.elegantdesign .et_pb_post .post-meta {
margin-bottom: 40px;
}

That’s all. You are finished! You should now have a blog page that looks like the Elegant Themes Blog – a well designed page with a centered header and search bar above a two-column grid layout with featured images below the title and post meta.

Is It Responsive?

Yes. The layout is responsive and will alternate between a one-column layout for mobile and a two-column layout for desktop. Here is a screenshot of the mobile layout:

Wrapping Up

There are a few elements missing from this design that are on the Elegant Themes Blog page. I didn’t cover the design of the navigation bar and the footer. I left out the custom search button icon on the search bar. And, I kept the default pagination. If you want the same pagination that Elegant Themes uses, you need to install a plugin like WP-PageNavi and customize the settings to fit the design. Here is a great article to get you started. As far as that cool animated CTA at the bottom of the Elegant Themes Blog page, I may tackle that in a future post.

In the meantime, I hope you take advantage of this tutorial and implement this new design on your next project.

I look forward to hearing from you in the comments.

Enjoy!

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

In my next article, I’m excited to show you how to style your single post page after the new Elegant Themes blog post design. See you then!

In the meantime, if you have any questions about today’s tutorial, please feel free to leave them in the comments below.