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.
1. Introduction to Carrd.co
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
- Hero: Headline and CTA (call to action). Introduction and welcome message.
- About: Personal background and design philosophy.
- Benefits: Showcase with descriptions.
- Services: List of offered services.
- Products: Sell your physical or digital product. Accept payments with Gumraod, PayPal, and Strip.
- Testimonials: Client feedback and success stories.
- Contact: Contact form and contact information.
- Newsletter: Add a way for people to subscribe.
- 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
- Visit Carrd.co and sign up for an account.
- Choose a subscription plan (Free or Pro).
Carrd Pricing and Plans Explained
Get 3 free websites when you sign up for Carrd and try it out.
- Carrd.co’s entry-level plan.
- Perfect for getting started without cost.
- 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
- Price: $9/year
- Affordable upgrade from the free Basic plan.
- Ideal for users not needing custom domains or advanced business features.
- Improved features over Basic plan.
- Budget-friendly option.
- Suitable for personal use.
- Price: $19/year
- Popular mid-tier plan.
- Ideal for individuals and businesses with varied needs.
- Custom domains for branding.
- Form integration for email collection.
- Suitable for personal and small business sites.
- 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.
- Browse Carrd’s template library.
- Pick a template that aligns with your website’s purpose.
- 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
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:
- Background: This defines the site’s backdrop, which can be customized as a solid color, gradient, image, or even a video.
- 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.
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.
- Click on a text element to edit.
- Use the text editor to modify content.
- Format text using the toolbar.
Use Markdown to add more styling and functionality to text.
- Click on an image element to replace it.
- Upload your own image or select from Carrd’s library.
- Adjust the image size and alignment.
Add, edit image
- Highlight text or image.
- Click the link icon.
- Insert the URL and choose link behavior.
Adding and Removing Sections
- Click “+” to add a new section.
- Choose the type of section to add.
- Use the “x” icon to delete unwanted sections.
Styling Your Website
Fonts and Colors
- Go to “Styles” in the top menu.
- Choose fonts and set primary/secondary colors.
- Customize section backgrounds and button styles.
Page and Background
Layout and style your Carrd site starting with the page and background properties.
- Click on a section.
- Go to the “Background” tab.
- Pick a color, image, or gradient.
Add a Container and Columns
Add columns to containers
- Click “+” to add a new container.
- Choose ‘Type’ and select Columns.
- 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)
- Access the “Advanced” tab.
- 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.
- Click the mobile phone icon ‘Menu’
- Scroll down in the properties panel. Click Mobile ‘Manual’ to style your elements to mobile.
- 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)
- Purchase a domain from a domain registrar.
- In Carrd, go to “Publishing” and select “Use a custom domain.”
- Follow the setup instructions provided by Carrd.
7. SEO Optimization
Page Titles and Descriptions
- Edit the “Page Info” for each section.
- Use concise, descriptive titles and meta descriptions.
- Use proper hierarchy: h1 for main titles, h2/h3 for subheadings.
- Maintain a logical structure for accessibility and SEO.
Image Alt Text
- Add descriptive alt text to images.
- Describe the image purpose briefly.
- Access “Settings” > “SEO & Social” > “Meta Tags.”
- Add meta tags for better search engine visibility.
8. Preview and Publishing
Previewing Your Website
- Use the “Preview” button to see your site.
- Test on different devices for responsiveness.
Publishing Your Website
- Click “Publish” when you’re ready.
- 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).
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!
Web designer and developer. I love building high-converting 1-page website templates for Carrd. I’ve been featured on: Behance, Canva, Search Engine Journal, CBC, CTV and more…