Squarespace is a website building platform that anyone can use to create a gorgeous website - without needing to code (unless you want to, that is 😎 ). There are dozens of stunning templates to choose from, all of which are entirely mobile-friendly and easily customizable.
As a Squarespace web design expert, my clients rely on me to elevate their template and make it entirely customized for their business. I love digging into the Custom CSS Editor of every website I design and playing with Page Header Code Injection to make each page a unique experience. But one of my all-time favorite ways to take Squarespace websites to the next level is with animated SVG elements. And when it comes to designing an SVG animation, it doesn’t get any easier than SVGator.
So if you’re a Squarespace nerd like me and you want to learn how to add SVG animations to every part of your website, keep on reading or watch the video guides and follow along! You can also use these general tips adapted to add SVG animation to any other website building platform.
Whether you are a designer that loves to work at home on his side projects or a digital marketer wanting to learn more about Squarespace, this article is for you!
Table of Contents:
- How to add SVG animations to Squarespace
- How to add an animated SVG logo to your Squarespace website
- How to add an animated SVG background to your buttons
- How to add an animated SVG background to your Squarespace website
How to add SVG animations to Squarespace
The Code Block Method
The only official way to add an SVGator file to a section of your page is within a code block. The code block method is perfect for scenarios such as:
- Adding icons that you want users to engage with
- SVGator allows you to set animations on hover, click, and scroll into view. - Adding illustrations that compliment the Squarespace blocks near them
- SVGator has options to set animations to loop forever or just a few times.
Code blocks, just like other blocks on Squarespace, are drag-and-drop elements that you add to build your page or section. Blocks can be stacked on top of one another, placed next to each other, or even sandwiched between other blocks in order to create columns on your page.
Your SVGator animation will be housed inside of your code block. If your code block isn’t next to another block, your animation will span the entire width of the content area on your page. But don’t forget that you will still be able to target it with CSS so that it is positioned & sized to your liking (and for the necessary mobile breakpoints). Ok, let’s get started!
Preparing the SVGator file
After creating and exporting your file in SVGator, open the file using a program like NotePad (for PC), TextEdit (for Mac). Alternatively, you could get real fancy like me and use a text editor such as Brackets. Opening the file in one of these programs will show the code of your SVGator animation – but don’t freak out! Just SELECT ALL and COPY to your clipboard.
Squarespace Code Block with SVG Animation
After adding your code block to the page and section of your Squarespace website, PASTE the code you copied from the text editor into the code block, then click SAVE. That’s it!
✔️ Expert tip
Wrap your SVG Animation in a div so that you can target it with CSS to adjust the size! This will allow you to define rules like how tall the animation should be on desktop vs. mobile.
But what if you want to add your SVGator animations to other parts of your Squarespace website? With a little bit of CSS, you can add SVG in more places than you realized. Here, I’ll show ya!
How to add an animated SVG logo to your Squarespace website
There are only three accepted file formats when you add a logo to your Squarespace website: .jpg, .gif, and .png. These options get the job done, but they don’t have the crisp lines that SVG files offer. And if you’re going to go through the work of adding your SVG logo to the header, why not make it animate on hover?
Exporting your animated SVG logo from SVGator:
Keep the following in mind when preparing and exporting your files in SVGator:
- SVG format: Static
Export a static (non-animated) version of your logo in addition to the animated version. If you don't have one, you can create it with ease using an online logo maker. The static SVG file is what people will see before they hover over the logo. It is important to export your animated file as a static file so that it is the exact dimensions of the animated version. Learn more about SVGator export options here. - Export Options & Browser Compatibility
You will need to export your SVGator files with the Animation type set to CSS only, and with an infinite loop. You must select CSS only in order for the hover effect to work, but make sure to consider browser compatibility with your animation styles as some are not compatible with all browsers.
How to upload SVG files to Squarespace
Now that your SVGator files have been exported into the correct format, it is time to upload them to Squarespace. In the home menu of your Squarespace website, click Pages and scroll down to the Not Linked section, and click the plus sign. Instead of adding a page, click Link. You will be uploading your files in the link editor.
- In the link editor, click the gear icon in the URL field.
- Click the File tab.
- Click Upload File and select your static (non-animated) SVG logo to upload.
- After uploading, click the file in the list. A checkmark appears beside the file name.
- Click Save, and you see the URL of the file (it will most likely start with /s/)
- Copy and paste the full URL somewhere handy, such as in NotePad (for PC), or TextEdit (for Mac). You will need this URL in some CSS code shortly.
- Repeat these steps for the animated SVG logo file, and then paste the URL in the same handy place.
Custom CSS for Squarespace animated SVG logo on hover
You are now ready for the easy part: CSS! Depending on which version of Squarespace template you are using (7.0 or 7.1), you will use slightly different CSS. To see which version you are using, log into your site and click Help in the left panel. If you're on version 7.0, you'll also see your site's template. Head over to your Custom CSS Editor (In the Home Menu, click Design, then click Custom CSS).
7.1 CSS
.header-title {
width:100%;
height:100%;
background-image:url(INSERT STATIC URL HERE);
background-size:contain;
max-width: 270px; //change this to whatever size you would like, just make it match the hover
background-repeat: no-repeat;}
.header-title:hover {
width:100%;
height:100%;
background-image:url(INSERT ANIMATED URL HERE);
background-size:contain;
max-width: 270px; //change this to whatever size you would like, just make it match the static
background-repeat: no-repeat;}
.header-title-logo {
opacity: 0;}
7.0 CSS
.Header-branding {
width:100%;
height:100%;
background-image:url(INSERT STATIC URL HERE);
background-size:contain;
max-width: 270px; //change this to whatever size you would like, just make it match the hover
background-repeat: no-repeat;}
.Header-branding:hover {
width:100%;
height:100%;
background-image:url(INSERT ANIMATED URL HERE);
background-size:contain;
max-width: 270px; //change this to whatever size you would like, just make it match the static
background-repeat: no-repeat;}
.Header-branding-logo {
opacity: 0;}
Click save, and your logo now animates on hover! You can adjust the max-width to adjust the size to your liking.
✔️ Expert tip
You can add additional CSS, such as transitions or even add styles specifically for mobile to make an even more customized experience.
How to add an animated SVG background to your buttons
When styling your buttons on Squarespace, you can define the size, font, whether it has a solid background or if it is just a border outline, and even the shape of the border. But when it comes to the hover effects of these buttons, you’re left with the built-in-blah fade effect. Thanks to SVGator, we can take this up another level with an animation that shows on button hover 😎
Preparing the SVGator file
Just like the steps on your animated SVG logo, you will want to create an animation in SVGator and export so that it loops infinitely as a CSS file. Remember to note the types of animation effects that work with CSS-only files by referring to the SVGator compatibility table.
How to upload SVG files to Squarespace
With your SVGator file has been exported into the correct format, it is time to upload it to Squarespace. In the home menu of your Squarespace website, click Pages and scroll down to the Not Linked section, and click the plus sign. Instead of adding a page, click Link. You will be uploading your file in the link editor.
- In the link editor, click the gear icon in the URL field.
- Click the File tab.
- Click Upload File and select your SVGator file to upload.
- After uploading, click the file in the list. A checkmark appears beside the file name.
- Click Save, and you see the URL of the file (it will most likely start with /s/)
- Copy and paste the full URL somewhere handy, such as in NotePad (for PC), or TextEdit (for Mac). You will need this URL in the next step.
Custom CSS for animated SVG button hover effect on Squarespace
Time for a little CSS. Depending on which buttons you want to target, you will have slightly different code to use. The key is to find the correct CSS ID and class selectors.
For this example, we will be targeting medium size buttons, but you can pick any or all button classes.
The class for medium buttons is different in both Squarespace: 7.0 and Squarespace 7.1. To see which version of Squarespace you are using, log into your site and click Help in the left panel. If you're on version 7.0, you'll also see your site's template. Now head on over to your Custom CSS Editor (In the Home Menu, click Design, then click Custom CSS).
Head over to your Custom CSS Editor (In the Home Menu, click Design, then click Custom CSS) and add your CSS as follows:
7.1 CSS
.sqs-block-button .sqs-block-button-element--medium:hover{
background: url(INSERT SVGator FILE URL HERE) no-repeat;
background-size: cover;
opacity:1 !important;
7.0 CSS
.sqs-block-button-element--medium.sqs-block-button-element:hover{
background: url(INSERT SVGator FILE URL HERE) no-repeat;
opacity:1 !important;
background-size: cover;}
Click save, and your button now animates on hover!
✔️ Expert tip
You can replace the medium button class with the ID of just one button, image block buttons, or even the buttons in your navigation menu.
How to add an animated SVG background to your Squarespace website
Squarespace allows users to add an image, video, or a color background to your sections & banners. If you want to add some movement to the background, SVGator has you covered.
Exporting your animated SVG background from SVGator:
Keep the following in mind when preparing and exporting your files in SVGator:
- Animation Styles
You need to consider browser compatibility with your animation as some animation options are not compatible with all browsers as CSS-only (such as Morph, Move on curved path, or filter animations. - Export Options & Browser Compatibility
You will need to export your SVGator files with the Animation type set to CSS only, and with an infinite loop. Learn more about SVGator export options here.
How to upload SVG files to Squarespace
Now that your SVGator file has been exported into the correct format, it is time to upload it to Squarespace. In the home menu of your Squarespace website, click Pages and scroll down to the Not Linked section, and click the plus sign. Instead of adding a page, click Link. You will be uploading your file in the link editor.
- In the link editor, click the gear icon in the URL field.
- Click the File tab.
- Click Upload File and select your SVGator file to upload.
- After uploading, click the file in the list. A checkmark appears beside the file name.
- Click Save, and you see the URL of the file (it will most likely start with /s/)
- Copy and paste the full URL somewhere handy, such as in NotePad (for PC), or TextEdit (for Mac). You will need this URL in the next step.
Custom CSS for animated SVG background on Squarespace
Code time! Depending on which section/banner background you want to target, you will have slightly different code to use. The key is to find the correct CSS ID for the banner or section you are trying to target. If you’re using Google Chrome, you can open Inspect Element. Or you can save yourself some time and use this Chrome Extension to find the Squarespace ID of any section you need.
Section ID In Squarespace 7.1
The section ID will be in a format like this:
data-section-id="61ec3318dd3bd571875db2ab"Page ID In Squarespace 7.0
Your CSS ID will be different depending on the type of page you are trying to target.
-
Index Page backgrounds
Just use the URL slug of the page you want to add the background to.
- example: #new-page -
The banner intro of pages (overlayed onto the banner image)
Grab the data-parallax-id
- example: data-parallax-id="61ec3318dd3bd571875db2ab"
Now let’s head on over to your Custom CSS Editor (In the Home Menu, click Design, then click Custom CSS) and let’s add the code, but replace the section ID/page slug, and URL of your SVGator file:
7.1 CSS
section[data-section-id="INSERT PAGE ID HERE"] .section-background{
background:url(INSERT SVGator FILE URL HERE);
background-repeat:no-repeat;
background-position:center;
background-size:cover;}7.0 CSS for Index Page Backgrounds
#URL-SLUG-HERE{
background-image:url(INSERT SVGator FILE URL HERE);
background-repeat:no-repeat;
background-position:center;
background-size:cover;}7.0 CSS for Banner Intro of Pages (animation overlaid onto banner image)
[data-parallax-id="INSERT PAGE ID HERE"] {
background-image:url(INSERT SVGator FILE URL HERE);
background-repeat:no-repeat;
background-position:center;
background-size:cover;}Click save, and your background now has SVG animation!
✔️ Expert tip
You can play with the background-repeat, background-size & background-position to get your animation placed where you want it in relation to the other blocks on the page. You can also use media queries to use different animations or different positions on smaller screen sizes.
How to add an animated SVG background to Image Blocks on Squarespace
Squarespace Image Blocks are incredibly versatile, customizable, and are available in 6 different layouts: Inline, Poster, Card, Overlap, Collage, Stack. All Image blocks have the option to add images in .jpg, .png, or .gif format. With the exception of the Inline layout, you can add a title, subtitle, and a button to go along with the image. We’ve already reviewed how to add SVG animations to the button hover effect, but there are additional customization options if you add SVG animations to the image block such as:
- Behind the image itself
- If your image is a PNG with a transparent background, you will see more of your animation - Behind an entirely empty PNG image
- If your image is a blank PNG, you will see your entire animation
Exporting your animated SVG background from SVGator:
Keep the following in mind when preparing and exporting your files in SVGator:
- Animation Styles
You need to consider browser compatibility with your animation as some animation options are not compatible with all browsers as CSS-only (such as Morph, Move on curved path, or filter animations. - Export Options & Browser Compatibility
You will need to export your SVGator files with the Animation type set to CSS only, and with an infinite loop. Learn more about SVGator export options here.
How to upload SVG files to Squarespace
Now that your SVGator file has been exported into the correct format, it is time to upload it to Squarespace. In the home menu of your Squarespace website, click Pages and scroll down to the Not Linked section, and click the plus sign. Instead of adding a page, click Link. You will be uploading your file in the link editor.
- In the link editor, click the gear icon in the URL field.
- Click the File tab.
- Click Upload File and select your SVGator file to upload.
- After uploading, click the file in the list. A checkmark appears beside the file name.
- Click Save, and you see the URL of the file (it will most likely start with /s/)
- Copy and paste the full URL somewhere handy, such as in NotePad (for PC), or TextEdit (for Mac). You will need this URL in the next step.
Custom CSS for animated SVG background on Squarespace Image Blocks
Code time! Depending on which type of image block you want to target or if it is just one particular image block, you will have slightly different code to use. The key is to find the correct CSS ID or class you are trying to target. If you’re using Google Chrome, you can open Inspect Element to find this. Or you can save yourself some time and use this Chrome Extension to find the Squarespace ID of any image block you need and the class to go along with it.
One particular Image block ID
The block ID will be in a format like this: #block-0a82d21a3a0b0f185e38
Image blocks layout classes
The class will change depending on the type of layout:
- Poster: .sqs-block-image .design-layout-poster
- Card: .sqs-block-image .design-layout-card
- Overlap: .sqs-block-image .design-layout-overlap
- Collage: .sqs-block-image .design-layout-collage
- Stack: .sqs-block-image .design-layout-stack
Now let’s head on over to your Custom CSS Editor (In the Home Menu, click Design, then click Custom CSS) and let’s add the code, but replace the ID’s and URL of your SVGator file:
The CSS
#block-BLOCK-ID-HERE .sqs-block-image .design-layout-stack{
background:url(INSERT SVGator FILE URL HERE);
background-size:cover;
background-position:center;
background-repeat: no-repeat;}Using SVGator with Squarespace
Both SVGator and Squarespace have an incredibly user-friendly interface that allows anyone to design without experience. But the combination of the two on a website is pure magic. I can’t wait to see more Squarespace websites using SVG animations created in SVGator 🤓
If you need a Squarespace expert in your corner or ideas on how to bring SVG animation into your Squarespace website, I’d love to discuss that with you.
 |
| |||||||
