Headers

When you get started with your website you will have a blank site header. The header is the element of your website that appears the same on every page, and contains the main title and logo for your site. For this tutorial we will start from scratch.

Click inside of the header space to begin. The grid places light blue lines on the header stage so that you can easily align header elements. You can turn grid on and off by clicking the blue button right next to the green Done (checkmark) button

Click through the following topics for additional help creating your Header

Title

To add you title. turn title ON if it isn't already. This will give you placeholder text that you can customize with your own title. 

As you are working in the title element of your header, a formatting toolbar appears at the top of the Builder. Similar to the Title module, you have these formatting options when customizing your header title. 

• change the color of highlighted text
• change font size
• apply bold, italic, underline and strikethrough formatting
• align your text left, right, or center
• outdent and indent highlighted text 
• create bulleted lists that are numbered or unnumbered
•  clear formatting
• link the highlighted text to a URL, creating a hyperlink

When applying any formatting, make sure you have first highlighted the text with your mouse. Any changes will not apply if the text is not highlighted.

Now that the title is formatted it can be moved. Use the blue handle at the top to move your element. Next to the blue handle is a red x, which allows you to delete the element. 

 

Logo

If you have a logo, you can add it to your header. Toggle logo ON if it isn't already, then doubleclick the placeholder to launch the Change Logo window.

As with the Image module, you have the following options when choosing images:

• My Images: Select from images you’ve already uploaded
• Free Images: Choose from Flickr images
• Image URL: Link to an image file using the complete file address

 Once the image for your logo element is in place, you can use the handles at the bottom to resize it.

 

Tagline

The tagline is an additional line of text you can add to your header, perfect for slogans.

Formatting options for the tagline element are no different than for the title. The default font size of your tagline will be smaller than the default font size for your title. 

Additional Content

You can add more images and text to your header by clicking the blue +content button. 

For this example we will add additional text as an address.

 

Once you are done, click the green checkmark to commit to your changes. Don't forget to click Publish at the top of your account to make your changes live.

Best Practices

Your site’s header sets the overall tone and character of your website, and it can also be used to convey some of the most important information about your business.

When you start creating your site with Webs, you will be starting with a blank template. It can be difficult deciding what to do first, or how things should look. Now that you know how headers work, here are some tips to make the most of yours.

• Titles look best left aligned or centered. Choose a font type and color that works with the overall theme design and reinforces the type of products or services you are selling. Click here for information on choosing text for your site.
• If you are working with a logo, it is best that the background color of your image file is either transparent or the same color as the header background of your chosen theme. 
• In the tutorial above, we used the additional content button to add an address and phone number. Placing standard contact info in the header of your site prevents visitors from having to search around your entire website to find it. 

For more tips, check out the Design Tips & Best Practices section of the Knowledgebase.