Contents

Gridder Elements

Gridder Elements are the content that you put into your layout.

The available elements are:

In Lay Options, in the "Gridder Buttons to show" section, you can set which buttons to show in the Gridder.

Gridder Buttons

When you select an element, the sidebar shows the settings for that element. Many elements share common settings like spacing, opacity, border radius, background color, borders, shadows, offsets, scroll animation and phone-specific layout controls.

Elements above or below other Elements in same row

1. Right-click on a row and choose "Use Browser Height for Row Height" or "Use Custom Browser Height"

2. Place almost any elements above or below or on top of each other within this row and find the "Layers" window to change the order of the elements.

Or: Create a Stack / Group element. Inside of this container, you can put elements above or below each other and next to each other.

Group / Stack Element

Where to find the "Stack / Group" Element

Put images next to each other and above each other in a Stack / Group

If you select the Stack, then in the sidebar you can set the gutter for the vertical spacing between the elements.

Stack Gutter

Set the gutter for the vertical spacing between the elements

Space around Elements

Click on an element and in the Sidebar set "Inner Space" or "Outer Space".

Space around

Offsets for Elements

Select an element and in the Sidebar you can set Offsets.

Offsets

You can enter positive or negative numbers to offset the element. This way an image can reach into another row for example. In the mobile view the offsets are disabled.

Elements to the right will always overlap columns to the left. Elements of a row will always overlap elements of a previous row.

Full Width Element

Simply resize an element to the edges of your layout.

Image

Add an image to your layout by using the "+Image" button in the Gridder.

Image Element

Text on Image

If you want text on top of an image, select an image and use "Text on Image" in the sidebar.

Text on Image

Text on Image

You can add multiple texts onto the image, background gradients for readability and there are settings to adjust spacing for desktop and phone.

Text on Image

Image Custom Aspect Ratio

Select an image element and set a custom aspect ratio in the sidebar to control the image box proportions.

Image Custom Aspect Ratio

In the phone tab of the sidebar, you can even set a custom aspect ratio for the image on phone:

Image Custom Aspect Ratio on Phone

Image Fixed Height

Select an image and set a fixed height in the sidebar if you want to keep a consistent image height.

Image Fixed Height

Tip: If you choose "Object Fit: Contain" and 100svh as the height and size the image to be full width, the image will be scaled to always fit the height and width of your browser.

Tip: As the height you can even enter a value like 90svh - 100px

YouTube/Vimeo

In the Gridder click "+Video" and choose YouTube or Vimeo to embed a hosted video. Paste the video URL and Lay Theme will create the embed in your layout.

Use this for videos hosted on YouTube or Vimeo. If you want to upload and control the video file yourself, use the .mp4 Video element instead.

.mp4 Video

In the Gridder click "+Video" and choose .mp4 Video to upload and play your own video file. This creates an HTML5 video element in your layout.

Use .mp4 videos for self-hosted video loops, portfolio reels, background-like video content or cases where you do not want an external video provider embed.

Add to Cart Button

This element is available in "+WooCommerce" only when WooCommerce is active. It lets you place a direct purchase button inside a Gridder layout.

Use it on custom product layouts when you want to design the page freely in Lay Theme but still keep the WooCommerce purchase action visible exactly where you need it.

Product Thumbnail Grid

This element is available in "+WooCommerce" only when WooCommerce is active. It displays products as a grid of thumbnails and is useful for custom shop overview pages.

Product Index

This element is available in "+WooCommerce" only when WooCommerce is active. It shows products as an index-style list and is useful when visitors should scan or sort products quickly.

Text

Use this element to add styled text content anywhere in your Gridder layout. Text elements can use the text formats you define in the Text Formats and Webfonts settings.

For recurring typography, create text formats first and then apply them inside the text editor. This keeps headings, captions and body text consistent across the website.

Project Thumbnail

Use this element to place a single project thumbnail manually in your layout. This is useful when a page should feature one specific project instead of showing a whole thumbnail grid.

In "+More" → "+Carousel" you can add a carousel element. This element is only available when the Carousel Addon is active.

Use a carousel when multiple images or pieces of media should occupy one area of the layout without making the page much longer.

Table

In "+More" → "+Table" you can add a table element. Use it for structured content like editions, credits, prices, specs or schedules.

For purely visual column layouts, use regular Gridder columns or a Stack / Group element instead. Tables work best when the relationship between rows and columns is meaningful.

Element Grid

Use the "Element Grid" to add many images to your layout at once, without having to place them one by one.
Also it makes it easier to reorder images. Here you can also have same height elements by choosing "Same Height" as the layout type.

Element Grid

An Element Grid

Thumbnail Grid

A Thumbnail Grid shows all project thumbnails of a chosen category.

You can combine the footer feature with the Thumbnail Grid to have a thumbnail overview underneath your projects.

Thumbnail Grid

A Thumbnail Grid with filters

Add a Thumbnail Grid in the Gridder.

In the Gridder click "+More" and "+Thumbnail Grid"

Customize the Appearance of the Filters

1. Go to "Customize"
2. Go to "Project Thumbnails" → "Thumbnail Grid Category Filter" and "Thumbnail Grid Tag Filter"

Project Index

A Project Index is a sortable list of projects.

Project Index

A Project Index

Add a Project Index in the Gridder.

In the Gridder click "+More" and "+Project Index".

You can customize the appearance of the project index in the "Style" Tab when editing a project index element.

Thumbnail Grid

The "Style" Tab

Marquee

In "+More" → "+Marquee" you can add scrolling, repeating text. Use it for short announcements, running titles or repeated typographic elements.

Keep marquee text concise. Long paragraphs are harder to read when they move continuously.

Stack / Group Element

Create a Stack / Group element. Inside of this container, you can put elements above or below each other and next to each other.

Group / Stack Element

Where to find the "Stack / Group" Element

Put images next to each other and above each other in a Stack / Group

If you select the Stack, then in the sidebar you can set the gutter for the vertical spacing between the elements.

Stack Gutter

Set the gutter for the vertical spacing between the elements

Accordion

In "+More" → "+Accordion" you can add expandable and collapsible content sections. Accordions are useful for FAQs, credits, project details, product information or any content that should stay compact until opened.

Horizontal Line

In "+More" → "+Horizontal Line" you can add a horizontal divider line.

Vertical Line

In "+More" → "+Vertical Line" you can add a vertical divider line.

Social Media Icons

Icons need to have a pixel width. So better use this element when you want to use icons on your website.

In the Gridder click "+More" and "+Social Media Icons".

Text Footer

A "Text Footer" element is great for setting the space between links for a common footer.

In the Gridder click "+More" and "+Text Footer".
Use this Element in combination with the "Footer" feature in "Lay Options" → "Footers".

Footer

The "Footer Element" is great in combination with "Footers" in "Lay Options"

Embedding Instagram, SoundCloud, etc.

In the Gridder click "+More" → "+Embed". Here you can paste the URL of an Instagram image, a URL of a SoundCloud song and more. Here is a list of all websites that embed should work for.

If the website you want to embed is not in this list, you can still add an <iframe> embed code provided by that website. In the Gridder click "+More" → "+HTML" and add your <iframe> embed code here.

News

In "+More" → "+News" you can add news-related elements. This option is only shown when the News Feature is enabled in Lay Options.

Use it when you want to include news content inside a custom Gridder layout instead of only linking to the regular news overview.

HTML

In "+More" → "+HTML" you can insert custom HTML code such as embeds, custom wrappers or snippets from external services.

Only paste code from sources you trust. Custom HTML can affect the layout and can also conflict with custom JavaScript or plugin scripts.

Shortcode

In "+More" → "+Shortcode" you can add WordPress shortcodes directly in your layout. This is useful for plugin output like forms, galleries or other WordPress-generated content.

If a shortcode does not render as expected, first test it in a regular WordPress text area or check the plugin that provides the shortcode.