How to add Gif in Carrd

In this article I'll show you really simple ways you can add animated Gifs to your Carrd website.

Before you continue, if you need Carrd website inspirations, here are 28 Carrd website (hand-picked) examples. From K-pop fan pages, personal portfolio website, marketing landing pages, to simple one page business websites. There's something for everyone.

Alright. With that out of the way.

There are two ways to add GIFs to a Carrd website:

1. Add Gif as an image — If you want to customize the GIF.
2. Add Gif as a code embed — If you want to save time adding a GIF.

Note that code embed is a premium Carrd feature.

If you find yourself creating more than a handful of Carrd websites then the paid plan offers tremendous value.

Now let's get on with the tutorial.

Warning: Cute doggo GIFs incoming!

How to add a Gif as an image

The first method is to add a Gif as an image. Carrd allows you to easily add a Gif image directly to your site.

Use this method if you need more control over how your Gif will look. For example, if you want to customize its shape and size, or add a shadow or border to your Gif.

1. Add a new image element

Click the + button on the top right and select the Image element.

2. Upload a Gif

You will see the image element editor pull out from the left. Click Upload.

Then select a Gif file from your computer or phone and it will appear in the main editor.

You can customize the Gif by heading over to the appearance tab.

Carrd has made it incredibly easy to customize the Gif's size, shape, corner rounding, shadow, and even its border with just a drag-and-drop slider.

Click Done to save the Gif.

You now have a perfectly cute doggo Gif to show off ;)

3. Find the right Gif

If you're looking for a free resource to download Gif. Then Giphy is the best place for it.

Tip: Carrd has a upload limit of 16mb so make sure you check the size of the Gif file before you download.

How to add a Gif as a code embed

The second method is to add a Gif as a code embed. So instead of manually uploading a Gif file from your computer, you add a piece of code that automatically load a Gif from other websites (e.g. Giphy).

Note: With this method you will see a non-removable link to Giphy underneath the Gif.

1. Find a Gif from Giphy

Head over to Giphy.com and search for a Gif you like. If you need inspiration then "dog" is always a good start :)

Once you've found a Gif, click the Gif image.

2. Get the embed code

Click Embed and you will see a pop up with the embed code.

Click Copy Code to copy the embed code which you need to paste into Carrd later.

3. Add an Embed element

Head over to the Carrd editor and add an Embed element.

4. Paste the embed code

Paste the embed code that you copied from Giphy into the Code field.

Tip: You can customize the size of the Gif by editing the width and height.

Click Done to save the embed code.

Note that you won't see the Gif in the main editor. To view the Gif you have to first publish the Carrd website.

Fill in the details of your Carrd website and click Publish or Publish Changes.

Click View Site to view the fruits of your labor!

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.