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 one section that sticks to the screen while the other side continually scrolls. With SquareKicker its now easier to make your websites stand out. First, create your sections in Squarespace.

  • The first section will be your sticky section, then create any 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 to find Sticky Split.

  • 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.

Previous
Previous

Overlapping blocks & images with Squarespace Classic Editor & Blogs

Next
Next

How to create horizontal scrolling sections in Squarespace