CARRD: THE SIMPLE WAY TO CREATE WEBSITES

8 min readApr 22, 2023

Carrd has gained more than 800,000 users and been used to create more than 1.2 million sites since its launch six years ago.

Carrd is growing in popularity as a result of its simple yet professional website construction feature, which has demonstrated that professionalism does not necessarily mean complexity in website building.

Let’s first look at what Carrd is before learning how to utilize it in this article’s introduction and basic tutorial.

What is Carrd?

Carrd is essentially a framework for creating single-page websites. You can use it to create straightforward, one-page websites that are fully responsive, for nearly anything. Carrd has a number of capabilities that users can explore when creating websites. Carrd, however, is optimized for single-page websites, (but you can also create multiple paged websites). Now lets get into it.

10 Steps for Creating Your Website on Carrd.

The fact that Carrd does not require coding knowledge is one advantage of using it. As a result, you may quickly start developing your website by using the Carrd tutorials, or more precisely, the Carrd tutorial website theme. Carrd does not currently have a mobile app, but we will show you how to use the online app on both a desktop and a mobile device.

The following 10 steps will help you build a beautiful, custom website:

Signup to create a carrd account:

Go to the Carrd Website
Click the “Log In”

On the Log In page, click the “Sign-Up” button to create an account. You can also click the “Hamburger menu” icon at the top right of the page to log in or sign up.

Open Dashboard:

Once you have signed up and verified your account, follow these steps:

Click the “Open Dashboard” button to open your account dashboard (if you are not automatically redirected to the dashboard).

Click the “New Site button” on the top right corner of your account dashboard. This takes you to a different page for you to choose a starting point.

Select a blank canvas to design your website from scratch or pick from pre-existing templates to modify it to suit what you want. You can select any of the categories at the top of the page for specific templates tailored to what you want.

Basic Design From Scratch:

Following your selection of the blank canvas, you are redirected to the Canvas page:

Some helpful tutorials to learn how to utilize the interface will first show. After reading them, press the “Okay, got it” button to move on.

Now you will see the editing interface where you will do the actual designing, see a live preview of the site you are building and move and arrange your elements. Click on the “More Actions” Hamburger Menu.

You will use the Menu to control actions on the website you are building. These elements include:

Background Element. This will be the background of your website.
Page Elements. These are the visual elements that are displayed on a website’s page. The layout of the entire website is determined by the page elements, which may be structured and adjusted in a variety of ways.

Click on the plus sign “Add Element” to add a new component to your site. You can add multiple elements: text, video, buttons, audio, tables, links, etc.

When you click on an element, it will bring up a Properties Panel with different tabs that can be used to customize the element’s properties or change the element’s settings. In most cases, each element has three tabs: its main tab, animation tab, the appearance tab, and the settings tab.

Edit The Background:

Click on the Hamburger Menu “More Actions” and select “Background”

Set up the background. You can choose a slideshow, an image, a video, a solid color, or a gradient as your background style. Pattern, pattern color, size, and thickness are further options. We’ll just use a background that is one solid color. To use the selected color, click “Done”.

I used the following settings.

Set Page Layout:

Here you can style and customize your page layout and position. Click on the “Hamburger Menu” and select “Page”. Configure the Page to set style, position, width, and other appearance settings.

I used the following settings.

You have the option to set the style to:

Default. This is ideal for creating a simple layout.
Box. This supports a background-friendly mode on mobile displays.
Wide Box. This is a style able enclosing box that spans the width of the page, containing all the site’s elements.
Tall Box. This is a style able enclosing box that spans the height of the page, containing all the site’s elements.

After setting the page element position, alignment, and spacing of your content, then you can click “Done” to close the panel.

Add Container Element:

The container element will be used to group elements into two or a maximum of five responsive columns. To add the container element:

Click “Add Element” and select “Container” from the dropdown to create a new container element.

Select the “Type” in the Properties Panel. You can either leave the Type as “Default” or set it to “Column”. Setting the Type to “Column” will split the container into two columns.

In the “Appearance Tab”, you can adjust other appearance settings. Remember to click on “Done” to apply the effects.

I used the following settings.

Add Text Element:

Click on “Add an Element” to select the “Text element”.

When the text section appears in the properties panel, click on “Text” to switch between text options: site Title, Main Heading, Subheading or Paragraph. Remember to click on “Done” when you finish editing.

Click on the “Appearance Tab” to format your text: Color, Font, Size, Line Spacing, Letter Spacing, Margins, Alignment, Drop Shadow, and Gradient.

I used the following settings.

Add A Call-To-Action Button:

If you want your website visitors to take action, use a CTA button. Depending on the action you want your visitors to take, the button URL may redirect to areas of your website or to websites that are not part of your website.

Click “Add Element” from the Menu tab and select “Buttons” from the dropdown menu.

Under the properties panel, click on the name of the button to change your button to a more creative CTA, add the correct URL, and customize the button to your specifications.

Click on the “Appearance Tab” to define the style of your button and remember to click done when you are through.

Include Sections:

By using sections, you create the appearance of multiple pages on your single-page website. Sections allow you to link and switch between different named regions, enhancing navigation and functionality.

Click “Add Element” and select “# Control” to create a new control element.

Set Type to “Section Break”.

Name the section. You can only name the section using lowercase letters, numbers, and hyphens.
Drag the section break to where you want to divide your site, then release the click to drop it. Add whatever you want and then link to the section using a button or a link.

Save And Publish Your Site:

Click the “Save this site” icon on the Menu tab.

On the Properties panel, you will be required to input a title and a brief description for your website.

Select a domain name and click on “Publish”. For the free version, you can choose to either “Publish your site to a .carrd.co URL” or “Save as an offline draft”, if you are not ready to share your site with the world. While for the paid version, you have the option of saving as a template or publishing to a custom domain.