How to Give Your Divi Archive Pages a Masonry Layout

Posted on August 16, 2016 by in Divi Resources | 107 comments

How to Give Your Divi Archive Pages a Masonry Layout

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

masonry-archive-pages-default

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.

masonry-archive-pages-after

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 < 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>

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!

divi-2-6-logo

Divi 100 Day 78

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


107 Comments

  1. This is amazing way to display archive pages, thanks! It never fails to surprise me how people forget the various types of archives pages and how you need to ensure that they look and work beautifully.

    People also need to remember that, if you do not “noindex” them, they may be found by website visitors via Google too.

  2. Randy A. Brown

    Thanks Nathan! Archive pages are usually ignored completely. If you use a magazine layout then the standard archive won’t match at all. This helps a LOT!

    Tomorrow’s wireframe kit will be popular!!! And it’s great timing because I’m designing a site that needs it! Thanks!

  3. This should be build in theme options by default!

    • Nathan B. Weller

      I believe something along these lines (but better) is on the Divi development roadmap. No date set for it yet though.

    • I always thought this too, I very much dislike the full width image layout.

    • oh the Best thing would be an EXTRADIVI Theme 😉

  4. How can I arrange former posts previews below an post (kind of footer gallery) as a preview to older posts – instead of a list of older posts?

    Thx Tom

    • Nathan B. Weller

      Hey Tom, I’m not sure I understand what you mean. If you have an example you can link me to I’d like to see it. Send it to me via email please: nathan [at] elegantthemes [dot] com.

  5. Hi Nathan,

    The post of yesterday mentioned that you were going to talk about the creatieve use of background images in Divi. I was looking forward to that. What happend? Not that the above is not interesting…

    Cheers!

    • Nathan B. Weller

      That was the original plan but we needed to re-arrange things. Sorry about that! That post is now going to be a mini series where we go into more depth. So don’t worry, if you were looking forward to it you’ll still get it 🙂

      • Yeah! Even better…

  6. Great Stuff, Nathan, very helpful!

    FYI, Might be a typo in the JS “pageNavi.lengh”.

    Keep up the good work.

    • Nathan B. Weller

      Thanks Pete! And it looks like that spelling is actually correct (since the code works).

      • Please check with Eduard. My guess is the else code path is always taken.

  7. This seems a rather faffy way of doing something that can be done with a simple 301 redirect and the blog module.

    Redirect your archive urls to a new page (one page for each archive obviosuly). Use the builder to then build you page how you want it to look using the blog module for the main archive and all the other awesome resources in the builder.

    We do this and also use the post slider at the top for the latest post, then offset the blog module by 1.

    Gavin.

    • Nathan B. Weller

      Hey Gavin, as with most things WordPress and Divi, there are almost always many ways to do anything you want. Your solution sounds good too!

      • One of the great things about Divi!

    • I was considering doing a similar approach for a client, but I honestly don’t know the effect it has a on page rankings and creating an impression with search engines, when all the archive pages are redirecting to other pages. And I’m wondering how these pages look in a Google search, too. Does an archive page get a 301 redirect message as the description in a SE search?

      Either way, I’m glad there will be more native support for the Archive pages in 3.0. That will definitely save us some time and keep the global site design consistent.

      • I don’t think Nathan said it will definitely be in 3.0; he just stated it is on the Divi roadmap. So it might be further down the line. 😉

        • Thanks, I see that now. Well, hopefully sooner than later. 😉 The archive pages are such an integral part of the WP build, it makes sense to work with them, rather than working around them.

    • Hi Gavin, This didnt work for me so I want to try your method – how do redirect an archive url?

    • Hi Gavin,

      This fix didn’t work for me so I want to try your suggestion, but how do you re-direct an archive url?

    • Hi Gavin,

      I’d be interested to know more about your solution. Like you the idea of redirecting the existing archive pages to new ones you can design better in divi without lots of CSS code being added sounds much better.

      When building for example a new category archive page what do you do to ensure the correct content shows when you save this new page. I understand the redirection part but since the normal archive pages exist naturally I’m not sure what code you need to pull in the right data for your new version.

      Hope this makes sense.

      Gary

  8. Cool stuff, now my projects and post archives looks good!
    I love these Divi 100 days…

  9. Thanks Nathan and @Eduard — you rock!

    This resource is excellent and timely. Two questions:

    1. For the second snippet the article states:

    “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.”

    Is there a word/phrase missing in the “Add code to the xxxxx of your blog.” sentence?

    2. Can these snippets be placed in the child theme style.css file instead of the divi theme options field?

    Thanks again for a great article!

    Donovan

    • Nathan B. Weller

      Hi Donovan, yes you can place the css snippet in the child theme style.css sheet if that is your preference. And the JS snippet goes in the < head > section.

      • Thanks Nathan. Is it possible to adjust the styling of the archive article cards to match the Divi 100 Article Cards Extension?

        The Divi 100 Article Cards Extension ((http://www.elegantthemes.com/blog/divi-resources/free-divi-extension-gives-the-divi-blog-module-a-brand-new-look)) provides 1/2 of a great solution (blog index page styling). This new resource provides the other 1/2 (archives page styling). Unfortunately, the design/styling of the two resources are are completely different/incompatible.

        Harmonizing the styling of the two resources would provide a complete, well-needed solution. Is this possible?

        Thanks!

        • Hi Donovan,

          Did you get an answer or solution to this? Like you I’m currently using the article card from 100 days of divi and then another modified layout for single post. The default pages for archives etc are just not up to it. This at least goes some way to address it by improving the look but matching the article card look would be better.

          Gary

  10. This is nice and useful. It would be great to see how a similar thing could be done with php functions to move things / remove sidebars.

    I know it’s less efficient “currently” with Divi 2.x and so jquery for moving and css for hiding and styling is the way. Hohping the 3.0 developer release will give us some nice new options.

    In the meantime ET – keep up the awesome work. You guys rulez

  11. Very nice! I was just looking for a way to improve the layout for search pages for one of my projects. Thank you!

  12. Thanks Nathan!

    Looking forward to your post on the use of background images in css in Divi! When will that be featured?

    • Nathan B. Weller

      Unfortunately it got bumped to after the Divi 100 Marathon. However, it will be more in-depth and helpful than the original version I had planned.

  13. Hmm, not sure what I’m doing wrong, but when I copy paste the code into CSS or into the CSS file, nothing changes.

    • Nathan B. Weller

      Hi Marcus, sorry you’re having difficulties with this code. I’d suggest creating a ticket in our support forum so our support team can help you figure out what’s going on http://elegantthemes.com/forum

  14. Hi Nathan,
    Thank you for your tutorial.

    One question: When I remove “Remove sidebar on all archive pages” from the code, my archive page cracks. I tried different things to fix it, but they haven’t worked.

    Do you know if I need also to change the Javascript in this case?

    • Nathan B. Weller

      Hi Bruno, I’m not sure why that would happen. It might be something else on your site causing a conflict that we didn’t have on our test sites. I’d recommend creating a ticket in our support forum to see if they can help you out with that http://elegantthemes.com/forum

  15. Interesting solution, BUT it doesn’t work 100% 🙁
    It works in some browsers, doesn’t work in others. Did you really test your CSS?

    For me, it doesn’t work in Chrome ( break-inside: avoid-column; seems to be treated as unknown property)

    Also the new page navigation bar is not placed correctly on all pages…

    I will open a ticket with your support, but I think you should have tested more thoroughly this hack.

    • Nathan B. Weller

      I tested it in chrome and it worked fine for me. So did Eduard. I would recommend creating the ticket to see if we can discover what’s going on.

    • Hi Victor I have the same issue it doesn’t work in my Chrome. If you find an answer to this issue would you share with me… I’d appreciate it, thank you!

  16. Thanks for sharing the code, Eduard! 🙂

  17. Hi, that´s something i was looking for but i have a problem. When i add the java script all it does is moving my sidebar (i let it stay) bellow the posts. The posts remain looking the same and i have an empty sidebar which is now a long line bellow the posts. Anyone having the same problem?

    • my sidebar is also under my posts in all browsers

  18. Beautiful, simple, and easy to implement. Thank YOU Eduard Ungureanu for your gracious gift!

  19. I’d love to see a way for you to use the Divi UI to manage Archive pages, rather than relying on general code inserts that are present on all pages.

  20. Thank you Eduard Ungureanu, Just had one of those customers asking me about that. Didn’t have and answer till now. Thanks. 🙂

  21. Thanks Nathan and @Eduard . Nice work

  22. It totally messes up my shop page layout, why is that?

    • Nathan B. Weller

      I’m not sure why that would happen. I’d recommend creating a ticket in our support forum to see what’s happening.

    • my shop pages also mess up, category images are shrunk down very tiny.

  23. it also broke my woocommerce category pages; it shrunk the category images down super small. I would love the masonry layout to work, but I guess I will wait until it is built into the theme.

    • I have the exact same issue

    • Add the following

      .archive.woocommerce #left-area {
      -moz-column-count: initial;
      column-count: initial;
      -moz-column-gap: initial;
      column-gap: initial;
      }

      • Awesome thank you Richard!!
        This fixed it beautifully!
        Much gratitude

  24. OMG THANK YOU! I cannot wait to get home and do this on my site. For YEARS I have fiddled with the archive code and clunky CSS trying to make it look similar to my beautiful Divi pages. My site is mostly a photo gallery and I use the Date, Tag and Category archives extensively. This is SOOOO great. Thank you thank you thank you. Wish I could buy you all a beer.

  25. Great idea – but can’t get it to work on my page.

    Doesn’t change a thing 🙂

    • Didn’t work for me either (inside Vertex)

  26. Great stuff and thank you for alle the features you guys have been providing.

    I have a problem with the code – no featured images are displayed. Any thoughts ?

  27. I was just looking for a way to improve the layout for search pages for one of my projects. This is nice and useful for my sites!

  28. this is great. one question though. removing sidebar = ok, but the 3 columns still only occupy 3/4 of the screen (the sidebar is simply hidden maybe). Is that what is supposed to happen, or should I open a ticket? I’d like the 3 columns to extend all the way to the right.

    • I find I need to also add the following to achieve a true full width.

      body #page-container #left-area {
      width: 100% !important;
      }

    • That’s really good to know. I’m also wondering why remove the sidebar? People won’t then be able to search the site or naviagate further on those pages? Hope you are able to respond to me and Rikengct’s questions 🙂

      • Would be great if someone responded to my query. I’m new to wordpress and Divi so some illumination would be really helpful. Thanks y’all!

  29. Great post! Tomorrow’s post is right on time for me. The 101st day will be a boring one…

  30. This was very useful. Although, I am having one issue. The code to hide the sidebar worked, but the blog posts are not extending over into that right 1/4 section of the page the same way as it appears in the second image posted. The posts are now masonry in 3 columns, but don’t fill the full page, just the same 3/4 of the page on the left side.

    Not sure what’s up.

  31. Strange to see so many happy people… for me it just not works 🙁 Am I from another planet?

    • I’m on that same planet

  32. Eduard is indeed a very helpful guy! Thanks, Eduard! And thank you, Nathan B. Weller. This is a cool tip.

  33. Thank you for the great post. I have one quick question…
    How can I change the background color of the archive pages so that it is consistent with the background color I create for blog posts and other pages? I’ve set my background color at #fcfcfc. And i would also like these archive pages to have same color as the posts and pages. Looking forward for your help.

  34. This code breaks the function of the WooCommerce shop pages, tripling the columns for product images.

    • add the following

      .archive.woocommerce #left-area {
      -moz-column-count: initial;
      column-count: initial;
      -moz-column-gap: initial;
      column-gap: initial;
      }

  35. It would be very helpful if you had a pdf file of each blog post which shows how to do something in Divi. The users could download the files and not have to search the blog for the article showing how to do what they need.

  36. Wasn’t working for me. I changed ( pageNavi.lengh ) to ( pageNavi.length ) and now it seems to be fine.

    • @Bobby

      Thanks for posting this information!

      I was wondering about it after seeing the conversation @Pete Marcotty started above. Good to have confirmation that it is a typo.

      Cheers!
      jules

  37. Thanks again guys. We ran into an issue with this resource that I hope can be addressed. We are using the excellent Divi 100 Article Cards extension with our blog index page; but the Divi 100 Article Cards does not work on Archive pages. This resource works on archive pages; but the styling is dramatically different from the Divi 100 Article Cards. So, net-net both solutions only address incompatible-halves of the problem.

    Is it possible to modify this resource to utilize the Divi 100 Article Cards styling and hover interaction?

  38. Lack of any response from ET, so I’m sadly removing this styling. My ticket goes unanswered as well

    • Nathan B. Weller

      Hi Guy, sorry your ticket has not been addressed yet. Our response time is typically anywhere between 12-24 hours for new tickets.

      • Fixed now!

  39. If you are having a problem with the woocomerce archive page then you need to change every instance of .archive to .category in the css above.

    Thanks to Alexandru Juc in ET support for this little gem

      • I have changed all the .archive to .category but this still doesn’t work:

        /*
        * Remove sidebar on all archive pages
        */
        .search #main-content .container::before,
        .category #main-content .container::before {
            display: none;
        }
        .search #left-area,
        .category #left-area {
            width: 100%;
            float: none;
            padding-right: 0;
        }
        .search #sidebar,
        .category #sidebar {
            display: none;
        }
         
        /*
        * Create Mansonory styles for archive pages
        */
        .search #left-area,
        .category #left-area {
            -moz-column-count: 3;
                 column-count: 3;
            -moz-column-gap: 60px;
                 column-gap: 60px;
        }
         
        .category .et_pb_post > a,
        .search .et_pb_post > a {
            margin: -20px -20px 10px;
            display: block;
        }
         
        .search #left-area .et_pb_post,
        .category #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,
        .category #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,
        .category #left-area .et_pb_post.format-link,
        .category #left-area .et_pb_post.format-quote,
        .category #left-area .et_pb_post.format-audio{
            padding: 0;
        }
         
        .category .et_pb_post .et_pb_image_container,
        .category .et_pb_post .et_main_video_container,
        .category .et_pb_post .et_audio_content,
        .category .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;
        }
         
        .category .et_pb_post.format-audio .et_audio_content{
            margin: 0px -38px 0px;
        }
         
        .category .et_pb_post .et_pb_slider .et_pb_slide,
        .search .et_pb_post .et_pb_slider .et_pb_slide {
            min-height: 180px;
        }
         
        .category .pagination,
        .search .pagination {
            padding: 20px 0;
        }
         
        /*
        * Media Queries
        */
        @media screen and (max-width: 980px) {
            .search #left-area,
            .category #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,
            .category #left-area {
                -moz-column-count: 1;
                    column-count: 1;
            }
            .search .et_pb_post.format-audio .et_audio_content,
            .category .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,
            .category #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,
            .category #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;
            }
        }

        • – Edit.

          it does work, but it does effect the woocommmerce product search results:

          ?s=keyword&post_type=product

  40. Thanks for the code Eduard — and always your valued assistance on the support team. You’re the best!

  41. I think there is a typo in the javascript? The beginning of the if statement has:

    if ( pageNavi.lengh )

    length is spelt incorrectly.

    Also would not declaring the var keyword in the function for the variable pageNavigation potentially cause a conflict because it would make the scope of this variable global? I’m sure there’s a wooCommerce plugin that uses a pageNavigation variable (I don’t know if scope can be affected like this between themes and plugins though, so it may not matter?).

  42. Works perfectly for Blog and Search Results.

    Woocommerce displays terribly though. Is there a way to exclude woocommerce from the css?

  43. Great resources !
    But I just want to have all kind of lists in ‘Divi 100 Article Card’~* ?

  44. Hi,

    Works fine with the help of Melissa’s reply, about full width for the three columns.

    But there is a problem about the way posts are sorted. Posts are vertically sorted by date, instead of horizontally sorted in the masonry blog layout. Any idea on how to solve that ?

  45. This breaks WooCommerce pages into 3 columns as well. To avoid that you need to add the following code:

    /* Keep WooCommerce Archive pages normal */
    .archive.woocommerce #left-area {
    -moz-column-count: initial;
    column-count: initial;
    -moz-column-gap: initial;
    column-gap: initial;
    }

    • Hi!

      I’ve used the whole code and your fix for woocommerce and it works perfectly, I just have one issue, I’ve skipped the css for removing the sidebar (since I want the sidebar to remain there) but on the search results it gets moved from the sidebar to the bottom (the sidebar space is still there, but the content displays on the bottom of the page…you can see this here: http://mariaorsini.com.mx/?s=rosas

      Any pointers? Would be very grateful!

      • Nathan B. Weller

        I’m not sure why that’s is happening. Please create a support ticket in our forum so we can take a look: elegantthemes.com/forum

  46. I hope Divi gets their archive options easier to use than a bunch of custom code! It’s one of the few things that’s been holding me back from using Divi.

  47. Hi there Nathan, thanks for a great article. I have loved the Divi 100 series. I am having a layout issue with it. I want the sidebar so have commented out that section of the CSS, no probs.

    When I view the archives now, I’m only getting 2 columns and the sidebar has dropped from its right hand position and has jumped below all the posts.

    Also is there a way to just display the first paragraph and show the read only button, like it does for my homepage grid layout?

    I’d appreciate any guidance. Thank you!

    • Nathan B. Weller

      Hi Jason,

      Thanks for stopping by and giving this tutorial a try. I think what might be happening is specific to some people’s websites (the sidebar issue) but not all. In those cases and in the case of you wanting a few unique styles, I think the best solution is to follow up with our support staff so someone can give you individual attention. Please create a ticket in our forum, explain that you’re having trouble getting this tutorial to work the way you’d like it on your website, and provide the details necessary for our support staff to look at the issue and reply with a solution.

      https://elegantthemes.com/forum

      Thanks again!

  48. I did the code and the archive results did go into a masonry style, however all of the thumbnails will not show. I need the thumbnails to show. Plus the header text is huge and spaced awkardly. This is for my blog site blog.mariaangela.com

    • I got the images to show up, but the text headers are way too large

  49. What if you want grid post but aligned and not masonry?

    • Nathan B. Weller

      Hi Tin, thanks for stopping by. For any alterations not covered in the post it’s probably best to create a support ticket in our forum so someone can take a look at your site and exact criteria. https://elegantthemes.com/forum

  50. I am using this code on my site, but having a small issue. I want the sidebar to be there, so I have commented out that code. With the sidebar there, having 3 items across is too tight, so I changed the column-count from 3 to 2. Besides that I have not made any changes to the code.

    Here’s the issue, if I go to an archive page with an odd number of items, the first item in the second column is pushed down. I believe it is due to the 60px column gap. It’s like it’s taking the 60px margin from the bottom of the first column and applying it to the top of the second column.

    If I add the the code back in to remove the sidebar and change the column-count back to 3 it works fine.

    Here are two example urls:
    Odd number: http://www.scruffydog.com/sdc2/our-work/project_category/ongoing-enhancements/

    Even number: http://www.scruffydog.com/sdc2/our-work/project_tag/partners/

    • Nathan B. Weller

      Hi Leslie, I’m sure we can help you out with that but since this is a little different than the post it’s best for us to go through support so they can take a closer look and potentially go back and forth with you easier than we can in the comments. Please create a support ticket here http://elegantthemes.com/forum

  51. Hello Nathan, thanks for this amazing code. I would thank your answer fot these two questions:

    1) Does this code apply to Divi 3? Or Divi 3 includes any new feature for this matter?

    2) Would it be possible to show only excerp in the boxes? I mean not showing a limited full entry text.

    Best regards,
    David.

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest