A masonry layout can enhance the visual appeal and organization of your archive and category pages by displaying posts in an attractive, grid-like format that adjusts dynamically.
In this article, we will guide you through the process of creating a masonry layout for your archive pages using Divi's Theme Builder.
Out of the box, Divi will display all the posts on an Archive page using a standard layout that looks like this:
You will have two different methods for changing the default Archive page layout:
Create the Archive template and layout using Theme Builder
Go to WordPress Dashboard → Divi → Theme Builder
Click on the Add New Template button
Choose the Build New Template option
In the Template Settings list, choose All Archive Pages
Click on the Create Template button
Click on the Add Custom Body option and choose Build Custom Body
Click on the Green Plus Icon
to insert a new RowChoose a 1 Column layout
Search for and add the Blog module
In the Content Tab → Content, enable the Post For Current Page option
Choose how many posts you want to display per page by changing the Post Count value
Go to Design Tab → Layout and choose Grid
Save your changes and close the Visual Builder
Save the Theme Builder changes by clicking on the Save Changes button
The final result can be seen in the image below:
Note: Because the Blog module has the Post For Current Page option enabled, it will only display posts related to each archive page.
Examples:
If you are browsing the News category page, it will only show the Posts assigned to the News category.
If you are browsing the Author archive page, it will only show Posts published by that specific Author.
Pro Tip: The same template can also be assigned to the Search Results page.
In this case, the Search results page will use the same layout as above and display only Posts related to your search query.
Customize the Archive Page's layout using Custom CSS
Go to WordPress Dashboard → Divi → Theme Options → General Tab → Custom CSS
Copy/Paste the following CSS Code:
/* 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;
}
}
This will create a 3-column layout displaying 3 posts per row. However, you can still modify it to any number you'd like. To do that, in this CSS 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;
}
Change the number 3 to the number of columns you want to have.
Bonus: Change the previous/next navigation to numbered navigation
You may also prefer to have your archive pages numbered instead of saying Older entries and Newer entries. For this, follow these steps:
Install and activate the WP-PageNavi plugin
Tweak its settings by going to WordPress Dashboard → Settings → PageNavi
Add this JS code to Divi → Theme Option → Integration tab → Header
<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>