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:
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!
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.
Click the + button on the top right and select the Image element.
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 ;)
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.
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.
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.
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.
Head over to the Carrd editor and add an Embed element.
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!