Header Section

Modified on Mon, 18 Sep 2023 at 11:53 AM

This walkthrough will take you through everything you can do from within the header tab of the Landing Page Wizard. If you aren't familiar with this content block setup seen on the right hand side, see Creating a Landing Page

First, let's upload a logo to our page. Drag and drop an image into the dashed border, or click to use your file browser. When you create subsequent landing pages, you will be able to useto find the same logo that you have just added.

Once your logo has been uploaded, you will notice that the dash-bordered 'header section' in the preview window has disappeared and in its place you will see your newly uploaded header image. You are also given two new options: Logo link, and Logo alignment.

To set your logo up to link to another website, put the url of that website under 'Logo link'.

Logo alignment will change the direction that your logo is aligned. Please note that this is not always possible, as logo images often fit to the width of the screen, and as such appear centred by default. An example is shown below.

If you would like to replace the logo, you may remove it by clicking the cross displayed above the logo, or by clicking

Underneath 'Advanced Header Options' we have the ability to add padding and margin to the header specifically.

You are able to align your logo with the options seen above. You might notice that they don't seem to do anything, if this is the case, then your logo image is taking up the entire width of the screen. This is the same reason you may or may not be able to add a background colour to your logo.

Padding: Inner space of an element

Margin: Outer space of an element - add when to use each?

Adding padding or a margin with affect the look of the page in different ways, and the best way to get a feel for each is with experimentation. Remember, this is specific to the header section, and if you want to add padding to the rest of the page, you will need to do that from the Page Settings tab.

If your logo does not completely fill the header section, or has a transparent background, you may want to add a background image for your header. You can upload your background image in the same way you uploaded your logo.

The below examples all use the same background image, and are a demonstration of how your logo image affects the way a background image may or may not appear. All of these options are perfectly acceptable, and is all a matter of personal preference. Though, we generally advise not to use such tall logo images, as this will push the rest of your content down the page and out of your recipient's immediate attention.

	No padding or margin	10px padding
This is a (rather large) logo image with a transparent background, and therefore, our background image is visible. Adding 10px of padding has no obvious effect here, though if we were to add 50px, the logo would be noticeably smaller.
In this preview, the white space we see around the logo is part of the image, and we cannot 'see behind' this background like we can on the left image. Adding 10px of padding here means that we are increasing the space around the element, and therefore can now see the background around the edges of our image.
This image is similar to the one above, as it also has a white background, though this does not completely fill the screen, and we can see hints of our chosen background image. (this is a good example of a logo that is able to be aligned.) The addition of 10px padding here increases the space around the logo element, and therefore we can now see the background around the top and bottom of our logo. This logo has also been aligned to the left, if there was no padding, the background would only be visible on the right hand side.