Beginner's Course Section 3

Welcome to Section 3 of the Beginner's Level Website World Training Course.

After completing this section, you will be able to:

  • change the general fonts displayed on your website
  • changing the fonts on a specific page of your website
  • change the general colours displayed on your website
  • changing the colours on a specific page of your website

Changing Your Font Type & Font Size

Changing your font type and size can be done through the Design option on the menu (for the entire website) or on each page (for individual pages). First we will focus on the font for the entire website. From the Design menu, select Colours & Fonts.


Scroll down the page until you see the Fonts box options. Here you will be able to edit the: General Font, Heading Font, Font Size and Line Height. 


To select a new font, click on the blue button Pick Font. For this example, we will edit the main font (general) and the Font size, to the option Arial, Helvetica, URW Gothic L, sans-serif and the size 16px. 

You will also see a box titled Custom Fonts (Meta Includes). It is here where you can paste the specific code from Google Fonts, which we will do for the Font Heading. To do this, open a new browser tab, visit the Google Fonts website, search for the font Merriweather, select it and the Google Fonts website will show you something like this:


The code under Standard @ Import needs to be copied and then pasted into the Custom Fonts box. Click Edit on the Custom Fonts box, then paste the code underneath the existing code like this:


Click the Save Changes button and then close editor. Next copy the text for the font family and paste into the Font (Headings) box, like the image below, and press Publish to save your work so far.


Changing the Font on a Specific Website Page

Open up your T&C page, as it is here we will change the font type and size for this page alone.

First, highlight the sub-heading 'Returns Policy' and then click the drop down arrow next to the Font Family box in the editing toolbar. Note that this will look different if you use an alternate editor other than the one we are currently using, TinyMCE3510 (top right corner is where you can see the current editor name, and change to a new editor mode).


Select the font Comic Sans MS and your highlighted text alone will change to this font, while the rest of the page remains the same. Highlight the 'Returns Policy' text again, and this time click on the drop down arrow next to Font Size, and select the 24pt option. You will also note that this heading was by default an H3 or Heading 3, which is fine for this page. Your T&C page now looks like this (see red arrow -where the sub heading is larger and of a different font):


Changing Your Website's General Colours

Changing the general colours for your entire website is done via the Design Tab, then selecting the Colours and Fonts option. Once on the Design Options page, you will be able to edit the colours for many different areas on your website. 

Colours are given a Hex code or colour number, making them more specific than simply being called 'dark blue' for instance. You can enter your hex code in the box next to the item you want to change colour for, and then click in another box to save it. Or you could click on the Pick Colour button and then manually choose a colour from the Colour Wizard and then select the Use Colour button.

IMPORTANT - write down the individual hex code for each of your colour choices somewhere safe such as a diary or a file on your device, as this will help you should you need to edit your website design (as in Section 1 of the Intermediate level course).

Here are the colours we have chosen to use:


Save your work by clicking the Save Changes and then the Publish buttons.

Changing Text Colour On Individual Web Pages

Open up your T&C page again. You will see that the heading colour has been changed according to the colour you picked in Design Options. This has been a site-wide change.


But it is possible to change the colour of text on an individual page, and that's what we'll do next. Highlight the heading Returns Policy, and then select the drop down box next to the Text Colour icon. This will open up a pre-selected range of colours to choose from, as well as giving you and option for others by clicking on the More Colours option.


For this example, we will select the More Colours option, then enter the Hex Code #0628f8 in the colour box, then click the Apply button. The heading will change colour to look like this:


Click the Save Changes and then the Publish buttons to save your work so far.

Congratulations, you have just completed Section 3 of the Beginner level course. There is now an assessment for you to complete which uses skills you have learnt in Sections 1, 2 and 3 of this Beginner level course, titled Assessment One. This assessment must be completed successfully to achieve your certification, and will be assessed by one of our Website World support team members.

Take Assessment One Here