Gridder Elements

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

The available elements are:

• Image
• In +Video:
  • YouTube/Vimeo
  • .mp4 Video
• In +WooCommerce (shown only if WooCommerce Plugin is active):
  • Add to Cart Button
  • Product Thumbnail Grid
  • Product Index
• Text
• Project Thumbnail
• In +More:
  • Carousel (shown only if Carousel Addon is active)
  • Table
  • Thumbnailgrid
  • Element Grid
  • Marquee
  • Project Index
  • Stack
  • Accordion
  • Horizontal Line
  • Vertical Line
  • Embed
  • News (shown only if News Feature is enabled)
  • Social Media Icons
  • HTML
  • Text Footer
  • Shortcode

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

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.

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.

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".

Offsets for Elements

Select an element and in the Sidebar you can set 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.

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

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

Image Custom Aspect Ratio

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

In the phone tab of the sidebar, you can even set a custom aspect ratio for the image 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.

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.

.mp4 Video

In the Gridder click "+Video" and choose .mp4 Video to upload and play your own video file.

Add to Cart Button

This element is available in "+WooCommerce" (only when WooCommerce is active) and lets you place a direct purchase button.

Product Thumbnail Grid

This element is available in "+WooCommerce" (only when WooCommerce is active) and displays products as a grid of thumbnails.

Product Index

This element is available in "+WooCommerce" (only when WooCommerce is active) and shows a sortable product list/index.

Text

Use this element to add styled text content anywhere in your Gridder layout.

Project Thumbnail

Use this element to place a single project thumbnail manually in your layout.

Carousel

In "+More" → "+Carousel" you can add a carousel element (only if the Carousel Addon is active).

Table

In "+More" → "+Table" you can add a table element.

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.

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.

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.

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.

The "Style" Tab

Marquee

In "+More" → "+Marquee" you can add scrolling text or repeating marquee content.

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.

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.

Set the gutter for the vertical spacing between the elements

Accordion

In "+More" → "+Accordion" you can add expandable/collapsible content sections.

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".

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

Embedding Instagram, SoundClound, 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 (only if the News Feature is enabled).

HTML

In "+More" → "+HTML" you can insert custom HTML code such as embeds or custom wrappers.

Shortcode

In "+More" → "+Shortcode" you can add WordPress shortcodes directly in your layout.