Articles on: Website

How to change font and colors across your website

Editing and applying Global Text styles

The Editor contains a number of configurable text styles that you can add to any paragraph of text on your website, helping you maintain a consistent design.

By default, all text styles inherit the font family from the General text style. To apply a new font family to all text styles, change the font family of the General text located found in the Global Design > Global texts menu.

If you would like to customize the appearance of any other text styles, you are able to do so by selecting the text style from the menu. You can change attributes such as the font weight, size, color, alignment, link style and more.

Once you have established the title and paragraph text styles, you can easily apply them to any content added in Text modules. Simply highlight the content you would like to add a text style to and choose the specific style from the Design menu. If you would like to make quick adjustments to the Global text styles, you are able to select the edit icon next to the text style in the Design menu.

Styling text for different viewports

All title and paragraph text styles can be optimized for the three main viewports: desktop, tablet and mobile. For example, if you were to style the Light Spot Text style to be 70px on desktop, 50px on tablet, and 30px on mobile, you would begin by styling the Light Spot Text font size to 70px in the desktop viewport. Any changes made in the desktop viewport will affect the tablet and mobile.

Next, you would style the Light Spot Text font size to 50px for the tablet viewport (remember to click the tablet view in the Editor's top bar before editing the module). Any changes made in the tablet viewport will affect mobile but not desktop. Finally, you would style the Light Spot Text font size to 30px for the mobile viewport (remember to click the mobile view in the Editor's top bar before editing the module). Any changes in the mobile viewport would not have an impact on other viewports.

The viewport hierarchy "breaks" for rows, columns or modules once you modify one of the elements on one of the viewports individually. For example, when you modify the font size on tablet or mobile and afterwards change the font size in desktop, the changes on desktop will not affect the other viewports. This is to help you avoid overwriting viewport-specific modifications and design every time you change something on desktop or tablet.

Grey indicator dots next to styling options: When you see a grey indicator dot next to a style option, this means a style change has been made locally on that element. No grey indicator dot means the style is inheriting from the global style.

Click the grey indicator dot to reset the styling and revert to inheriting from the global style.

Custom text styles

Apart from the default text styles in the Editor, you also have 10 custom styles in case you need to define additional ones.

This could, for example, be useful if you have an announcement banner on your website and want any text on that to appear with a unique style. Click one of the custom styles, style it any way you like, and give it a suitable name to help you recognize it later on.

Editing and applying Global Colors

Choosing colors for elements on your website is one of the most common tasks. Using Global Colors, it is easy to select a color palette for your design and apply it to any element without having to set the color each time you add a new element on your website.

The Global Colors palette is broken down in to 3 different categories:

Spot Colors
Base Colors
Custom Colors

These categories allow you to define a hierarchy to keep the process of applying and editing the color scheme of your website simple and effective.

Defining Global Colors

You can define your color palette for your website in the Global Design menu by selecting the Global Colors option. By selecting the color swatch next to the color identifier, you can pick the specific color palette you would like to reuse on elements of your website. Think of Spot Colors as your main brand colors. For the Spot Colors you should add a light, a regular and a dark version of the same color. Base Colors are primarily used as background colors on elements such as rows, columns, or text. Custom Colors are there for additional color options if needed.

Applying Global Colors

When styling an element, for example a button, you have quick access to your predefined Global Colors when attributing colors to different elements. It's important to use the Global Color swatches when doing so in the event the color(s) of the website change at another time. Changing the color swatches in the Global Colors menu will affect all elements styled with Global Colors on the website.

Updated on: 02/08/2023

Was this article helpful?

Thank you!