Headers and footers are essential elements of any well-designed website, providing consistent navigation, icons and key information on all pages. In Carrd customizing and adding headers and footers is an easy way to improve your site’s structure and user experience.
Headers usually contain your site’s logo, navigation menu, or other important elements that users need to navigate quickly. However, footers often include contact information, social media links, or copyright information, and are important references at the end of the page.
This guide will walk you through the process of adding and customizing headers and footers in Carrd. You will learn how to set up these elements to ensure that your brand is communicated effectively and that your visitors get the information they need quickly.
Adding Header
Here’s how you can add a header to your site.
Steps:
1) Add header element: Click the "+" button and select "Control" from the menu.
2) Select “Header Marker”:
Note: As you can see below “Header Marker” this element marks where the header ends, therefore every above this will count as a header and not below it.
3) Add a container: This will give you the ability to edit the header however you like.
From here on the stage is yours, you can edit the header however you want. But we will demonstrate a quick and easy example to help you understand how it works.
Example
We will make a simple 2 column container that will contain the logo and some navigation buttons.
Steps:
1) Change the container type to “Columns”:
We added the ‘Section T” as a style and made a new style called “Header” you can check our guide for adding appearance styles to understand the procedure.
2) Add an Image: This will be our Logo
Make sure to change the link URL to just “#” this means that whenever you click at the image it will take you to the home page.
3) Edit the image and choose a new style:
4) Add buttons: Add 3x buttons, they will be our navigation elements.
Click add x2 times and drag them to the desired location.
5) Customize the buttons: Choose your desired colors, background, height etc.
If you want to see how we can activate these buttons please check our guide about adding buttons.
Adding footer
The footer is a much more straightforward procedure, here’s how you can add a simple footer.
Steps:
1) Add footer element: Click the "+" button and select "Control" from the menu.
2) Add a container:
3) Add text element: We will add x2 text elements where we will have the site name and a copyright text.
And it’s that simple!
Conclusion
Adding and customizing headers and footers in Carrd is a simple yet powerful way to improve the usability of your website. Following this guide, you’ve learned how to create a header that captures the key branding and navigational elements, as well as a footer that provides essential information to your visitors.
Best of luck with your updated site layout!
