10 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.
There are two main techniques to make your businesses website more interactive for your sites visitors and future customers.
First option ; is to add some custom code to alter the appearance of different elements on your website. This of course is a great way to make your site a more visually striking but does require some coding knowledge.
Second option ; is to use some of Squarespace’s default build-in features. Which range from animations to image effect and so much more and the best part is that these require no-code!
“This wee guide we will show you 10 different no-code ways to make your Squarespace website more dynamic, with just a few click!”
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 & Individual 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 — Image Block Animations
When using a classic editor section or a blog page you can access image blocks that have predesigned layouts of inline, poster, card, overlap, collage and stack. These blocks will allow you to add an individual animation to the images.
-
After adding an image to an image block in a classic editor section, double-click the image to open its editor. Then:
Click Design, then click Animations.
Select an effect from the list to apply to the image and any text. As you select an option, a preview appears on the page.
-
None — No animation, even if there are site-wide animation settings
Site default — Block matches the site-wide animation settings
Fade in — Block fades in
Slide up — Block slides upward
Horizontal clip — Block loads in horizontal layers
Vertical clip — Block loads in vertical layers
Tilt up — Block zooms in with an upward tilt
Tilt down — Block zooms in with a downward tilt
Focus in — Block appears blurry, then comes into focus
Collide — Image and text slide inward from either side
Reveal — Image and text slide outward from the centre
Custom — Set animations for image and text independently
-
When using these classic editor image blocks you can also click Custom to animate both the image and text independently from each other.
04 — 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.
05 — 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.
06 — Blur / Frosted Glass Effect
Another way to make your website more dynamic and interesting for your visitors is to give the different text blocks on your website a frosted glass background effect. This is a new built in feature from Squarespace and we cant wait to experiment with it.
-
Click the text block, then click the style background icon to open the Style background panel.
To enable a this frosted glass effect switch the toggle to Blur.
Click the Blend mode dropdown menu to choose a transparency setting.
To blur either the Element or Backdrop, switch the toggle on beside Blur and use the slider to change the level of blurriness.
-
These effects are ideal if you're overlaying a text block in front of an image or other visual content.
07 — Scrolling banners
Add a horizontally moving stream of text to your page to capture visitors' attention.
Use scrolling blocks to add text that scrolls horizontally across the page, similar to a theater marquee or news ticker. This is a great option for adding visual flair to your text, or drawing visitors' eyes to important information.
-
Edit a page or post, click Add Block or an insert point, then click Scrolling. For help, visit Adding content with blocks.
Open the block editor by clicking the pencil icon on the block.
In the Content tab, add or edit text items.
To turn the scrolling block into a clickable link, add a web address in the Link field, or click “the to add different types of links. When visitors click the scrolling block, it takes them to the link you added.
Click Design to customise the block.
Scrolling Block
✸
Scrolling Block ✸
08 — promotional Pop up
Trigger a new subscribers form, share a discount, or make an announcement that appears when a visitor loads your site. You can create a pop-up that appears when visitors land on your site. These pop-ups are great for: Inviting visitors to join your mailing list, advertising a sale or announcing your latest new product.
-
Open the Promotional pop-up panel.
Choose a promotional pop-up layout.
Customise the pop-up's text, timing, and appearance using the Action, Content, Display & timing, Image, and Style settings. Review the table below for more details.
Switch the toggle on beside Display pop-up, then click Save.
To test your pop-up after you create it, visit your site in an incognito window.
-
Display pop-up — Switch the toggle on or off beside Display pop-up to enable or disable the pop-up, then click Save.
Change layout — Choose the size of the pop-up, and if it will cover the entire page or a small part of it. You can only add images to templates that include them.
Action — Choose if the pop-up will prompt visitors to sign up for a newsletter or click a button.
Content — Add text to the pop-up. Click the Headline and Body fields to add text, then click Save.
Display & timing — Choose when, where, and how often the pop-up will display.
Image — Add an image to the pop-up, if they layout you chose supports one.
Style — Style the pop-up to match your site's look and feel. Click an area of the pop-up to display only the style tweaks available for that area and hide the rest. Click Show all to see all available tweaks. The post-submit message follows the Body font and color tweaks.
09 — FAQs Accordions
Display large chunks of text in collapsible sections to help visitors navigate text-heavy content. Use accordion blocks to display text content in collapsible sections. This is a great option for structured, text-heavy pages like FAQs or product offerings. Accordion blocks help keep your page short and reduce scrolling for your visitors.
10 — 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>
