Gridder Elements

Gridder Elements are the content that you put into your layout — images, videos, texts, project thumbnails and everything in between.

You add elements from the Gridder toolbar. Each "+" button either adds an element directly or opens a small dropdown with related elements:

The Gridder toolbar with the "+" buttons for adding elements

Click "+Image" to add an image straight away. Click "+Video" to choose between YouTube/Vimeo or an .mp4 file:

"+Video" opens a small dropdown

"+Text" and "+Project Thumbnail" each add their element directly. "+More" opens a longer menu with all the special elements:

All the special elements live in "+More"

The available elements are:

• Image
• In +Video:
  • Lay Options → Videos
  • Video CDN and HLS
  • YouTube/Vimeo
  • .mp4 Video
  • Lay Custom Controls
• Shop / WooCommerce (only appears when the WooCommerce plugin is active):
  • Add to Cart Button
  • Product Thumbnail Grid
  • Product Index
• Text
• Project Thumbnail
• In +More:
  • Carousel (only if the Carousel Addon is active)
  • Table
  • Thumbnail Grid
  • Element Grid
  • Marquee
  • Project Index
  • Stack / Group
  • Accordion
  • Lines:
    • Horizontal Line
    • Vertical Line
  • Embed
  • News Element (only if the News Feature is enabled)
  • Social Media Icons
  • HTML
  • Text Footer
  • Shortcode

Choose which "+" buttons to show

If you only use a few element types, you can simplify the Gridder toolbar. Go to Lay Options, open Gridder Buttons to show and uncheck the buttons you do not want to see in the Gridder.

Open "Gridder Buttons to show" in Lay Options to choose which Gridder buttons are visible

The first group controls the element buttons: +Image, +Video, +Text, +Project Thumbnail and +More. You can also hide individual entries inside +Video and +More.

Below that, the same settings panel also lets you choose which top buttons / inputs and action buttons should be visible. After changing anything, click Save Changes.

The Sidebar

Click any element in the Gridder and the sidebar slides in from the right. It shows the settings for the element you just selected. Click somewhere empty in the canvas — or close the sidebar via its tab — and you go back to editing the layout.

Many elements share the same kind of settings: opacity, corner radius, inner / outer space, offsets, size, animations, border, shadow, sticky, text on image, scroll-to-top button. The exact options depend on the element type. Images get image-specific things like object fit and aspect ratio; texts get text formats; the special elements get their own panels.

Select an element to open its settings in the sidebar

Appearance

The Appearance section contains the basic element settings that many element types share:

• Opacity — makes the element more or less transparent.
• Corner Radius — rounds the element's corners. Use the corner icon to set individual corners.
• Inner Space — adds space inside the element, like padding.
• Outer Space — adds space around the element, like margin.
• Offset X / Offset Y — moves the element horizontally or vertically without changing its place in the grid. You can use positive or negative values. In the automatically generated phone layout, offsets are disabled.

Border

Switch on Border to draw a line around the selected element. Use it for frames, separators or to make an element stand out from its background. Corner radius is still controlled in Appearance.

Shadow

Switch on Shadow to add a drop shadow to the selected element. This can help overlapping elements separate visually, but keep it subtle if the layout should stay clean.

Elements above or below other Elements in same row

Elements in the same row can sit next to each other, above each other, or overlap. If you want a controlled group of elements, use a Stack / Group element. A Stack is a container: everything inside it moves together, but the elements inside can still be arranged individually.

A Stack / Group element can contain multiple elements in one movable container

Select the Stack itself to edit the container. In the sidebar you can set the Row Gutter, which controls the vertical space between the elements inside the Stack.

Select the Stack to set the Row Gutter in the sidebar

For simple layouts without a Stack, use a taller row first. Right-click the row and choose Use Browser Height for Row Height or Set Custom Row Height. Inside that row, elements can sit above each other, below each other, or overlap.

Use the row context menu to create enough vertical space for overlapping elements

If elements overlap inside the row, turn on Layers in the Gridder toolbar. Use the Layers panel to choose which element sits in front and which one sits behind.

Use Layers to change the stacking order inside the row

Full Width Element

Any Gridder element can become full width inside the layout. Select the element and drag its left and right resize handles until the element touches the left and right edges of the layout grid.

Resize an element until its edges align with the layout edges

This makes the element span the full content width of the layout. If you need a background that reaches the browser edges, use a row background instead.

Image

Add an image with "+Image" in the Gridder toolbar.

Click "+Image" to add an image to your layout

Once an image is on the canvas, click it to select it. The sidebar shows all the settings for that image.

Lay Options → Images

Global image defaults live in Lay Options → Images. These settings affect image loading, generated image quality and alt tags across the website.

• Image Placeholder Background Color — the rectangle color shown while an image has not loaded yet.
• Image Quality (.jpg) — controls the quality of generated JPEG sizes. After changing it, regenerate thumbnails so existing images get new generated versions.
• Never show resized versions of your images — forces Lay Theme to use original image files on desktop. Only use it when generated sizes look blurry, because originals can be much heavier.
• Never show resized versions of your images for Phone — same idea, but only for the phone layout.
• Add to Image Alt Tag — appends a shared text to all image alt tags, for example a site name or studio name.
• Alt Text to use — chooses which WordPress media-library field Lay Theme should use for alt tags: Alternative Text, Title, Caption or Description.

Lay Options → Images controls image quality, placeholders and alt-tag defaults

Image Size

Selected image elements have a "Size" section in the sidebar with four modes:

The four Size modes: Natural, Fixed Height, Custom Ratio, Stretch

• Natural — the image keeps its original aspect ratio.
• Fixed Height — pick a specific height. The image scales to fill the width of its container. With Object Fit "Cover" or "Contain" you control how it sits inside.
• Custom Ratio — set a width and height ratio (e.g. 3:3 for a square or 16:9 for a video frame). Object Fit + Object Position pick which part of the image stays visible inside that box.
• Stretch — the image fills the available space of its row.

Custom Ratio with Width, Height, Object Fit and Object Position

The phone tab in the sidebar (the small phone icon at the top) lets you set a different size for phone. Useful when an image that's wide on desktop should be cropped tighter on phone.

Tip: for Fixed Height you can use viewport units. 100svh makes the image fill the browser height; 90svh - 100px gives you headroom for a fixed header.

Text on Image

Place text directly on top of an image. Select an image, open "Text on Image" in the sidebar and switch it on:

The Text on Image panel with the 9-position grid

The 3×3 grid pins the text to a corner, an edge or the center. Add gradients at the top or bottom of the image for readability over busy backgrounds, and use the spacing and offset fields to fine-tune position — desktop and phone independently.

You can stack multiple text boxes on one image, each with its own position and gradient settings.

Video

The "+Video" button in the Gridder toolbar covers two flavors: hosted videos (YouTube or Vimeo) and self-hosted .mp4 files. Both can use Lay Theme's own minimal player UI in place of the default chrome.

Lay Options → Videos

Some video settings are global. Go to Lay Options → Videos to set shared icons and scripts for video elements across the website.

• External video hint — for video-heavy websites, upload .mp4 files to a fast host or CDN, then use Use External Video in the .mp4 dialog and paste the video URL.
• .mp4 Video Play Icon / Vimeo Lay Custom Controls Play Icon — sets the play icon used by self-hosted videos and Vimeo videos that use Lay Custom Controls.
• Use Custom mute/unmute svg icons — switches the Lay Custom Controls mute button to your own SVG icons.
• Muted State svg / Unmuted State svg — upload the two icons used for the muted and unmuted states, or reset them to the default icons.
• Add YouTube Script — loads the extra YouTube script that lets Lay Theme pause YouTube videos inside overlays when the overlay closes.
• Disable Vimeo Video Player Script — prevents the Vimeo Player API from loading. Use this for GDPR/cookie compliance if the site does not use Vimeo videos.

Lay Options → Videos controls shared video icons, scripts and external-video defaults

Video CDN and HLS

If your website uses many videos, consider hosting them on bunny.net (affiliate link) or another video CDN. A CDN serves the video files from servers closer to your visitors, so videos usually start faster and your WordPress server does not have to deliver every large file itself.

In the .mp4 video dialog, enable Use External Video and paste the video URL from your CDN. This is especially useful for portfolios with many loops, large videos or several videos on one page.

Lay Theme can also use HLS videos. HLS means HTTP Live Streaming: instead of one large video file, the video is split into many small chunks and described by a playlist file, usually ending in .m3u8. The player can start quickly and adapt to the visitor's connection by loading a suitable quality. HLS is good for longer videos, mobile connections and video-heavy pages. If your video host gives you an HLS / .m3u8 URL, use it as an external video URL.

YouTube/Vimeo

Click "+Video" in the Gridder toolbar and pick "YouTube/Vimeo" from the dropdown:

"+Video" lets you choose between a hosted video and a self-hosted .mp4

A small dialog asks for the YouTube or Vimeo URL. Paste the address and Lay Theme builds the embed for you:

Paste a YouTube or Vimeo URL — that's it

For a YouTube URL that's it — Lay Theme embeds it and YouTube handles playback in its own player. Click the embedded element to set the usual layout options (size, spacing, animations) in the sidebar.

For a Vimeo URL there's a second step. Vimeo videos get extra playback settings — Autoplay, Loop, Muted, and Lay Theme's own custom controls. Double-click the embedded Vimeo on the canvas to open the Edit Video dialog:

The Vimeo Edit Video dialog — opens by double-clicking a Vimeo embed

Set Autoplay, Loop and Muted, and optionally switch on Lay Custom Controls for a cleaner player UI (see below). The remaining checkboxes — Show controls / byline / portrait / title / share — tune that custom player.

Heads up: volume controls only work in Firefox due to browser limitations, and some of these settings require a paid Vimeo plan. The dialog has a "More information" link straight to Vimeo's docs.

YouTube embeds don't have a second dialog — YouTube's own player handles all playback options.

.mp4 Video

Click "+Video" and pick ".mp4 Video" for a self-hosted HTML5 video. The "Add .mp4 Video" dialog opens with every playback setting in one place:

Everything for a self-hosted video — file, placeholder, controls and playback — in one dialog

The fields:

• Set .mp4 file — required. Opens the WordPress media library to pick an existing video or upload a new one.
• Use External Video — switch the file picker to a URL field instead, so you can point at a video hosted on your CDN or another server.
• Set placeholder image — a still that's shown before playback starts (or while the video loads). Useful for slow connections and for autoplay-off videos.
• Show Lay Custom Controls — use Lay Theme's minimal player UI. See Lay Custom Controls below.
• Show Standard Controls — show the browser's default HTML5 video controls instead.
• Autoplay / Loop / Mute — the usual self-hosted video flags. Browsers only autoplay muted videos, so leave Mute on when Autoplay is on.
• Play/pause on click — clicking the video toggles playback (handy when you've hidden the controls).
• Show Custom "Play" Icon — overlay a play triangle on top of the placeholder so it reads as "click me".
• Show "Unmute/Mute" Button — a small speaker toggle in the corner. The right answer when you want an autoplaying video that the visitor can also unmute.

Use .mp4 videos for self-hosted loops, portfolio reels or background-style video where you don't want an external embed. Once added, you can still re-open this dialog by double-clicking the video on the canvas.

Lay Custom Controls

Lay Theme ships its own minimal video player overlay — a thin progress bar, a mute button and a fullscreen button — that appears on hover and during playback. It replaces Vimeo's player chrome and the browser's default <video> controls with something cleaner that matches the rest of the website.

Lay Custom Controls show a progress bar, mute button and fullscreen button on top of the video

Turn it on per video:

• Vimeo: double-click the video on the canvas and tick Show Lay Custom Controls in the Edit Video dialog (see the screenshot above). Vimeo's own player chrome disappears and the Lay overlay takes over. You can additionally show or hide the controls bar, byline, portrait avatar, title and share button.
• .mp4 video: tick Show Lay Custom Controls in the Add .mp4 Video dialog (visible in the screenshot above). Double-click the video on the canvas to re-open the dialog later.

The custom controls are great for portfolio reels and hero videos where you want playback to feel like part of the design instead of a third-party widget.

Shop / WooCommerce

When the WooCommerce plugin is active, the Gridder toolbar shows a +WooCommerce dropdown. It contains elements for custom product layouts and shop overview pages: Product Thumbnail Grid, Add To Cart Button and Product Index.

WooCommerce elements appear in their own toolbar dropdown

Add to Cart Button

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

Choose the product that the button should use. If the product has variations, WooCommerce shows a Select Options button that links to the product page instead of a direct Add to Cart button. Change the button appearance in Customize → WooCommerce → Buttons.

Choose which WooCommerce product the button should use

Product Thumbnail Grid

A Product Thumbnail Grid shows WooCommerce products as a visual grid. Use it for custom shop overview pages, product selections or product sections inside a larger layout.

In the Options tab you can limit the grid by product categories or tags, choose the layout type, set columns and gutters, choose the product order and enable a Load More button.

Options controls the product source, layout, order and Load More behaviour

In the Filter tab you can show category and tag filters above the product grid. The category filter can show product counts and use a default category; the tag filter can use different selection behaviour depending on how visitors should narrow the product list.

Product grids can show category and tag filters

Use the Advanced tab for product query details: order direction, product limit, a comma-separated list of SKUs or special product groups such as best selling, on sale or top rated products.

Advanced controls the underlying product query

Product Index

A Product Index shows WooCommerce products as a sortable text-based list. Use it when visitors should scan product titles, categories, tags or years quickly instead of browsing thumbnail cards.

In the Content tab you can choose the index type, filter by categories, set the order and decide which columns are visible on desktop, tablet and phone. You can also reorder categories and tags.

Content controls the product list, sorting and visible columns

Use the Style tab to set the textformat, enable Imagehover, adjust inner spacing, column widths, row spacing, line stroke width, colors, hover / active colors and separators.

Style controls the Product Index typography, spacing and colors

Use the Filter tab to show sortable filter headings above the index. You can rename the title, categories, tags and year filters, set the filter textformat, choose the date format and style the filter color.

Filter controls the sortable headings above the Product Index

Text

Use +Text to add styled text content anywhere in your Gridder layout.

"+Text" opens the text editor

The Add Text window uses the WordPress editor. Write or paste your text, choose a text format from the format dropdown, then click Ok to place the text in the Gridder.

Use Text Formats for recurring headings, captions and body text

Text Width in Pixels

Select a text element and open Text Width in Pixels in the sidebar when the text element itself should stay wide, but the readable text column inside it should be narrower.

This is useful for long text blocks: the element can span many columns, while the actual lines of text stay at a fixed width like 500 px. Use Desktop Width, Tablet Width and Phone Width to set different widths per device. Alignment in Column decides whether the fixed-width text sits left, centered or right inside the selected text element.

Text Width in Pixels keeps the text column narrow while the selected text element stays wide

Lay Options → Texts

Most text styling happens in Textformats & Webfonts. The smaller Lay Options → Texts section contains two global frontend details:

• Text selection color — the background color visitors see when they select text on the frontend.
• Enable "font-display: swap;" — lets the browser show fallback text while a webfont is still loading. This can make text appear faster on slow connections.

Lay Options → Texts controls text selection color and font loading behavior

Project Thumbnail

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

Open +More → Project Thumbnail, choose the project, then place the thumbnail in the Gridder.

Choose one project thumbnail before placing it on the canvas

The Project Thumbnail element only decides which project is shown and where it sits in the layout. Style the thumbnail appearance in Customize → Project Thumbnails. This is where you set the project thumbnail style, project title, mouseover state, gradient overlay, project tags and project description.

Use Customize → Project Thumbnails to style project thumbnails globally

Enable extra thumbnail features in Lay Options → Project Thumbnails. These settings decide which extra fields are available when you edit a project:

• Project Descriptions for Thumbnails — adds a description field above the Gridder when editing projects. The description can be shown underneath project thumbnails.
• Mouseover Image for Thumbnails — adds a second image field to projects. That image can be shown when visitors hover the thumbnail.
• Video for Thumbnails — lets you use a video as the project thumbnail.
• Load Video on Mouseover only — keeps the page lighter by showing the thumbnail image first and loading / playing the video on first hover. Desktop only.
• Disable Video for Thumbnails on Touch Devices — turns thumbnail videos off on touch devices.
• Behavior when both Mouseover Image and Video are used for Thumbnails — choose whether the hover should show the mouseover image or the video.

Lay Options → Project Thumbnails controls which thumbnail fields and video behaviours are available

Project Descriptions for Thumbnails

When Project Descriptions for Thumbnails is enabled in Lay Options, each project gets a Project Description for Thumbnail text editor above the Gridder. Use it for short captions, extra context or credits that should appear together with the project thumbnail.

Enable Project Descriptions for Thumbnails in Lay Options

Edit a project and enter the description in the new field. You can use Textformats to style the description text.

The description is shown together with the project title and thumbnail wherever that project thumbnail appears, including manually placed Project Thumbnail elements and thumbnail grids.

The project description appears underneath the project thumbnail

Style the description in Customize → Project Thumbnails → Project Description. You can change its text styling, spacing and position. For example, set the position to on image when the description should sit on top of the thumbnail image instead of underneath it.

If you want the project description on the same text line as the project title, hide project titles in Customize → Project Thumbnails → Project Title, then include the title text inside the project description.

Customize → Project Thumbnails → Project Description controls how descriptions look

Carousel

Use a Carousel when multiple images, videos, texts or project thumbnails should occupy one area of the layout without making the page much longer. This element is only available when the Carousel Addon is active.

Open +More → Carousel. Add carousel items at the top, then set transition type, speed, drag behaviour, autoplay, loop, random order, carousel size and slide settings.

Carousel settings control items, transitions, autoplay and slide sizing

Table

Use a Table 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.

Open +More → Table. Set row and column amount, column widths, cell spacing, inner spacing, minimum cell height, borders and optional background color. Tables work best when the relationship between rows and columns is meaningful.

Table settings control rows, columns, spacing, borders and background

Element Grid

To add an Element Grid, click +More in the Gridder toolbar and choose Element Grid.

Add an Element Grid from "+More" in the Gridder toolbar

The Add Element Grid window opens. Use the buttons in the top left to add images, videos, text, project thumbnails or carousels. Then choose the layout type, set columns and gutters, use a custom aspect ratio if needed, randomize the order or show a Load More button. Click Ok to add the Element Grid to the Gridder.

Set up the Element Grid before adding it to the Gridder

After it is added, the Element Grid appears as one element on the canvas. It can contain many items, but you can move and resize the whole grid like any other Gridder element.

An Element Grid groups multiple items inside one Gridder element

Thumbnail Grid

A Thumbnail Grid shows project thumbnails from one category or from all projects. Use it for portfolio overviews, category pages or a visual project overview underneath other content.

In the Gridder, open +More and choose Thumbnail Grid.

Add a Thumbnail Grid from "+More" in the Gridder toolbar

The Add Project Thumbnail Grid window opens. Choose whether to show one project category or Show all projects. Then set the layout type, columns, column / row gutters, custom aspect ratio, thumbnail limit, rounded corners, Load More button and project order. In this example the grid uses Masonry, 6 desktop columns and a 2% desktop row gutter. Click Ok to add it to the Gridder.

Set the category, layout and thumbnail options before adding the grid

Open the Filter tab to show category and tag filters above the thumbnails. Show Category Filter displays category links and lets you reorder the category list. Show Tag Filter displays tag links. The tag behaviour can be OR or AND, and you can add a Clear All button, move the clicked tag to the first position, only show thumbnails for visible tag filters or allow only one tag at a time.

Enable category and tag filters in the Filter tab

Thumbnail Grids usually work best when they use the full layout width, especially on overview pages. You can resize the element after adding it. To style the filter links, go to Customize → Project Thumbnails → Thumbnail Grid Category Filter or Thumbnail Grid Tag Filter.

A full-width Thumbnail Grid on the Gridder canvas

Project Index

A Project Index is a sortable text-based overview of projects. Use it when visitors should scan project titles, categories, tags or years instead of browsing image thumbnails.

In the Gridder, open +More and choose Project Index.

Add a Project Index from "+More" in the Gridder toolbar

The Add Project Index window opens on the Content tab. Choose the index type, filter by categories, set the order and decide which columns are visible. You can also reorder the desktop columns and the categories.

Choose the content, sorting and visible columns in the Content tab

Use the Style tab to change the visual appearance of the index. Here you can set the textformat, inner space, desktop column widths, row spacing, line stroke width, line and text colors, hover / active colors, dimming and separators.

Style controls the text, spacing, lines, colors and hover states

Use the Imagehover tab if the Imagehover Addon should show project images when visitors interact with the index. You can use imagehover videos if available, choose whether images appear on hover or scroll, and set separate positions for hover and scroll.

Imagehover can show project images from the index rows

Use the Filter tab to show or hide sortable filter headings above the index. You can set the filter textformat, date format, column titles, filter colors and the sort icon size, stroke, offset and gap.

Filter controls the sortable headings above the Project Index

Project Index elements are easiest to read at full layout width. After adding the element, resize it so the columns have enough horizontal space.

A full-width Project Index on the Gridder canvas

Lay Options → Other Elements

Lay Options → Other Elements contains a few global behaviors for Thumbnail Grid and Project Index elements:

• Hide current Project from Thumbnailgrid & Project Index Elements — when a project page contains a grid or index, the current project can be hidden from that list.
• Load More Button: remember revealed elements — when visitors click Load More and later return to the same page, the already revealed items stay visible.
• Custom Project Index Date Field — adds a year field to projects. The Project Index can use that year for its year column and date sorting instead of the post publish date.

Other Elements controls list behavior for Thumbnail Grid and Project Index

Marquee

A Marquee repeats text, images or videos in a horizontal scrolling strip. Use it for short announcements, running titles, credits or repeated typographic elements.

In the Gridder, open +More and choose Marquee.

Add a Marquee from "+More" in the Gridder toolbar

The Marquee window opens. Use the buttons at the top to add Text, Image or Video items. The preview repeats the items so you can see the rhythm before adding the element to the Gridder.

In the Style tab you can set the textformat, vertical alignment, image / video height, space between items, speed, separator, direction, start behaviour and hover behaviour. You can also reorder or remove the marquee items.

Style controls the items, speed, separator and movement behaviour

Use Borders & Colors to add space above or below the marquee, set top and bottom border widths and choose border or background colors.

Borders & Colors controls spacing, borders and background color

After clicking Ok, place the Marquee in the Gridder and resize it like any other element. Keep marquee text concise: long paragraphs are harder to read when they move continuously.

A Marquee repeats its content across the element width

Select the Marquee in the Gridder and open Element Animation in the sidebar. The Marquee-Scroll property lets the Marquee react to page scrolling. Use Speed Factor to make the scroll movement slower or faster; enable One Direction only if the Marquee should keep moving in one direction while the visitor scrolls.

Marquee-Scroll adds scroll-based movement to a Marquee element

Stack / Group Element

A Stack / Group is a container for multiple Gridder elements. Use it when several elements should stay together while still being arranged individually inside the container.

In the Gridder, open +More and choose Stack / Group.

Add a Stack / Group from "+More" in the Gridder toolbar

Inside a Stack, elements can sit next to each other, above each other or overlap. When you move or resize the Stack, the elements inside move with it.

A Stack / Group keeps multiple elements inside one container

Select the Stack itself to edit the container. In the sidebar you can set the Row Gutter, which controls the vertical space between the elements inside the Stack.

Use Row Gutter to set vertical spacing inside the Stack

Accordion

An Accordion adds expandable and collapsible content sections. Use it for FAQs, credits, project details, product information or any content that should stay compact until opened.

In the Gridder, open +More and choose Accordion.

Add an Accordion from "+More" in the Gridder toolbar

The Accordion window opens with a live preview on the right. In Settings you can set the number of rows, border style, animation duration, whether other rows close automatically, title / content text formatting and optional background color.

Settings controls the rows, borders, animation and text styling

Use the Icon tab to choose the icon type, position, spacing, vertical offset, size, stroke width and color.

Icon controls how the open / close indicator looks

Use the Spacing tab to set title padding, content padding and the maximum content width.

Spacing controls the inner layout of each accordion row

After clicking Ok, place the Accordion in the Gridder and resize it like any other element.

An Accordion keeps long content compact on the page

Lines

Horizontal Line and Vertical Line elements add simple divider lines to the Gridder. Use them as separators, frame-like details or visual structure between other elements.

In the Gridder, open +More and choose Horizontal Line or Vertical Line.

Both line elements live in "+More"

Horizontal Line

A Horizontal Line spans across columns. Resize it like other Gridder elements to make it shorter or wider.

A Horizontal Line can span across one or more columns

Vertical Line

A Vertical Line runs vertically inside the row. Use it when you need a divider between columns or a line that follows the row height.

A Vertical Line follows the row height

Select a line to open its sidebar settings. Switch on Line Style if this line should override the global line defaults. You can set color, opacity, stroke width, fade edges and fade size for the selected line only.

Line Style overrides the global line defaults for the selected line

Global defaults for all new and unstyled lines live in Lay Options → Lines. There you can set separate color, stroke width, opacity, fade direction and fade size defaults for horizontal and vertical lines.

Lay Options controls the default styling for horizontal and vertical lines

Social Media Icons

Use Social Media Icons when you want icon links with a fixed pixel width or height. The element is easier to control than placing icon images manually.

Open +More → Social Media Icons. Set the space between icons, choose width or height mode, set the desktop icon size and alignment, then add or upload icons. Drag icons to reorder them.

Set icon size, spacing and alignment in the Social Media Icons window

Text Footer

Use a Text Footer for a row of footer links where spacing, wrapping and textformat should stay consistent.

Open +More → Text Footer. Set the item count, space between links, space below, alignment, textformat and wrapping behaviour. Drag items to reorder them.

For similar layouts you can also use Auto Layout: add regular text elements to an Auto Layout row when you want a flexible text or link row that is built from separate Gridder elements.

Text Footer settings control link count, spacing, alignment and wrapping

Use this element together with Lay Options → Footers when the same footer should appear across the website.

Text Footer works well in combination with Footers in Lay Options

Embedding Instagram, SoundCloud, etc.

Open +More → Embed and paste the URL of an Instagram post, SoundCloud track, Vimeo video or another supported embed provider. Here is a list of all websites that embed should work for.

Paste a supported URL into the Add Embed window

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

Use a News Element when you want to include news content inside a custom Gridder layout instead of only linking to the regular news overview. This option is only shown when the News Feature is enabled in Lay Options.

Open +More → News Element. Choose the style, category, order, layout, amount of news, Load More button settings, column layout, image display and text settings.

News Element settings control category, order, layout, images and text

HTML

Use HTML for custom embed code, wrappers or snippets from external services. It is the right choice when a service gives you an <iframe> or another code snippet instead of a simple URL.

Open +More → HTML and paste the code into the editor. Only paste code from sources you trust. Custom HTML can affect the layout and can also conflict with custom JavaScript or plugin scripts.

Use HTML for trusted custom snippets and iframe embeds

Shortcode

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

Paste the shortcode exactly as the plugin provides it

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.