Carrd Tutorial for Beginners: How To Make a Carrd Website

by
How To Make a Carrd - Carrd.co Tutorial

Creating a website with Carrd.co is easy and efficient. Follow this step-by-step Carrd tutorial to learn how to build your own stunning Carrd website.

Contents show

Tempeld → Build Websites & Landing Pages Faster with our Customizable Free & Premium Carrd Templates

1. Introduction to Carrd.co

Carrd Dashboard - Build Carrd Website

Carrd Dashboard

Carrd.co is a user-friendly website builder designed for simplicity and elegance. It’s perfect for personal portfolios, landing pages, small businesses, and more.

2. Planning Your Website

  • Define your website’s purpose and target audience.
  • Plan the structure: What sections will you need?
  • Collect images, text, and other content before you start.

Tips for Planning Your Website

1. Define Purpose and Audience

Clearly establish the main goal of your website and identify the specific group of people who will benefit from it.

2. Plan Sections / Containers

  1. Hero: Headline and CTA (call to action). Introduction and welcome message.
  2. About: Personal background and design philosophy.
  3. Benefits: Showcase with descriptions.
  4. Services: List of offered services.
  5. Products: Sell your physical or digital product. Accept payments with Gumraod, PayPal, and Strip.
  6. Testimonials: Client feedback and success stories.
  7. Contact: Contact form and contact information.
  8. Newsletter: Add a way for people to subscribe.
  9. Social Media: Link to all the ways people can follow you.

Wondering if Carrd is right for you? Read: Why Use Carrd? 12 Reasons I Like Building Carrd Websites

3. Getting Started

Sign Up for Carrd.co

Carrd Starting Point

  1. Visit Carrd.co and sign up for an account.
  2. Choose a subscription plan (Free or Pro).
Try Carrd Free

Carrd Pricing and Plans Explained

Get 3 free websites when you sign up for Carrd and try it out.

Basic (Free)

  • Carrd.co’s entry-level plan.
  • Perfect for getting started without cost.
  • Includes:
    • Limited features.
    • Carrd.co subdomain.
    • Suitable for personal projects and simple websites.

Carrd currently has three Pro plans to choose from: Pro Lite, Pro Standard, and Pro Plus.

Carrd Pricing and Plans

Carrd Pricing and Plans

Pro Lite

  • Price: $9/year
  • Affordable upgrade from the free Basic plan.
  • Ideal for users not needing custom domains or advanced business features.
  • Includes:
    • Improved features over Basic plan.
    • Budget-friendly option.
    • Suitable for personal use.

Pro Standard

  • Price: $19/year
  • Popular mid-tier plan.
  • Ideal for individuals and businesses with varied needs.
  • Includes:
    • Custom domains for branding.
    • Form integration for email collection.
    • Suitable for personal and small business sites.

Pro Plus

  • Price: $49/year
  • Top-tier plan for power users.
  • Includes all Pro Standard features, plus advanced developer tools.
  • Offers custom forms, advanced settings, and access to unminified sources.
  • Designed for users with technical expertise and specific requirements.

This is just a basic Carrd pricing summary. See all the features that are included in the paid pro plans on Carrd.co.

Choose a Template

Carrd has lots of templates for starting your project. Select one of the categories like; blank canvas, profile, landing, form, portfolio, sectioned, or custom Carrd template.

Carrd Templates
Carrd Templates

  1. Browse Carrd’s template library.
  2. Pick a template that aligns with your website’s purpose.
  3. Select the template and start editing.

Choose a blank canvas if you’d rather start from scratch and design your own Carrd website.

4. Building Your Website

The builder is designed to be straightforward and simple. The main starting

Carrd canvas Page Background
Carrd canvas Page Background

The Canvas is the central focus of the Carrd interface. It provides a mostly live preview of your site under construction. Additionally, it serves as a workspace to arrange elements and access two fundamental components present on all Carrd sites:

  1. Background: This defines the site’s backdrop, which can be customized as a solid color, gradient, image, or even a video.
  2. Page: The container for all other elements on the site. It’s flexible in terms of position and style, offering various customization options.

Click > + Menu to add content elements to your website.

Carrd Overview

Edit design in properties panel – Add content + Menu

Edit the page elements in the properties panel.

Understanding Containers and Sections

  • Containers and sections are the building blocks of your website.
  • Common sections: Header, About, Services, Contact, Footer.

Editing Content

Text

  1. Click on a text element to edit.
  2. Use the text editor to modify content.
  3. Format text using the toolbar.
Add, edit, style text
Add, edit, and style text

Use Markdown to add more styling and functionality to text.

Carrd Markdown
Carrd Markdown

Images

  1. Click on an image element to replace it.
  2. Upload your own image or select from Carrd’s library.
  3. Adjust the image size and alignment.
add image Carrd

Add, edit image

Links

  1. Highlight text or image.
  2. Click the link icon.
  3. Insert the URL and choose link behavior.

Adding and Removing Sections

  1. Click “+” to add a new section.
  2. Choose the type of section to add.
  3. Use the “x” icon to delete unwanted sections.

Styling Your Website

Fonts and Colors

Style Fonts Carrd
Style Fonts Carrd

  1. Go to “Styles” in the top menu.
  2. Choose fonts and set primary/secondary colors.
  3. Customize section backgrounds and button styles.

Page and Background

Layout and style your Carrd site starting with the page and background properties.

Carrd page design background
Carrd page design and background

  1. Click on a section.
  2. Go to the “Background” tab.
  3. Pick a color, image, or gradient.

Add a Container and Columns

container column carrd

Add columns to containers

  1. Click “+” to add a new container.
  2. Choose ‘Type’ and select Columns.
  3. Add and adjust column color and spacing.

Learning and mastering the Background, Page, Containers, columns, settings, spacing and colors will be 80% of what you need to design anything you want in Carrd.

Custom CSS (Pro feature)

  1. Access the “Advanced” tab.
  2. Add your custom CSS for precise styling.

5. Mobile-Friendly Design

  • Carrd templates are mobile-responsive by default.
  • Preview and adjust your site for mobile devices.
mobile optimized Carrd design
mobile optimized Carrd design

  1. Click the mobile phone icon ‘Menu’
  2. Scroll down in the properties panel. Click Mobile ‘Manual’ to style your elements to mobile.
  3. Click the ‘Arrows icon’ in the menu to display a longer view to make designing mobile elements consistently a little easier.

6. Setting Up Custom Domain (Pro feature)

Custom Domain Carrd
Custom Domain Carrd

  1. Purchase a domain from a domain registrar.
  2. In Carrd, go to “Publishing” and select “Use a custom domain.”
  3. Follow the setup instructions provided by Carrd.

7. SEO Optimization

Carrd SEO Title Meta Description
Carrd SEO Title Meta Description

Page Titles and Descriptions

  1. Edit the “Page Info” for each section.
  2. Use concise, descriptive titles and meta descriptions.

Heading Structure

  1. Use proper hierarchy: h1 for main titles, h2/h3 for subheadings.
  2. Maintain a logical structure for accessibility and SEO.

Image Alt Text

  1. Add descriptive alt text to images.
  2. Describe the image purpose briefly.

Meta Tags

  1. Access “Settings” > “SEO & Social” > “Meta Tags.”
  2. Add meta tags for better search engine visibility.

8. Preview and Publishing

Previewing Your Website

  1. Use the “Preview” button to see your site.
  2. Test on different devices for responsiveness.

Publishing Your Website

  1. Click “Publish” when you’re ready.
  2. Choose a Carrd subdomain or connect a custom domain.

9. Tips for Effective Websites

  • Keep navigation simple and intuitive.
  • Create engaging content with clear messaging.
  • Include contact information for easy communication.
  • Use a compelling call to action (CTA).

→ Build Websites & Landing Pages Faster with our Customizable Free & Premium Carrd Templates

10. Final Thoughts

Creating a Carrd website is a straightforward process. Remember to keep refining your site over time and analyze its performance to make necessary improvements. Enjoy building your professional online presence with Carrd.co!

Try Carrd Free

(Source)