Carrd Tutorial for beginner. Create an Aesthetic Carrd from scratch

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

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).

2. Delete the default Text element

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.

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

4. Add a Container

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

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

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 (".")

6. Create the header

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:

• Background = Gradient
• Stop #1 = #96A9EB at 56%
• Stop #2 = #EDEDED at 0%
• Angle = 54%

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:

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

By changing the texts to a light colour, you've now completed 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.

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

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

Here's the 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.

First navigation link (left):

[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.

Second navigation link (middle):

あきらめないで!

Set the Text Alignment to Auto (Appearance)

Third navigation link (right):

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

Set the Text Alignment to Right (Appearance)

At this point your navigation menu is now complete!

8. Create the Body section

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

• Type — Columns
• Left — 55% width
• Right — 45% width

In the Appearance tab, adjust the following settings:

• Vertical Padding — 1.375
• Top Margin — 0
• Spacing — 0.75
• Background — Color — #FFFFFF
• Border — #96A9EB
• Border width — 4 (Top, Sides, Bottom Checked)

Your page should now looks like this:

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:

• Color — #FFFFFF
• Font — Default
• Size — 1.5
• Weight — Extra Bold
• Alignment — Center
• Drop Shadow — #345DEB
• Shadow angle — 60 degree
• Shadow blur — 1.125

Text to copy:

HiD4Ri!

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

• Color — #293578
• Font — Default
• Highlight (right hand side) — #D5DCF7
• Size — 0.75
• Weight — Regular
• Letter Spacing — -0.025
• Alignment — Left

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:

We're getting there!

Add Personal likes and dislikes tables

In the right column of the container, add 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:

• Style — Grid
• Width — 30
• Border Color — #96A9EB
• Padding — 0.125

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

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 personal links

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

In the Appearance tab, here are the settings:

• Style — Underlined
• Font Default
• Color – #293578
• Margins — 1.125
• Size — 0.75
• Alignment — Auto

Here's the progress so far:

We're getting close!

9. Create a Footer section

Add a Container with 2 Columns of equal size.

In the Appearance tab:

• Width — 36
• Vertical Padding — 1.375
• Horizontal Padding — 1.25
• Gutters — 1.25
• Background Color — #FFFFFF
• Border Color — #96A9EB
• Border Width — 4
• Un-check Top
• Check Sides, Bottom, Gutters, Flush to Edges

With this you have now created the Footer section outline.

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

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:

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

Recommended Read

• Free Carrd templates to download
• Is Carrd Pro worth it?
• How to create Carrd website with multiple pages
• Carrd website examples
• Popular Carrd fonts

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.