In this tutorial, we’ll show you how to create a basic one-page website using Carrd’s drag-and-drop editor. We’ll also give you some tips and tricks for customizing your site and making it your own. So let’s get started!
1. Choose the Type of Site You Want to Make
When you’re start up an account on Carrd you can choose from a bunch of ready made Carrd templates. However, you’re also presented with the “Blank Slate” option. For this tutorial, we’ll be using the “blank” template, which is a blank slate that you can use to create any kind of site you want. But feel free to experiment with the other templates too - they’re all fully customizable so you can make them your own.
2. You’re Presented With Instructions
It should show you where you can add elements, undo and redo, load up animations and so on. It should be pretty intuitive as it is a drag-and-drop format.
3. Adding Elements to Your Page
You can add elements to your page by dragging and dropping them from the left sidebar onto your page. Carrd has a wide variety of elements to choose from, including text, images, buttons, forms, social media embeds, and more. For this Carrd tutorial, we’ll be adding a heading, some text, and an image. But feel free to add whatever elements you want to your page.
4. Customizing Your Elements
Once you’ve added an element to your page, you can customize it by following the tutorial for each element. For instance on “Text” elements you can follow the Markdown formating to create different styling. Then at the top visualise the font setting, paint brush and Play symbol this allows you see the element in motion with the rest of the site. Adding images, you can choose to upload them from your computer, or you can select one from or a Royalty free site. For Video, you can just the use the video embed feature taking the Youtube URL for example and likewise with Audio. There are other elements too such as a Timer, List, and Buttons for call ot actions as well as easy to present tables. If you want to gain forms and other widgets, you will need to opt for the Pro version of Carrd. All of the elements detialed come witht a specific instruction on them.
5. Use “Pattern”
This allows you to create a background. You can use geometric shapes, lines, or images then you can of course edit this section to customize just how you want it. This is what gives the site an aesthetic feel overall.
6. Preview the Site
Once you’re happy with the site. Head to to preview your site on the top right navigation, simply click the “Preview” button in the top-right corner of the Carrd editor. This will open your site in a new tab, and you can see how it looks on desktop and mobile devices.
7. Publish the Site
The Floppy Disc Icon allows you to publish the site live once you’re finished. You can also choose to keep it private and only share the link with people you invite. You’re going to need to create an account with Carrd to publish your site. Once you’re logged in, click the “Publish” button in the top-right corner of the editor. This will open a pop-up window where you can choose a domain for your site (or use a subdomain provided by Carrd), and select whether you want your site to be public or private. You’re going to need to enter the “Title” as well this is effectively the meta title for your website, particularly important for people who want it to be public and are aiming to have it rank for SEO purposes within Google.
8. Track Your Site
This is a pro setting but under settings you can insert your Google Analytics ID that will allow you to track your website traffic and form completions and so on.
Tips for Creating a Carrd Website
Here are a few tips to help you create an awesome Carrd website:
1. Keep It Simple
Carrd is designed to be simple and straightforward, so don’t try to cram too much into your site. A few well-designed pages will be much more effective than a bunch of cluttered ones.
2. Use Images and videos
Images and videos can help break up text and make your site more visually appealing. Just be sure to use high-quality images that are relevant to your content.
3. Use White Space
White space is your friend when you’re designing a Carrd site. It can help break up text and make your pages easier to read. So don’t be afraid to use it!
4. Be Selective With Your Design and Colors
Colors can help make your site more visually interesting, but be selective with how you use them. Too many colors can be overwhelming and make your site look cluttered.
5. Use Easy-to-Read Fonts
When it comes to fonts, less is definitely more. Stick to one or two easy-to-read fonts for your whole site. And don’t be afraid to use different sizes and weights to add visual interest.
6. Keep Your Navigation Simple
Your navigation should be easy to understand and use. Stick to a few simple links and avoid using drop-down menus if possible.
7. Proofread Your Content
Before you publish your site, be sure to proofread your content for typos and grammatical errors. Nothing looks worse than a website with bad grammar! Creating a Carrd website is simple and straightforward, but there are a few things you can do to make sure your site is the best it can be. Just remember to keep it simple, use images and videos, and proofread your content before you publish. And you’ll be sure to create a great Carrd site in no time!
Have a Few Practices
Get used to the content management system (CMS) and have a play around with the different features, that way you can be confident when it comes to making your final site. It is important to note that there are some limitations with Carrd.
Design a Website
Sketch out how you think the site should look, what sort of feel you are going for and the overall aesthetic. This will make it much easier when you start to play with the templates and various features within Carrd.
Think About the Content
Before you get too far in, it is important to have a think about what content you want on your site. This will make it much easier to design a site that looks and feels right for your brand or project.
Look to Other Templates for Inspiration
If you are finding it tricky to get started with Carrd, take a look at some of the other templates available on the site. This can give you an idea of what is possible and also some inspiration for your own project.
Advanced Carrd Tutorials
This video looks at how to create a more aesthetically pleasing design with Carrd.
Add Animation and Interactivity
This tutorial looks at how you can add animation and interactivity to your Carrd site using the built-in features.
Build a Landing Page
This tutorial looks at how you can build a landing page using Carrd, which can be used to drive traffic to your site or product.
Sources
Carrd Documentation - Carrd
This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional. © 2022 Elin Beck
