website builder cheat sheet

Choose the best website builder for your business

The Cheat Sheet that shows you exactly which website builder to choose based on your needs with bonus on how to get free custom domain, free email hosting, and more.

Get the FREE cheat sheet
website builder cheat sheet

Carrd Tutorial for beginner. Create an Aesthetic Carrd from scratch

By David NgeLast Updated: July 08, 2024

My work is supported by affiliate commissions. Learn More

In this tutorial we're going to re-create the Aesthetic Anime Carrd template from scratch.

Carrd Aesthetic template
Carrd Aesthetic template

This is a beginner-friendly, step-by-step tutorial so even you should do just fine even if you have limited experience with Carrd.

You can follow this tutorial with a free Carrd account.

Although, if you ever need to create more than 3 Carrd websites then the Pro plan actually offers incredible value.

Here's a detailed comparison of all Carrd's Pro plans to help you determine which one is the best.

Now, onto the tutorial.

P.S If you're stuck in the midst of this tutorial you can always check out the template.

1. Start a new Carrd website from scratch

Let's create a new Carrd website. Login to the dashboard and click New Site. From there, select the box icon to start from scratch (i.e without using an existing template).

Start a new Carrd website from scratch
Start a new Carrd website from scratch

2. Delete the default Text element

Delete the default text
Delete the default text

In the main editor, click on the Text element and trash it :)

You can find the trash icon in the bottom left after clicking the text element.

3. Set Page Width

Set the Page width to 35.

Set page with to 35
Set page with to 35

Then scroll down to the Content section and set the spacing to 0.

Set spacing to 0
Set spacing to 0

4. Add a Container

Add a Container element and set the Type to Columns. Both columns should have equal distribution (50%).

Add a container
Add a container
Container with 2 columns
Container with 2 columns

In the same container, head over to the Appearance setting and adjust the container's Width, Padding, and the Gutters.

Update appearance setting
Update appearance setting

You won't see much changes at this point but you will soon :)

5. Add Text to the header

Add 2 Text elements. One for each of the columns in the container you just created.

In the first column, add the header text and set the Alignment to Left.

Text to copy:

*Be someone's light!*

In the second column, add a full stop (".")

Add the header text
Add the header text

6. Create the header

The header we're trying to create
The header we're trying to create

To create the header in the shape of a trapezium, we need to update the of the container again.

Click on the Container and head to the Appearance tab.

Scroll down to the Background section and update the following setting:

Adding background gradient for the trapezium
Adding background gradient for the trapezium

Important note: Stop #2 must be set to 0% in order to create the trapezium. You can change the rest of the settings based on your preference.

At this point you should have something like this:

First draft of the header
First draft of the header

You've created the header. Now update the text colour so it looks like the initial design.

Changing the text to a lighter color
Changing the text to a lighter color

By changing the texts to a light colour, you've now completed the header!

The header
The header

7. Create the navigation menu

Start by adding another a Container beneath the header and set it to 3 columns of equal size.

Create a 3 column container
Create a 3 column container

In the Appearance tab, set the Top Margin to 0.125 and Vertical Padding to 0.25, the rest should be the same.

Adjust the margin and the vertical padding
Adjust the margin and the vertical padding

Set the Background to Colour and change it to the primary colour theme.

Changing the background color
Changing the background color

Here's the progress so far:

progress so far
progress so far

Add a Text element for each of the 3 columns. These are going to be the navigation links or texts.

Here's a tutorial on how to create links in Carrd.

[E](http://www.google.com)dit [V](http://www.google.com)iew [H](http://www.google.com)elp [E](http://www.google.com)dit

Set the Text Alignment to Left (Appearance).

Note: The above syntax highlights the first character as a link. Update the Google links to the your own URLs.

あきらめないで!

Set the Text Alignment to Auto (Appearance)

[carrd ib >](http://www.google.com)

Set the Text Alignment to Right (Appearance)

At this point your navigation menu is now complete!

Progress — The header with the navigation menu
Progress — The header with the navigation menu

8. Create the Body section

Add a Container below the navigation menu with the following settings:

Create a container with 2 columns
Create a container with 2 columns

In the Appearance tab, adjust the following settings:

Adjust the vertical padding and the top margin
Adjust the vertical padding and the top margin
The border width setting
The border width setting

Your page should now looks like this:

Progress — Header, navigation and the body section
Progress — Header, navigation and the body section

Add a Profile picture and Bio

In the left column, add one Image element and 2 text elements below it.

Image — Add a profile picture of your choice. Ideally with an aspect ratio of 750 x 1000.

Click here to download sample image.

Text 1 — Add a profile name. The text in the initial design has the following appearance setting:

Text to copy:

HiD4Ri!

Text 2 — Add a profile description. The text in the initial design has the following Appearance setting:

Text to copy:

==**ults♡**== : itzy *chaeryeong*, bts taehyung, [txt beomgyu](h), **twice** _dahyun_, ive rei, #6657

Note: Adding double equal sign highlights between the text will result in a highlighted text.

This is how your page should look like now:

Progress — Profile and bio
Progress — Profile and bio

We're getting there!

Add Personal likes and dislikes tables

In the right column of the container, add a Table element.

Adding a Table element
Adding a Table element

Delete all text in Headings and Rows. Add the following text instead:

Headings:

✔ likes ✔

Rows:

ITZY, BTS, TXT, TWICE, IVE, aespa, stayc, red velvet, tiktok, **_trading photocards_**, room decor, cats, bunnies, roller coasters, bts jimin and jungkook, [itzy ryujin](h), txt soobin, **twice sana** and **chaeyoung**, rv joy, aespa karina, ive wonyoung and liz

Feel free to add your personal preferences.

Head to the Appearance tab (Table element) and adjust the following settings:

Next, duplicate this table and update the Headings and Row.

Duplicate the table element
Duplicate the table element

Headings:

✘ dislikes ✘

Rows:

toxies, whiner, antis, **drama**, arguing on the tl 24/7, school, work, [fake people](h), manipulator, **dementor**, judgie, spottie, (drama), time lost

Again, feel free to add your personal preference.

Add a Links element below your dislikes table. Then create 3 links and name them accordingly.

Adding links to the carrd
Adding links to the carrd

In the Appearance tab, here are the settings:

Here's the progress so far:

Progress so far
Progress so far

We're getting close!

Add a Container with 2 Columns of equal size.

Create a container with 2 columns
Create a container with 2 columns

In the Appearance tab:

With this you have now created the Footer section outline.

Progress so far
Progress so far

Make a copy of the text you created before and drag it into each of the Footer columns

Make a copy of the text
Make a copy of the text 

You can add whatever text you want at this point. But for this tutorial we're just going to add some trigger warning and Kins text!

Text to copy:

**==TW_!_==**

Consectetur adipiscing **elit**. Curabitur **pellentesque arcu** (pharetra) urna [dictum](h), vitae lacinia.

**==KINS_!_==**

**Dis parturient montes**, nascetur ridiculus mus. **Aliquam** consequat lacinia massa.

10. The final design

Congrats, You have now designed and created the Aesthetic Anime from scratch!

This is how the final design looks like:

Final design
Final design

If you're stuck in the midst of this tutorial you can always check out the template.

David Nge

David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.

Have a tutorial you want to learn? Leave a suggestion here.