When you first start working in the editor, there are three core building elements you need to understand first - rows, columns and modules. These elements are the foundation of the design system; please continue reading to learn more about each specific element. Watch the video below for a better visual representation of the topic!
2. HOW DO ROWS WORK?
A row is created by either copying an existing row or by dragging and dropping a new module onto the page in a green highlighted area. Rows can be made fluid (spanning the entire width of the browser) or fixed to the body area width. Rows have individual styling options including spacing, margin and background (including images and videos). They can also be made into groups to create a slider (or carousel) effect on the site. By default, when creating a new row it will comprise of only one column, which you can read more about under the columns section below.
3. HOW DO COLUMNS WORK?
By default a new row always starts with one column. You can then split the column in order to create multiple columns. You can change the width of any column within a row by dragging the left or right side bar of the column. A row can contain up to twelve columns. Each column must have a width between 1 to 12 units, as long as they always add up to 12. For example, you can have two columns with the width of 6 units each or multiple columns with different widths adding up to 12. Columns also have their own margin, spacing and a number of other style elements including backgrounds, borders, etc.
3.1. ADDING A NEW COLUMN
To add a new column, click on the green Column menu and select Split. It is possible to repeat this process as many times as you like but keeping in mind that the maximum number of columns is 12.
3.2. CHANGING THE WIDTH OF A COLUMN
It is easy to change the width of a column by dragging the edges of the column in the direction wanted.
3.3. DELETING A COLUMN
To delete an existing column, click on the green Column menu and select Delete. The remaining column(s) should automatically fill the space left by the one deleted.
4. HOW DO MODULES WORK?
Once you have set up a column, you can drag modules into it. You can find the modules along the top of the editor. Choose the module category from the drop down menu - All Modules, Basic Modules and Social Modules - and then use the side arrows to navigate. You can stack as many modules in a column as you want.
4.1. MODULE GROUPS
In addition to the individual Basic modules, there are pre-designed Module Groups which make a page more functional and sophisticated while at the same time facilitating the design and layout by having modules already grouped in a relevant way. All modules are already customized to stack and collapse effectively in each of the three viewports, which makes them time efficient to use