Widget Areas

2 min read Updated

Widget areas show widgets around your page content. North has three, Main Sidebar, Footer Widgets and Top Bar, and WooCommerce adds a fourth, Shop Sidebar. Add widgets at AppearanceWidgets or at AppearanceCustomizeWidgets, where you see each change in the preview.

The Widgets screen with the Main Sidebar, Footer Widgets, Top Bar and Shop Sidebar areas

Main Sidebar

The Main Sidebar shows beside the content of posts, pages, archives and search results, on the right by default. It shows only when it has at least one widget, and only on pages that use the Default or Full Width, With Sidebar layout. Widgets stack one above the other.

  • To move it to the left or change its width, use Sidebar Position and Sidebar Width (default 35%) in Page Structure.
  • To hide it on one page, set Page Layout to No Sidebar in Page Settings. For the blog page and archives, use Page Template Settings.

On screens 600px wide or narrower, the sidebar moves below the content, unless you turn on Disable Responsive Layout in Responsive.

The Footer Widgets area shows above the footer bottom bar. North gives each widget its own column, so four widgets make four columns of equal width, up to 10 columns. On screens 640px wide or narrower, the columns stack, unless the responsive layout is off. If the area is empty, only the bottom bar shows.

To hide the footer widgets on one page, tick Hide Footer Widgets in Page Settings. The Stripped layout also hides them; in both cases the bottom bar still shows. For colors, padding and the footer text, see Footer.

Top Bar

The Top Bar shows above the header. Widgets in this area replace the Text Above setting in Header. Widgets sit side by side, up to 10, and stack on screens 768px wide or narrower. Use it for a phone number, opening hours or social links, for example “Call us: 302-555-0142”.

Set the top bar background and padding with Background Top Color and Top Bar Widgets Padding in Header. The top bar shows only when it has a widget or text.

Shop Sidebar

This area shows only when WooCommerce is active. It shows on the Shop page, product category and tag pages, and single product pages. If the Shop Sidebar has no widgets, North shows the Main Sidebar widgets there instead. Cart and checkout pages are normal pages, so they use the Main Sidebar.

Set its side, or turn it off, with Shop Sidebar Position (Left, Right or None; default Right) in WooCommerce.

Widgets in Page Content

To place widgets inside a page instead of a widget area, use Page Builder and the SiteOrigin Widgets Bundle.