The Design SYstem

At the foundation of the site builder platform is an extremely flexible grid system based on three fundamentals: Rows, columns and modules.

A page may contain as many horizontal rows (placed on top of each other) as you like and each row can contain up to 12 vertical columns. We use a 12-column grid because it's divisible equally by 2, 3 and 4, as well as flexible enough to accommodate many other column combinations.

12 column grid

Modules

Modules (where all your content will reside) can be placed freely inside columns (which are in-turn, within rows).

These fundamental elements can be compiled in almost infinite combinations, giving the ultimate flexibility to accommodate any page layout imaginable. Furthermore, rows and columns can be styled individually (as well as globally) for boundless design options.

In the image below, you can see a row (1) a column (2), a text module (3) and a button module (4).

rows, columns and modules

Rows & Columns

Rows are horizontal containers spanning the width of the site's content area (fixed setting) or the entire screen area (fluid setting). Rows can be styled individually so that each row looks unique in terms of design.

Columns are vertical containers nested inside the rows. The width of each individual column can be easily adjusted by simply dragging it from side to side (use the dotted line that surrounds the column when you hover your mouse over it). A column can be split multiple times (up to 12 columns per row) and modules and content can then be added to each column.

The illustration below shows how combining 'fluid' and 'fixed' behavior for rows can achieve a dynamic page design.

1. The top row containing the menu has a fluid setting and therefore spans the entire browser window
2. The intro text row is set to fixed
3. The image row is fixed
4. The row containing 4 columns with texts are set to be 'fluid' and therefore span the entire width of the browser window

mix of fluid and fixed rows
 

Modules & Module Groups

Modules are containers for the various types of content on your site.

Global Styling helps create a uniformed look for your modules to save time and create efficiency when producing websites at scale. With the editor you can also make use of Module Groups.

As the name suggests, Module Groups are groups of modules that can be put on the site as a set, to save time when building up pages. Drag module groups down onto the site just as you would regular modules. Module Groups come ready-optimized to stack responsively in the tablet and mobile viewports.

Modules

A module is an individual content element. It can be a text, a button, an image, a form builder, a map, you name it. The editor features all the modules you need to create a professional website with new modules being added all the time, all which can be styled locally and globally.

Module Groups

Module groups can contain several modules which can easily be dragged into a column for fast and efficient production. A good example of a module group might include a headline, text and a button.

 

TRULY RESPONSIVE

With the editor, it is possible to optimize a website experience and design for any device, all while using one set of HTML with the highest code integrity. The editor uses three different viewports when designing responsive websites, including desktop, tablet and mobile. Define global styling by viewport to optimize production while ensuring the optimal user experience no matter the device they're using. You can also define how you'd like content to display or "stack" across the different viewports. You can even define elements to be hidden on certain viewports for ultimate control.