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 4: Global Styling

LOCAL VS GLOBAL STYLING
The editor allows the design of a consistent and professional website. To do that, there are two kinds of styling that must be differentiated.

GLOBAL STYLING
Instead of having to modify each element individually, Global Styling allows you to design the elements of the same kind at the same time, creating a consistent theme on your website and saving your time.
Along with the global alterations, in Global Styling it is also possible to design the Body, Main Wrapper and Content Wrapper, the Header and the Footer.

LOCAL STYLING

However, sometimes it is relevant to highlight a specific button, a title or any other element that you want to stand out among the others - for that you should be using Local Styling. Local Styling is done in the Pages area and it refers to the individual elements that you want to differentiate from your website global style.

GLOBAL COLORS
When designing your website, choosing the ideal colors is an extremely important decision - colors should be considered as a medium of communication, contributing greatly to the overall attractiveness of your website. Global colors allows you to define a color scheme to your website and apply it to different elements multiple times without having to set the color each time.

1. WHY USE GLOBAL COLORS?
Instead of using a lot of different colors, websites should have a color scheme in which a limited number of colors are used consistently throughout the pages. This will significantly improve the visitors' experience when browsing your pages.

2. DEFINING GLOBAL COLORS
2.1. WHERE TO FIND GLOBAL COLORS?

You can find the Global Colors selector on the left side menu under the Global Styling tab of the editor.

2.2. HOW TO DEFINE GLOBAL COLORS
By selecting the global colors option, a new menu will open where you can select up to 15 colors to create your color scheme - 3 primary, 3 secondary, 4 base and 5 custom - e.g to define the Primary Spot Color 1, click on the square on the right of the option and then choose the color from the color picker or paste the color hex code on the box. Once you have defined your global colors, don't forget to save by clicking on the Save button.

For the primary colors you should add a light, a regular and a dark version of the same color. This allows you to use these colors across the site for things like hover effects. There are also three secondary colors which you can use in the same way, along with a range of grays for row backgrounds and uses elsewhere. You can also use the custom colors to use less-common colors, if you need to add more.Generally we would suggest sticking to no more than 2 main colors for a website.

2.3. COLORS BEING USED

It is possible to find a small icon in front of each color, in case that color is being used somewhere on the site. If you hover on top of the icon, the editor will show you a list of places where that color is currently being used on.

3. USING GLOBAL COLORS

When styling an element, you can now have quick access to your predefined global colors when attributing colors to different elements.

NAVIGATION MODULE

The Navigation Module is what will allow the visitors of the website to navigate from page to page. It is possible to find the Navigation Module in the Basic Modules menu only under the Global Styling tab; add it to your website by dragging it from the top bar to a row or column of your preference.

HOW TO EDIT THE NAVIGATION MODULE?

The Navigation Module will become the website's menu. It is possible to open the Menu Settings in two ways - by selecting the Module and clicking on Edit / Settings icon or by choosing Menu from the drop-down options of the Navigation Settings on the left side menu.

DESIGN HEADER & FOOTER
The design of your website header and footer is very important from both a visual perspective but also for calls to action. The editor gives you the ability to customize both your header and footer as you prefer.

1. HOW TO DESIGN HEADER & FOOTER
You build a header and footer in the Global Styling area just like you would build up pages - use the rows and columns system and add modules by dragging them into the designated area. There's not limits to the design! Just like with all other elements, the editor gives you the ultimate flexibility for designing and styling your header and footer so that it suits your website goals with a true unique look.

1.1. HEADER/FOOTER & DIFFERENT LANGUAGES
One interesting feature on headers and footers is, if you have designed a website in different languages, the editor allows you to differentiate footers for each language version, including adding different buttons, through the Button Module, different images, through the Image Module, and text, through the Text Module.

1.1.1. EXAMPLE DIFFERENTIATED FOOTERS
Let's say your website supports both english and french. You want to be able to differentiate both language versions by adding a specific logo for each and adapting the language on the existing text. To do so, all you must do is add the relevant elements under the respective language. Follow the steps below for a quick visual representation of what you would have to do in this example:

Step 1: Add the English logo under the English page.

Step 2: Add then English text under the English page.

Step 3: Navigate to the French version and add the logo.

Step 4: Update or add the relevant text in English

Congratulations! You can preview your site and you will find the differentiated footers depending on the language.

2. HEADER OPTIONS
2.1. FIX TO TOP
On the left side Menu, under Layout Settings the Header Option can be found. When selecting that option, a menu will show up where there is a possibility to Fix Header to Top. By enabling this option the header will be fixed to the top of your website and it will never disappear when the website is scrolled down.
Note: Although the setting is enabled, the fix header functionality will only be available in the previewed and published site.

2.2. MINIFY HEADER
Once you have enabled the Fix Header to Top option, a new option called Minify Header appears. When this option is enabled, no matter where you are in the page, by scrolling up the full header will show

BODY, MAIN WRAPPER & CONTENT WRAPPER
Adjusting the settings for Body, Main Wrapper and Content Wrapper allow you to define the overall frame of your website. You can create a unique feel for your website by adjusting spacing, borders and background within these settings.

. BODY
In Body settings you can define the background design for the entire site. Similar to rows and columns you can choose a background color or upload an image including patterns. Note that the image will be displayed at all pages on the website.

1.1. TEXT / GLOBAL FONT
In this section you can also customize text and links. Note that by doing it at the Body level, you'll change the styling of all the texts and links on your website. That's why we refer to it as Global Font, since it is possible to set an overall typeface to be used across the website.

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