Full width widget areas

In theĀ ‘Gridget Styles’ widget, there is a ‘Full Width’ setting that will allow you to force the widget area to extend the full width of the page.

full-width-setting

Please note that this may not match your theme’s styles so it should be used with caution. For example, if your theme pages always have a sidebar, the full-width widget area will extend across and over the sidebar, which is not recommended.

If possible, choose a page template that doesn’t include a sidebar when using a full-width widget area.

Columns

You can set the layout for each widget area separately. This means that you can have a single column hero image at the top of your page, followed by a three column layout featuring icon blocks below, then four columns of text, and so on.

To set the number of columns for your sidebar, use the ‘Layout’ dropdown:

set-columns

The widgets that you add to this widget area will then automatically lay themselves out according to the selected number of columns. If you’ve selected two columns, the first widget you add will sit in the left hand column and the second widget will sit on the right. Drag and drop the widgets to change their order.

column-layout

If you add more widgets than there are columns, the additional widgets will start a new row with the same layout.

three-widgets-two-columns

Styling your widget area

Widget areas created using Gridgets are different from standard widget areas created through your theme because you are able to style them. You do this through a specially created widget, called ‘Gridget Styles’, that will apply styles to widget areas. Note that this will only work with widget areas you’ve created, not with the standard widget areas defined by your theme.

From the Customizer Panel, add the Gridget Styles widget.

add-gridget-styles

Edit the styles for the widget area:

edit-styles

Note that some styles won’t register unless you have other widgets with content in your widget area.

When you’ve made your changes and you’re happy for them to go live, click ‘Save and Publish’ at the top of the Customizer Panel.