Take your Carrd websites to the next level

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

Part of the Starrt resources collection

Bundle includes

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 🔥

Marco @MarcoSpoerl

I said it before and I'm happy to say it again: these extras are lifesavers.

Shop widgets

You can add a shop to a Carrd page with third party widgets.

Ecwid

One option is the widget from Ecwid.com.

Note: The shop below is a test version only, no orders will be fulfilled.

Countdown timer

Carrd does have a countdown timer, but its design stylings are very limited. Add a variety of more visual ones with a widget from Elfsight.

Each costs $5/mo (you’ll get $15 off a yearly subscription via my link).

YouTube gallery

You can easily add a YouTube gallery to a Carrd page with a widget from Elfsight.

Each costs $5/mo (you’ll get $15 off a yearly subscription via my link).

Other widgets

There are lots of other functions you can add to a Carrd page with widgets from Elfsight. Browse the list below.

Each costs $5/mo (you’ll get $15 off a yearly subscription via my link).


Logo gallery widget

You can easily add a slick logo gallery to a Carrd page with a widget from Elfsight.

Cost: $5/mo (you’ll get $15 off a yearly subscription via my link).

Instagram gallery

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

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

Colored boxes

Adding a bit of fun to your design can be hard when there’s no native way to add colored 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 bundle.

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.

Find out how to create styles 1 & 2 in our tutorial bundle.

Style 3

Colored or tinted boxes, with content, using native Carrd tools.
Find out how in this tutorial.

Style 4

Colored or tinted boxes, with content, with rounded corners.
This requires a bit of code. Find out how in this tutorial.

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

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

Cost: $5/mo (you’ll get $15 off a yearly subscription via my link).

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

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.

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

Paper corners

With a little CSS you can add these paper style corners to an element. Find out how to implement this one on my tutorial page.

SEO

Want to know how to set up your Carrd site for good SEO? This is a guide to the content tweaks and settings changes that will help.

Get the guide as part of my tutorial bundle.

Get just the SEO guide only.

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.

Find out more on this page, or register with Fathom and 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’ badge (corner sticky)

This version is like a tab in the corner of your website and 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).

‘Made by’ badge (corner floating)

This version is like a software Made By badge, and floats in the corner of your website. It links to your Twitter handle only. Go to freakingmagical.com to get the embed code.

Donations version

For a version where you can list a number of places to donate or support you, use a tool called TinyJar.com.

Mobile menu

If you have a number of jump links, you’ll know the lack of a mobile menu in Carrd is frustrating. However there are some ways around this.

Carrd version

There is a technique to create a mobile responsive navigation menu using only Carrd features, no custom code required.

Find out how to implement it with this tutorial on Starrt.

Widget version

To create a more custom menu on mobile, you’ll need to use a coded technique. Jason’s plugins has a widget you can purchase.

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.


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

Elfsight pricing table

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

Elfsight tweets gallery
  • 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.