Introduction to the Builder

Published on 03/22/2021
Help Article Intro To Leiout
Jason Hoover
Leiout Developer
Katy Wellington
UX/UI Designer

In this Leiout tutorial, you will learn the basics about the website builder mode. We will discuss different settings, containers, and elements found in the builder. 


All of the layout containers, elements, and settings can be found on the left hand side of the builder screen.

In layouts, you will find the different page containers. There are sections, rows, columns, and column groups. Sections are the largest containers. Rows can only go in sections and columns can be placed in rows. You can add these containers by dragging and dropping them on the page. 

As you drag and drop a new section, a green pattern will appear showing you where you are putting it. You can tell where your containers divide by locating the grey handles on the top of the sections and on the sides of the rows. There are gold handles on the tops of the columns. The containers can be dragged to different parts of the page or over to the trash. 

In an empty column, you will see a paisley pattern indicating that it is empty. 

The elements option on the left hand sidebar shows you all of the different page elements that can be dragged and dropped into columns. 

If you want to see what your page looks like to a user, you an either view a preview or live version (found under settings in the left hand sidebar). When you are done creating your page, you will publish it using the publish wizard. 

This is a basic explanation of the builder mode of Leiout. 

Related Articles

Google Translate

This article explains how to install and use Google's translate javascript library and implement a button that brings up a translation prompt.

20, Sep 2021
Help Article

This article shows you how to use the Bootstrap scrollspy feature using Leiout's plugin feature!

16, Jul 2021
Help Article Plugins
Uploads vs Sass vs Global CSS

In Leiout, there are different places to put specific files, SASS, and other CSS. In this tutorial you will learn the difference between the Uploads, SASS files, and the Global CSS tabs under Assets on the admin dashboard and how to utilize these opt...

23, Mar 2021
Help Article Intro To Leiout
Hyperlinks and Anchorlinks

In this Leiout tutorial, you will learn how to create hyperlinks and anchor links out of different page elements. You will also learn what happens to the elements when they are linked.

23, Mar 2021
Help Article Intro To Leiout