8 Quick and Easy Ways To Add Movement to Your Squarespace Website

Your website is your calling card, and adding some subtle motion is a great way to take it from "meh" to "oh yeah!"

Well planned out blitheness tin can give your site that actress little "somethin'-somethin'" that tin keep your page from looking like a stock template.

Here are viii quick and easy ways to add motion to your Squarespace site.

Plow on Parallax

Parallax is a great built-in feature on Brine family in Squarespace 7.0. When you add the parallax issue to your website, it appears equally if the content of a page/section moves independently over the background image. Using this event can piece of work well with elementary sections like a newsletter sign up. I recommend that you don't use this feature on more than complex pages because it tin wind up competing with your content.

Parallax is not a built-in feature of Squarespace seven.1 templates (yet). And then if you are edifice in 7.1 and want to add together this, endeavor out this tutorial from Schwartz-Edmisten Pattern.


Utilize the born animation on image blocks

Last year Squarespace added an blitheness function to all of their image blocks…woohoo! You tin can access all of these options by simply choosing the animation tab on the prototype block settings.

Pro-Tip: Use this feature sparingly. Adding too much image blitheness can exist distracting to the eye. So I wouldn't apply information technology more than than once per page.


Add a GIF to your Website

GIFs can be a fun and like shooting fish in a barrel way to inject a little personality into your website. They are great for blog posts. And did you know you tin even use a GIF equally a background image on an index page?

Use a petty CSS to Create Some Button Animation

Custom CSS doesn't have to be intimidating. With Squarespace, fun CSS customization tin be as elementary equally copy and pasting some code into the custom CSS section of the Design tab.

Here are links to a couple of my fave free button over animation codes.

Motility Over Button Animation from Ghost Plugins.

Modify Push Cover on Hover from Thirty-Eight Visuals.

Underline Button on Hover from Within The Square.


Add together a Full Page Pop-Up

I know. I know. Pop-ups can be abrasive. Just when done right and when they include useful information that your visitors want, they tin be a fantastic mode to highlight essential info or a promotion on your site.


Squarespace has some lovely pup-upwards templates to choose from that you can customize for your needs. To access them, but go to Marketing>Promotional Popular-Upwardly.


Add a Video Background

Adding a video background to an index page is a easy. Simply go click on BANNER and so the video tab. Adding the video is as simple equally copy and pasting a link to the Vimeo, YouTube, or Wistia video you like.

Pro-tip #i: If yous have access to the original video file, I suggest uploading it to Vimeo or Wistia to avoid having the YouTube suggested videos pop upwardly on your website.


Pro-tip #ii: When using videos either as background images or embedded somewhere on your site, be sure to add the Mobile Fallback Image. Your video may not show on mobile devices. Calculation a fallback image volition ensure that y'all can control what the blueprint will await like on mobile phones.

Create a Full-Width Gallery Slider

This is some other useful built-in feature of Squarespace that allows you to display content in a more interesting and dynamic fashion. I often apply this feature as a style to add some visual involvement to a monochrome site.

To create this feature, simply add together a Gallery page to an index. Add photos and text to each image and stylize your slider in the style editor.


Turn a Boring Static Prototype into a Mini Gallery

Sure static images are fine. Actually, they are pretty necessary for almost websites. Only that doesn't mean you can add a piffling more involvement past using a Gallery cake to add together some movement.

To recreate the upshot beneath, add together a gallery cake and cull the slideshow option on the Design tab. Once you've done that, tick the "Automatically Transition Between Slides" box and gear up the animation's timing using the slider.

Demand aid writing the perfect tagline for your website?

Click beneath to become my free guide,
"3 Steps to Writing a Money-Making Tagline"