How to create one-page navigation in squarespace
Sometimes having a one-page website for your business is all you need. Short and sweet. Give your visitors what they are looking for at first glance.
The great thing about starting with a one-page website is, you can easily expand to a multi-page website later on, as your business grows.
One-page websites are great for solo entrepreneurs and coaches that simply want to tell about their skills and their services with a call to action at the end. If your website is more straight to the point and you don’t have a ton of content, there is really no reason for you to switch from page to page for this information.
Start with an about section, a services section, and a contact section, and maybe some other odds and ends. It’s as simple as that!
So now that you have decided to go for a one-page website, you might be wondering how exactly to create a navigation bar that keeps you on the same page and will scroll down to the section you are looking for. This is a great way to create a great user experience for your visitor.
One thing that is very important in web design, is making it easy for your visitor to find exactly what they need and fast.
If your visitor is looking for something specific on your website (something that should be easy to find) but they are getting lost in your content and confusing navigation, they are going to leave your site and move on with their day. I know it’s harsh but it's true! This is why there is a navigation bar and buttons.
Great user experience design is predicting where your visitor wants to go next and making it easy for them to get there.
Even when you only have a one page website, easy navigation is still important. Create navigation that will take them to exactly what they are looking for so they don’t have to scroll down, scroll up, scroll to the middle, scroll to the left, and scroll to the right, to find what they are looking for. In other words, you don’t want your visitors doing a scroll version of the Cha -Cha Slide. It should be like teleportation. They see a button for what they want to find at the top of the page, the click of a button and they are there.
Luckily, I’m here to show you exactly how to create a one-page navigation bar in Squarespace.
First, You will want to choose the right template. Here is a list of templates that are great for implementing one-page navigation. Any template in the Brine family will work because it utilizes index pages. Index pages are essentially the sections within your website that you can treat as separate pages. Perfect for creating one-page navigation! Here are 5 templates that are set up specifically for one-page websites. In this tutorial, I will be using the Sofia template.
Once you have the template installed, the first thing you'll want to do is hide the navigation bar. The navigation bar that is built into the Squarespace template will direct you to a new page so we want to just scratch that one and create your own navigation bar. to do this you will go under Design > Site Styles > Hide Navigation. This specific template happens to have both primary navigation and secondary navigation.
Next, you are going to go out of the Design Panel and under Pages, which is where you can customize which sections to have on your page. You will see the pages that are already there, correspond with the sections on the page. So you can either rename them, or delete them and create your own. For this tutorial, since we are treating the sections as pages, I will refer to them as such. To rename a page, click on the little gear icon on the right of the page name.
When renaming the page, it is very important that you rename the URL slug to match. The URL slug is what will tell the navigation button to scroll down to that section when you click it. The URL slug is not only important for functionality of a one-page navigation but also SEO!
Once you have your pages organized and named correctly to correspond with the page sections, it’s time to create the navigation bar. Start by clicking to edit your page.
Once you are in edit mode, it is as easy as creating a text box. In the text box, you will want to add the name of each section on your page that you would like to be able to click to scroll to. When adding the page names just give the names a few spaces in between to make it look like a normal navigation bar.
Now to make the nav bar functional, you will want to link each page name to the corresponding section. To do so, just highlight the page name.
Now for the most important step! Remember how I said to remember the name of the URL slug? This is where the magic happens. Once you have the link prompt open, you will want to link the section by adding #urlslug. It is important that you do not include the “/” of URL slug, just include the name after the hashtag. If you named all the URL slugs the same as the page names, then this part will be a piece of cake. just highlight each page name and link to #pagename.
You have officially created your very own one-page navigation bar! Once you have all the links working correctly, feel free to go back to site styles to stylize your navigation bar however you’d like! Note that you can also create these same links with buttons instead of text.
Are you feeling like you’d rather have someone design your one-page website for you? Don’t worry, I got you covered! Click the button below to learn more about a custom one-page website!
