Getting started with Nilead Visual Editor

Getting started with Nilead Visual Editor

The Visual Editor allows you to create, update layouts and content without touching the code (unless you want to).

It's important to understand how layouts work on Nilead Platform first to utilize the Visual Editor effectively:


Themes in Nilead are sets of layouts/views. Themes are usually used on the application level, for example we are currently using a theme named Onyx for your backend application (where you control all your website data and such).

By using themes, it's possible to have completely different views for multiple devices, environments, or even languages and users. The later is not yet supported but theme gives us such possibility if we decide that we need it.


While theme may contain multiple views, a layout contains only one single view. When you come to use and ask us to design a completely new website for you with multiple pages, that's a theme. For each web page on the new website we may need to design a completely different view for it, that's a layout.


A layout made up of smaller components, which are called widgets in Nilead Platform. A widget can be super simple (a single button or heading) or super complicated (a sophisticated carousell slider). Widgets can be easily re-used, re-arranged, added, deleted. By managing these widgets we can easily create unlimited number of layout variations to satisfy any business requirement.

To build a layout we normally have to utilize dozen (or more) widgets deeply nested in multiple levels. It can be difficult even for the developers to locate the exact widget to edit the content.


Internally, widgets are built from template files and assets such as images, stylesheets, javascripts, etc... You can override and edit these files but it's not recommended to do so.

In Nilead template files are usually written in Twig language.

Visual Editor

When you want to edit certain part of your layout, lets say you want to edit the content on your homepage's banner, you have to locate the exact widget(s) that makes up that part and edit its configurations. The Visual Editor gives you an easy way (point and click) to quickly edit the exact widget configurations.


We have created a video to show you an overview of the Visual Editor:

To edit an individual widget, you can follow the instruction below: