website builder cheat sheet

Choose the best website builder for your business

The Cheat Sheet that shows you exactly which website builder to choose based on your needs with bonus on how to get free custom domain, free email hosting, and more.

Get the FREE cheat sheet
website builder cheat sheet

How to create a Carrd website with multiple pages

By David Nge β€’ Last Updated: November 16, 2023

My work is supported by affiliate commissions. Learn More

In this guide, we'll go over step by step how to create a Carrd website with multiple pages.

Thanks to Carrd's intuitive user interface, making a multi-page Carrd is relatively simple!

By the end of this tutorial, you will re-create the following multi-page website:

Demo Carrd website with multiple pages
Demo Carrd website with multiple pages

Click here to view the multi-page Carrd demo website.

By the way, you can create the multi-page Carrd website on the free plan.

But, if you ever need to create more than a few Carrd websites in the future, getting the Pro plan is definitely worth it.

πŸ’‘
If you're considering Carrd's pro plan, they now offer a 40% Black Friday discount (Coupon: BF2023). This deal is a no-brainer since it's only $5 per year β€” Yes per year!

Now onto the tutorial.

1. Start a new Carrd website from scratch

First, let's create a new Carrd website. Login to the dashboard and click New Site. From there, select the box icon to start from scratch (i.e without using an existing template).

Start a new Carrd website from scratch
Start a new Carrd website from scratch

2. Set up the page

Hover over to the center of the page and click the Page element.

Click on the page element
Click on the page element

You will see the Page element editor pull out from the left.

Carrd page element editor
Carrd page element editor

Change the following setting:

Carrd page setting
Carrd page setting

Now the page is situated at the top. But there's still nothing yet :)

Empty Carrd page
Empty Carrd page (for now)

3. Add the navigation menu

Click the text element for "Nothing here yet!" and delete it since we won't be needing this.

Delete Carrd element

Instead, add 3 buttons for the top navigation.

Add new Button elements

4. Update navigation menu

Click the first button and update the Label and URL.

Click on the first button element
Click on the first button element
Update button label and URL
Update button label and URL

Label β€” This is the name of the page.

URL β€” Include the hash (#) follow by the name of your page.

Now repeat the same process for the other 2 buttons and name them About and Contact respectively. Make sure to update the URL as well.

Update the other buttons β€” About, Contact
Update the other buttons β€” About, Contact

A typical website has 3 sections in general.

Page header, body, and footer
Page header, body, and footer
  1. Header β€”Navigation links, header menu, etc.
  2. Body β€” The main content area of the website.
  3. Footer β€” Copyright and other relevant links.

The Header and the Footer section don't change even when the user navigate to other pages.

To do this, create 3 Control elements for the page.

Add control elements
Add control elements

Set the first Control element type to Header Marker. By setting the Header Marker, any elements above (in this case the navigation) will remain unchanged.

Set Header Marker
Set Header Marker

Then set the third Control element type to Footer Marker. By setting the Footer Marker, any elements below will remain unchanged.

Set Footer Marker
Set Footer Marker

Add a footer text to the page. Make sure it is below the Footer element.

Add Footer element
Add Footer element
Update Footer text
Update Footer text

7. How to add a new page

Now we're finally creating multiple pages for the Carrd website.

It's important to know that in Carrd you're not actually creating a new page.

Carrd is only capable of building a one page website (for now). You're just creating new sections of the same page and make it seem that the user is navigating to different pages.

To do this we need to add new Control elements (i.e new sections of the page).

Add 2 new Control elements to the page and make sure they're in between the Header and the Footer element (by dragging them).

Add new page sections
Add new page sections

We now have 3 sections that will coincide with the 3 different "pages" we have, namely the Home, About, and the Contact page.

Page sections
Page sections

Next, we need to rename the Control sections to "#home", "#about", and "#contact". Make sure the element type is Section Break, which tells Carrd to treat this section like a new page.

Rename Page sections
Rename Page sections

Repeat the step above for the other 2 sections and you should have them properly named.

Rename the rest of page sections
Rename the rest of page sections

Important: For this to work, make sure the name of your section (home, about, contact) is the same as the URL of the navigation buttons (#home, #about, #contact).

Make sure the URL is the same as the section page
Make sure the URL is the same as the section page

This is so that when the user clicks on the home navigation button , they will be redirected to the Home page.

8. Add page content

At this point, the page is mostly empty so let's fill up the content for the home page.

Add a new Container element and set the Type to Column. Then drag the container just below #home.

Add new container
Add new container

Next, add a border to the container.

Set container border
Set container border

For the main content, add an Image and a Text element to each column.

Add image and text
Add image and text

Upload an image of your choice and edit the text accordingly.

You can download free stock image from Pexels and customize the text in the appearance tab.

Customize the text style
Customize the text style

The end result for the "Home page" should look something like this:

How the Home page would look
How the Home page would look

To save time adding content for the rest of the pages, make duplicates of the home page container and drag them below the About and Contact section.

Duplicate home page
Duplicate home page

Customize the About and Contact container accordingly and the end result should look something like this:

Carrd site with multiple sections in full
Carrd site with multiple sections in full

9. Publish the website

We're pretty close at this point. All we have to do is publish the website and you will see the multiple-page website in action!

Publish the website
Publish the website

Once published, click View Site to test it out.

Click View Site
Click View Site

You have now created a multi-page website on Carrd!

Final demo
Final demo

Other Carrd Websites with multiple pages

Other Carrd websites that have multiple pages is the inspirational BlackLivesMatters Carrd site as well as lesser-known business page like Haven Wellness, and DidFaq. If you need other Carrd website inspiration/examples, here are 28 hand-collected Carrd websites to inspire you.

David Nge

David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.

Have a tutorial you want to learn? Leave a suggestion here.