Take your Carrd websites to the next level

Tutorials & tips to easily add extra design styles & useful functions to your sites

Resources

Stephen @stepocampbell_

I am very very impressed with this Mark. Thank you for sharing.

Dru Riley @DruRly

These pricing tables and the premise of the site 🔥🔥

Andrew @atsaotsao

This is such a great and useful resource 🔥

Ecwid shop widget

You can add a shop to a Carrd page with a widget from Ecwid.com.

Note: The shop below is a test version only, please do not enter any credit card details.

Instagram gallery

By combining this Elfsight widget with Carrd, you could make a beautiful gallery website just from your Instagram feed (example).

Cost: $5/mo to remove the Elfsight badge (you’ll get $15 off via my link).
An alternative to Elfsight is Curator.io

Visual lists

Adding a bit of fun to your design can be hard when there’s no native way to add coloured text blocks in Carrd. You can create the two versions below with some simple CSS (you can use your own colours).
Find out how to implement them with my tutorial.

Style 1

Label

Label

Label

Label

Label

Label

Label

Label

Style 2

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pricing tables

There are two ways of doing pricing tables (see below) – either with the native Carrd tools or with an external widget.

Carrd version

You can create the version below with the native Carrd tools, but this takes a bit of extra work and know-how (you can use your own colours by the way). Find out how to implement it with my tutorial.

FREE

$0/mo

  • 1 user

  • 5 GB secure storage

  • Knowledge base support

Basic

$19/mo

  • Unlimited users

  • 100 GB secure storage

  • Business hours phone support

  • Analytics

Pro

$59/mo

  • All Basic features

  • Unlimited secure storage

  • Advanced branding

Dru Riley @DruRly

These pricing tables and the premise of the site 🔥🔥

Widget method

Below is a screenshot of a pricing table built in Elfsight which can be embedded as a widget in Carrd. The design is fully customisable and includes a year/month toggle. It costs $5/mo to remove the Elfsight badge (get $15 off via my link).

See the live demo here.

Elfsight pricing table

Testimonials

If you want to create a visually consistent gallery of quotes, there are two ways of doing this in Carrd (see below).

Carrd version

This version is manually built in Carrd, and can take quotes from any source. Find out how to implement it with my tutorial.

Stephen @stepocampbell_

I am very very impressed with this Mark. Thank you for sharing.

Casey @thecaseywoodard

I really enjoyed the course. It looks a million times better than my old testimonials did.

Jordan @jordnfk

This is awesome. You did an amazing job.

You can see more examples in action on tinydesignlessons.com, makerdesign.tools, tinyjar.com

Credit: Avatar images from randomuser.me

Widget method

Below is a screenshot of a gallery of tweets is built in Elfsight which can be embedded as a widget in Carrd. The benefit of this is that they take the content from live tweets but strip out any images. You also don't have to upload the avatars, and you can add the star rating.

See the live demo here.

It costs $5/mo to remove the Elfsight logo (get $15 off via my link).

Elfsight tweets gallery

SEO

Coming soon

Simple tips and best practice to improve your Carrd SEO.

Subscribe to the mailing list in the footer to be notified.

Hover effects

CSS animations are fairly easy to add in Carrd, using a little code and an Embed element. Find out how to implement this one on my tutorial page.

Mouse over the image below to see a CSS hover effect.

Analytics

I recommend Fathom Analytics for Carrd websites. It's simple, easy and privacy-focussed. More than anything it cuts through the noise you get with Google Analytics and just gives you simple, actionable data.

Get $10 off with my link.

Maker badge

To add a ‘made by’ or donations badge to your site, here are ways of doing this in Carrd (see below).

‘Made by’ version

This version is live in the bottom left corner of this site, and just links to a website of your choice. You can follow my tutorial to add it (it’s adapted from the code and setup suggested by @levelsio).

Donations version

For the version in the bottom right of this site, I used a tool called TinyJar.com. With this one you can list a number of to donate or support you.

(Note: I’m using the Pro version here)

Mobile menu

If you have a number of jump links, you’ll know the lack of a mobile menu in Carrd is frustrating. I’ve got one working in Carrd using code embeds. To see it working view my personal website on a mobile.

Find out how to implement this with my $5 tutorial.

Hero sections

These seamless, impactful sections are achievable using the native Carrd styling. Below are some example sections and the steps to achieve them.

  • Set a Container element to Full Width and add a background image.

  • Add your content, and adjust the Container margin/width to position it.

  • Note: you will need to make sure the Page element has Spacing set to 0.

Section heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Other tips

These are other people’s tips and resources I’ve found online.

Test page

This page exists only to test the mobile menu.
Hit the hamburger icon again to return to the main page.

Pricing table widget demo

Below is a demo of a pricing table built in Elfsight which can be embedded as a widget in Carrd.

It costs $5/mo to remove the Elfsight badge (get $15 off via my link).

Testimonials gallery widget demo

Below is a demo of a tweets gallery built in Elfsight which can be embedded as a widget in Carrd.

It costs $5/mo to remove the Elfsight badge (get $15 off via my link).

  • Create a Container element with 4 columns.

  • Add a Text element in the first column with your label.

  • Under Settings > Styles add this CSS to the element:

background-color: #b11c3c;
padding: 20px;
border-radius: 100px;

  • Duplicate the Text element into the other columns and change the CSS colour and text for each one, as needed.

  • Create a Container element with 4 columns.

  • Add a Text element in the first column, with a title.

  • Under Settings > Styles add this CSS to the element:

border-top-left-radius: .2rem;
border-top-right-radius: .2rem;
background: #d14422;
padding: 1rem .5rem;

  • Add another Text element under the first, with some content.

  • Under Settings > Styles add this CSS to the element:

border-bottom-left-radius: .2rem;
border-bottom-right-radius: .2rem;
background: #f1f1f1;
padding: 1rem .5rem;

  • Duplicate the pair of Text elements into the other columns and change the CSS colour and text for each one, as needed.

  • Note: you will need to make sure the Container element has Spacing set to 0.

Other tutorials

Recommended Carrd tutorials from other makers.

Build UI – Code Snippets

Build UI – Premium Package

Build UI – Complete Package

Components

Recommended Carrd components from other makers.

Complete Package

Premium Package

Essential Package

Templates

Recommended Carrd templates from other makers.

Templates

Recommended Carrd templates from other makers.

Services & Reference

Recommended Carrd services and reference sites from other makers.