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

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. Watch the video below for a quick tutorial on the topic!

1. HOW DOES IT WORK?
One of the main differences between these viewports is their width. The tool makes it possible to design a website that looks good across the different viewports as it is possible to adjust the columns without changing their content.
You can change between viewports by selecting one of the three different icons on the top of the editor interface.

2. COLUMN WIDTH CHANGE
What may look well designed on the desktop view may look poor on the mobile device view. Therefore, in order to keep the images visible and the text readable, it is important to adjust the column width between viewports to improve the user experience. To an extent, this happens automatically based on responsive design. However, you have the option to further customize column width based on viewport if you think a different width works better for your content.

3. HIDING MODULES
Sometimes it makes sense to hide specific elements in different viewports. To do so, click on the row or module you wish to hide, select the Hide on Device option and choose in which viewport you wish to make that element invisible.
For example, this feature can be particularly handy if you wish to display a phone number or some other kind of CTA high on a mobile page but do not wish for it to appear on the desktop version. As behavior on mobile devices is often different than when using websites on desktops, this feature is truly helpful for driving conversion.
Once you have enabled that option, a small symbol will show up in front of the viewport.
Please note, you can't hide elements from the view in which you are working currently. e.g. If you are in Mobile view, you can't hide elements from Mobile view. To hide something from Mobile view, you should edit the element from within one of the other views.

4. GLOBAL STYLING

One way to ensure that the website is optimized for all the viewports is by defining global styling per viewport. This unique characteristic means you can differentiate text sizes, button sizes and many other elements to suit desktops, tablets and mobiles optimally. To learn more about Global Styling, please click here.

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