Adjusting the settings for Main background, Main wrapper and Content wrapper via Global Design > Main layout allows you to style the overall frame of your website. You can create a unique feel for your website by adjusting spacing, borders and background within these settings.

The illustration below shows the relationship between these three elements. The black indicates the Main background and the blue indicates the Main wrapper. The Main background and the Main wrapper look very similar as they both cover the same area of your website, which is the entire website. The difference is the order of the two elements - the Main background lies behind the Main wrapper. The Content wrapper is represented by the dotted line and does not include the site's header or footer. Read a more thorough presentation of the three elements below to understand how they are different. 

0__3_elements_in_editor.png

  

Main background

In Main background settings you can define the background design for the entire website. Similar to rows and columns you can choose a background color or upload an image. Note that the image will be displayed on all pages on the website.

 

Main wrapper

In Main wrapper settings you can choose a background color and/or upload a background image. You may also adjust the spacing. When you increase padding in the Main wrapper, all contents of the website, including the header and footer will be affected. You can also give the Main wrapper a border.

Unlike the Main background, the Main wrapper can be set to either fluid or fixed. A fixed wrapper ensures that the content is always centered in a fixed width even if the screen is wider than the content; a fluid row allows the content to stretch to the entire width of the browser, independently from the size of the screen.

  Using both Main background and Main wrapper

Having a solid color or image for both the Main background and the Main wrapper will result in not being able to see the Main background (as the Main wrapper lies on top of the Main background). If the Main wrapper does not have a background color or image set and you add padding, the Main background becomes exposed, allowing you to create a unique, layered styling to your layout.

Use both functions in combination by including an image as your Main background and a transparent color for your Main wrapper. This will ensure that visitors are able to see both Main background and Main wrapper and adds a nice design touch to your website (see examples below).

1__main_background_and_wrapper2.png
 

 

Content wrapper

With the Content wrapper you have the same styling options as with the Main wrapper. The only difference between the two is that the Content wrapper doesn't include the header and footer.

 

Examples of wrapper combinations

Fluid Main Wrapper / Fluid Content Wrapper

2__Fluid_MW_-_Fluid_CW.png

 

Fluid Main Wrapper / Fixed Content Wrapper 

3__Fluid_MW_-_Fixed_CW.png

 

 Fixed Main Wrapper / Fixed Content Wrapper

4__Fixed_MW_-_Fixed_CW.png

 

Rows

When selecting Global Design > Main layout > Rows, you will find two main elements that can be modified: background color and spacing. Note that when changing these options, you are changing the general style of all rows on the entire website. 

 

Columns

When selecting Global Design > Main layout > Columns, you will find that you are able to style spacing, both margin and padding. Note that when changing these options, you are changing the general style of all columns on the entire website.

 

Modules

When selecting Global Design > Main layout > Modules, you will find that you are able to style spacing, both margin and padding. Note that when changing these options, you are changing the general style of all modules on the entire website.

  Styling main layout elements for different viewports

When adjusting the overall styling for these main layout elements, you can style per viewport just like all other elements. To do so, ensure that you are in the viewport you want to style for and make the adjustments. Learn more about working with the various viewports here.

 

Header

When selecting Global Design > Main layout > Header, you will find two options: Fix header to top and Minify header.

Fix header to top

The first option is to fix the header to the top of the page. By enabling this option, the header will be fixed at the top of your website and it will remain there when the website is scrolled down. A fixed header is ideal for websites that require a lot of scrolling so that users can easily navigate to another page without having to scroll back up to the top of the page.

5__Fixed_Header.gif

 

Minify header

Once you have enabled Fix header to top, a secondary setting called Minify headerappears. When this option is enabled, the fixed header will only show when visitors are scrolling up on a page. It will be hidden when they are scrolling down.

6__Minify_Header.gif

 

  Previewing header settings

Although the setting is enabled, the Fix header to top functionality will only be visible in the previewed and published versions of your website.

Was this article helpful?
0 out of 0 found this helpful