How To Create a Single Page Website in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Promoting a lead magnet? 🧲 Having a big sale? 💸 Or maybe all you want is a simple site one-page site with a single URL? 🔗
Those are all great reasons to need a one-page website, and in this tutorial, I’ll teach you how to create one in Squarespace. 😎
Here is the basic concept we are going to create in Squarespace:
We’ll use page sections to create sections of content.
We’ll add anchor links to the top of each section.
We’ll use simple text and buttons at the top of this page to link to each of those sections.
Then, we’ll use code to create a smooth scroll and remove the header and footer so this page can work independently of the other content your Squarespace website.
Be sure to watch the video below, before you grab the codes I’m using & links to related resources.
Video tutorial
Code Example
Here are the codes I used to create each anchor, create the smooth scroll effect, and hide the header and footer if you don’t want to use the links in your main navigation.
Anchor Links
Add this as a code block to the top of each section you want to link to. Change the word anchor to the text you want to link to. Don’t include spaces and don’t repeat yourself!
Pro tip: to link to a gallery or a list section, add a code block to the bottom of a page section directly above it.
<div id=”anchor”></div>
Smooth Scroll Effect
Add this code to your first anchor link or to the page header code injection:
<style> html {
scroll-behavior: smooth;
}
</style>
Hide the Header and Footer
Add this code to your first anchor link or to the page header code injection:
<style> header, #footer-sections {
display: none!important
}
</style>
