Create horizontal scrolling sections on Squarespace
Does your Squarespace website encourage visitors to keep scrolling below the fold and through all your important content? Creating web pages that are dynamic, full of interesting movement and visually engaging content, will inspire visitors to explore your site fully. A layout that provides a clear sense of direction will ensure they don’t become frustrated and add to your bounce rate which negatively effects your SEO. The careful and creative arrangement of your Squarespace sections will shape the user experience on your site, increasing dwell time.
Horizontal scrolling sections is a unique and captivating way to showcase important content on your site. Try it today with a SquareKicker 14 day free trial and add some wow to your Squarespace sections!
What is horizontal scrolling?
Horizontal scrolling is the motion of navigating web content in a left to right direction, rather than up and down (or vertically). The user continues to move through the web page but rather than travelling down, scrolling takes the user horizontally for a designated number of sections. This easy technique can be customized in so many ways with SquareKicker. Assign two or more sections that will be scrolled horizontally and style them to work together as a series or a slideshow. Have fun playing with this dramatic effect!
You only need to apply horizontal scrolling to a few sections - it's most effective when nestled among vertical scrolling sections. The sudden change of motion to horizontal will grab your visitors’ attention and keep them on your site.
5 ways to use horizontal scrolling on Squarespace?
Break up long pages or longer pieces of content. If your Squarespace site has a lot of information to share, many products, or numerous sections, adding horizontal scrolling can break up the monotony of a continuous vertical scroll. Horizontal scroll will add some interest and change the pace and feel of the site, keeping your visitors engaged.
Separate out unique content. If you’d like a particular aspect of the page to really stand out, or if there’s content that is distinctively different, you can highlight or emphasise this by arranging it in several sections that use horizontal scrolling.
Showcase products or other visual content with a gallery. A simple gallery block slideshow can be a fast way to make a basic display of images, but if you want full control over the design of your layout and creative freedom to add other content, then arrange your images in sections with horizontal scrolling. Use horizontal scrolling to make a modern and elevated slideshow.
Tell a story. We’re used to scrolling through the web vertically. Horizontal scrolling adds an element of surprise and makes your website stand out from the crowd. Horizontal scrolling tells a story as the sections are clearly linked together (you can enhance this by enabling a fixed background that will apply to all sections). Scrolling left to right establishes a connection to the way we read offline which brings a storytelling element to your site. If you’re not sure where to use horizontal scrolling, look for an aspect of your website that works as a series. It could be a series of images or related content. Tell a story with horizontal scrolling.
Add movement and bring your website to life. No more boring websites! Modern websites that capture attention are full of movement, animation, and interactivity. Along with hover state, scrolling effects, sticky split, and other design elements, horizontal scrolling is just one more way that you can bring your site alive and make it exciting to explore.
How do I turn on horizontal scrolling with SquareKicker?
To create this effect you will need at least two Squarespace sections to group together.
Select the Squarespace section that will start horizontal scroll
Click the SquareKicker icon
Head to the Advanced tab
Select Horizontal Scrolling from the menu
Toggle Enable
Select the number of sections you want to include.
Click Apply to save your design changes.
There are several ways you can customize your horizontal scrolling sections and make them even more interactive and engaging. Watch our full tutorial to see these effects in action and for horizontal scrolling inspiration! It’s time to design exciting, animated sections on your Squarespace website!
