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!
1. What are rows, columns and modules?
When in the Build area, rows are highlighted in orange, columns in green and modules in blue. Rows are comprised of up to twelve columns and these columns contain the modules.
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.
2.1. Fixed and fluid Rows
A row can be defined as fixed or fluid. A fixed row ensures that the content is always centered in a fixed width even if the screen is wider than the content; a fluid row allows the content to stretch to the entire width of the browser, independently from the size of the screen. It is possible to have rows with different settings on the same page.
To turn a fixed row into a fluid row, click on the gold Row menu and select Edit. In the Styling tab, enable the Fluid Container option and click on Save.
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.
3.4. Importing content to a column
Instead of manually adding the content, the editor gives you the possibility to import content from existing websites and add it to your own, automatically adding the relevant modules to a column. Learn all about importing content here!
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. To see all the modules, please click here.
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.See the Module Groups that the editor offers here.