Creating sticky split screen sections in Squarespace

Sticky Split is an incredibly powerful interaction that keeps users interested and engaged in the content on your website.

Sticky split creates a split screen with 1 section that sticks to the screen while the other side continually scrolls. With SquareKicker, it’s easier now, more than ever, to make your websites stand out. To create this interaction you will first need to create your sections in Squarespace.

  • The first section will be your sticky section, then create as many additional sections that you want to include in the scrolling area of your interaction.

  • Open up the section tools on the first section of your sticky split group and click on the Advanced Tab. Sticky Split is a premium feature which is only available for websites on a Pro, Designer or Agency Plan.

  • To turn on Sticky Split, simply choose which side of the screen you would like your sticky section on. Once you have chosen a side you can then set the width of your sticky section.

  • Finally, select the number of sections you would like to include in your Sticky Split Interaction. This means that the Sticky Section will stay fixed in place until you scroll to the end of the last section in your sticky split group.

  • You don’t need to do any extra screen size settings for mobile devices as SquareKicker will automatically disable sticky split for your mobile screen. However, you can also adjust the width of your sticky section on laptop and tablet.

  • For more advanced designs, you can combine Squarespace’s background effects to create unique animations.

  • You can also combine SquareKicker’s section design settings such as creating split sections in the scrolling area. Head to the section layout tools of a section in the sticky split scrolling area and adjust the width of your sections to create a unique layout.

SquareKicker Premium Features are only available on a Pro Plan or higher.

Previous
Previous

Create account & installation

Next
Next

How to create horizontal scrolling sections in Squarespace