Gridder Elements are the content that you put into your layout.
Besides easy-to-understand elements like "Image" or "Text" there are a few elements that are not so obvious like "Stack" or "Text Footer" that you can read about here.
Text on an Image
1. Right-click on a row and choose "Use Browser Height for Row Height"
2. Place an image and place a text on top of it
Space around Elements
Right-click on an element and set "Space above" and "Space below".
In "Lay Options" → "Gridder Defaults" you can set "Spaces" to be in pixels rather than in %.
Offsets for Elements
Right-click on an element and set "X-Offset" and "Y-Offset".
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.
In "Lay Options" → "Gridder Defaults" you can set Offsets to be in pixels rather than in %.
Full Width Element
Simply resize an element to the edges of your layout.
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.
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.
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"
A Project Index is a sortable list of projects.
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.
Use the "Stack" Element to have multiple elements stacked on top of each other in one row.
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".
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".
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.