Weaver Xtreme supports these sidebar layout arrangements from the Layout panel:

The sidebars support two widget areas (Primary and Secondary). There are other widget areas supported, and described in the next section.

Weaver Xtreme allows control over site page layout, including margins, sidebar layout, and sidebar sizes. There are two major sidebar areas – one on the left of the site, and one on the right. The Layout tab allows you to control which layout is used for most of your pages. You can also set the layout for any individual static page from the Per Page Weaver option box displayed on the static Page Editor admin panel. Thus, you can essentially have any of the 4 different sidebar arrangements appear on any of your desktop view pages.

If you want a double column sidebar, you can specify multiple columns of widgets for any of the widget areas, including the Primary and Secondary widget areas. This is the “Columns” option found on the “Widget Area” option groups.

There are two different responsive display options for each of the 3 arrangements with sidebars. Normally, when the site is viewed on a narrow device, the sidebars will stack vertically above or below the main content area. In normal mode, both the primary and secondary areas will stack below the content. When you select the “stack top” layout, then the primary sidebar will stack above the content on narrow devices, while the secondary area stacks below. This allows the flexibility to have navigation in the primary sidebar area instead of the main menus.

One typical site design is to use one sidebar arrangement for regular pages – the blog, static pages, and single post pages, while using an alternate sidebar arrangement for the Archive-like pages – archives, categories, etc.

The basic version of Weaver Xtreme allows you to specify a sidebar arrangement for those two basic cases. You can also alternatively specify a different sidebar arrangement for your blog, static pages, and the single post page. These options will allow great flexibility in site look. You can also set the sidebar arrangement on a per page basis.

In addition, the Weaver Xtreme Plus version allows you to specify sidebar layout for each of the specific archive-like pages.

You can also specify the width of any of the individual sidebar widget areas. These are expressed as percentages. You can add more precision to the percentage if needed (e.g., 24.375%).

Widget Areas

As part of the over all responsive design of Weaver Xtreme, the spacing between widgets, widget areas, and the content area are now specified using a general size option, and intelligently added by the theme. The theme “knows” how to add margins on the different sides of widgets, widget areas, and the main content area. Normally, you will only have to specify the size of the margin or padding you want. However, the ‘Padding on Sides‘ options allow you to specify which sides have padding.

“Disappearing sidebars” – If you find the sidebars are not displaying in the right place (they will usually end up below the content area), it means there is some incorrect HTML code in your page or post content. This is the most likely reason for this, although incorrect HTML in a widget (usually a text widget) can cause the same symptoms. This behavior is not due to any issues with Weaver Xtreme, but is inherently a part of the way HTML code works. The cause will almost always be a missing </div> tag (or an extra <div>). HTML uses <div>…</div> blocks to determine different parts of a web page. If your content has a missing </div> tag, then the bad HTML will confuse your browser, resulting in the incorrect display of the sidebar. So, remember this. If your layout gets “confused”, or things don’t look right, it is 99.9999% certain you have some bad HTML in your content. If you use Firefox, it will show unbalanced HTML tags in red if you view the page source. There area also HTML validation sites that can help you find the bad code.

Per Page Extra Widget Areas

Weaver Xtreme allows you to have as many widget areas you need. These new widget areas can be displayed on a per page basis. For example, using the Per Page options when you edit a page, you could have a different Top Widget Area, as well as different Primary or Secondary sidebars for every single page of your site if you wanted. You tell Weaver Xtreme to create these areas by providing a list of Widget Area names in this option area found at the bottom of the Sidebars & Layout tab.On the Customizer, this option is found on the Added Content (HTML areas…) -> Sidebars & Widget Areas menu. The names can include letters, underscores, dash, or numbers, but not any spaces or other special characters. You can name them as you will – mytop,mytop2,myprimary and so on. These names are then used in the Per Page option area on the Page Editor screen to specify replacement widget areas. You can also use these extra widget areas with the Weaver Xtreme widget area shortcode.

Important Note: You can reuse extra widget areas on different pages, but they should not be used more than once on any given page. If you use one of these extra widget areas more than once on the same page (for example, in both the header and footer widget areas), the layout results can be unpredictable.

Custom Widget Widths

With Weaver Xtreme Plus, you can optionally specify individual widget widths for most widget areas. This includes specifying widths for specific device: desktop, small tablet, and phones.

You can specify how much space each individual widget takes in a row of the widget area on a percentage basis. For example, say you have three widgets in the Primary Widget Area (sidebar area), and you want the first two on the a top row, each taking half the space, and the third on the second row on the desktop view. You would do this by entering the value 50,50;100; into the Desktop custom value box.

Enter a percent width for each widget, separated by a comma (a blank will work, too). You also must indicate the end of each row by using a semi-colon (;) after the value of the last widget in each row. If you leave out the semi-colon, you might get unexpected wrapping.

Notes:

• Each row should add to no more than 100%.
• You can add as many widgets of varying widths to a row as you want.
• There is no limit to the number of rows.
• Don’t add % to values.
• If you want to hide a specific widget on a particular device (say on phones), use 0 for its width to hide that widget.
• These custom values for specific device sizes override the Columns setting above the custom value boxes.
• The custom values entered for the Top and Bottom Widget areas apply to all top and bottom widget areas: Sitewide, Page, Blog, etc.
• These width settings use the fact that Weaver Xtreme adds a numbered widget class to each widget in a widget area: .widget1, .widget2, etc. So, for example, the rules generated for the first example would look like:

  @media screen and (min-width:768px){ /*#primary-widget-area sb*/
          #primary-widget-area .widget {float:left;margin-left:0;margin-right:0}
          #primary-widget-area .widget-1{width:49.00000%;margin-right:1.00000%;}
          #primary-widget-area .widget-2{width:50.00000%;}
          #primary-widget-area .widget-3{width:100.00000%;}
  }      

Header & Footer Horizontal Widget Areas

Weaver Xtreme allows you to build great looking header and footer areas for your site using the Header and Footer Widget Areas. These areas support multiple widgets displayed horizontally in the header and footer areas. The Header Widget Area can be optionally placed in 4 different locations in the Header area using the “Header Widget Area Position” option on the Layout options tab. The Footer Widget Area is placed at the top of the Footer.

The free Weaver Xtreme version supports equal sized columns. Weaver Xtreme Plus supports columns of arbitrary width.

Consider this very simple example (the uneven column sizes require Weaver Xtreme Plus, but the ideas are the same for the free version). It has a menu on the left, a message next, the site name, and finally a banner image.

Home Page 1 Page 2

Welcome to our site!

Weaver Xtreme Theme

You can use any widget in the Header Widget Area. It is likely the standard Text Widget will be very useful here. For example, you can insert a welcome message, as well as a banner image using the Text Widget. Because Weaver Xtreme adds support for shortcodes in the Text Widget, you can put almost any shortcode feature in your header. But you could also use a Menu widget, a slide show widget, an RSS feed widget – whatever you might want in your header.

Widget Layout

For ultimate control over the look of the Header (or Footer) widget area, you may need Weaver Xtreme Plus. There area advanced options that allow you to specify exact widths for each widget, and for different mobile devices. You can show all or a subset of the widgets available for the widget area.