Edit the header of your website

The header is the top of your website. You can adjust it in different ways with Sitebuilder.

IN THIS ARTICLE:

How do I change the color of the header and footer?

The color of the header and the footer depends on the template that you have chosen. Some templates allow you to choose from different themes.

To change the theme of your template:

  1. In your back-end you go to the bottom of the menu on the left. Click on ‘Design’.
  2. You are now in the Design Editor. If your template has different skins, you can see this in the last tab in the menu on the side, after Themes, Text and Background. With some themes you will also see “Skins”.
  3. Choose a theme color and click on ‘Send’.

Experienced users can add style tags to the website header.

  1. Open your website in a browser and view the HTML code. Look for the class or id name of header and footer divs of your theme and the “background” property.
  2. In your back-end of your website, click on “SEO” at the bottom of the menu in the sidebar. This opens the SEO panel of your page navigation.
  3. In the “Header Code” section you insert your desired style. The example below is for a theme where the header is called div .top, the footer is called div .footer, and the property is “background”, with black as the color.
    <style> .top {background: # 000000;}
        .footer {background: # 000000;}
    </style>
  4. Replace # 000000 with a color of your choice and click on “Send”.
    Remember that you have to change the header of each page individually – you can use different colors for different parts of your website! Tip : If you want to apply the Header Code for the entire site, you can do that if you have version 3 of Sitebuilder: click on “Settings” and scroll down: the Header Code section here counts for all pages.
  5. Click on the save icon at the top right and then on “publish” to confirm the changes.

 

How can I reduce the image of a header?

There are three things you need to know about the dimensions of the images in your header:

  1. Whatever the size of the original image you uploaded – when using the built-in image editor, the result will not be greater than 800 x 600 px, regardless of whether you crop the image, adjust the dimensions or brightness, etc. Once when you save the image, the dimensions of the image are automatically adjusted.
  2. Depending on the theme you use, the header image may not cover 100% of the screen width, because of the responsive design requirements. There is a solution for experienced users. See further.
  3. Note that not all website templates have their own header image. If there is no image in your header, you can use the Image or Slideshow widget to create a header image.

This way you can edit the header image in different situations:

Reduce a still header image

Change the height:

  1. Go to the back-end of your Sitebuilder website and go to the home page. Move the cursor over the header image. The Edit Header Area symbol will appear. Click on it, this will open the Header Area.
    Edit Header Area
  2. Click on Edit Image. You now enter the Photo Editor.
    Edit image
  3. Reduce the image with the Crop or Resize button.
    • Use Crop if you want to cut out part of the image. Use the markers in the corners to cut out the image. Click on “Lock dimensions” to confirm.
    • Use Resize if you want to save everything in the image. To keep the proportions, click on the padlock. Enter the desired pixel size.
  4. When you are ready, click Apply and then Save.

Change the width:

Pay attention when you change the width of your header image. If you use the method above to reduce the width, SiteBuilder may stretch your image and reduce its quality. That is because the header width is set to 100% for the responsive design for multiple screens. You can change the width in a safe way as follows:

  1. In the menu on the side, go to the SEO tab. Click on it to open the Search Engine Optimization settings. You will find the header html-code field in the Head Code or Header Code menu. Post the following code.
    <div id = "header image" class = "XXX">
        <img src = "http: // ..." style = "...">
    </div>
  2. If this code does not give the desired result, the identifier may be wrong – different designs often have different identifiers. You will find out what you need by viewing the source code through the browser.
  3. Save your work and see how the site looks on the different screens. Pay attention! The change may not be immediately visible in the layout you are editing, but it will be visible in the preview screens – click on the icon with the eye in the top right corner of your screen.
  4. If it looks good already, copy this code into the header section of each page – note that the SEO settings are applied page by page. Tip: If you want to apply the Header Code code for the entire site, you can do that if you have version 3 of Sitebuilder: click on “Settings” and scroll down: the Header Code section here counts for all pages.
  5. If your mobile version does not look good, you must adjust the proportions of the image. OR when working on the Mobile tab, you can switch to the Creative Mode page and change the image all the time.
Reduce header with a slideshow
  1. Go to the back-end of your Sitebuilder website and go to the home page.
  2. Move the cursor over the header image. The Edit Header Area symbol will appear. Click on it, this will open the Header Area.
    Edit Header Area
  3. On the right you see a preview of the image that you want to adjust. In the lower left corner of the edge of that image you see five icons. Click on the brush. You now enter the ‘Photo Editor’.
  4. Use the ‘Crop’ or ‘Enlarge / reduce’ (resize) option to reduce the image.
    • Use Crop if you want to cut out part of the image. Use the markers in the corners to cut out the image. Click on “Lock dimensions” to confirm.
    • Use Resize if you want to save everything in the image. To keep the proportions, click on the lock. Enter the desired pixel size.
  5. When you are ready, click on ‘Apply’ and then ‘Save’. Repeat this for all images in your slideshow. Make sure you give the same dimensions in pixels! Because otherwise your carousel will change shape with every image.
  6. You are now back in your ‘Header Area’. Click ‘Apply’ again to finish and ‘Close’ to return to the editor. Remember: your header area is different for every page. If you want to copy the new layout to all pages, go to the target page and open the header editor there. In the Layout tab, copy the layout of the page that you have just edited. If you have followed this manual carefully, then that is your homepage.
  7. Before publishing it is best to use the Preview option to see what your new layout looks like on the different screens.
    You can now publish your new layout. Do not forget to also change the changes for your mobile device.

How can I remove the header area?

You must understand that you cannot completely remove the header area. If you do not want a header image, you can try this:

If you have a slideshow of header images:

  1. Click on Edit Header Area to open the editor
  2. Change all images from the collections
  3. Click Apply

If you have one header image:

  1. Click on Edit Header Area to open the editor
  2. In the menu on the left, click on Layout
  3. Under Change current layout, choose No Header Image
  4. Click Apply
  5. Click on Close

Solution for advanced users:

In the menu on the side, go to the SEO tab. Click on it to display the Search Engine Optimization settings. You will find the header html-code field in the Head Code or Header Code menu. Post the following code.

<style>
# header image 
{ 
display: none;
}
</style>

If this code does not give the desired result, the identifier may be wrong – different designs often have different identifiers. You will find out what you need by viewing the source code through the browser.

Move the cursor over the code pieces until only the header lights up in the layout. Copy this identifier. In this example, your identifier is ‘header-image’, and so the line code you need to find should look like this:

<div id="header-image" class="XXX">
<img src="http://…"  style="…">
</div> 

If you see a different identifier or class, change the code above in the Header Code menu. Use ‘#’ when you are describing the object via the identifier -the ‘id’ value – and use ‘.’ instead of ‘#’ when describing the object via the class value.

Save your work and see how the site looks on the different screens.
Pay attention! The change may not be immediately visible in the layout you are editing, but it will be visible in the preview screens – click on the icon with the eye in the top right corner of your screen.

If it looks good, copy this code into the header section of each page – note that the SEO settings are applied page by page.

Tip: If you want to apply the Header Code code for the entire site, you can do that if you have version 3 of Sitebuilder: click on “Settings” and scroll down: the Header Code section here counts for all pages.

If your mobile version does not look good, you must adjust the proportions of the image. OR when working on the Mobile tab, you can switch to the Creative Mode page and change the image all the time.

Updated on 3 September 2020

Was this article helpful?

Related Articles