Creative header and footer design
A header designed to complete the footer as you scroll to the end of the page.
Design: Anita Goldstein, Tech design: Anastasia Logacheva
Learn how to create this design in 7 steps
1. Select the page header and from the Inspector panel, set its width to 33vh.
2. Set the position type to sticky.
3. Select the page footer and set its height to 67vh. If you are not working on a premium site, use a calculation unit and set the height to (67vh - 50px).
4. From the Add panel, under Decorative, select a transparent video and place it inside the footer.
5. Select the video and from the Inspector panel, align it to the top and center.
6. Add a negative top margin. Make sure the top margin value is smaller than the header.
7. To make the video overlap the footer, go to the Layers panel and click on the three dots by the footer. Select Arrange and then Bring to Front.
8. Preview and publish to see the result.
Feeling inspired? Create this design on Editor X.
Refresh your skills before you start by visiting Academy X.
.jpg)
