Gridder Rows

Rows create the vertical structure of a Gridder layout. A row can contain elements, define its own spacing and size, and have its own background color, fade, image, video or slideshow background.

Click a row to edit it in the Row sidebar. Click the gray gutter between two rows to edit the Row Gutter sidebar. The row context menu is still useful for quick actions, but most row settings now live in the sidebar.

Add and Select Rows

Use the "+" buttons on the right side of the Gridder to add rows above, between or below existing rows. Click inside an empty row area to select that row and open its sidebar settings.

Add-row buttons appear on the right side of the Gridder

The Row sidebar contains the everyday row controls. Use Layout to switch between Columns and Auto Layout, Row Spacing to set top space, bottom space and the row gutter, and Row Size to choose Natural, Browser Height or Custom.

Browser Height makes the row fill the height of the browser window. Use it for cover rows, fullscreen image rows, fullscreen video rows or sections where elements should overlap inside one tall row.

Fixed Row

Enable Fixed Row in the Row sidebar when a row should stay fixed above the page content while the rest of the page scrolls. Choose whether it is fixed to the top, center or bottom of the browser window.

Use "Hide on Phone" if the fixed row should only appear on desktop and tablet layouts. Scroll-progress animations are disabled inside fixed rows.

Row Backgrounds

Rows can have their own background color, background fade and background media. Use row backgrounds when the background should belong to the whole section instead of a single Gridder element.

Background Color and Fade

Enable Row Background Color to give the selected row its own color. Once the color is active, Background Fade becomes available. Use it to fade the row color from the top, from the bottom or from both sides.

Rows can have a background color and a background fade

Row Background Media

Row Background Media is for visual backgrounds that sit behind all elements in the row. Use Image Background for one image across the whole row. Use Left Image Background and Right Image Background when the row should have two different image backgrounds, one on each side. Use Video Background for a row-wide video background.

For cover-like sections, set Row Size to Browser Height first, then add the background image, video or slideshow. The Gridder elements inside the row can still sit on top of the background.

Row Background Media can be an image, left/right images, video or a WebGL slideshow

WebGL Slideshow Background

WebGL Slideshow Background opens a modal where you add images and choose a WebGL transition. Use Transition & Autoplay to pick the effect, set the autoplay delay, transition speed and pause after each transition. Use Random Order when the images should not always play in the same sequence.

The half-screen options let you show the WebGL slideshow only on the left or right half, separately for desktop and phone. This is useful for split layouts where one side has a WebGL background and the other side stays static or uses different content.

The WebGL Slideshow Background modal controls images, transition style, autoplay timing and half-screen behaviour

Right-click a row for quick actions: copy the row, set image or video backgrounds, use Browser Height or Custom Row Height, set an HTML class and id, link the row background, set the row gutter, collapse the row or set the row background color.

Collapse and Expand Rows

Use collapsed rows when a section should be hidden at first and opened by a visitor later. Right-click the row and choose Collapse Row. A collapsed row stays in the Gridder, but starts closed on the frontend.

Right-click a row and choose Collapse Row

To create the clickable text that opens a collapsed row, edit a text element, select the text that should become the trigger and click the Expand/Collapse Row Link button in the text editor toolbar.

The Expand/Collapse Row Link button turns selected text into a row toggle

In the modal, choose the row or rows that should expand and collapse when the link is clicked. The list uses the row numbers shown in the Gridder.

Replacement Text changes the link text after the row has been toggled.
Collapse other Rows closes other expandable rows when this link opens its selected row.
Scroll to expanded Row scrolls the browser to the opened row after the click.
Easing and Animation Duration control how the row opens and closes.

Choose rows and animation settings for the expand/collapse link

Click the gray gutter between two rows to open the Row Gutter sidebar. Set the gutter size there when only one space between rows should be different from the default Gridder gutter.

Row gutters can also have their own background color and Background Fade. This is useful when a colored section should fade out through the space between two rows.

Row Background Link

Use "Link Row Background" in the row context menu when the background image, video or colored background of a whole row should act as a link.

Contents