How to add Gif in Carrd

By David Nge • Last Updated: November 21, 2022

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

Before you move on. 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 2 ways to add Gif 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.

It starts at just $9 a year (the cheapest of all website builders)! You can get it while Carrd still offers a massive 40% (Black Friday) discount on the paid plan.

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.

Add the Image element on Carrd
Add the Image element on Carrd

2. Upload a Gif

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

Upload an image
Upload an image

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

Pick your Gif
Pick your Gif!

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

Customize the Gif in appearance
Customize the Gif in appearance

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.

Drag and drop editor to customize gif
Drag and drop editor to customize gif

Click Done to save the Gif.

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

Preview Gif image
Preview Gif image

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.

Find the size and dimension info for your Gif
Find the size and dimension info for your Gif

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

Search on Giphy
Search on Giphy

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

Dog Gifs on Giphy
Dog Gifs on Giphy

2. Get the embed code

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

Click on the Gif embed
Click on the Gif embed

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

Copy the embed code
Copy the embed code

3. Add an Embed element

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

Add an embed element in Carrd
Add an embed element in Carrd

4. Paste the embed code

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

Paste the embed code
Paste the embed code

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

Customize the size of the Gif
Customize the size of the Gif 

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.

Publish the Carrd website to view Gif
Publish the Carrd website to view Gif 

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

Publish all changes on Carrd
Publish all changes on Carrd

Click View Site to view the fruits of your labor!

Preview Gif from Carrd code embed
Preview Gif from Carrd code embed