Impreza
Zephyr
Guide
Support Forum

Site Layout

Updated 4 days ago

Site Canvas Layout #

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

With this layout, the background of the header, content, and footer will take the full available width of the screen.

With this layout, the 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.

With this layout, the site header, content, and footer will appear within the outlined frame, with the frame's customized width and color.

Site Content Width #

The maximum site content width. This value can be customized separately for every Row/Section element in its General settings.

Sidebar Width #

The width of the content's sidebar. This option is only available when the Titlebars & Sidebars module is active at Theme Options > Advanced > Theme Modules

Header Horizontal Indents #

Defines horizontal indents (padding-left and padding-right) of every header area (top, middle, and bottom).

Supports responsive settings that allow applying different spacings per device. 

Row Horizontal Indents #

Defines horizontal indents (padding-left and padding-right) of every Row/Section element on a website. This value can be customized separately for a certain Row/Section element in its Design settings.

Supports responsive settings that allow applying different values per device. 

Row Vertical Indents #

Defines the default vertical indents (padding-top and padding-bottom) of every Row/Section element on a website. This value can be customized separately for a certain Row/Section element in its General settings.

Bottom Indent of Text Blocks #

Adds default spacing after every Text Block element on a website.

Site Border Radius #

This setting allows you to specify a site-wide border-radius value for rounded elements.

This setting replaces the old "Rounded Corners" switch from Theme Options > General settings.

The specified value is used in many theme elements by default. Additionally, you can specify its value for any "Border Radius" field via the CSS variable var(--site-border-radius). For convenience, you can use the field's quick link, for example:

Button Styles

Field Styles

Design > Border settings of any element

Changes you make in Theme Options > Site Layout > Site Border Radius will apply to all rounded elements that use this variable.

Elements that use Site Border Radius

  • "Add to Favorites" Button
  • ActionBox
  • "Back to Top" Button
  • bbPress forum elements
  • Contact Form / Gravity Forms input fields
  • Events Calendar layout elements
  • List Filter: Date Picker
  • Map (controls)
  • Message Box
  • Person
  • Pricing Table
  • Progress Bar
  • Sharing Buttons
  • Shop Notices Box (Style 3)
  • Social Buttons
  • Tabs / Vertical Tabs (Tour)
  • Ultimate Addons: Timeline feature item
  • Vertical header trigger button (mobiles)
  • WPML language switcher

Footer Reveal Effect #

Enable/disable the Footer Reveal Effect. Check the example.

Animations Disable Width #

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

  • Parallax effects of background images in Row/Section elements;
  • The animations from the Design settings of all elements;
  • The Scrolling Effects from the Effects settings of all elements;
  • The ability to open posts in a popup inside Grid and Product List elements.

Columns Stacking Width #

Applies mobile device styling features when the screen width equals or is less than this value.

  • All columns inside the Row/Section appear in a single-column layout;
  • Footer Reveal effect switches off, swapping to a regular page scroll behavior;
  • Disables sticky behavior on scroll for the Row/Section and Columns;
  • Stacks Sidebars in a single-column layout with the content area.

Laptops Screen Width #

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

Tablets Screen Width #

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

Mobiles Screen Width #

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