Xtreme Widget Areas are one of two powerful tools to create complex responsive layouts.

After reading about Widget Areas below, make sure to also read the Article on the X-Plus Flex Columns Widget tool below.
https://guide.weavertheme.com/x-plus-flex-widget-usage-and-customizations/

Responsive and Adaptive Layouts for multiple widgets inside Widget Areas

Weaver Xtreme Includes many different Widget Areas. They can be found in Appearance > Widgets, this is where you add content into them, by dropping widgets in them.

The settings for these widget areas can be found in a few places

• Sidebar & Layout holds the options for:
  • Primary & Secondary Sidebar Widget Areas
  • Top Widget Areas
  • Bottom Widget Areas
• Header has the options for the Header Widget Area
• Footer has the Options for the Footer Widget Area

 

Xtreme Also supports an unlimited number of Custom Per Page Widget Areas that can either replace any of the above in any given page, or be inserted anywhere using a Widget Shortcode (requires “Plus” plugin). This is covered in a separate Tutorial.

Widget Areas Layouts

Xtreme comes standard with the ability to define any number of responsive columns for these various Widget Areas, the number of columns will be automatically reduced on Small Tablets and Phones to prevent the columns from becoming too narrow.
Just set a number of columns, drop several widgets in the Area, and then progressively reduce your browser size to see how the layout changes when you cross the small tablet threshold (768px) and the phone threshold (580px).

The Plus Plugin adds infinite layout possibilities with the “Custom Widget Widths” option.
With it, you can specify any number of rows and individual widths for the widgets, as well as specify different set of values for Desktop, Small Tablets and Phones.
This gives you full control over the layout of all your widgets and its adaptability to small devices.

For example, let us say that you have placed 6 widgets in Appearance > Widgets > Footer Widget Area.
Then you put the following values in the Main Options > Footer > Footer Widget Area section > Custom Widget Widths boxes
Desktop:            100;30,70;20,50,30;
Small tablets: 100;30,70;70,30;100;
Phones:              100;100;100;100;100;100;

The values in the Desktop box will organize your widget in 3 rows:
widget 1 full width on the top row (100;)
widget 2&3 on the second row with respective widths of 30% and 70% (30,70;)
Widget 4,5&6 on the third row with respective widths of 20%, 50%, 30% (20,50,30;)

 

The values in the Small tablet box will change it to 4 rows:
widget 1 full width on the top row (100;)
widgets 2&3 on the second row with respective widths of 30% and 70% (30,70;)
widgets 4,5 on the third row with respective widths of 70% and 30% (70,30;)
widgets 6 full width on the third row (100;)

The values in the Phone box will change it to 6 rows:
widget 1,2,3,4,5,6 full width on separate rows (100;)

The Smart margin is the horizontal space between widgets. (Default 1% change in Main Options > Custom)
That margin is taken of the width of the widget on the left, so 50,50; will create  49% + 1% space + 50%.

Always put a semi colon (;) at the end of a row, and keep the total width for each row at or under 100%.
The Small Tablet and Phone boxes values define how the layout changes for each of these screen sizes.
This allows you to control how the widgets spread on smaller screen so they do not become too narrow.

Note-1: In the Header Widget Area, and combined with the Extra Menu Shortcode, this will allow you to create any responsive header layout for logo, slider, menu etc… You can organize imagery and menus in any way you like, and have their layout adapt to any screen size. This makes for limitless design possibilities of the header area.

Note-2: Weaver II users may think that they have less Sidebar Widget Areas in Weaver Xtreme. But using the Custom Widget Widths feature they now have an infinite number of possible layouts.

Note-3: Widgets are separated by a 1% default Smart horizontal margin. If you have “Plus”, you can change that value in Main options > Fonts & Custom page.
The Smart margin is created with a right margin on every widget except the last of each row.
This means that every widget except the last will actually be 1% smaller than specified. This will usually be unnoticeable, unless you are creating equal width widgets layout. In that case, you may want to account for it in the width values you specify.
For example if to get 3 equal columns you specify
Desktop: 33.33, 33.33, 33.33;
You will end up with:
32.33 – 1 – 32.33 – 1 – 33.33
So the first two will be smaller than the last. To anticipate this issue you can make the following calculation.
The two margins means the widths only use 98%. Divide that by 3 and you get 32.66%. So the way to specify the width to get three equally wide widget is
33.66, 33.66, 32.66;
That will give you
32.66 – 1 – 32.66 – 1- 32.66

Equal Heights Widget Rows

“Plus” also Adds a unique “Equal Height Widget Rows” Option that will make sure all the widgets in a given row will have the same height for a clean look (works both on default columns or custom widget widths).

a- Using the widget equalization feature on your own elements
If you create your own set of widgets or columns in your content you have a way to invoke the equalization function on your own elements.
(If you need help creating a group of responsive columns or widgets, below is a generator that will do it for you)
http://forum.weavertheme.com/discussion/9939/responsive-and-adaptive-columns-and-widgets-layouts-generators#Item_1  )

There are only two prerequisite conditions.
All the columns or widgets divs must be inside a div container with an ID name (ie: mycont)
All the columns or widgets divs must have a common class called widget

To invoke the equalization for such a set of divs in your page, you would simply add the class   widget-eq  to the container div classes like in the example below.

<div id="mycont" class="widget-eq">
<div class="widget mywidget mywidget-1">content of widget </div>
<div class="widget mywidget mywidget-2">content of widget </div>
<div class="widget mywidget mywidget-3">content of widget 3</div>
</div>

You can see it in action on responsive columns and widgets in the pages below. Columns and widget are generated with the code generator mentioned above.
They are inserted twice side by side on the page.
Then the left one is equalized with the procedure described above.
Reduce your browser width and observe both areas behaviors.

http://demo.weavertheme.com/columns/
http://demo.weavertheme.com/widgets/

b- Margin on last widget row
If you need vertical separation between widgets, you need to set a bottom margin for your widgets.
By default that options Leaves the Widget Bottom margin on the last widget row.

If you wish to eliminate the bottom margin on the last widget row, simply put the class   nobm   in the “Add Classes” option box.
 

NOTE on Flow Color & Equal Height Widget Rows with dynamic content

Weaver Xtreme includes two height equalization features.
Sidebars & Layout > “Flow Color” and “Equal Height Widget Rows”

The first one makes the sidebars and content containers the same height by extending whichever container(s) is (are) shorter with a calculated min width style value.
The second does the same with widgets on the same row of a widget area.

This equalization takes place when the page is loaded, or refreshed, and whenever the wrapper is resized. So it is maintained dynamically when changing the browser size, or on mobile devices when switching between portrait and landscape.

If you are using an extra menu that can expands and contract like the standard type in mobile slide open mode, or the accordion type vertical menu when opening and closing submenus, the equalization is also performed when their size changes, as they can not only expand, but also contract content.

If you happen to add your own dynamic content in a widget area or #content area, and if you are using “Flow color” or “Equal Height Widget Rows”, when that dynamic content expands, it will cause an expansion of the wrapper that will cause the equalization to be updated, but when your dynamic content contracts, the reduction in size will not trigger any wrapper size change. So unless you refresh the page, the empty space created by the contraction will not be reclaimed.

If you need to make sure that empty space is indeed reclaimed as soon as the dynamic content contracts, you can ask the theme to monitor your dynamic content and refresh “Flow color” or “Equal Height Widget Rows” when it happens.

To do that, you will need the container of your dynamic content to have and ID and you will need to give it the class dynamic-content

<div id=”mydivid” class="dynamic-content"....>The dynamic content</div>

 
Important:
If you are not using “Flow Color” or “Equal Height Widget Rows” in the area where your content is located, there is no need for this.
So make sure to test your page beforehand, and only implement if absolutely required.