Hi guys so welcome to Divi People and this is gonna to be my first post on this site.So today i will show you how you can simply give your archive and Search Result pages a makeover with some Css and Javascripts.So every thing is gonna to be free because we didn’t need any plugin for this but of course we need a child theme for this.So with the child theme our Main theme(Divi) will be always safe because no any changes is gonna to be happen in our Main theme.To Download a Child theme click here.

After Downloading this free Child theme you should now go to your WordPress Dashboard > Appearance>Themes and then click on Add New.

Now Click on the Upload button and then Choose the Divi Child theme that you’ve downloaded before.

Now you will have your Child theme installed and active on your site.

So now what we have to do is to copy some Css from here and simply paste it Divi>Theme Options and then in the Custom Css Box.

To Remove Sidebar on Archive Pages

If you Don’t want Sidebar on your Archive pages you can simply use this Css from here.But if you like to have Sidebar on archive pages you can simply skip this Css.

h

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

Making a 3 Column Layout on Archive pages

We need to give some styling to Archive and Search Result pages (and if you use default blog page this will add 3 column to that as well) by giving them a 3 column layout which you can get by using this Css from here.

h

CSS

/* Archive and Search Result page 3 column by DiviPeople*/
.blog .et_pb_post,
.search .et_pb_post,
.archive .et_pb_post {
width: 67.3%;
float: left;
border: 1px solid #ededed;
margin-top: 20px;
margin-right: 3%;
margin-bottom: 20px;
padding: 10px;
}
.blog .et_pb_post img,
.search .et_pb_post img,
.archive .et_pb_post img{margin-bottom: 10px;}
.blog .et_pb_post:nth-of-type(3n),
.search .et_pb_post:nth-of-type(3n),
.archive .et_pb_post:nth-of-type(3n) {margin-right: 0%;}
@media only screen and ( min-width: 1025px ) {
.blog .et_pb_post:nth-of-type(3n+4),
.search .et_pb_post:nth-of-type(3n+4),
.archive .et_pb_post:nth-of-type(3n+4) {clear: both;}
}
@media only screen and ( min-width: 768px ) and ( max-width: 1024px ) {
.blog .et_pb_post,
.search .et_pb_post,
.archive .et_pb_post {width: 90.5%;}
.blog .et_pb_post:nth-of-type(2n+1),
.search .et_pb_post:nth-of-type(2n+1),
.archive .et_pb_post:nth-of-type(2n+1) {margin-right: 3%;}
.blog .et_pb_post:nth-of-type(2n+2),
.search .et_pb_post:nth-of-type(2n+2),
.archive .et_pb_post:nth-of-type(2n+2) {margin-right: 0%;}
}
@media only screen and ( max-width: 767px ) {
.blog .et_pb_post,
.search .et_pb_post,
.archive .et_pb_post {
width: 100%;
margin-right: 0%;
}
}
.blog #left-area,
.search #left-area,
.archive #left-area {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 60px;
column-gap: 60px;
}
.blog .et_pb_post > a,
.archive .et_pb_post > a,
.search .et_pb_post > a {
margin: -20px -20px 10px;
display: block;
}
.blog #left-area .et_pb_post,
.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: 0px;
background-color: #fff;
word-wrap: break-word;
display: inline-block;
}

Adding Hover Effect to Archive cards

So now it’s time to add some extra Effects to the Archive Cards by adding Box Shadow and  Border-radius and Hover Effects to that as well.Using this Css:

h

CSS


/* Styling the Masonary Layout*/
.search #left-area .et_pb_post, .archive #left-area .et_pb_post{
border-radius: 16px;
border: none;
transition: 0.35s ease-in-out;
box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.12);
}
.search #left-area .et_pb_post:hover, .archive #left-area .et_pb_post:hover{
box-shadow: 0 13px 50px rgba(0, 0, 0, 0.12);
transition: 0.35s ease-in-out;
}
.et_pb_post .entry-title a, .et_pb_post h2 a {
font-family: Nunito !important;
text-align:center;
font-size:22px;
}
/* END Styling*/

And that’s it for the styling now look at your Archive and Search Result pages they might be looking like this:

Adjusting Pagination at it's position

You might have seen that the pagination is not in the perfect position.To adjust it’s position you have to paste this JS to Divi>Theme Options>integeration in the Add code to the < head > of your blog paste this Js.

h

JS

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

After pasting this JS in it’s position make sure to Click on the Save Button to Save All the Changes.And now you will have pagination in position.