Skip to main content

Global Styling: Update Fonts, Colours & Website Layout

Customize your website's fonts, colors and layout in the Global Styling section of your website builder.

Updated over 3 months ago

You can update your website fonts, colour scheme or layout by navigating to your global styling menu. Watch the video below to learn how you are able to update each setting.

Global Text Styling

To update your Global Text Styling navigate to Styling and select the Text Styling option:

You will see that you have the option to individually update Global Styling for Desktop and Mobile Views:

πŸ’‘ When updating your Global Styling, keep in mind that you need to update both Desktop and Mobile views' styling, as they will not automatically update when updating one or the other.

To change the font settings, select the Click To Edit option you see when you hover over the text you would like to update:

A pop-up menu will appear where you can change the Font Type, Font Size, Letter Spacing, Line Height and Text Colour. Once you have updated the settings, click Confirm once done to apply the changes:

Global Text Links

Here you can apply colors and underline settings to all the links on your website. Once you have updated the link settings, click Confirm to apply the changes:

Add Google Fonts

To add Google fonts or upload Custom Fonts to your website, navigate to Global Styling and select Add Fonts:

To add one of the Google Fonts that are already installed on CCK, click on Add Fonts and select any of the listed Google Fonts. A popup will appear to select the presets for the particular font, such as Italic and Bold in different sizes.

Uploading a Custom Font:

To add a custom font to your CCK website, click on Upload Custom Font, add the Font name, select from WOFF format or OTF/TTF formats, then upload the fonts in the File Manager:

Color Palette

To add your branding colours to your website, navigate to Color Palette option under the Global Styling section:

Here you will be able to update the Primary, Secondary, Background and Main Text Colours:

πŸ’‘ When you are adding your branding colours to your website, always try and match the shade of your colours with those that have already been added to the website template. For example, if you have a dark colour under the Main Text Colour section, we recommend you replace this with a dark colour from your colour palette and not a light colour. Otherwise, some of your elements will not display correctly on your website.

Website Layout

To update your Website Layout, navigate to the Global Styling section, select the Website Layout option and update to your preferred settings. We recommend only doing this if there is a very good reason, since the preset layout is already set to the correct format:

Page Styling

You can update the page styling of individual pages, such as background images and how they apply to your website, as well as the background colour for your pages. The settings applied here will override the already applied Global Styling settings. To do this, select the Page Styling option under the Global Styling menu:

Did this answer your question?