Carrd Tutorial: How to Make a Good Carrd Website

Carrd is a creative page and site builder, with simplicity being one of the pillars of its philosophy. That’s why the sites you create with Carrd are simple, as in one-page-website simple. It’s ideal for small businesses or for building a profile site, a resource page, an opt-in form, a landing page, and more.

Carrd was launched in 2016, and it quickly became popular. It’s convenient, easy to use, affordable, and doesn’t require a sign-up. This must’ve greatly appealed to many who wanted to build a simple site.

Carrd was meant to be intuitive and easy to use for any level of tech skills – so easy that you don’t even have to watch instructional videos or follow any guides in order to give it a spin (and to have success with it). And yet, here I am, doing exactly that: writing a Carrd tutorial on how to make a good Carrd site!

But bear with me, please; I might have some tricks up my sleeve.

No matter how simple something’s supposed to be, we almost always miss something if we’re winging it on our own. When it comes to website building, you never stop learning.

So, without further ado, let’s get straight to showing you how to make a good Carrd site in today's Carrd tutorial.

Preliminary Step: Preparation

If you’re planning on being really serious with your site, it’s best to use your own custom domain and find a web hosting service provider for your Carrd website. More often than not, the same company that sells domain names also provides hosting services.

So, the preliminary step you’ve got to do is buy a domain name and web hosting from a domain name registrar. GoDaddy is one of the most popular, but there are others, too, like Namecheap, Bluehost, HostGator, DreamHost, etc.

On average, a domain name costs about $10 to $20 per year, while web hosting costs can vary wildly depending on the hosting type you choose. Most commonly, the prices range from a couple of dollars per month to a couple of hundred dollars per month.

However, if you want to start a website just to see how it works, you don’t need to pay for hosting. Carrd allows you to publish your website for free on a carrd.co URL.

Step 1: Select a Template or Start from Scratch

To Sign Up or Not to Sign Up?

When you’re starting out with Carrd, there are two options available: 

1. Sign up right away from the beginning

2. Start experimenting right away and sign up later to save your changes

Choosing the latter would mean that you can start building your Carrd website immediately by choosing one of the templates or selecting a blank canvas. This option allows you to try out different things to just get a general idea about the platform without creating an account or leaving any personal information. However, if you want to save any changes you make, you’ll have to sign up eventually.

To check out how some of the more advanced features work, the best way to start is to go with the seven-day trial. It lets you test-drive the top Pro features. No credit card is required for the trial.

Whatever you decide, the first step towards building an awesome site is taking care of the visual aspect of your website. 

Templates

Carrd offers roughly 90 responsive and customizable templates. They’re well-designed and simple. Depending on what you’re building, you can choose from five categories: profile site, landing page, form, portfolio site, and sectioned site templates.

This is just a small part of what Carrd offers in terms of templates:

However, you’re not limited to the pre-designed templates. You can start building your site from scratch. This is what a Carrd blank canvas looks like:

Since I’m not a designer, and I don’t quite know the current trends in web design, I personally wouldn’t go with the blank canvas. Instead, here I’d go the other route and choose one of the sectioned templates.

Interestingly, although Carrd is a single-page site builder, there’s a workaround to bypass this limitation. The sectioned templates let you create a site that has the look and feel of a multi-page website. In reality, it only simulates a multi-page website. This effect is achieved by having multiple sections that are hidden and only show up when a user clicks different buttons.

We can create this type of Carrd website on our own without using a sectioned template. But here, I’m going to use template No. 32. This is how it looks in action:

It’s really simple and elegant, and it has a great vibe to it.

Step 2: Customize Your Template

To Customize or Not to Customize?

This is the step that’ll take the longest, especially if you’re creating a site from scratch.

The Carrd templates look excellent out of the box and can be used as they are. Nothing prevents you from just adding images, videos, and text and publishing.

However, it’s always a good idea to make your site stand out by turning the template of your choice into something that’s more in line with your branding. This will require time and effort, but there’s no better way to achieve this than by tweaking a few things here and there.

The Carrd Editor

Carrd offers a drag-and-drop editor that’s super easy to use. It provides you with the usual drag-and-drop editor functions and then some. It also has the same limitations common with this type of editor, like elements being locked inside sections.

This prevents you from moving them around and placing them precisely where you want them on the page.

Text Editing

You start tweaking by clicking on the element you want to modify. For example, when you click on a certain text, a panel shows up on your left side. Carrd supports Markdown, a markup language that allows you to format text. So, you can edit the existing text and make it bold, italic, underline the text, etc.

Let’s replace the placeholder text with our own:

By clicking on the brush, which is the second icon in the left upper corner, you get access to other properties of the text you’re customizing: color, font, size, weight, line spacing, letter spacing, margins, alignment, and drop shadow.

In addition to this, you can make specific changes to the mobile version of your site. Carrd allows you to manually change the size, line spacing, letter spacing, and margins of the text on the mobile version, or you can just leave it on auto and stick to the default Carrd values.

Let’s change the size of the text, line spacing, and text spacing and leave everything else as it is:

By clicking on the last Settings icon, you open up a whole new world: custom styles and more advanced customization. You can write different CSS rules for your website’s desktop and mobile versions, but this is only available with a Pro subscription.

Image Editing

The same principle here applies to any other type of element. If you want to upload a picture, just click on the space allocated for an image. After you’ve clicked and uploaded a picture, Carrd gives you a couple of optional choices: to write an alternate text for your pic and add a URL of any type.

Despite being optional, don’t leave the “Alt Text” field empty. Adding alternate text is a good practice, and this attribute is very important for a few reasons:

• It’s a description of your image, and it’s shown when, for some reason, the image can’t be loaded.

• It increases accessibility.

• It’s good from an SEO standpoint because it helps search engines identify what’s in the picture, something they can’t do without alternate text.

Source of the uploaded picture: Pixabay

Here, we’ll leave the link field empty, and we’ll keep the “Defer loading” option checked, as Carrd recommends it. This is good for a better page load time, which needs to be as quick as possible, especially when it comes to landing pages. Slow page loads discourage people from taking any action and strongly encourage visitors to leave sites.

There’s another option that speeds up the page load time, namely, the possibility to optimize the uploaded image. But if you’re not subscribed to a Pro plan, it’ll be grayed out.

Again, the middle icon is responsible for changing the appearance of the image. Carrd allows you to change the width, height, shape, and margins. You can modify the same properties for the mobile version, with the exception of shape. We’ll only change the width and leave everything else to the default values.

Lastly, the settings icon does the same as with text: it enables you to add custom styles and do some extra customization by playing around with unique element IDs, additional classes, and more attributes.

Background Editing

In addition to this, you can tinker with the background and use one of the following options as your site’s background: color, gradient, image, video, or slideshow.

On top of the option you choose, you can add a pattern, basically, different types of grids and lines:

Here, we won’t use any patterns, and we’ll keep the background style on the “Color” option.

A cool thing that Carrd lets you do is add animations, like a fade-in effect, to your background. You can do that by clicking the second icon in the upper left corner.

Page Editing

Besides this, there are options to modify the layout of the page by moving sections around and experimenting with positioning, alignment, colors, borders, drop shadow, and more.

Here, you can add animation as well. There are three available options:

1. Add animation on page load.

2. Add animation on element load.

3. Add animation on section change.

Let’s add a zoom-in effect on section change:

The part of the site we edited corresponds to a homepage of a proper multi-page website. Now let’s modify the other sections.

The Gallery Section

First, we’ll change the “Work” section into a “Gallery” section. Then, we’ll add six images, write the alternate text, select to allow users to navigate between pictures, and choose to show a full-size image on click.

Source of the uploaded pictures: Pixabay

Now, here’s an important thing. If we want to change the section’s name, we have to rename the section break. To do this, we just need to click on the part between the two sections to make modifications. I’m changing mine from “#work” to “#gallery.”

The “Name” field in the left panel actually functions as a URL link, and it is thanks to this function that Carrd can simulate a multi-page website.

When we change the section break, we also need to change the name and the link of the button in the footer. So, when someone clicks the button, it’ll lead to our “Gallery” section, leaving the impression of going to another page of the same site. Cool trick, isn’t it? :)

We’re done with the second section. Let’s move forward and start tinkering with the “About” section.

The About Section

You know what? To speed up the whole process, here we’re only going to make a couple of small changes to the text. Since you already know the drill, let’s just skip the process and have a look at the end result:

The Contact Section

In this section, we’ll write our own short text that replaces the Lorem Ipsum, remove the icons of the photo-sharing platform 500px and Twitter, and add Octocat (the GitHub logo).

Just like before, when you want to customize an element, you just click on it, and you’ll see all the available options on the left side of the screen. So, we click on the 500px icon, find the bin symbol, click on it and remove 500px. It’s the same procedure for the Twitter icon.

Then we click “Add,” and in the “Type” field, we search for what we need, in this case, GitHub. To speed up the search, you can type the first few letters of the name, and Carrd will show you the searched item.

When we add a new icon, we need to specify a URL. This goes for any icons you have – they need to contain a URL that leads to the right destination on the Web. So, you need to include your full email address, as well as the URLs of your Facebook profile, your Instagram profile, and similar.

Here we’ll also add a mouse-hover effect. When the mouse pointer hovers over an icon, the color of the icon will change to a shade of black:

The Footer

The first thing we’ll do in this section is make the divider a little bit wider. We’ll keep the default values for the style, orientation, color, thickness, margins, alignment, and mobile version of the site.

Other things we’ll change are the weight of the text of the buttons and the style from outline to solid. You can do this by clicking on the middle icon in the left corner, the one that looks like a brush. Let’s see the result:

We’re almost done. Let’s just take a look at a few more things.

The Right Upper Corner Menu

When you’re building a site from a template, Carrd gives you simple and clear instructions on how to use the user interface. This makes the whole process even easier:

In case you get stuck along the way and you need a reminder, just click on the last “More Actions” icon, and it’ll lead you to the instructions. In addition to this, you’ll be able to see and use other options:

Keep in mind that a click on the first icon from the menu gives you a lot more options than the instructions suggest. You can add text, lists, images, buttons, videos, links, audio, icons, galleries, tables, timers, and dividers.

On top of this, with a Pro subscription, Carrd lets you include slideshows, forms, widgets, and embed codes.

The last option, embed codes, means that you can add lines of code from other sites to your Carrd site code. Why would you need this?

Well, for example, since Carrd doesn’t provide a blogging functionality, you can make good use of this option by integrating a blogging tool with your Carrd site. DropInBlog is an awesome blogging platform that offers an embed code that will equip your Carrd website with a full-featured blog. You just need to copy and paste the code here, and that’s it.

The Last Step

The last step in our Carrd tutorial is to save the changes you’ve made and then publish your uber-cool site.

So, move to the save icon in the upper right corner and click on it. After you click, you’ll need to set up a few things before launching your website: title, description, and how you want to publish. Or, you can just save the changes and postpone publishing until you’re completely satisfied with what you’ve built.

The title is, in fact, an HTML tag that states succinctly what the website is about. It helps users find what they’re searching for, and it also plays a role in an SEO context. The same goes for the site description.

If you choose to publish, there are two options: 1) publish to a custom domain, or 2) publish to a carrd.co URL. The first option is available only if you have a Pro subscription or you sign up for the free trial.

There are also two options if you only want to save the changes instead: 1) save as a template, or 2) save as an offline draft. Here, the first option is also only possible with a Pro subscription.

Besides these options, with a Pro plan, you’ll have the opportunity to use:

• A “share image” – a picture that people see when someone shares your site on social media apps

• A favicon

• Meta tags for better SEO

• A password

• Google Analytics

Lastly, you can set the update frequency for your site and choose the main language.

Here, we’re going to leave the language to the default English and publish the site to a carrd.co URL.

How to Optimize Your Carrd Website for Mobile Devices

Carrd makes a point that it automatically optimizes the appearance of page elements to be suitable for mobile devices, and the sites do look good for the most part. However, sometimes some elements may look a little off, or maybe you’ll just want to tweak the template just a little.

Thankfully, you can make some modifications to your Carrd site. Nothing major, but it can make a big difference.

Here’s what you need to do:

1. Switch the builder to “Mobile View.”

2. Select the site element you want to customize and click “Appearance.”

3. Find the “Mobile” toggle located towards the bottom of the panel.

4. Switch the toggle from “Auto” to “Manual,” and you’ll see some additional customization settings appearing. For example, you may want to adjust the margins of an element or its padding. You can fine-tune it however you like, and when you’re done, just exit.

5. If you ever want to undo the changes, just switch it back from “Manual” to “Auto.”

FAQs

The End Result

And voila! This is what we created in our Carrd tutorial in such a short time without doing all that much customization:

This is the Gallery section, acting as a separate page:

Users can click on whichever picture they want, and it’ll zoom in. You can add more pictures or more sections if you want or find it necessary.

But why stop there? Add more social media icons and more buttons, and play with a wider range of colors if you have an eye for design.

On the other hand, if you’re more focused on business, Carrd allows you to do that too. You can use the platform to create and sell landing pages to other people. Carrd is so simple that you can create designs for other people without even knowing that much about web design.

There are some wonderful-looking sites out there created with Carrd. Don’t let the price and seemingly limited options fool you. In the right hands, Carrd can be an excellent tool.

So, follow our Carrd tutorial and try it out, experiment with your site or page design, and let your imagination guide you. You’ll inevitably end up doing some cool things.