Today we want to show in very few steps how we styled our Category pages and in particular the three ones we chose for our homepage Blog Card section we covered in the last friday post.

So, let’s get started with a sneakpeak!

TWO COLUMNS LAYOUT

First of all let’s define our archive two-columns layout. We borrowed a good part of the code from Elegant Themes blog (see here) but we obvoiusly have to do some edits. So we open our Divi Theme Options -> General -> Custom Css and we add the following css:

THE SIDEBAR

Ok, now we can pass to style our sidebar, we want to customize our search bar with a little animation on hover and style the categories like a series of labels coming in from the right; in order to get our result we add the following css code:

WP PAGENAVI

Finally we add some code to give the right position to our pagenavi pagination:

FINAL THOUGHTS

All done! We have our archive page (search or category or author etc) set up, now our visitors clicking on the category blog cards on homepage will be redirected to the relative category page, the design will be the same for all archive pages except for the three main categories, Design, Snippets and Tools that will have the hover border color of the search bar customized.

Hope it can be useful. See you next post!

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!