One of the most popular questions about Squarespace is, “Does Squarespace support gifs?”
The quick answer is, “Yes.”
Squarespace does support gifs. According to Squarespace.com, you can add gifs anywhere on your Squarespace website that allows images. This includes image blocks in your website page or blog post. You simply select a section of your site, click on “add image,” and upload your gif.
It’s super easy to create a gif and upload it on Squarespace. In fact, a complete beginner can easily create an animated gif and upload it onto Squarespace in a matter of minutes. I know. I didn’t have a clue how to do it before researching this article.
I tried to find a good YouTube video on the topic, but failed to find one exactly about using gifs (so I created one).
In this article, I’m going to walk you through exactly how to create a gif and upload it onto Squarespace. The complete process is free and fast—and, yes, I’ve added the video to this article to show you exactly how it’s done.
What is a Gif on Squarespace?
A gif is an animated image with no sound that automatically repeats on a loop. You can upload an animated gif as your logo, animated text, or an animated image to enhance your website page or blog post.
You can add a gif into Squarespace the same way you add an image. I’m going to show you the quickest way I figured out how to do it. If I can do it, I know you can!
Where Can You Add Gifs on Your Squarespace Site?
You can add gifs anywhere on your Squarespace site that you can add images, including image blocks.
Ok, but where specifically can I add animated gifs?
- Image Blocks
- Gallery Blocks
- Gallery Pages
- Cover Pages
- Portfolio Pages
- Portfolio Subpages
- Background of your site
- Gallery sections
What is the Best Squarespace Template for Gifs?
If you’re looking for the best Squarespace template, look no further. I’ve done the research for you so you can invest time in building out your site, not endlessly scrolling through biased review websites.
Some websites give you ten or twenty templates to consider. I’m going to give you my one best recommendation, and I’m not an affiliate for the template, so I get nothing from recommending it.
What’s the best Squarespace template for gifs?
The best Squarespace template for gifs is Brine. The Brine template family is the most versatile and customizable template with features like parallax scrolling, stacked index pages, expansive mobile design options, and the ability to add any content block above banners.
The specific Brine template you choose will be intensely personal. Any template in the Brine family is good.
Here are a few awesome resources to help you choose:
- Brine Family Template features (a detailed deep dive from Squarespace itself)
- Brine Family Template Index (makes it super easy to browse for your favorite Brine template)
Word of caution: Don’t get stuck in the template research phase. Give yourself 15-30 minutes tops on a timer to look through a few options. At the end of the time, stop researching and pick one of your favorites. It doesn’t have to be perfect.
You can always change it later.
How To Make a Gif for Free
Here is a 5-minute video example of how to create a gif and add it to Squarespace:
My favorite way to make an animated gif is by using Canva.com. There is a completely free version of Canva, so just sign up for an account (affiliate link). Canva might prompt you to purchase the paid version of the site, but you don’t need it to make animated gifs.
The video above walks you visually through the process, so I will write out the simple steps:
- Start from the Home page of Canva.
- Click on the purple “Create a Design” button in the top right corner of the Home page.
- Click the + “custom size” button at the bottom of the search pop-up box.
- Enter 800 X 400 into the size parameter boxes.
- Click the purple “Create new design” button.
- You’ll end up on a page where you can start creating and editing your gif.
- Click on the Elements icon on the left side of the page (this opens a search box for elements).
- Type “gif” into the search box at the top.
- Click enter.
- Scroll down the list of elements until your find a gif that you want (You might have to scroll for a minute to find the animated gifs.
- Click on the gif that you want to transfer the gif from search to the large editing space that fills most of your screen.
- Once the gif shows in large on your Canva screen, then edit it to your liking.
- When you finish editing your gif, click on the grey “Download” button in the top right corner of your screen.
- Be sure to choose the “gif” file type from the list of options.
- Click the purple “Download” button.
Once you go through these steps, Canva will download your gif to your computer (or device). Simply locate your download on your device.
For me, all of my downloaded Canva images, videos, and animated gifs automatically go to the download folder on my desktop computer. Unless you manually changed where files download on your device, check your download folder. Your gif is probably there.
You can also make gifs for free on Gify.com
The only thing left to do now is to upload your gif to Squarespace.
How To Add Animated Gifs to Your Squarespace Site
I taught myself how to add animated gifs to my example Squarespace site in under five minutes. Therefore, I don’t think you will have any trouble at all. I shared my quick video tutorial on how to do it earlier in this article, so now I’m going to share the simple steps in text format.
Does Squarespace support gifs? Yes! And here is exactly how to add them to your site.
Note: you first must make or save a gif to your computer for this process.
The simple way to add gifs to your Squarespace website:
- Log into your Squarespace website.
- Go to Pages (should be on the left-hand side navigation options).
- Go to Blog.
- Click on “edit” in the top right-hand corner of the blog post.
- Click on “Add section”.
- Click on the pencil icon to edit the section.
- Choose the “background” tab.
- Click on “add image”.
- Choose the gif from your computer.
- Click “open”.
There you have it! Your gif will automatically load into Squarespace. Easy, right!?
How To Make a Gif Responsive in Squarespace
There are lots of ways to make a gif responsive in Squarespace.
Squarespace continually updates so they do most of the heavy lifting for you. It’s very likely that all you will have to do is upload your gifs into any location that accepts images, including image blocks. There is actually a built-in animation option for image blocks.
However, in some cases, it might involve adding a static image plus some CSS code.
Don’t worry if you have no idea how to do CSS. You can always ask for help in the Squarespace forums or—as a last resort—hire a cheap computer expert on Fiverr to do it for you for $5.
Here are a few links to help you make some of your gifs responsive:
- How to add a logo that animates when a user rolls their cursor over it.
- Button animation
- Background animation
5 Great Tips for Using Gifs on Squarespace
Now, let’s quickly look at some great tips for using gifs on Squarespace:
- Don’t use too many gifs
- Use gifs strategically
- Compres the size of your gifs
- Use gifs on your course or the product page
- Keep the end-user in mind
Too many gifs can slow down your site, creating sluggish load times, and a bad customer experience. So limit the number of gifs you use on your Squarespace site.
When you do use gifs, use them strategically. Don’t add them unless they serve a very specific purpose. Ask yourself clear questions to see if gifs are necessary. Questions can help you decide if a gif is the best fit for what you want to accomplish on your site.
Ask questions like:
- What’s the best feature to add to this page or blog post?
- What will a gif accomplish that a static image won’t?
Before uploading gifs, compress them with free tools like EZgif to optimize them for your site. This will reduce the file size and, therefore, the impact on your site speed. Other free online tools include Gif Compressor and Free Convert.
One neat way to use gifs is on your course or products page. Square Sylist is a great example of how to use gifs to illustrate what potential customers will learn from your products. Notice how they leverage the movement of gifs to help you visualize what you get out of the course.
Finally, always keep the end user in mind (that’s the website visitor). If a gif enhances their experience, go for it. If a gif reduces their experience, skip it.
Thanks for reading my article!
If you built a Squarespace site to make passive (or active) blogging income, check out my detailed review of my favorite resource, the Passive Income Geek Course. It’s the only program I use and the only one I recommend.
Here are a few other articles on blogging you might like: