I’ve seen a few people asking how to create a transparent header that overlaps with your hero image, but haven’t seen a good step-by-step solution in any responses, so thought this might be useful for those wishing to create this look.
My test site which I’ll be launching soon, shows an example of what I’m talking about:
If this is the look you’re going for, here is a detailed step-by-step process to achieve it. Note: I’ve found that the order matters, as does ensuring the right layer is selected, so try and follow the steps as precisely as possible for the best results.
- Select your header (with a mouse-click).
- Open the ‘Inspector’ (the right toolbar) and make note of the height of you header (let’s use 50px for this example).
- Create a new section under your header using the ‘Add Section’ button (appears when you hover on the centre of the bottom border of your header.
- Open the ‘Layers’ panel on the left toolbar and ensure the newly added ‘Section’ is selected - this will be your hero image section).
- Open the ‘Inspector’ (right toolbar) and set the height dimensions of the section to your desired height (for this example let’s say 500px), and under ‘Responsive behavior’ ensure that ‘Apply max width’ is NOT selected (you’ll likely need to turn this off).
- With the section still selected, open the ‘Add Elements’ panel on the left toolbar, then go to ‘Quick Add’ and add a ‘Container’.
- Open the ‘Layers’ panel on the left toolbar and ensure the newly added ‘Container’ is selected.
- Open the ‘Inspector’ (right toolbar) and manually adjust the dimensions of the container to the following (IMPORTANT: do not stretch the container!):
- X = 0px (this is a fixed value that ensures it is aligned to the left edge of the browser).
- Y = -50px (edit this value to your needs - it is a negative value to the height of your header, so in this example -50px).
- W = 1265px (this is a fixed value and is the pixel equivalent of 100% width)
- H = 550px (edit this value to your needs - it is your desired hero section height + your header height, so in this example, 500px + 50px = 550px).
- With the ‘Container’ still selected, open the ‘Add Elements’ panel on the left toolbar, then go to ‘Quick Add’ and add an ‘Image’.
- Select the image with a mouse-click and ‘Stretch’ it, using the button in the top right-hand corner of the image.
- Change the image to your desired background image.
I hope this helps some people achieve this look 