Gridder

The Gridder is Lay Theme's visual layout editor. You use it to build pages, projects, news posts, Deck slides and other Lay Theme layouts with rows, columns and draggable elements.

Please see the Getting Started video to learn the basics. This page explains the main parts of the Gridder and links to the detailed sections.

You can find the Gridder when you edit a page, project or another post type that supports Lay Theme layouts.

The Gridder

Layout basics

A Gridder layout is built from rows and elements. Rows create the vertical structure of the page. Elements are the actual content inside those rows, for example images, text, videos, thumbnail grids, tables, accordions or custom HTML.

Elements can be resized, moved across columns and stacked inside browser-filling rows. Selecting an element opens its settings in the sidebar, where you can adjust spacing, opacity, borders, shadows, aspect ratios, scroll animations and phone-specific settings.

Zen Mode

Click the fullscreen button in the Gridder header to enter Zen Mode. Zen Mode gives the Gridder the whole browser window by hiding the WordPress admin bar, admin menu, footer and the small Page Settings / Page Templates / CSS toolbar row.

Use the fullscreen button to focus on the Gridder canvas

You can also press Z or F to toggle Zen Mode. Press Escape to leave Zen Mode when no modal is open. The setting is remembered in your browser, so the Gridder can stay in Zen Mode the next time you open it.

Gridder Elements

Use Gridder Elements to learn what each element does and when to use it. The important element groups are "+Image", "+Video", "+WooCommerce" and "+More". You can choose which buttons are visible in "Lay Options" → "Gridder Buttons to show".

Gridder Rows

Use Gridder Rows to learn about row spacing, row size, row background colors, background fades, row background media and row gutters. Most row settings are available in the Row sidebar or Row Gutter sidebar.

Layout Modes

Use Layout Modes to learn about Place Freely and Auto Layout. These modes are useful when one element should ignore the grid, or when a whole row should arrange elements flexibly by width or height.

Gridder Defaults

Use Gridder Defaults to set the defaults that new layouts start with, like frame settings, row gutters and column gutter behavior. Defaults are especially helpful when you want a consistent layout rhythm across many pages or projects.

Page Settings

Use Page Settings to override site title, menu, menu bar and burger colors for one page, and to hide the site title, menu or footer on that page.

Page Templates

Use Page Templates to save complete Gridder layouts and reuse them as a starting point on other pages, projects or news posts.

Phone layouts

Many element settings have a phone tab in the sidebar. If you need a completely different mobile arrangement, activate Custom Phone Layouts and create a separate phone layout from the Gridder.