Site Width

24/05/2018

Avada includes various options that control the overall Site Width, Content and Sidebar Width. You can also choose between a boxed or wide layout for your pages. All these options are located under Appearance > Theme Options > Layout. To learn more about these various options, keep reading below.

Layout Options

The Theme Options layout section makes it easy for you to manage your sites layout type, width, padding and sidebar layouts. Choose between Boxed and Wide layouts, set page content padding, 100% width pages' left and right padding, adjust the top and bottom margins for all column sizes and single and dual sidebar layouts.

Layout - Illustrated as A. Choose between Boxed or Wide for your site. These are global Theme Options and can be overridden by individual page Fusion Options on a page by page basis. The Boxed option will restrict your site's width to the value set in the site width option, using any valid CSS unit for example: 1170px - In the boxed mode, it is possible to set a background image, background pattern or a background color for your site. The Wide option will display your site at the width set in the site width option, using any valid CSS unit for example: 1170px or 100% width of the browser window.

Site Width - Illustrated as B. This option allows you to set the overall site width in the boxed or wide layout. You can use a pixel value (px), or a percentage (%). If you'd like your site to span the full browser width enter 100% as a value. If you'd prefer a set size, you can enter something like 1170px. To further customize your site's layout, we also have left and right padding options for the Header, Footer and Main Content Area found in Theme Options.

Boxed Mode Top/Bottom Offset - Illustrated as C. This option controls the top/bottom offset of the box in which the entire page is in boxed mode

Boxed Mode Offset Scroll Mode - Illustrated as D. Choose between Framed scrolling or Full scrolling. Framed scrolling will always make the top/bottom offset of the box visible when scrolling. Full scrolling will also scroll the offset along with the page

Boxed Mode Shadow Type - Illustrated as E. This option controls the type of the shadow the boxed mode will show.

Page Content Padding - Illustrated as F. These options control the top and bottom padding for all your page content. To learn more about this option, please read our 'Page Content Padding' article.

100% Width Left/Right Padding - Illustrated as G. This option controls the left and right padding for page content when using 100% site width or 100% width page template. Enter value including any valid CSS unit, for example: 30px

Single and Dual Sidebar Layouts

Here you can control single and dual sidebar layouts for your site.

Single Sidebar Width - Illustrated as A. This option controls the width of a single sidebar on all pages. Enter value including any valid CSS unit, for example: 23% - Click here to see a demo example of a single sidebar layout.

Single Sidebar Gutter - Illustrated as B. This option Controls the space between the main content and a single sidebar.

Dual Sidebar Width 1 - Illustrated as C. This option controls the width of sidebar 1 when dual sidebars are present. Enter value including any valid CSS unit, for example: 21% - Click here to see a demo example of a dual sidebar layout.

Dual Sidebar Width 2 - Illustrated as D. This option controls the width of sidebar 2 when dual sidebars are present. Enter value including any valid CSS unit, for example: 21% - Click here to see a demo example of a dual sidebar layout.

Dual Sidebar Gutter - Illustrated as E. This option Controls the space between the main content and dual sidebars.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept