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

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

by Loknath Das

3-columns-bloglayout

LIVE PREVIEW

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.

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

01/* # 3 Columns Grid layout for Blog Page
02------------------------------------------------------------ */
03.grid-layout .page.entry {
04  padding: 100px 0 0;
05}
06
07.grid-view-blog, .grid-layout .page .entry-header {
08    padding: 0 40px;
09}
10
11#grid-view-blog .entry-header > h2.entry-title {
12  font-size: 36px;
13}

[“source=carblogindia”]

You may also like

error: Content is protected !!