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!
