Created 3 Columns Grid Layout for Blog Page in 5 mins – Whitespace PRO theme

3-columns-bloglayout

Using Genesis Featured Posts Combo plugin and Genesis Widget Areas Generator plugin I created this 3 columns grid layout for my blog posts. It took 5 mins.

Step 1: Created a widget area using Genesis Widget Areas Generator plugin. Navigate to Widget Generator > Add New and created this one

Add New Widget Area for Blog Page
Add New Widget Area for Blog Page

Step 2: Drag&Drop the Genesis Featured Post Combo widget in “Grid Layout for Blog Page” widget area and setup the widget.

Setting Genesis Featured Posts Combo Widget
Setting Genesis Featured Posts Combo Widget

Step 3: Created a Blog page and assigned the “Grid Layout for Blog Page” widget area for that page. Also I entered this “grid-layout” in custom body class text field.

3-columns-blog-layout

Step 4: Added this small css in style.css file

/* # 3 Columns Grid layout for Blog Page
------------------------------------------------------------ */
.grid-layout .page.entry {
  padding: 100px 0 0;
}

.grid-view-blog, .grid-layout .page .entry-header {
    padding: 0 40px;
}

#grid-view-blog .entry-header > h2.entry-title {
  font-size: 36px;
}

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

3 Discussion to This Post

    • Thank you for purchasing my plugin. Are you wanting to display the single post from every category and tag? There have taxonomy drop down. Select “category” and all categories will be listed in 2nd drop down. Choose your category and post will display from that selected category. This process is same for tag also.

  1. Thank you for this post, I love the grid layout of the White Space homepage. I want to incorporate it into my custom site for myself I will be working on and this helps.

Leave A Reply

Your email address will not be published. Required fields are marked *