Carrd Tutorial: Build a Landing Page in Under Ten Minutes From Scratch (Step By Step)

With the vast variety of landing page builders available today, it is hard to choose one that perfectly fits your needs. While platforms like Wix and Shopify are becoming increasingly popular, they are far too complex and do not suit the needs of someone who just wants a simple landing page to showcase a product or project.

This is where Carrd shines. Carrd is an extremely easy-to-use and intuitive website builder that is great for single-page websites. It has been designed keeping in mind low-complexity use cases and can be great for building personal websites and portfolios.

Step By Step Guide To Creating a Website With Carrd

Despite its intuitive user interface, it can be slightly overwhelming for first-time users. This is why we have put together a step-by-step tutorial to help you get started and familiarise yourself with the components.

There are some design improvements that we could incorporate, but the purpose of this guided tutorial is to cover the basics of Carrd. If you follow along, you will end up with a final result that will look something like this.

Carrd Tutorial
A demo website for Carrd

Step 1: Create a Carrd Account

If you don't already have one, the first thing you should do is to set up your profile on Carrd. If you don't have a Carrd account, you will not be able to save and publish your website. Once you have created your account, go to your dashboard.

Step 2: Open a New Blank Canvas For Your Website

On the top right corner of your dashboard, you will see the "New Site" button. Click on this. You will be redirected to a page where you will get the option to choose a starting point.

You can choose to select a pre-existing template and modify it. However, for this tutorial, we will be building a website from scratch. To open a blank canvas, click on the square icon in the top right corner of the webpage.

Carrd: choose a starting point
Click on the square icon in the top right corner of the page

Step 3: Basics and Getting Started

Some main elements make up the structure of a Carrd website.

  • Background: The main background of your website. This is comparable to the <body> tag in standard HTML. It lives behind all your elements. You can choose to make this an image, a video, a solid color, or a gradient.
  • Page: The page element lives on top of the background and houses all the elements of your website. You can reposition or style this to your liking. Each Carrd website has a single page.
  • Sections: Sections help divide your site into named regions. You can link to sections from different parts of a website. This improves usability and navigation.
  • Container: Containers can be used to group similar elements. A container can hold other elements just like a page. Using a container is good practice to section and organize your website.

On your new site, you will see a blank white canvas. If you hover your mouse in the center, a page block will appear.

Carrd canvas
The blank canvas representing the background and page elements

Step 4: Change the Background

Click anywhere on the canvas outside of the page block. The background will be selected, and a side navigation bar will open up. You can change your background to be an image, a video, or a color. Click on the dropdown under the style header and select the image option.

Background image selector
Background image selector

You can choose to upload your own image or pick one from Carrd's library. This will change the image on your background from a blank canvas to the image of your choice.

Carrd background image
Upload your own image or select one from the library

Step 5: Modify Page Settings

Now that we have modified our background, we can start working on our content. Hover on the center of the canvas and click on the page section. Once you have selected the page, you can change its width by using the toggle under width in the left sidebar. we want our page to cover the entire background, so we are going to set it to 100.

Set width of page
Set the width of the page to 100

Step 6: Add a Container

With the page element selected, click on the plus icon in the top right navigation bar. This icon is used to add new elements to the canvas. We want to add a container, so select that option.

Plus icon
The plus icon is used to add more elements to the canvas

Using the left sidebar, adjust the width and height of the Container to cover most of the page.

Step 7: Add Header Text

We want to add some header text, so repeat the previous steps and select the text option from the add element dropdown menu. When the text section appears, you can change the appearance and font using the left sidebar.

Change text and appearance
Change text and appearance

In the text tab, you can change the toggle value for Text to Site Title. Then replace the text with the title of your website. In the appearance tab, you can increase the font size and make other appearance changes such as adding drop-shadow, increasing font-weight and increasing the line and letter spacing.

Modify other text settings
Modify other text settings

Step 8: More Text!

We're going to add a divider after our header text, followed by a subheading. Click on the page section and repeat the steps to add a new element. Click on Divider to add a divider. You can adjust the width of your divider in the sidebar.

After this, add text under the divider. Add your subheading and adjust the font size, weight, and letter spacing to suit your needs.

Add a divider and modify your subheading
Add a divider and modify your subheading

Step 9: Creating a New Section

We are going to create a new section to add some information about our business. For this, we need to select the page, click on the add icon and select the control option. A line should appear right after your container. This signifies the beginning of a new section.

You can change the name of your section and link to it from other parts of the webpage. We are going to name ours 'about'.

Add a new section to your carrd website
Add a new section to your Carrd website

Step 10: Add a Multi-Column Container

We're going to add an 'About' section to our website. We can do this by clicking on the page and adding another container right after control. Adjust the width and the height to make the container full screen. In this container, we want there to be two columns. One to display an image and the other to display some text. For this, we will change the container type from Default to Columns.

Carrd Columns
Under Type, select "Columns"

We want our columns to take up the entire width of the container. In the appearance tab (paintbrush icon), we can increase the width of our columns to the desired number.

Step 11: Add Some Text to The First Column

We want to add some text about ourselves in the first column. To do this, click on the grey block that says empty. Then, press the add button and select the text option. Add the text option twice so that you have two text blocks. One right after the other.

Carrd text boxes
Add two text boxes to the first column

In the first text box, we will add the heading of our section. In the second one, we will add a description. Adjust the text type, size and appearance accordingly.

Finished first column
Finished first column

Step 12: Add an Image to The Second Column

Repeat the steps to add an element outlined in the previous section. However, instead of adding text to the second column, we will be adding an image. Make sure you have selected the second column (the gray portion) when you click the add button. If an element is added elsewhere, just drag and drop it into the second column.

Second column with image
Add an image to the second column

Upload an image using the sidebar on the left. You can adjust the width and height of the image in the appearance tab within the sidebar.

uploaded image
Upload the image

You can also round the image instead of having a rectangular block. Do this by changing the shape to a circle. You might have to adjust the width and height of the image to get a perfect circle.

Circular image frame
Make the image frame circular

You can repeat steps 7 through 11 to create multiple sections within your website. A website generally showcases several different things such as projects, clients, about, and past work.

To add a Project section, you can add a little gallery of clickable images. You can do this by adding another container to your page. Click the add button and add choose the gallery option.

Add a gallery to your container
Add a gallery to your container

Then, add multiple images to the gallery, depending on the number of projects you have. We will add three image placeholders. We want our images to have captions. We can do this in the appearance tab under captions. Change the style from none to bottom (or wherever you want to display the caption).

Add captions to your images
Add captions to your images

Navigate to the gallery section in your sidebar and under each gallery item, add an image and a caption. You can also convert these to links and point to an external website.

Add captions and images to your gallery
Add captions and images to your gallery

Adjust the width and height under the appearance tab, and you're done!

Final gallery or projects
Final gallery or projects

Step 14: Save and Publish Your Progress

If you have followed all our steps, you should have a decent-looking website that you can further modify to suit your needs. It is now time to save and publish your website. Carrd's free plan allows you to publish your website on a subdomain.

If you want to publish to your own domain (which we recommend if you are creating a professional or business website), then you might have to upgrade to a paid plan. To save and publish your website, just click on the little floppy disk icon in the top navigation bar. You will be prompted to add a description, title and a URL for your website. Once you're done, hit publish. Congratulations, your website is live!

Save your website
Save your progress and publish your website

At the time of writing, Carrd's premium plan costs $19 a year, making it a bargain compared to other website builders.

Bonus Features

There are some other cool things you can do to make your website stand out even further. One example of this is adding animation to your page when it loads.

Adding Animation To Your Carrd Website

To add animation to your Carrd website, select the top layer page section. This should be accessible behind all of your elements and you can access it by clicking the background, outside of the other elements on the page. Then, click on the little play button at the top of the sidebar.

You can add animation via the animation tab
You can add animation via the animation tab

Here, you will be able to add different on-load animations to your page, individual elements as well as sections. You can also set the duration and the delay for your animated elements. Duration is the total lasting time of the animation. Delay is the time it takes for the animation to start after the element becomes visible.

You can also add internal links to your Carrd website. If you will remember, we added sections to our website and gave them names. We can add a little arrow link to the about section from the main landing container.

First, select the container and add the icon element to it.

Add an icon
Add an icon in the main section under the subheading

Change the type to Down Chevron to get a downward arrow. In the URL textbox, input #about. About is the name of our first section and the hash tells Carrd that we are linking to an internal section.

Icon with link
Change the icon and add an internal link

If you want, you can add hover effects to the icon. You can also modify the size and the color of the icon to match your website. Save and republish your changes. Reload your website. Now, if you click on the chevron you should auto-scroll down to the Our Story (about) section. You've added an internal link!

If you've followed this tutorial step by step, you should have a neat-looking website that you can modify according to your needs. Carrd's premium plan comes with even more features such as forms and integration with third-party software like Stripe (to process payments), and Gumroad. You can also add custom domains to your website.

Carrd has extremely comprehensive documentation that you can dig through to add even more features to your website that we may not have covered in this tutorial.

If you're looking to create a website with more complex features, we have written a guide that compares the various different website and landing page builders, to help you choose the perfect fit for you!

5 Tools To Setup a Beautiful Low Cost (or Free!) Landing Page for Your Small Business in 2021
All modern businesses need a digital presence, and this is where a landing page comes in. Landing pages are one-page websites that draw the viewer in and serve as the first point of contact between you and your customer - so you have to make sure that they damn well