3 Easy Ways to Create Movement in your Squarespace website (Without Using Code)
3 easy ways to create movement in your Squarespace site
(Without Using Code)
Over here at Carbon and Clay, we love how easy Squarespace makes it to build out a great-looking website for designers and non-designers. However, in a world where it can be easy for everyone’s Squarespace website to look really similar. How do you make your Squarespace website stand out?
How do you get a professional and strategic squarespace website when you're on a DIY budget?
The websites that really stand out are the ones that have that extra touch. Today we are going to show you 3 ways to add uniqueness and interest to your website with animation! And no, we won’t be using any code to do it either. :)
1. You can easily create movement in your Squarespace website using parallax
One of the most simple things that can be done to add movement to your squarespace website is turning on your parallax setting if you are in Squarespace 7.0, or adjusting your background image settings in Squarespace 7.1.
What is parallax?
Parallax is an effect that takes your background images on your website sections and creates a scrolling effect as if the background is moving, instead of staying still.
How to Turn Parallax on in your Squarespace 7.0 Site
To turn on the Parallax effect in your 7.0 website:
Log in to your Squarespace account
Click on your website you want to turn on parallax to
Go to Settings
Click on Site Styles
Go to Designs
Search “parallax”
Toggle on Enable Parallax
Now scroll your site page and watch the cool movement happening to the background images of your website sections!
Note: Not all Squarespace 7.0 templates have a parallax setting. This is why we love the Brine family.
How to Turn Parallax on in your Squarespace 7.1 Site
When Squarespace came out with 7.1, they took away site-wide parallax but added some other effects that you can turn on for each section within your Squarespace website.
To create a parallax effect on one particular section, you will need to:
Navigate to PAGES and click on the page you would like to adjust
Click on “edit” at the top left corner of that particular page
Scroll to the section you want the parallax effect in
Click on the edit icon in the top right corner of the section
Click on the “background” tab
Click to upload a background
While still in the background tab, scroll all the way down and click “image effect” and a dropdown box will appear. You can select any of the options and see how they look while scrolling up and down on your site.
Do our Squarespace website templates use parallax scrolling?
Some of our templates have Parallax scrolling automatically built in. But if you love the parallax look, any of our Squarespace templates in our shop can easily be customized to turn this setting on (or off) by following the steps above.
NEED SOME MORE DESIGN HELP WITH YOUR WEBSITE?
Grab our top 5 favorite web layouts that you can easily steal for your own website
2. Create Movement in your Squarespace Website Using Image Animation
Instead of having stagnant images on your website, try turning on some image animation. This is so easy in Squarespace and only takes a few clicks! It really adds some fun for the user experiencing your website and keeps the scrolling engaging.
How to turn on image animation
Double click on the image you want to animate or click “EDIT” on the image block
Go to the design tab at the top of the pop-up that appears
Click on “Animation”
Select the animation effect you want that image to have out of the options that appear. (You will be able to see the animation as you click through the choices.)
Image animation can be used on all image blocks, not just plain inline images. This includes image cards, image posters, image overlaps, etc.
A few tips about using animations on images.
Don’t go overboard. If you have an image-heavy page on your site, every image does not need a completely different animation style. Use them in a way to add emphasis where you want to.
Some of our favorite animations are “slide up”, “tilt up” and “tilt down”. Some of the animations can look outdated in my opinion.
Remember, keeping it subtle is almost always more classy.
3. Create Movement in your Squarespace Website Using Image Slideshows
One of our favorite tricks to use in our templates and custom client’s websites are image slideshows. You would think that this sounds super boring and not needed unless you are presenting images of your portfolio or products on your site but, think again. We use the slideshow in a different kind of way to add a bit of fun movement to your site. These are fun to use on your about page with 2-3 images of you. There are all sorts of things you can do with image slideshows. Be creative!
How to Create an Image Slideshow
As you can see here we have a rotating few images of some of our previous custom website designs for clients. Instead of having them as 2 still images, the automatic moving slideshow creates some interest to this page.
Create an gallery block where you want your slideshow
Upload the images you want to rotate out. (We don’t recommend more than 3-4.)
Go to the design tab in the gallery pop-up
Click Slideshow
Toggle on Automatically Transition Between Slides
Set it to 2 seconds between autoplay transitions (you can make adjust this to your needs)
Toggle off everything except Transparent background.
Hit Apply
Now what?
If you’re struggling with your website and want a highly dynamic and easily customizable Squarespace website, our Squarespace template shop is the place to start. Each template is created to look unique, creative, and professional. Each template can also be easily customized to add your own brand colors, fonts, images and words. We even give you the copywriting blueprint you need to quickly write your words and LAUNCH your site… in as little as 5 days!
View our template shop to view all of our Squarespace template options.+
