How to create horizontal scrolling sections in Squarespace

Horizontal Scrolling is an advanced interaction that creates a more memorable experience by fully engaging users on your websites. When scrolling up and down on your site, actually scrolls left to right (or) right to left depending on your settings. 

• To create this effect you will need to have a least 2 or more sections that we will group together. Go to your first section of this group and open up the SquareKicker Section Tools.

• Click on the Advanced Tab. Horizontal Scrolling is a Premium Feature, which are limited to only websites on Pro, Designer or an Agency SquareKicker Plan as well as Free Trial.

• When you enable Horizontal scrolling, SquareKicker will immediately group together the current section and include the following section to your new horizontal scrolling track.

• You can include more sections to your track by dragging the slider or entering in your own number of sections.

• By default horizontal scrolling, scrolls left to right while you are actually scrolling up and down your site. You can also reverse this scroll interaction so your section scroll right to left instead.

• The Fluid toggle makes the first and last section of your track flow in and out of screen view. When you enable fluid, you also presented the option to create a custom color to the background of the empty space.

• One of our favorite options is the Fixed Background option. This assigns the background image of your 1st section to the entire track while all your content scrolls horizontally.

• You don’t need any extra screen size settings for mobile devices. Because it doesn’t feel natural to scroll this way on a mobile device, SquareKicker automatically removes horizontal scrolling for mobile size screens.

• Horizontal Scrolling also works for presets so if you are using this often throughout your site, you can share these settings, along with all your design changes for this section elsewhere on your site.

  With only 1 click, SquareKicker empowers you with the ability to create powerful interactions that otherwise would only be possible with adding time-consuming and complicated code.

Get your crab on and try some Horizontal Scrolling today 🦀