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.
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 sites width to the value set in the site width option, using any valid CSS unit for example: 1170px – In 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 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.
Page Content Padding – Illustrated as C. 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 D. 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
Column Margins – Illustrated as E. This option controls the top and bottom margin for all column sizes. Enter value including any valid CSS unit, for example: 0px 20px
Single and Dual Sidebar Layouts
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.
Dual Sidebar Width 1 – Illustrated as B. 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 C. 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.