Carrd Tutorial: Adding a Header and Footer in Carrd

Thumbnail image for "Tutorials" article

Table of contents

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.

Image:  Click the + button
Image: Select control

2) Select “Header Marker”:

Image: 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.

Image: Add a container

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”:

Image: 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

Image: Add an Image

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:

Image: Drag the width slider
Image: Drag the height slider
Image: Remove drop shadow

4) Add buttons: Add 3x buttons, they will be our navigation elements.

Image: Click the + button
Image: Select buttons
Image: Click add

Click add x2 times and drag them to the desired location.

5) Customize the buttons: Choose your desired colors, background, height etc.

Image: Click on color background
Image: Add background color
Image: Add label color
Image: Click on drop shadow

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.

Image: Click the + button
Image: Select control

2) Add a container:

Image:  Add a container

3) Add text element: We will add x2 text elements where we will have the site name and a copyright text.

Image: Add text element
Image: Edit the text content for text element 1
Image: Edit the text content for text element 2

And it’s that simple!

The videos below will help you learn how to customize headers and footers in Carrd.

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!