Your site’s Logo & Branding
Class overview
In this class we’ll show you how to set your logo & apply your branding to your site. We’ll cover:
1. Placing your logo, site name, tagline & favicon
In the video below we show you how to set your logo for your website. Underneath the video are two toggles where we explain how to set your site’s title and tagline, and your Favicon.
Placing your Favicon
Placing your Favicon
A Favicon is a small icon that you can set as part of your website’s identity. It is usually visible in the address bar of browsers.
The image that will be your favicon should be 512 x 512 pixels in size.
You can upload your Favicon just underneath where you upload your logo. Please note that when uploading your favicon there, you’ll need to use a .png file or .ico file. But you can also upload it as a JPEG file through the WordPress Customizer, you find that under Appearance > Customize – once there you go into General Settings > Site Identity.
Setting your site name & tagline
To set your site name and site tagline, go to your Dashboard and navigate to Divi > Theme Customizer:
Then go to General settings:
and then to Site Identity:
Here you can set your Site name and tagline – don’t forget to save & publish your changes at the top:
In the image above you also see the possibility to set the site icon. This icon is the same as the Favicon, we have explained in the toggle above how to set it while also setting your logo in a different location.
2. Working with colour in Divi
In this video we show you how to work with colour in your Divi Website. We show you how to set the colour palette for your website, and how the colour managers in the modules, rows and sections work.
3. Colour picking – sampling & saving colours
To be able to set colours for your website, you’ll need to know the HEX colour code of the colour you’d like to use. A HEX colour code consists of 6 digits and is use in computer language to identify colours. If you don’t have the HEX colour codes of your branding colours yet, you’ll have to sample or “pick” them from somewhere. For example, if you have a word document with your colours in them, or you have found a colour palette on Pinterest that you’d like to use, you can use a colour picker application to get the HEX values so you can use them as button colour or as colour palette across your website.
In the next video we show you how to work with a free colour picker application:
In the video we use a small utility called ColorPix. It’s no longer maintained, but you can still download it with the link below. It’s a portable app, which means you don’t have to install it. Just click and run. Tested and working up to Windows 10. Please note, this tool works on Windows only. For Mac, see the toggle below.
For more information on working with colour, download our ebook below:
Colour picking for MAC users
4. Applying your branding to your site with the Theme Customizer
In this video we’ll show you how you can set your own fonts and colours for your website. With the Theme Customizer, this is done in one central place so that things like fonts, link colours, and button colours change everywhere throughout your site in one go.