Take your Carrd websites to the next level
Tutorials & tips to easily add extra design styles & useful functions to your sites
Visual tricks
Functionality
Resources
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
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.
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.

Casey @thecaseywoodard
I really enjoyed the course. It looks a million times better than my old testimonials did.
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).
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).

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.

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).
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.
Components
Recommended Carrd components from other makers.
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.