Contents

Gridder Rows

Rows create the vertical structure of a Gridder layout. A row can contain elements, have its own background, use the browser height and define its own gutter behavior.

Change settings of a row by using its context menu. Just right-click on an empty spot of a row and a context menu shows.

Add a Row by clicking a "+" button:

The buttons for adding a row are on the far right

Row settings are useful when the whole section should behave differently, for example when a row needs a fullscreen background image, a video background, a different background color or a custom amount of spacing below it.

Browser-filling Rows

Right-click a row and choose "Use Browser Height for Row Height". The row will use the height of the browser window, which is useful for covers, title slides, fullscreen image rows and presentation-like layouts.

If you place elements inside a browser-filling row, you can position them on top of each other and then adjust their order in the Layers window.

Two Row Background Images

Right-click a row and choose "Set Left Row Image Background" or "Set Right Row Image Background". This creates a split background with different images on the left and right side of the row.

Right-click a row and choose "Link Row Background". Use this when the background image or video of a whole row should act as a link.

The "Link Row Background Button"

Fullscreen Background Image

There are three ways to set a background image: for one page, for the whole website or for a row.

1. To set a background image for the page, set it here:

2. To set a background image for the whole website, go to "Customize" → "Background" and "Customize" → "Mobile" → "Background".

3. To set a background image for a row, right-click a row and choose "Use Browser Height for Row Height". Right-click again and choose "Set Row Image Background".

Fullscreen Background Video

There are three ways to set a background video: for one page, for the whole website or for a row.

1. To set a background video for the page, set it here:

2. To set a background video for the whole website you can do so in "Customize" → "Background" and "Customize" → "Mobile" → "Background".

3. To set a background video for a row, right-click a row and choose "Use Browser Height for Row Height". Right-click the row again and choose "Set Row Video Background". The video will be an autoplaying, looping and muted HTML5 video.

Individual Row Gutters

Click on a row gutter which is shown as a gray bar. The bar will turn pink and you can enter a number to individually set the size of this row gutter. You can also right-click an empty spot of the row and choose "Set Row Gutter".

Use individual row gutters when one section needs more or less vertical space than the default Gridder gutter.

Row Background Color

Just right click a row and click "Set Row Background Color".

Row Gutter Color

Just right click a row gutter and click "Set Row Gutter Background Color".