How to Create Branded Animated Backgrounds in Squarespace 7.1
Running a small business is about so much more than just selling products or services. It's about sharing your story, your passion, and your unique flair with the world.
That's where having a personality-packed website comes into play, and let us tell you, it's a total game-changer for small businesses looking to make an impact! Your website isn't just an online storefront; it's your digital personality, your brand's voice, and your opportunity to stand and make deep emotional connections with your customers.
Imagine walking into a shop that instantly resonates with you, where every corner exudes the essence of the brand. Well, that's precisely what a personality-packed website does in the digital world.
It's like having a virtual storefront that's decked out in your brand's colors, fonts, and style. From the moment visitors land on your page, they'll be immersed in an experience that's uniquely and deliciously you. Your website's design, visuals, and even the way you tell your story create a memorable journey for your audience, building strong connections that last.
Let's face it – the digital landscape is bustling, and standing out can be a real challenge. That's where making the most of your distinctive brand personality comes to the rescue!
A personality-packed website isn't just about aesthetics; it's about infusing every pixel with your brand's unique vibe & spirit. Whether it's a quirky animation like we’ll be working on today, or a heartfelt behind-the-scenes story, these elements make your website unforgettable. And in the fast-scrolling world of the internet, being unforgettable is half the battle won.
What are Squarespace animated backgrounds?
With the recent release of Squarespace 7.1, Squarespace website users are now able to create unique animated backgrounds for any section of their website. Using the ‘background art’ setting, you are able to create unique background art for your page sections using your brand colours, patterns, and shapes - and it’s as simple as adding images or videos!
You are free to choose an animated pattern for a lively, fun look or opt for a more subtle gradient. There are hundreds of preset patterns for you to use or you can go fully custom by setting specific shapes, sizes, and motions.
How to add animated background art to a section of your Squarespace website
There’s a video at the top of the post if you’re more of a visual learner.
Open the Pages panel in your Squarespace account and click the page with the section you’d like to add an animated background to.
In the top-left corner of your page, click Edit to enter edit mode.
In the top right of the section you’d like to edit, click the pencil icon that says ‘EDIT SECTION’, then click Background in the top tabs.
Click Art, then click a tile to preview the animated background in that section. The colours will be automatically pulled from the ‘Bright’ colour theme of your Squarespace website, but we can edit these later.
Use the arrows icon beneath the art tile to randomise the design, or take control of the editing process using the edit settings icon next to it.
Click the edit settings icon and adjust the colours of the animated background to match your brand colours. Select colours from your existing palette or use different colours by selecting ‘custom’.
Set the width of the animated background by selecting ‘Full Bleed’ which will make the animation full width, or ‘Inset’ which will create a border.
When you’ve found the design you like, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
How to create a custom branded animation to use as the background of your Squarespace website section
There’s a video at the top of the post if you’re more of a visual learner.
As we did before, open the Pages panel in your Squarespace account and click the page with the section you’d like to add an animated background to.
In the top-left corner of your page, click Edit to enter edit mode.
In the top right of the section you’d like to edit, click the pencil icon that says ‘EDIT SECTION’, then click Background in the top tabs.
Click Art, then click the ‘Images’ tile - it will look like lots of the same shape over a block colour background.
Click ‘edit setting’ underneath the pattern preview, then at the top, select ‘custom image’.
Upload a branded image like your logo, piece of a brand pattern or icon. Make sure it’s saved as a transparent png in the colour that you’d like to use it.
Make sure the image tint is set to white, and set the background to whatever colour you would like that section to be.
Adjust the size of the images used using the scale options. Click the 3 dots to the right of the S M L options to gain greater control of the size.
Adjust the number of images using the slider to make it as busy/sparse as you like.
In the filter option, select ‘none’ and make sure the pattern colour is set to white.
Toggle ‘wave’ on or off, and adjust the level of movement using the slider options below.
Once you’re finished with this design, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
Building a connection with your audience is the heart of every small business, and your website is the ultimate tool for this mission. A personality-packed website doesn't just engage; it captivates, resonates, and converts.
When visitors are able to see themselves reflected in your brand's personality through unique designs like animated backgrounds, they're more likely to stay, explore, and ultimately become loyal customers. Showing off your personality is like inviting customers into your world, giving them a glimpse of what you're all about, and making them excited to be a part of your small business journey.
So there you have it, babe – the magic of animated backgrounds for a personality-packed website. Web design is not just about pixels and code; it's about infusing your digital presence with the same passion and charm that drives your small business.
Love this Squarespace design post? Here’s more like it!
Unlock the secrets to SEO success on your Squarespace site with our latest insights. Discover the power of a well-structured site, the impact of high-quality content, the art of keyword optimisation, the advantages of Squarespace's SEO tools, and the crucial role of quality backlinks. Dive into our blog for essential tips that will transform your site's search engine performance and elevate your online presence.