Familiarizing with the mono editor platform
Introduction to rows / columns / modules
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.
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 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.
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.
Introduction to styling
When it comes to styling options, the editor allows you to work with four main high-level elements that differentiate overall website design - Spacing, Border, Background and Typography. These are the variables that will determine the general look and feel of your website.
1. STYLING - SPACING
When styling rows, column or modules, there are two spacing settings available - Margin and Padding. To change the spacing, go to the menu of the element you are working on and find the Spacing option.
1.1. SPACING - MARGIN
Margin adjusts the space outside of an element.
1.2. SPACING - PADDING
Padding adjusts the space inside of an element.
2. STYLING - BORDERS
There are multiple elements in which you can customize borders, including rows, columns, and modules like text, buttons or images. To add or change borders, click on the element, choose Edit and find the Border option under the Styling tab. When customizing borders, the following options are available: color, width, style and radius.
2.1. COLOR AND WIDTH
These options allow the alteration of the color and pixel width of the border.
There are 8 different border styles which can be chosen from the drop down menu - solid, dotted, dashed, double, groove, ridge, inset and outset.
This option allows you to round the corners of the element.
3. STYLING - BACKGROUND
There are two options when changing an element's background - choose a solid color or upload an image from the library. To change the background, select the menu of the element, choose Edit and find the Background option.
3.1. BACKGROUND MEDIA
When choosing an image as a background, there are a lot of variables to take into account depending on the image's composition, size, type, etc.
You can use this to repeat a background image, vertically, horizontally or both ways. Bear in mind if your background is set to cover, contain, or is larger than the area of the container, then you may not see the background repeating.
Regarding size, there are three options:
Normal - keeps the picture at its normal size.
Cover - the image will expand to fill the container but not repeat itself.
Contain - the image will scale and repeat to fill the container.
Positioning allows the placement of the picture as desired, making visible the portion of the image that is intended.
3.1.4. Fixed Position & Parallax Scrolling
When Fixed Position is enabled, the picture won't move while a user is scrolling on the page. When Parallax Scrolling is enabled, the picture will 'move' (different areas of the image become visible) as the user is simultaneously scrolling, following the scrolling direction but moving at a different rate to the scroll speed.
3.1.5. Background Clip
Enabling this option will clip the background image based on the padding settings. The larger the padding, the more the background image will be clipped.
3.2. BACKGROUND VIDEO
It is possible to have a video automatically playing (set to repeat/loop) as the background of a row or column.
3.2.1. Enable Background Video
You should select this option if you want to display a video as the background for the row or column. The video won't play unless you enable this option.
3.2.2. Video URL
Paste the link of the video you wish to add as a row background. Please note that the only accepted URLs are: MP4, WEBM, OGG, YouTube and Vimeo.
4. STYLING - TYPOGRAPHY
The customization of text can be done both globally and at the page level. The customization options include font color, size, family and weight, and also letter spacing and text alignment.
The editor allows for the design of truly responsive websites, optimizing them for the three most important viewports - desktop, tablet and mobile. These viewports can be uniquely designed and contain unique content for the particular viewport without ever compromising the source code which remains a single page of HTML.
Rollback and Reset function
When working in the editor there are two important and useful 'undo' tools one should be aware of and know how to use - the Rollback and the Reset function. These functions allow the resetting of an older version of a website, undoing changes, and resetting the original styling of an element.
How to SEO-Optimize your website
SEO is very important to have in mind when creating and managing a website but it can be difficult to keep an overview of how optimized a website is. To help you keep track of your SEO, the Editor has a built-in SEO checker that quickly provides you an overview of your website's SEO.