With the arrival of Version 3 of Xtreme, designing Full width sites has become a lot easier.
This tutorial will take you through the different types of Full width designs, and how to achieve them with Weaver Xtreme.

First, it is important to understand that when you set the Theme Site Width, you are actually setting a maximum width. This is to make sure that the site remains responsive.

When the browser is larger than the site width, the site will be limited to the site width value and centered in the browser, but when the browser becomes smaller than the site width, the site will scale down with the browser, so the content does not get cutoff.

Now with the proliferation of wide screens, designing site that stretches to the full width of the browser has become more common, so Xtreme is regrouping all the full width options in a single tab located at:

• Customizer interface: Appearance > Customize > Layout > Site Widths
• Legacy interface: Appearance Weaver Xtreme Admin > Main options > Full Width

 
EDIT: With the introduction of version 4, some changes have been made to Full Width handling.

• All the full width options are now located in the “Align Area” option of each area
• Align Full will expand the area to the edges of the browser.
• Align Wide will do the same but maintain a certain space on the left and right of the browser.
• Extend BG to Full Width will keep the width of the content limited to the site width but will stretch the background of the area to the edges of the browser.

 

But Full width can mean several things.

A- Expand Everything

The simplest full width design is to make everything Expand to the edges of the browser (Background as well as Content).

To do that, you can simply set the Wrapper Area Align option to “Align Full”.

Now when content is stretched to full width, it can look weird on wide screens, lines become very long and paragraph just a couple of lines.
So when designing a “full width” site, you may not want ALL areas of the site to Expand to the edge of the browser.
For example, you may want an expanded header and footer, but a content area with a limited width while keeping its background extended to the edges of the browser.

B- Mixing Expanded Areas with Areas of Limited content and Extended Background

This is the most common of Full width design. For example, you may want most content areas to have a maximum width of 1200px, Extend their Background attributes to the edge of the browser, then want a few areas like the Header image and the footer to be full Expanded (Content and background) edge to edge.

This is Where Xtreme v3 has made things a lot easier for you, by offering different area width options in the Align area of each section. To do the above, you would:

• Set the Wrapper theme width to 1200px.
• Set the Wrapper Align Area option to “Extend BG to full width”.
• Set Header Area and Footer Area Align options to “Align Full”.

 

Notes:
Full Width BG color
If you have Plus, you have an alternate third option, which is to extend the background using a different color than the area BG color. The option is called “Extend BG color”, and is located in the “Full Width Tab” of the legacy Admin.
 

IMPORTANT:

• Align Full:
  * Expanding a Main Area (Header Area; Container Area; Footer Area) Automatically expands all its Sub Areas.
  So you should not check Expand on both a Main Area and some of its Sub Areas , as this could cause errors.
  * Align Full expands everything, background attributes AND content.
  It should not be mixed with Extend BG attributes or Extend BG Color on the same element
• Extend BG Attributes:
  * Only expands the background attributes (including color) but keeps the content limited.
  It should NOT be mixed with Extend BG color or Align Full on the same element
• Extend BG color:
  * Is only to be used if the area is NOT expanded and if you need a different color for the extension.
  It should not be mixed with any of the other two on the same element

 
While less common, there is a third configuration for Full width design.

C- Expand everything, then limit the whole Width of some areas

This is if you want to limit the whole area (background and content) to a smaller width.
You would start by making the whole site full width, then use one of the two options below

1- Limit a whole area width using a percentage of the rest.
You can use the Width % box to limit a specific area to a % of the whole site. So if you setup your site to “Display Entire Site Full width”, you could for example set the Container Area (Content and Sidebars) to 80% of that. This will always leave a 10% space on each side of the Container area, except on phones where the Container will go back to being 100% of the width.

The Width % option box is found in:

• Customizer interface: Appearance > Customize > Spacing, Width… > Wrapping/Header/Footer Areas
• Legacy interface: Appearance Weaver Xtreme Admin > Main options > Wrapping Areas / Header / Footer pages

 

2- Limit a whole Area to a smaller max-width
If you have the “Plus” plugin, you also have the option to setup a max-width for the main areas. The difference with the Width % above, is that if your site / browser is 2000px wide, and you setup the Container Area to have a max-width of 1200px, as the browser gets smaller, the empty space on the sides will progressively be eliminated until the browser is 1200px wide, after that, everything will scale down with the browser.

The max-width option boxes are found in the same place as the Width % option.

Note: If you do not have “Plus”, you can set a max-width to a specific area, by adding the CSS rule below in its Background CSS+ box

{max-width:1100px; margin:0 auto;}

D- Advanced Customizations

Creating content sections, either Expanded or with Extended BG attributes.

A- Using Posts.

You may need to set the overflow of the #content containers to visible and remove paddings by adding the rule below in the Global CSS rule box. xxx is the page ID number of your page.

.page-id-xxx #container, 
.page-id-xxx #content, 
.page-id-xxx .post-area, 
.page-id-xxx .content-page {
overflow:visible;padding:0;
}

You may want to create a post category that will be used just for that. If you have the Weaver Show Posts Plugin, you can use slider posts for that purpose so they don’t mix with your regular posts.

Then, your posts editing pages include a few options for Full Width content that are found under the “Per Post Style” box. They are Post BG, Extend BG, Post text Color, Padding and Margin. Specify both a post BG color and an Extend BG color.

Using these options, you can create the various sections of your full width content using one post for each color band.

 
B- Using your own HTML <div>

You can apply the “Extend BG Attributes” or “Stretch (Expand) Area” effect To your own HTML content if you like, by using an Xtreme classes.

• The Extend BG Attributes class is: wvrx-fullwidth
• The Stretch (Expand) Area class is: wvrx-expand-full

 
Like with the posts method above, You may need to set the overflow of the #content containers to visible and remove paddings by adding the rule below in the Global CSS rule box. xxx is the page ID number of your page.

.page-id-xxx #container, 
.page-id-xxx #content, 
.page-id-xxx .post-area, 
.page-id-xxx .content-page {
overflow:visible;padding:0;
}

 

For example the code for your own div with Expanded area or Extended BG Attribute would look like.

<div class="wvrx-expand-full mydiv1" >Your content</div>
<div class="wvrx-fullwidth mydiv2" >Your content</div>

You could add additional styling for your divs with custom CSS like below in the theme Global Custom CSS Rule Box

You do want to set your <div> to "box-sizing:border-box" so their width and padding work with the Extension.

.mydiv1 {padding:10px;width:100%;background-color:lightgrey;box-sizing:border-box;}
.mydiv2 {padding:10px;width:100%;background-color:yellow;box-sizing:border-box;}

Expanding your own div will require the div to be in an area that has no L/R padding.