Layouts and HTML Insertion Areas
One of the most powerful aspect of Xtreme are its extensive and flexible layout possibilities. This Tutorial illustrate all of the various content areas the Theme has to offer, and how you can manage them across pages and devices.
The image below illustrate all the Content areas of the Header, including Widget Areas and HTML Insertion Areas.
The one marked (Plus only) require the Xtreme “Plus” Plugin
Some of these areas have options to be moved in a different location.
- The Primary Menu Bar can be moved to the top, just below the secondary menu bar. Conversely, the Secondary Menu Bar can be moved to the bottom right above the primary menu bar. These options are useful to create a double Menu Bar either at the top or bottom of the header.
- If you have “Plus”, the Header Widget Area (Blue box with 2 widgets) can also be moved in different locations, as illustrated by the pictures below.
Default Header Widget Area at the Top
The image below illustrate all the Content areas of the Container (between Header and Footer), including Widget Areas and HTML Insertion Areas.
Posts Container Areas
The image below illustrate all the Content areas of the Container in a page with posts, including Widget Areas and HTML Insertion Areas.
The sidebars support two Widget Areas (Primary and Secondary). There are other Widget Areas supported, and described in the tutorial below.
If you want a multiple columns 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. More options are available with the “plus” plugin
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 Sidebar & 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 various sidebar arrangements appear on any of your desktop view pages.
Xtreme also offers different Sidebar layouts for each device size as illustrated below.
Desktop: Weaver Xtreme supports four sidebar layouts arrangements:
Small tablets: By default, on Small Tablets, the two sidebar Widget Areas will move side by side below the content area. You have three alternate options that will move the Primary Sidebar Widget Area above the content, and the Secondary one below the content. These Sidebars Layout options are labeled (stack top). This allows the flexibility to have navigation in the primary sidebar area instead of the main menus.
Phones: By default both sidebar Widget Areas will stack vertically below the content. If using the (stack top) Sidebar Layout options, they will look like on Small Tablets, with the primary Widget Area above content, and the secondary below it.
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%).
There is only one per page Sidebar width option box. If using split sidebars and you need different width for left and right on a specific page, there is a tutorial (#4 titled Changing Split Sidebar width on a per page basis) for that below
– There is and HTML insertion area called Pre Sidebar that will insert content at the top of the Primary Sidebar Widget Area. This is useful when use with a Custom Field to add content only on specific pages or post.
Read about Custom Field below
– “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.
The image below illustrates all the Content Areas of the Footer, including Widget Areas and HTML Insertion Areas.
HTML Insertion Areas:
a- All HTML Insertion Areas illustrated above can be used globally for all pages (Advanced Options > HTML Insertion), but can also be used on a per page basis using Custom Fields.
If not familiar with Custom Field, Read the Tutorial below
b- When using HTML Insertion Areas with a Page or post Custom Field, you can still use the BG color option and CSS+ box to style them in their Global settings (Advanced Options > HTML Insertion).
Widget Areas: These are covered in more details in the below tutorials
In addition to the Tutorial below, you can also visit the Demo Site Insertion Areas page below