Search

 

How to add and edit a header image

Header images span across the top of your main website area.  You can have a different header image on each page and your headers can have a variety of scrolling transition effects.

Important note: Images only work properly if they are the right size and ratio.  Headers are the same.  Most websites are 800 to 950px wide and have header images the same width.  Unlike photos, header images are usually only 100 to 400px high.  This means that they are wide but not very tall.  See the blue header image below.

Elastic-header-1

To add a new header you will need to prepare an image that is the correct width and height.  When you first log in to your Elastic site, the width of your site is shown.  You need to prepare your header image to be this width or smaller.

Elastic-header-2

When you are ready to upload your header image go to "Headers" in the "Appearance" section of your admin area.

Elastic-header-3

For existing headers you can see how wide and tall they are.

Elastic-header-4

On the headers page you can adjust a range of features for your header images.

You can change the transition effect, transition time and image alignment.  You can also add text, images or logos that appear on top of your header images.

Elastic-header-5

For display and scroll order you can number your headers in the field below.

Elastic-header-7

If you want to resize, crop or change your header image for another image click the edit link.

Elastic-header-6

When in the edit area you can resize your header.  Resizing will maintain the ratio of height to width or your header image.  You can also crop your header image.  This will alter the ratio of height to width.

Elastic-header-8

When you have added your header images, navigate to where you can edit your site pages.  Here you will be able to select the header image for that page or you can set the scrolling images to run or you can have no header at all.

Elastic-header-9

Post your comment!

 
Name:
Email:
  (Email will not be shown)
The following characters cannot be used - / " ! \ ' ; :
Anti spam Captcha:
captcha image

Written by: Chris Hodson

Find us on Google+