One of the first things you’ll want to do before you start adding content is to customize some global settings (changes that affect your entire site).
In this session, we’ll look at how to update your site name, pick your default colors, organize your menus, set your fonts, and add a custom logo. There’s a fair amount of content in this lesson, but don’t worry – none of it’s difficult (and in many cases, you might just want to leave everything set to default anyway).
But if you do want to make some changes, here’s how this session breaks down – just click to skip to the section you’re most interested in:
Site Name
Colors
Menus
Fonts
Logos
Site Name
We’ll set this for you when we install your site based on the information you’ve given us, but you might want to change it to something else. This is important, as your site name will also be your logo (unless you upload a custom one) and will be the title people will see when your site is shared on social media.
There are a couple of ways of doing this, but to make sure you don’t miss anything, the best way is to head to settings -> general in the left-hand menu of your main dashboard.
Here, simply update your “Site Name” and “Tagline” to whatever you’d like (the tagline might not show up on your site, but will show up in preview windows when your site is shared on social media).
Important: you’ll also want to update the “Administration Email Address” to make sure you receive notifications about your site. Double check your own email is in this box, or you won’t get notified about important things.
There are a few other options on this page (like default date formats, etc) which you can leave alone or tweak as you wish.
With that important step out of the way, it’s time to go make some tweaks!
Colors
First, we need to access the “Customize” menu to make global change to our site (ie, settings that affect your whole site).
You can access this menu via Appearance -> Customize in the left-hand dashboard menu, or by clicking “Customize” in the admin header bar if you’re browsing your site.
You’ll see a menu appear on the left-hand side of the screen (where you’ll make changes) and a preview window to the right (so you can see what they look like).
To start with, we’re going to look at the “Colors” settings. These set the default colors for your site body text, header text, background, and button color. Simply choose the colors you’d like and hit “publish” when you’re done (or leave them set to default).
Important: make sure you choose colors that are easy to read. And remember, any choices you make here will affect your ENTIRE site.
So if you only want to change the color of a particular section of text, or a particular button, you can change this by editing the page in question, rather than for the entire site.
Menus
Your site will generally have two menus – one at the top of the screen (the Header Menu) and one at the bottom (the Footer Menu).
You can have the same menu in both locations, or different menus at each. Totally up to you.
If you want to add / remove links from your menus, navigate to the “Menus” section of the Customize menu.
Here, you’ll see the menus you have set up already, and where they are configured to appear. In the example below, we have one menu set up, and it’s called “Header”. We can also see that it’s configured to appear at both the top and bottom of the site.
To edit a menu, simply click on it. Then you’ll see this:
To change / configure where this menu will show up, check the “Header Menu” and “Footer Menu” boxes as needed.
To add extra menu items, click the “Add Items” button and select the pages, posts, categories, or other items you wish to add from the right-hand panel. As you click on the items, they will appear in the left-hand panel and the preview window will update in real time (so you can see how it looks).
You can re-order the menu items by simply dragging them into position in the left-hand panel. If you want some menu items to appear “underneath” other menu items, simply drag the “child” item underneath its “parent” and position it slightly to the right.
By positioning the menu item underneath and slightly to the right, your site will display this menu link as a drop-down, like this:
Once you’re happy with your menu, click “publish”.
To add additional menus (eg a unique Footer menu), head on back to the “Menus” section of the Customize section and click “Create New Menu”.
Give your new menu a name, select where it should appear, then click “Next”.
Finally, configure your menu as before and hit “publish” when you’re ready.
You can add as many menu items and menus as you like – just make sure you’re happy with how everything looks and that each menu is easy to identify (in case you need to edit them later).
Fonts
One of the biggest changes you can make to a site’s aesthetic is by experimenting with different fonts.
We’ve made it nice and easy to customize this, and we’ve added the ability for you to add custom fonts from Google’s library of 1,000+ choices (just in case you want something extra fancy).
To change your fonts, click the “Font Styles” section in the Customize menu.
Next, click “Assign Fonts” to change your font (we’ll cover how to add custom ones in a moment).
Then, type the name of the font you’d like to use for the Body (eg – paragraph or “normal” text) and the Headings. You can also set the font “weight” (how bold it is) using the drop-down menu.
You’ll see a real-time preview in the right-hand window as you change them. If the name of the font you type doesn’t exist in your site yet, the site will default to a standard style.
Once you’re happy, click “publish”.
To add a custom font, go back to your Font Styles menu and click “Add Custom Google Fonts”.
Then you’ll see a screen like this:
First up, don’t worry. It won’t bite you.
This is a little snippet of code (or “instructions”) that tell your site to go fetch a font style from Google’s library and display it on your site.
Adding you own fonts here is super easy. First up, head on over to Google Fonts.
Choose a font you like the look of, and then click on it. You’ll see a screen like this:
Each font – in this case, Roboto – has a variety of “styles” associated with it. This is usually how thick the font is, and whether it’s italicized.
Add 3-4 styles by clicking the + icons where it says “Select this style” and your choices will be added to the right-hand panel.
Once you’ve selected the styles you want, copy the code highlighted in green in the image above.
Then head on back to your Customize menu in your site and paste the code into the box.
Then, hit “Publish” to add the font to your site (you won’t see it until you hit the publish button).
To see what your new font looks like, head back to the Font Styles menu and click “Assign Fonts”, just like before.
Finally, type the name of your new font into the box (be sure it’s spelled correctly) and your new font will appear in the preview menu.
Change the Body and Heading fonts (and font weights) until you’re happy, then click publish.
Logos
Our site templates will auto-generate a text-based logo for you, which is based on your site name.
However, chances are you’ll want to upload a custom logo. To do this, click on the “Site Identity” link in your Customize menu.
Here, you can click “Select logo” to upload your own custom logo to your site.
You can also edit your Site Title and Tagline (if you haven’t already) and add a custom Favicon or “Site Icon” that will display when your site is viewed in a tab.
When you add a custom logo or Site Icon, you’ll be asked to crop the image so it fits:
In some cases, there’s an option to “skip cropping” or to adjust the shape of the crop, but we recommend sticking to the suggested dimensions to make sure your logo / Site Icon fits in the space allocated.
When you’re happy, click “Publish”.
And you’re good to go!
With our site-wide changes made, it’s time to move on to adding some pages and editing the templates we’ve installed for you. Head back to the Guide Menu when you’re ready to check those out.