Documentation › Creating Three-Column Horizontal Widget Areas

Creating Three-Column Horizontal Widget Areas

By default, widget area blocks are configured to accept four widgets horizontally. (Widget area blocks can be set to align vertically or horizontally. Vertical widget areas simply stack widgets on top of each other—check out the block options!).

headway-docs-hor-widgets

Adding a Custom Class

Start by adding a custom class to your horizontally-aligned widget area. Pick anything you like; I like to use something sensible like “threecol” or “threecolwidget.”

headway-docs-hor-widgets-class

Add Live CSS

Open Design Mode to access the Live CSS Editor.

headway-docs-live-css

The CSS we’ll want to add targets the list items within the unordered list that makes up the widget area. Each new widget you add is a separate list item, so we want to fit three of these horizontally (instead of four).

	
.block-type-widget-area.threecol .horizontal-sidebar li.widget { 	    
width: 33%; 	    
margin: 0; 	    
-webkit-box-sizing: border-box; 	    
-moz-box-sizing: border-box; 	    
box-sizing: border-box; 	
} 

And that’s it!

This article was last updated for Headway version 3.8.3

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress