Welcome to Day 78 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!

In today’s post I’m going to be sharing the answer to a common support forum question: how do I get my archive page layouts to match the blog’s masonry layout? Thankfully, our support staff loves to tinker and go the extra mile to come up with creative solutions to questions like this. Which is why when I asked them for Divi tutorial ideas they already had this solution on standby–ready to share with the whole community!

How to Give Your Divi Archive Pages a Masonry Layout

By default, regardless of how you have your blog styled, your archive pages will look like the image above. It’s understandable though that someone with their blog set to masonry may also want their blog page archives to display in the same style. After applying the code we’re sharing with you below, your archive pages will look like the image below, perfectly matching the standard blog masonry style.

Before we dive into the snippets, it’s important to note that there are a few types of archive pages. There is the search archive page, which is where your on-site search results populate; then there’s your author archive page, where all of one author’s posts populate; and of course there are category archive pages, where all of the posts from a single category populate. The code snippets we’re providing in this post will affect all of those archive pages for all blog post types/formats that come with Divi.

The first snippet we’ll need to add, and where most of the work is being done, is the css snippet below. You’ll want to copy and paste this into your theme options CSS panel under Divi > Theme Options > General Tab. This snippet removes the sidebar from archives pages and changes the page layout as well as the individual “article card” styles to match the blog masonry styles.

/*
* 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;
}

/* 
* 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;
	}
}

You can choose to keep or remove the top part titled “Remove sidebar on all archive pages” if you want the sidebar to show on archive pages. If not, keep the snippet as is. You may also prefer to have your archive pages numbered instead of saying “older entries” and “newer entries”. For this, we recommend you install the plugin WP-Pagenavi.

Once installed it will provide a numbered page count by default. If you want to tweak it’s 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 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>

Note: Both the CSS snippet and the JavaScript snippet in today’s post are courtesy of support team member Eduard Ungureanu. If you’ve bumped into him in the support forums then you know he’s an incredibly helpful guy. Be sure to give him a big “thank you” in the comments below if you found this snippet helpful!

Tomorrow: A New Divi Wireframe Kit Addition (Product Sections!)

Tomorrow we will be unveiling–and giving away!–another Divi Wireframe Kit. This one will focus on product sections. This kit will include eight different sections perfect for showing off whatever you’re selling. See you there!