HTML5 Tips: How to Create Large Headers

April 16th 2012 | Designing with Wix

Web design is similar to hairstyles. When a new hairstyle hits the market, hairdressers are flooded with requests for the latest “Jennifer”, “Adele” or “Beckham” hairdo. Similarly, whenever a new web design trend is spotted, we get many emails from users asking how they can duplicate this trend on their websites.

One of the hyped trends we’re being asked about right now is the use of oversized headers. With the new HTML5 website builder, designing larger-than-life headers is a simple task that can be accomplished within minutes. Watch and learn.

Web Design Trends: How to Create Large Headers

Large headers are in fashion!

 

What’s a Header?

Let’s start with the lingo. A header is the section that’s located at the top of your website. Some headers appear above the navigation menu, but it’s also common to place the header right below the menu.

What’s important about the header, is that it’s the first thing your site visitors see when they enter your website. A strong header will convey the values you want your brand to be associated with. You need to decide whether the first impression you create with your site visitors is reliability, friendliness, creativity, humor, relaxation, fantasy etc. You can then design your site’s header accordingly.

Little miss heir looms Header

'Little miss heirlooms' - big header

 

Designing a Large Header with Wix

There are two options for designing an oversized header in the Wix HTML5 editor:

1. Choosing a Template with a Large Header

The first and easiest option would be to customize one of the HTML5 templates that already have a large header, like the Moving Company template, the Real Estate template or the Landscaping template.

Choosing a Template with Large Header - Landscaping Template

Choosing a template with a large header - Landscaping template

In this case, all you need to do is simply edit the header to fit your needs. You can customize your header in many different ways:

  • Change colors

Change the colors, edit the text and change fonts

  • Edit the text and change fonts
  • Upload your own logo
Upload your own logo

Upload your own logo

  • Upload an image gallery and display parts of your portfolio
  • Embed a video
  • Add shapes and lines
  • Make the header even bigger by pulling its border downwards
  • Add social media buttons or contact info
Add social media buttons or contact info

Add social media buttons or contact info

And much more!

 

2. Creating a Large Header

Creating a Large Header

Creating a large header

You can also use a template that has a regular-size header and make it as big as you want!

All you need to do is pull the bottom borders of the header downwards to create the space for your new header. Now fill that space with your header design.

You can choose to place the navigation menu on  top on bottom of the header.

If you want the same large header to appear on all site pages, simply check the “Show on all pages” box of each element in it (the menu, the title, the image and so forth).

However, you can also decide that you want to keep only the navigation menu and your site’s title and use a different image on each page. In that case, use the “Show on all pages” checkbox only for elements you wish to have throughout the entire site

 

That’s about it, guys. Go make your big header and give us a shout out with the link :)




9 comments

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>