By default, regardless of how you have your blog styled, your archive pages will look like the image below:
If you set your Blog page to use a Masonry-style layout, it's understandable that you want your archive pages to look in the same way.
With the tutorial below, your archive pages will look like this:
These changes will apply on all your archive / search result pages.
Method 1
First, add this code in Divi > Theme Options > Custom CSS option to remove the sidebar on the archive pages.
/* Remove sidebar on all archive pages */
.search #main-content .container::before,
.archive #main-content .container::before {
display: none;
}
.search #left-area,
.archive #left-area {
width: 100%;
float: none;
padding-right: 0;
}
.search #sidebar,
.archive #sidebar {
display: none;
}
The grid / masonry layout
This snippet turns the archive full with layout into a masonry/grid layout (3 posts on a row):
/* Create Mansonory styles for archive pages */
.search #left-area,
.archive #left-area {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 60px;
column-gap: 60px;
}
.archive .et_pb_post > a,
.search .et_pb_post > a {
margin: -20px -20px 10px;
display: block;
}
.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
overflow: hidden; /* fix for Firefox */
page-break-inside: avoid;
break-inside: avoid-column;
width: 100%;
padding: 19px;
border: 1px solid #d8d8d8;
background-color: #fff;
word-wrap: break-word;
display: inline-block;
}
.search #left-area .et_pb_post h2,
.archive #left-area .et_pb_post h2 {
font-size: 18px;
}
.search #left-area .et_pb_post.format-link,
.search #left-area .et_pb_post.format-quote,
.search #left-area .et_pb_post.format-audio,
.archive #left-area .et_pb_post.format-link,
.archive #left-area .et_pb_post.format-quote,
.archive #left-area .et_pb_post.format-audio{
padding: 0;
}
.archive .et_pb_post .et_pb_image_container,
.archive .et_pb_post .et_main_video_container,
.archive .et_pb_post .et_audio_content,
.archive .et_pb_post .et_pb_slider,
.search .et_pb_post .et_pb_image_container,
.search .et_pb_post .et_main_video_container,
.search .et_pb_post .et_audio_content,
.search .et_pb_post .et_pb_slider {
margin: -20px -20px 10px;
}
.archive .et_pb_post.format-audio .et_audio_content{
margin: 0px -38px 0px;
}
.archive .et_pb_post .et_pb_slider .et_pb_slide,
.search .et_pb_post .et_pb_slider .et_pb_slide {
min-height: 180px;
}
.archive .pagination,
.search .pagination {
padding: 20px 0;
}
/* Media Queries */
@media screen and (max-width: 980px) {
.search #left-area,
.archive #left-area {
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 60px;
column-gap: 60px;
}
}
@media screen and (max-width: 767px) {
.search #left-area,
.archive #left-area {
-moz-column-count: 1;
column-count: 1;
}
.search .et_pb_post.format-audio .et_audio_content,
.archive .et_pb_post.format-audio .et_audio_content{
margin: 0;
}
.search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
.archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
.search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total,
.archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total{
min-width: 300px!important;
width: 300px!important;
}
}
While this will give you 3 posts on a row, you still can modify it to any number you'd like. To do that, find this code:
/* Create Mansonory styles for archive pages */
.search #left-area,
.archive #left-area {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 60px;
column-gap: 60px;
}
And change the number 3 to anything you want.
You may also prefer to have your archive pages numbered instead of saying “older entries” and “newer entries”. For this, we recommend you to install the plugin WP-PageNavi.
Once installed, it will provide a numbered page count by default. If you want to tweak its settings, they will be located under Settings > PageNavi.
Next, we’ve got a bit of JavaScript that helps to make sure our pagination links are located in the right spot.
You’ll want to enter the snippet below in the text box under Divi > Theme Options > Integration > Add code to the < head > of your blog.
<script>
(function($) {
$(document).ready(function() {
leftarea = $('#left-area');
pageNavi = leftarea.find('.wp-pagenavi');
pageNavigation = leftarea.find('.pagination');
if ( pageNavi.length ) {
pagenav = $('#left-area .wp-pagenavi');
}
else {
pagenav = $('#left-area .pagination');
}
pagenav.detach();
leftarea.after(pagenav);
});
})(jQuery)
</script>
Method 2:
This method requires a simpler approach thanks to the display: grid property. This method make use of CSS variables which lets us write less code while providing an easier way to customize the number of columns and space between our columns.
All we need to do, while using this method is to add the following CSS code to Divi ➤ Theme Options ➤ Custom CSS
/* Remove sidebar on all archive pages */
.search #main-content .container::before,
.archive #main-content .container::before {
display: none;
}
.search #left-area,
.archive #left-area {
width: 100%;
float: none;
padding-right: 0;
}
.search #sidebar,
.archive #sidebar {
display: none;
}
/*Grid layout*/
/*
- dekstop: 3 columns
- tablets: 2 columns
- mobile: 1 column
*/
@media (min-width: 981px) {
:root {
--columns: 3;
--columns-gap: 5.5%;
--inset-space: 16px;
}
}
@media (min-width: 768px) and (max-width: 980px) {
:root {
--columns: 2;
--columns-gap: 5.5%;
--inset-space: 16px;
}
}
@media (max-width: 480px) and (min-width: 767px) {
:root {
--columns: 1;
--columns-gap: 0;
--inset-space: 16px;
}
}
.archive #left-area,
.search #left-area {
display: grid;
grid-template-columns: repeat(var(--columns), calc((100% - ((var(--columns) - 1) * var(--columns-gap))) / var(--columns)));
column-gap: var(--columns-gap);
}
.archive #left-area .pagination,
.search #left-area .pagination {
grid-column: span var(--columns);
}
/*Article Border*/
.archive #left-area article,
.search #left-area article {
border: 1px solid #E2E2E2;
padding: var(--inset-space);
}
/*Fix Top content of each article*/
.archive #left-area article .entry-featured-image-url,
.search #left-area article .entry-featured-image-url,
.archive #left-area article .et_link_content,
.search #left-area article .et_link_content,
.archive #left-area article .et_pb_slider,
.search #left-area article .et_pb_slider,
.archive #left-area article .et_quote_content,
.search #left-area article .et_quote_content,
.archive #left-area article .et_audio_content,
.search #left-area article .et_audio_content,
.archive #left-area article .et_main_video_container,
.search #left-area article .et_main_video_container {
margin-left: calc(-1 * var(--inset-space));
margin-right: calc(-1 * var(--inset-space));
margin-top: calc(-1 * var(--inset-space));
}
That's all there is, the first part of code is will remove the sidebar on any archive page such as:
category pages
tag pages
author pages
search result pages
In case you would like to customize the number of columns, you will have to edit these 3 blocks of code:
@media (min-width: 981px) {
:root {
--columns: 3;
--columns-gap: 5.5%;
--inset-space: 16px;
}
}
@media (min-width: 768px) and (max-width: 980px) {
:root {
--columns: 2;
--columns-gap: 5.5%;
--inset-space: 16px;
}
}
@media (max-width: 480px) and (min-width: 767px) {
:root {
--columns: 1;
--columns-gap: 0;
--inset-space: 16px;
}The CSS variable --columns in the first media query will define a number of 3 columns, the one in the second media query will define the number of 2 columns on tablets and finally on mobile the number of columns will be 1.
The CSS variable --colunms-gap it will define the space between each of our columns.
The CSS variable --insed-space will define the space around each article content and the border.
Make sure you don't change the variables name however feel free to play around with the variable values.