Each website template has four different Header block. Choose one (or more) to add your logo to.
If you don't wish to use an image as a logo, you can simply hide it and instead use a heading for your business name, if required.
Your logo image will be automatically scaled to fit the website template and re-sized to display on mobile devices. However, you can choose how large (or small) you'd like the logo to appear within the block.
Before you start
- Ensure you have a high quality, high resolution image
- For best results, use an image with a transparent background, Eg. a .png file. Here's a guide to removing image backgrounds for Mac users
- Crop out any empty space around the logo to increase the size. Here's how
- Consider removing the brand name and/or slogan from the image. These can be added to heading and subheading fields on the template
- If your logo is very large, consider not using one of the Header blocks - the "Image or Video" block might make a good alternative. This block fills the width of the page with the image you choose. You could add the "Header (Small)" block above if navigation links are required
Adding a logo to your website:
If your chosen template doesn't have a header block or if you would like to change the default header for the other design, simply add a new block:
1. Open the template in the Site Editor
2. Click the add symbol that appears between each block
3. Scroll through the library on the right hand side of the page to find a block better suited to your purpose.
4. Click Preview to see what the block looks like on the page
5. If you like it, click Add block
Uploading your logo
Now that a Header block has been added, you can upload your logo.
1. Click on the block to open the Edit toolbar on the right hand side of the page
2. Locate the Logo image section, and click Choose new image
3. Click Upload new image to find a file on your hard drive, or select an image from the template's library
7. Once you have located the file, click Open
8. Wait for the file to upload, then click the back symbol ( < ) to return to the Edit Block toolbar to continue editing the template