5 No-Code ways to make your Squarespace website more dynamic!
A dynamic Squarespace website is essential for capturing and retaining visitor attention in today's digital landscape. By integrating interactive and engaging elements, you can create a more immersive experience that encourages users to explore your content further.
A static site may lead to high bounce rates and low engagement, but by making your website more dynamic, you can showcase your brand's personality and creativity. This not only enhances user satisfaction but also improves SEO performance, ensuring your site stands out in search rankings. Ultimately, a vibrant, functional website is key to driving conversions and building lasting relationships with your audience.
In this wee guide we will show you how to make your website more dynamic by using Squarepace’s built-in functions.
01 — Site Wide Animations
The first and simplest way, is to add site wide loading animation to your Squarespace website. This can be done by heading to your sites style panel, where you can manage the style settings that appear across your entire site.
-
Open the Animations panel.
Click an animation style.
Choose a Slow, Medium, or Fast animation speed.
Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
-
Fade — Content fades in as it comes into view on the page.
Scale — Content animates from a smaller size to its final size, creating a zoom effect.
Slide — Content slides upward, accentuating the effect of scrolling down the page.
Clip — Slides in line by line from the left.
Flex — Adds unique animations to headings, linked text, buttons, and portfolio pages.
-
Slow
Medium
Fast
-
Our favourite at Och & Aye is Flex as it gives all the buttons on the website an interactive animation, which we love. If you want to learn how to create the same button animation using a wee snippet of code, check out this how-to-guide here.
02 — Background Image Effects
This is a relatively new feature for Squarespace 7.1 and our wee team is just loving it! After adding a background image or an individual image block, you can add an effect. To give your image a more interactive and dynamic look, the classic favourite effect is parallax.
-
1 — First add a background image to a section, then click on Edit Section.
2 — In the Background tab, scroll down to Image effect.
3 — Now you can choose an effect from the menu.
4 — To customise the effect, click the settings icon to open the details panel.
-
After adding an image to an image block in a Fluid Engine section, double-click the image to open its editor. Then:
Click Design, then click Image effect.
Choose an effect from the menu. Any changes you make to the effect will appear in your site preview.
Click Save to save your changes and keep editing, or click Exit then Save to close the editor.
-
None — No effect, aside from image overlay setting
Liquid — Gives image a rippling effect
Film grain — Adds an animated static overlay to the image
Parallax — Image moves as visitors scroll
Refracted lines — Refracts image through a pattern of straight lines
Refracted circles — Refracts image through a pattern of circles
-
Scroll through the options and settings until you find a style you like.
Click any category to expand the drop-down menu and reveal more options.
Depending on the type of image effect, you can edit the size, shape, direction, motion etc.
We recommend going through each effect to get a better sense of what it looks like and how it works for your site.
03 — Fixed/Pinned Blocks
Pin one or more blocks in Fluid Engine sections to keep them stationary/fixed while your visitors scroll through other content in the section. This is a great way to highlight specific content and give your page a unique dynamic design.
-
Click the block, then click the pin icon in the block's toolbar. Any block type can be pinned.
By default, pinned blocks are set to align with the top of the section. Alternatively, you can click the corresponding icons for align center or align bottom.
Use the Offset slider to change the distance between the pinned block and the browser border, between 0px and 50px. For example, a pinned block aligned to the top at 0px will stay at the edge of the browser when the visitor scrolls.
-
Pinned blocks only stay pinned in their section. If your section doesn't have enough content or is very short, the pinned effect may not be visible.
Blocks pinned in the computer layout won't be pinned in the mobile layout, and vice versa.
Pinned blocks is only supported in the new fluid editor.
For page loading speed Squarespace recommends adding no more than 60 blocks, pinned or not, per page.
04 — Art Backgrounds
Add unique background art generated specifically for your site. You can choose from several options when styling your site’s background. This guide reviews how to create unique background art using colours, patterns, and shapes that are generated in the Squarespace platform.
Choose an animated pattern for a lively look, or a more subtle gradient. Use a preset pattern, or customize it by setting specific shapes, sizes, and motions.
-
Open the Pages panel and click the page with the section you want to edit.
n the top-left corner, click Edit.
Click the section's pencil icon, then click Background.
Click Art, then click a tile to preview the art in the section. The colors are pulled from the Bright options in your color palette.
For variations on the design, click one of the small circles that appears over the tile.
To customize the art, click the settings icon to open the details panel. To learn more, visit the section below.
Set the Background Width by selecting Full Bleed or Inset.
When you find the design you like, click Save to save your changes and keep editing, or click Exit and then Save to close the editor.
-
Surface
Conic
Bohek
Images
Contours
Gradient I
Gradient II
Shapes
Isometric
-
You can customise your background art in the details panel. To open the details panel, click an art thumbnail, then click the settings icon.
Scroll through the options and settings until you find a pattern you like. Click any category to expand the drop-down menu and reveal more options. Depending on the type of background art you're starting with, different categories appear.
05 — Image on Hover (Portfolio Pages)
Portfolio pages
Some portfolio page layouts support hover effects. From the portfolio page editor, choose one of the following layouts:
-
Open the Pages panel, then click + next to the navigation section where you want to add the page.
In the menu, click Portfolio and choose a layout. You can change this later.
Enter a page title and press Enter.
Click Edit, then click the pencil icon to style the section.
Click + to add a sub-page or click an existing sub-page, then click Edit to add your own content.
Add and edit more sub-pages until your portfolio page is complete.
-
To change the layout:
Click Edit on the portfolio page.
Hover over the portfolio section and click the pencil icon.
Under the Format tab, use the Layout drop-down menu to select the layout you want. Each layout has its own styling options.
-
Some portfolio page layouts support hover effects. From the portfolio page editor, choose one of the following layouts:
Hover: Background - Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page featured image replaces the section background.
Hover: Fixed - Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page featured image displays smaller in a fixed position in the section.
Hover: Follow Cursor - Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page featured image displays smaller and follows the cursor as it moves.
-
<!-- Stop Portfolio Link Click --> <script> function disablePortfolioLinks(sectionId) { var links = [].slice.call(document.querySelectorAll(sectionId)); links.forEach(function (l) { l.removeAttribute('href') }); } disablePortfolioLinks('.portfolio-hover-item'); </script>
