How to add, combine and style elements in the Noloco builder

What is an element?

An element is the building blocks that make up all of your pages. More often than not they map directly to a HTML element or tag. If you are familiar with HTML tags such as <div> <a>link</a>or <img src="" /> then you will notice some similarities.

Just like in HTML, elements can be combined and nested to create complex interfaces.

In Noloco, most elements can be styled to meet your needs, and all elements have certain properties that you need to set. For example, the Image element needs to know what image to render, you specify that in the properties settings.

How to add an element?

Some elements can have sub-elements (or children). For example, a Column can have many sub-elements of any type, but a Text element can not have any sub-elements. Sub-elements allow you to have more control over your UI, but specifying styles at a parent level such as direction, colours and spacing

If the element you have selected when you add a new element can have child/sub-elements, the new element will be added as the last sub-element of that element. If it can't have sub-elements the new element will be placed after it

What is the element tree?

The element tree (seen below) represents the hierarchical relationship of elements and their sub-elements. The tree below shows that the Hero image and Hero with two columns groups are both sub-elements of the Group group.

Almost all elements can be moved around within the element tree to easily define the order of your layout and to provide greater control over the design.

Element tree actions

Clicking on any item in the element tree will select that element for editing, and highlight it on the Canvas. The selected element also exposes additional actions such as cloning the element or deleting the element.

Read more about the individual elements in the Element Reference