0709399000 

Login       Register     Place Order

Rollback and Reset function is used to undo changes you previously made. This module is located at the top right side of the mono editor. Learn more

Remember to publish your website after making changes. The publish module is located at the top right side of the mono editor. Learn more

Lesson 1
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.

Learn more

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.

2.2. STYLE
There are 8 different border styles which can be chosen from the drop down menu - solid, dotted, dashed, double, groove, ridge, inset and outset.

2.3. RADIUS
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.

3.1.1. Repeat
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.

3.1.2. Size
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.

3.1.3. Positioning
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.

Viewports
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.

Learn More

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.

Learn More

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.

Learn More

Course List

Lesson 1

Familiarizing with the mono Editor platform

Lesson 2

Choose a theme to start building your website

Lesson 3
The Basics
Introduction
Fundamentals
General Settings
Content
Previewing and Publishing

Lesson 4
Global Styling
Fundamentals
Specific Modules
Layout Settings
Navigation Settings
Module Design
Custom CSS
CRM Settings
On-Site Engagements design

Lesson 5
Pages and Content
Building pages
Page settings
Row settings
Text
Images and Video
Basic Modules
Social Modules
Module Groups
Add Specific Content
Custom HTML

Lesson 6
Contact Forms
Email contact forms
Data collection forms

Lesson 7
Social Icons and Links
Facebook
Twitter
Google+
Youtube

Lesson 8
Responsiveness
website view on PC
Website view on tablet
Website view on phone

Lesson 9
Module Design
Background Graphics
Background colors
Border radius
Border width
Padding
Margin

Lesson 10
Shopping Page

Lesson 11
Creating your Blog
Create and Manage Posts
Tags
Comments
Blog Settings
Blog Catalogue

Lesson 12
Adding videos

Lesson 13
CRM
CRM Basics
Users
Groups
Forms

Lesson 14
Settings

Lesson 15
Apps
On-Site Engagements
Synchronization and Integrations

Lesson 16
E-commerce
Basics
Create and Manage Products
Orders
Variation Labels
Category Tags
Shop Settings
Implementing the shop
Styling the shop
Payments

Lesson 17
Global Data
Adding global data

Lesson 18
Rollback and Reset Function

Lesson 19
Adding Google Tag Manager to your website

Lesson 20
Publishing your website

Lesson 21
Search Engine Optimization