Using the layout grid

The layout grid is the row-column structure of your page. Or simply how the columns and rows are arranged on your page. You can preview the grid by navigating to Design from the main bar. Here you will notice how your content is divided and see the visual representation of the grid with black vertical and horizontal lines.

Understanding how the grid works are not only important for determining how to place your widgets but also it helps you determine how to edit the visual appearance of a certain area from the grid.

The layout grid has few levels of depth.
 
    1. The most general and highest level is the page level
    2. The second level is the Header, Body and Footer (and Sidebar where applicable)
    3. The third and more specific is the row level
    4. And the fourth and lowest level is the column level

Changing the page background

The Background can be changed on a page level, header, body, footer, sidebar (if applicable) or column and row level. To change the background, you will first need to select the grid level.

Choosing a level divides the page into different editable parts depending on the depth of the level you have chosen. After choosing the level you would need to select the area of the page you would like to edit. Hover over your page and you will see the editable part getting darker. Click on the pencil icon to open the editor.
You have different options for editing the background depending on the chosen level. Additionally, you have an option of stretching the Background and the widget inside the borders of the width selected in the layout or give it full width.