The Gridder is the interface where you create your layouts. Please see the Getting Started video to learn the basics about the Gridder.

Element Grid

Use the "Element Grid" to add many images to your layout at once, without having to place them one by one.
Also with Elementgrid you can reorder many images more easily.

Thumbnail Grid

A Thumbnail Grid shows all project thumbnails of a chosen category. When you publish a new project, its thumbnail is added to the thumbnail grid automatically. There are layout options for desktop, tablet and phone. Set the tablet and phone breakpoints in "Lay Options" → "Appearance".

Using a Thumbnail Grid to have a project-overview is better than just using project thumbnails that you added by hand with "+Project Thumbnail".

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

Stack Element

Use the "Stack" Element to have multiple elements stacked on top of each other in one row.

Full Width Element

Simply resize an element to the edges of your layout.

Use Browser Height for Row Height

Right click on an empty spot of a Row and activate "Use Browser Height for Row Height".

A row with "Use Browser Height for Row Height" activated fills the whole browser window. In that type of row you can position texts anywhere, even if the columns are occupied already.

Right click on an empty spot of a Row and choose "Link Row Background".

Fullscreen Background Image

Right click on an empty spot of a Row and activate "Use Browser Height for Row Height". Right click the Row again and choose "Set Row Image Background". Since this is just a background image you can still put text or anything else into this row.

If you just want to set a background image for the whole website, please do that in "Customize" → "Background".

Fullscreen Background Video

Right click on an empty spot of a Row and activate "Use Browser Height for Row Height". Right click the Row again and choose "Set Row Video Background". The video will be an autoplaying, looping and muted HTML5 video.

Background Colors

Set a background color for the whole page in "Set Background Color".
Set a row background color by right clicking on an empty spot of a row and choosing "Set Row Background Color".

Space around Elements

Right click an element and enter a number in "space above" and "space below". This is useful in combination with a row background color so the color will be around the element.

Elements with Offsets

Right Click on an element. You will see two inputs "x-offset" and "y-offset". Here 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.

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

Individual Row Gutters

Click on a row gutter which is shown as a gray bar. The bar will turn pink and you can enter a number to individually set the size of this row gutter. You can also right click an empty spot of the row and choose "Set Row Gutter".

HTML5 Videos

HTML5 Videos are great if you want autoplaying and looping videos on your website.

Click "+Video", then choose "+HTML5 Video". A .mp4 and a placeholder image must be set. If you choose the "Show Custom Play Icon" option, a default play icon image appears on your video. You can change this icon in "Lay Options" → "HTML5 Video Play Icon".

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.

Gridder Defaults

Gridder Defaults is where you change the attributes of all of your grids. Go to "Lay Options" → "Gridder Defaults". Here you can set defaults like "Column Count", "Column Gutter", "Row Gutter", "Frame". You can set "Frame Top" and "Frame Bottom" to be in pixel or percent.

When you save these defaults and check "Apply Desktop Gridder Defaults", they will be applied to all grids in existing projects, pages and categories.

When Custom Phone Layouts is activated, you will find all settings for Phone Gridder Defaults here.

Multiple Menus

You can for example have 4 menus in each corner like here.

Go to "Lay Options" and for "Menu Amount" select the amount of menus you want to use (up to 4).

Now go to "Appearance" → "Menus" → "Manage Locations". Create new menus and assign them to the locations.

In "Customize" → "Menu Style" you will now see panels for "Primary Menu", "Second Menu", "Third Menu" etc. Use the controls in these panels for the menu´s appearance.

Your mobile menu will contain all the menu points of all of your menus in sequential order.

Custom Mobile Menu

Usually the menu points of your mobile menu are the ones of your normal menu.

If you'd like to have different menu points or a different order, create a new Menu in "Appearance" → "Menus". Now assign that menu to "Mobile Menu" in "Appearance" → "Menus" → "Manage Locations".


There are two ways to make your website multilingual. You can either use the Plugin Polylang or qTranslate-XT.

We used to recommend qTranslate-XT, but now we tend to recommend Polylang because it tends to work better and is more wide-spread and has better support and is still updated regularly.

When using Polylang, currently you need to activate "Disable Ajax / Compatibility Mode" in "Lay Options".

With qTranslate-XT you'll only be able to translate texts. You won't be able to use different images or different videos for each language.

With Polylang you'll be able to have different images / videos for different languages.

The following is just about qTranslate-XT.

Make your website multilingual by installing the WordPress plugin qTranslate-XT. Follow the link, download qTranslate-XT and install it as a plugin in your WordPress admin area.

In case you are unsure if you want to make your website multilingual or not, please backup your database before you use qTranslate-XT, as it will permanently change your Texts and they will be formatted differently once you disable qTranslate-XT.

Backup your database with a plugin like "WP Migrate DB" or "Updraft" or use your phpMyAdmin from your webhost control panel.

Choose the languages you want to use in "Settings" → "Languages" → "Languages" Tab.
Add the Language Switcher to your Menu in "Appearance" → "Menus".

Please note that sometimes a text that you have not translated will not appear at all on the website that shows the language the text was not translated to. Not sure why that happens, might be a problem with qTranslate-XT.


Textformats is an easy way to create reusable text styles. After you created a textformat you can use it in the texteditor and in "Customize". When you update a textformat that you have applied to a text previously, the text's style will be updated accordingly.

Here I created a Textformat named "MyFormat":

Now I can use this Format in the texteditor. Just select your text and make sure it's unstyled by clicking the "Clear formatting" button. Then select your format from the "Formats" dropdown:

Applying a textformat in the texteditor.

Custom Phone Layouts

With “Custom Phone Layouts” you can switch between desktop and phone layouts in the Gridder. For your phone layout you could just change the order of your elements or even create a different layout with different content.

Activating custom phone layouts

Activate “Custom Phone Layouts” in “Lay Options” → “Activate custom phone layouts”.
In your Gridder, new buttons appear for switching between phone and desktop layouts.

On the top right you have three new buttons: “Desktop”, “Phone” and “Delete phone layout” hidden inside the “…” button

Creating a custom phone layout for the first time

When you click the “Phone” button, a modal appears with three options to start your custom phone layout: “Stack elements on top of each other”, “Copy same layout” and “Start with empty layout”.

Creating a custom phone layout for the first time

How syncing works

If you choose “Stack elements on top of each other” or “Copy same layout” the elements of your desktop layout are copied over to your phone layout. These elements are now synced. This means when you edit an element or delete it in one layout, it will also be edited or deleted in the other layout.

Editing and deleting an element syncs to the other layout

If you want your elements to not sync, you can select them, right-click them and click “Sync element” to toggle whether they are synced or not.

Syncing and unsyncing elements

Adding synced elements to desktop and phone layouts

When you insert new elements into a layout, you can select them, right click them and choose “Insert x elements into desktop/phone layout”. When adding new elements this way they are synced.

You only need to do this if you want to add elements and make them synced.

Insert elements into both layouts this way to make them synced


A cover is like an introduction to your project, page or category. A cover will disappear underneath your content when you scroll down. Also a Cover is always browser filling.

For example you can have a full-bleed image (row background image) and some text on top as a cover for a project.

Activate the Cover feature in "Lay Options" → "Activate Cover Feature"

The first row of your layout will be your cover

When the Fullscreen Slider Addon is active the cover will behave like a default row for that page.


Activate Footers in "Lay Options" → "Footers". A page can be a footer for projects, pages and categories. You can choose one footer for all projects for example. Or you can activate "Show a select input in the Project Edit Screen to choose a Footer for individual Projects".

On Scroll Element Transitions

With “On Scroll Element Transitions” your elements will move in once they are scrolled to. This does not work for elements that use parallax or offsets.

If you don't want a single element to transition, add the class "no-animation" to that Element. Right click the element in the Gridder, choose "Edit HTML class and id" and enter "no-animation".

Activate this feature in "Lay Options" → “Activate on scroll element transitions”

Scroll to Top Button

In the Gridder, create a textfield, right click it and choose "Use as Scroll to top Button". You can use a scroll to top button in combination with the Footer feature.

You can also make an image a "scroll to top" button. But I think using text is easier because on the standard phone version all images will have a 100% width, even the "scroll to top" button-image.

To solve this you could use Custom Phone Layouts to additionally layout your "scroll to top" image for your phone version.

Project Descriptions for Project Thumbnails

With Project Descriptions for Project Thumbnails you can add a description text to your project thumbnail. Activate Project Descriptions for Project Thumbnails in "Lay Options" → "Activate project descriptions for thumbnails".

When you edit a project, at the top a new texteditor will appear "Project Description for Thumbnail".

Enter a Text here and use a Textformat to style it:

Now when you add this Project's Thumbnail in the Gridder with the "+Project" button, your Project Description along with the Project Title and Thumbnail is displayed:

The project description appears underneath the project thumbnail

In "Customize" → "Project Thumbnails" → "Project Description" you can customize the appearance of your project description. You can for example set its position to "on image" to have it on top of your thumbnail instead of underneath.

If you want your project description on the same text-line as your project title, you need to hide project titles in "Customize". Then add the text of your project title to your project description. (Hide your project title by setting "Visibility" to "hide" in "Customize" → "Project Thumbnails" → "Project Title".)


In "Customize" in your admin panel you can style your website and see the changes live. You can style the menu, mobile menu, site title, mobile site title, tagline (title underneath site title), links in texts, project thumbnails, project arrows, background, mobile spaces and you can set the frontpage.

Set the Frontpage

Set your frontpage in "Customize" → "Front Page".

Shortcodes and Contact Forms

Since Lay Theme 1.9.8 you can add a shortcode in the Gridder with "+More" → "+Shortcode". I cannot guarantee that all third party plugins will work with Lay Theme.

If you need a Contact Form on your website I suggest the free Ninja Forms. Any contact form you create with Ninja Forms can be added to your layout with a shortcode.


The Intro is an image or video overlay that is shown when a user visits your frontpage. It fades out when the user scrolls, clicks or waits a few seconds.
Activate the feature in "Lay Options" → "Activate Intro Feature", then set the image in "Customizer" → "Intro".

Simple Parallax

With Simple Parallax you can make elements move with different speeds when you scroll. To activate it go to "Lay Options" and check "Activate Simple Parallax". In the Gridder you can now right click an element and set the "y-parallax" speed.

This feature was revised with Lay Theme 1.7.0. If you wish to use the old simple parallax (deprecated and not recommended) you have to activate "Lay Options" → "Use old Simple Parallax".

Passwords for Projects and Pages

When editing a project or page, click Visibility: "Edit" and set a password.

Custom CSS Styling

For these tutorials you need to know some HTML and CSS. Also it's very helpful if you know how to use your browser's inspector/developer tools.

If you don't know HTML and CSS I encourage you to look at the free interactive course on Khan Academy.

And here is a video tutorial about using a browser's inspector/developer tools:

In "Lay Options" → "Custom CSS & HTML" you can enter your own CSS for the desktop and mobile versions of your site.

CSS based on current page

Let's say your about page has a black background color so you need to change your menu and site title color to white just for the about page.

Go to your website's about page and open the inspector of your favourite browser. I use Chrome, so I just right click and choose "Inspect Element".

When inspecting elements you can see the HTML on the left side and the CSS on the right side.

Take a look at the opening <body> tag at the top. It has the classes type-page, id-10 and slug-info.

The type can be either "type-project", "type-page" or "type-category". Right now we're on the about page, which is of "type-page". The id is a number that is unique to the respective type. The slug is the name of the page. We can use this info to target this page specifically and do changes with CSS.

The CSS selector for this page is{}. Or just body.slug-info{}. The slug is not unique in case you have another page, category or project with the same name.

Now we need to find out the selectors for the menu and the site title. The easiest way is to use the selector tool of Chrome.

Find the selector tool in the upper left corner of the inspector.

Click the selector icon, then click the site title. The corresponding HTML element will be marked in the inspector.

As you see in the inspector the site title is an <a> tag with the classes sitetitle and txt. So the CSS selector for it is .sitetitle.txt{}. Using the selector tool we find out the selector for the navigation elements is nav.primary a{}.

So far, our CSS for making the navigation and site title white on the about page is:

/* site title */
body.slug-info .sitetitle.txt .sitetitle-txt-inner span{
	color: white;
/* navigation */
body.slug-info nav.primary a{
	color: white;

Enter this CSS into the field "Custom CSS for Desktop Version" in "Lay Options" → "Custom CSS & HTML" and take a look at your about page.

This works, but it's not perfect yet. The site title and navigation items need to stay white on mouseover and their underline needs to be white on mouseover too:

/* site title */
body.slug-info .sitetitle.txt .sitetitle-txt-inner span{
	color: white;
/* site title mouseover */
body.slug-info .sitetitle.txt:hover .sitetitle-txt-inner span{
	color: white;
/* site title mouseover underline color */
body.slug-info .sitetitle.txt:hover .sitetitle-txt-inner span{
	border-bottom-color: white;
/* navigation */
body.slug-info nav.primary a{
	color: white;
/* navigation mouseover */
body.slug-info nav.primary a:hover{
	color: white;
/* navigation mouseover underline color */
body.slug-info nav.primary a:hover span{
	border-bottom-color: white;

For the underline color style border-bottom-color we need to select the span tag inside of the respective element since that is where Lay Theme styles the border-bottom-color by default.

Last thing we want to do is make the color change animate when you navigate to your about page. For this, we will use CSS transitions. Add this code to your CSS:

/* site title transition */
.sitetitle.txt .sitetitle-txt-inner span{
	transition: all 600ms ease;
	-webkit-transition: all 600ms ease;
/* navigation transition */
nav.primary a{
	transition: all 600ms ease;
	-webkit-transition: all 600ms ease;

This is our final result. The site title (top left) and menu (top right) are white now only on the about page:

Create a button style

First, we create a text element with a link. Then we give it a HTML class of "buttonstyle" to later target this textelement with CSS.

To give an element an HTML class right click it in the Gridder and click "Set HTML class and id" as shown in the video below.

Now we enter some CSS in "Lay Options" → "Custom CSS & HTML" → "Custom CSS for Desktop Version" and "Custom CSS for Mobile Version".

.buttonstyle a{ … } is the CSS selector to target links inside anything of the class "buttonstyle".
.buttonstyle a:hover{ … } is targeting the mouseover state of our button.

.buttonstyle a{
    padding: 15px 20px;
    display: inline-block;
    background-color: #e8e8e8;
    border-radius: 3px;
    line-height: 1;
    text-decoration: none;
    border-bottom: none;
    color: black;
    opacity: 1;
    white-space: nowrap;

.buttonstyle a:hover{
    background-color: #f0f0f0;
    text-decoration: none;
    border-bottom: none;
    color: black;
    opacity: 1;

padding: 15px 20px; is the inner space around the text.
display: inline-block; makes the button have the width of the text "Cool Button".
border-radius: 3px; makes the button have rounded corners.
white-space: nowrap; makes sure there is no line break of the button text.

The CSS for color, opacity and border-bottom is there just to make sure we are overwriting the styles of "Links in Texts" that you might have set in "Customize" → "Links in Texts".

This is our final result for our button look:

Hide an element on mobile

First we add the HTML class "hideformobile" to an element in the Gridder. Just right click an element and click "Set HTML class and id". Then enter "hideformobile" for the class (without the quotes).

Now we add the following CSS to "Lay Options" → "Custom CSS & HTML" → "Custom CSS for Mobile Version"

	display: none;

If you want to highly customize your phone layout please take a look at Custom Phone Layouts.

Custom JavaScript

These tutorials are intended for people who know a little JavaScript.

When using jQuery, please use "jQuery" instead of "$".

Do not insert jQuery by yourself using <script src="jquery.js"></script>", because jQuery is already included. If you insert jQuery another time, this will cause bugs.

You can put all of your custom JavaScript into "Lay Options" → "Custom CSS & HTML" → "Custom <head> content". Don't forget to wrap your JavaScript with <script> … </script>.

Newpage Events

Because your Lay Theme website is a "Single Page" JavaScript application you cannot just use jQuery(document).ready(…) to execute your js because the ready event only fires once when the website loads the first time.

Since Lay Theme 1.056 you can use a JavaScript event to execute your own JavaScript whenever a project, page or category is visited. The event is called "newpageshown". It will trigger when a new project, page or category has rendered.

window.laytheme.on("newpageshown", function(layoutObj, type, obj){

layoutObj is a an empty object. This used to contain the layout's JSON, but was deprecated.

type can be either "project", "page" or "category".

obj is WordPress' post, page or term object. These objects contain general information like ids and slugs.

Let's take a more detailed look at the output of this event. In your admin panel go to Lay Options" → "Custom CSS & HTML". Find a field called "Custom <head> content". Here, type in:

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	console.log("layoutObj", layoutObj);
	console.log("type", type);
	console.log("obj", obj);

Click "Save" in "Custom CSS & HTML" and go to your Lay Theme website. Open up your browser's console and take a look at the "layoutObj", "type" and "obj" values.

Let's say you want to execute some JavaScript whenever your project of id 1 is shown:

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "project" && == 1){

In the following example, a random background color out of an array of predefined colors is set for every page.

var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
window.laytheme.on("newpageshown", function(){
	var ix = getRandomInt(0, colors.length);
	var color = colors[ix];
	jQuery('body').css('background-color', color);

// Returns a random integer between min (included) and max (excluded)
function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min)) + min;

Binding Click Events

Let's assume you gave multiple elements on multiple pages a class of clickme in the Gridder. You did that by right clicking the elements and clicking "Set HTML class and id".

Now you want something to happen every time someone clicks that element. The easiest way to attach an event handler function to .clickme is to use jQuery's "on". We are using a so called "delegated" event handler:

jQuery(document).on("click", ".clickme", function(event) {

If we would bind the .clickme elements directly like jQuery(".clickme").on("click", …), that wouldn't work because of the way Lay Theme is built as a JavaScript Single Page App.

You shouldn't wrap this into a "newpageshown" event, it should work just fine like that.

Moving a Lay Theme website

Please watch this video where I explain how to move a Lay Theme website to a different URL. These steps apply if you are moving from one webhost to another or if you are staying on the same webhost and changing URLs.

The "Velvet Blues Update URL" Plugin will invalidate all of your JSON, so you will loose your content! Only use the plugin "WP Migrate" for database exporting.

Please create a backup of your files and database and follow these instructions carefully. If you make a mistake and have no backup, your files and database can be lost.

Deactivate your license key before moving your website in "Lay Options"→"License Key". This way you can use your key on the new domain.

If you forgot to disable your key send an email containing your key to and ask for a reset.

Instead of following this tutorial you can use the plugin "Migrator". It is much faster and easier but costs 30$. You could also use any of the free Migrator Plugins. I haven't used them but they should work too. Just make sure to create a backup before migrating.

I imported my database and my “Customize” settings are lost

Your Customize settings and more can be lost when you import your database to another server. The reason for that is most likely that I use emoticons as an option for "Customize" → "Project Arrows" for "Arrow Type" → "Icon".

Please open the database that you exported with "Migrate DB" with your favourite texteditor. You might need to unzip it before.

Search for the word "theme_mods_lay". You should find a textline that looks something like this: (128, 'theme_mods_lay', …

This line of text contains all Customize settings. Search for the word "pa_icon" and find some text that looks like: "pa_icon";s:4:"🔵";.

Replace this with "pa_icon";s:0:""; and save your file. Now when you re-import your database your Customize settings should be intact.

I imported my database and some images don’t show up

First make sure your folder "wp-content" → "uploads" contains your images.

Some images might not show up because of image-filenames that contain special signs like ö, ü, é or spaces.

In this case one solution can be to install the WordPress Plugin Regenerate Thumbnails and use it to regenerate all images.

If that doesn’t work you need to re-upload the images and re-insert the images that are not shown.

Using multiple domain names for the same Lay Theme website

Your website is reachable at "" and you want to use an additional domain name like "". Then you should use a type of redirection where you will see the targetdomain "" in your browser's address bar when you enter "". Otherwise the content of your website won't be loaded cause JavaScript is not allowed to fetch data from another domain.

Speeding up your website

Use HTML5 Videos instead of gifs and use jpegs instead of pngs for faster loading of your media. Both HTML5 Videos and jpegs typically have smaller file-sizes!

  • Use a WordPress caching plugin. Every time after updating Lay Theme and its Addons make sure to delete the cache in your cache plugins settings. Otherwise your website might not work as expected.
  • Make sure "Lay Options" → "Lazy Loading" is activated
  • Try to use HTML5 video files that are smaller in file-size. "Handbrake" is a desktop app that I recommend for compressing videos.
  • Use jpg's instead of png's
  • Use HTML5 videos instead of gifs
  • Disable any plugins you don't use, include Lay Theme Addons you don't use
  • Try and see if you can use a CDN in your webhost control panel
  • Ask your webhost why your site might be loading slowly, maybe your server is slow. Maybe you can upgrade your webhosting package to a faster one.
  • Make sure the option "Lay Options" → "Disable Ajax / Compatibility Mode" is disabled. This can at least speed up subsequent pageloads when you click on links on your website. It does not speed up the initial website-page load.
  • If you use HTML5 videos on desktop and use the same videos for phone, they might be too big for phone. In this case you could create a Custom Phone Layout and insert HTML 5 videos with smaller file size. "Handbrake" is a desktop app that I recommend for compressing videos. Or you could just use YouTube or Vimeo Videos.

💫 Thanks to, and Vaisslle for letting me use their images. 💫