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