Site Layout settings

Updated 8 months ago

Site Canvas Layout #

Allows choosing a layout for the canvas of the site header, content, and footer: 

Wide – with this layout the canvas for header, content, and footer will take the full available width of the screen.

Boxed – with this layout the canvas for header, content, and footer will have limited width, and the colored background or a background image will take up the rest of the available space. 

When you pick the Boxed layout, the listed settings become available: 

Body Background Color #

Allows choosing the background color for the site body, that appears behind the site header, content, and footer.

Body Background Image #

Allows choosing the background image for the site body, that appears behind the site header, content, and footer.

You can use additional controls to specify the Body Background Image behavior: 

• Background Size – defines if the image should fill the area, fit to the area, or use its original size. 
• Background Repeat – defines if the image should repeat itself if it's not covering the entire screen area.
• Background Position – defines the anchor for the Body Background Image positioning. 
• Scroll with Page – defines the Body Background Image behavior on scroll. When it's turned on, the image will fit the full page content height and will scroll with it. When it's turned off, the image will fit the screen size and will remain static as you scroll the page content.

Site Canvas Width #

Allows specifying the maximum site canvas width for the boxed layout. 

Site Content Width #

Allows specifying the maximum site content width.

Sidebar Width #

This option is only available when the Titlebars & Sidebars module is active at Theme Options > Advanced > Theme Modules

Allows specifying the width of the content's sidebar. 

Default Vertical Row Indents #

Set default a Row Height value for all rows throughout your site.

Bottom Indent of Text Blocks #

Add an indent that will be applied to all Text Blocks.

Footer #

Enable Footer Reveal Effect. Check the example.

Animations Disable Width #

When screen width is less than this value, the following options are disabled:

• Parallax effects of background images in Section/Rows;
• The animated appearance, which set in Design settings of all elements;
• Opening posts in a popup by clicking on Grid items.

Columns Stacking Width #

When the screen width reaches this value or becomes less, styling features designed for mobile devices are applied, which include: 

• All columns within a row become a single column;
• Footer Reveal Effect switches off, swapping to a regular page scroll behavior;
• Sticky Rows and Sticky Columns stop being sticky during page scroll;
• Sidebars (if activated at Theme Options > Advanced > Theme Modules section and applied) are stacked in one column layout, along with the content.

Laptops Screen Width #

When screen width is less than this value and higher than “Tablets Screen Width”, the element gains styles from the Laptops tab of its Design settings.

Tablets Screen Width #

When screen width is less than this value and higher than the "Mobiles Screen Width", the element gains styles from the Tablets tab of its Design settings.

Mobiles Screen Width #

When screen width is less than this value, the element gains styles from the Mobiles tab of its Design settings.