Gridder

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

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.

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. Please note that autoplaying won't work on mobile devices.

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.

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

Textformats

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

Covers

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.

Footers

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

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

Customizer

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.

Intro Image

The Intro Image is an image overlay that is shown when a user visits your frontpage. The image fades out when the user scrolls, clicks or waits a few seconds. Set the image in "Lay Options" → "Intro Image".

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

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: https://khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-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 body.type-page.id-10{}. 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{
	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"

.hideformobile{
	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 "$".

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 two JavaScript events to execute your own JavaScript whenever a project, page or category is visited. The events are called "newpage" and "newpageshown". "newpage" will trigger when a new project, page or category was fetched. "newpageshown" will trigger when a new project, page or category has rendered.

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

layoutObj is a js object that contains all of your grid's attributes, like your texts, videos, images, columncount, columngutter etc. If your grid is empty, layoutObj will be false.

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:

<script>
window.laytheme.on("newpage", function(layoutObj, type, obj){
	console.log("layoutObj", layoutObj);
	console.log("type", type);
	console.log("obj", obj);
});
</script>

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:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "project" && obj.id == 1){
		console.log("fantastic!");
	}
});
</script>

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

<script>
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);
});

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 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;
}
</script>

Binding Click Events

Let's assume you gave multiple elements on multiple pages a class of clickme in the Gridder. You did that by clicking the little "class" button that appears when you hover over an element.

Now you want something to happen everytime 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:

<script>
jQuery(document).on("click", ".clickme", function(event) {
	console.log("yay!");
});
</script>

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.

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

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 "www.mywebsite.com" and you want to use an additional domain name like "www.hey.com". Then you should use a type of redirection where you will see the targetdomain "www.mywebsite.com" in your browser's address bar when you enter "www.hey.com". Otherwise the content of your website won't be loaded cause JavaScript is not allowed to fetch data from another domain.

💫 Thanks to ruine.biz, sucukundbratwurst.de and Vaisslle for letting me use their images. 💫