Benefits of a One-pager Website in Squarespace + How to Make One in 7.0 and 7.1! [UPDATED 2023]
Welcome to another installment of our Squarespace tips and tricks! In today's guide, we're diving into the world of one-pager websites, perfect for Squarespace newcomers.
Let's cut to the chase and explore the benefits of one-pagers and how to create them in Squarespace 7.0 and 7.1.
FOR YOU NOT TO GET LOST:
What Exactly Are One-Pager Websites?
A single-page website, also known as a one-page website, is one that only has one HTML page. It means that almost 90% of the content is on your main page.
Imagine one-pager websites like an article fitted in a whole page of a newspaper. All the information and the details are there. There’s no need to have a second page because space is enough to cover all the essential elements.
Basically, single-page websites are perfect for people who are just starting out in building websites. It’s less hassle since you won’t need to customize 6+ pages, just only one.
Here’s a example of our one-pager Squarespace template:
5 reasons why one-pager websites are the real deal!
PERFECT FOR NEWBIES
Suppose you’ve checked out our designer templates. In that case, you can see that it’s perfect for photographers, event designers, and artists to showcase their works online. Think of one-pager websites as the professional portfolio you can show your clients for quick viewing. This makes it perfect for newbies who still want an online presence even though there is not much content to share.
These single-page websites simplify the process, sparing you the complexity of dealing with multiple pages. This simplicity not only saves time but also ensures a clean, easily navigable site for both you and your visitors.
2. IMPROVED VISITOR ENGAGEMENT
In today's fast-paced digital landscape, capturing a visitor's attention is a challenging task. Did you know that 55% of your visitors only read your website for only 15 seconds? I know, the attention span of each of us gets shorter every time!
Suppose your desired information is strategically condensed in your one-page website. In that case, you can more likely deliver the message within that 15 seconds attention span. Also, one-pagers aim to reduce clutter and lets the users focus on your homepage. For inspiration, you can check these 21 Beautiful Examples of Single Page Websites.
Additionally, one-page websites offer a smoother user experience by eliminating the need for page refreshes, enhancing visitor engagement and satisfaction.
3. MOBILE-FRIENDLY
Mobile devices and one-pager websites bond perfectly! One-pagers are greatly optimized with mobile devices making the load speed lower and continuous flow easier. It’s perfect for a hassle-free experience. Imagine social media that we use to enjoy scrolling for hours without interruption; it’s the same with single-page websites. No more worrying about jumping to another page from here to there.
More straightforward navigation + scrolling = happy visitors, yay!
4. CHEAPER AND EASIER TO MAINTAIN
Building and maintaining a website can be time-consuming and expensive. However, with one-pagers, you get the best of both worlds. Creating a one-page website typically takes just one to two days, compared to the potentially weeks or months required for multi-page sites. The maintenance is equally hassle-free since you're dealing with a single page. This streamlined approach not only saves you time but also reduces maintenance costs, making it an economical choice for individuals and small businesses looking to establish an online presence without breaking the bank.
5. HIGHER CONVERSION RATES
Conversion rates are a vital metric for the success of your online presence. One-page websites often outperform multi-page counterparts in this aspect. The simplicity and focus of a one-pager direct all site traffic to a single location, enhancing the likelihood of conversions. Visitors are guided seamlessly through your content, making it easier for them to take the desired actions, whether it's signing up, making a purchase, or contacting you. If you're looking to boost your online conversion rates, one-pager websites are a strategic choice to consider.
The basics of how to build a one-pager in Squarespace 7.0 and 7.1.
IN SQUARESPACE 7.0
We really recommend using the 7.1 version of Squarespace; you can read here why. All you need to know about Squarespace 7.0 vs. 7.1 But, of course, I got you all! So for those that prefer 7.0, here’s how to make a single-page website.
Build a New Index Page
Go to Pages > Not Linked.
Create a new Index Page and name it.
Add sections as needed.
Customize the appearance using Site Styles.
Implement scrolling functionality.
Naming Each Index Section
Edit each section and navigate to the Pages Tab.
Click the Gear Icon and edit the URL slugs, using dashes for multiple words.
Add your top navigation once all sections are named.
Adding Your Top Navigation
Go to Pages > Primary Navigation.
Click the plus sign to add a link.
Name the link and use the "#URLslug" of the section you want to link to.
Ensure you don't use quotation marks.
Clicking on the link should now scroll to the respective section.
Set Your Homepage
Make your page the homepage by clicking the gear icon next to the page title and selecting "Set as homepage."
That's it for Squarespace 7.0!
IN SQUARESPACE 7.1
The method is almost the same for the latest version of Squarespace.
BUILD A NEW PAGE
First, build a new page by going to Pages > Not Linked > Give a title.
Add sections to that page by navigating to the editing window > clicking the + sign.
You can now add pages as much as you want.
Also, you can add your content and style it.
CODE INJECTION TO NAME EACH SECTION
There’s a tiny code you need to do but bear with me. It’s super easy!
Navigate at the top of each section > click insert point > add code block
Remove the demo piece code and replace it with <a name="about"></a>.
In the quotation marks, name each section you're making like “hire us” and “about”.
This is a website hack (not a nasty hack!) that enables your website to know which place to scroll to when a visitor clicks a link at the top.
Repeat the code naming injection for each section of your page.
MAKING A LINK FOR YOUR HEADER
After, you’ll need to make a link for your header.
Pages Tab > Not Linked > + sign > name the link.
For the destination, insert #nameofsection. Similar to each code you injected earlier.
When all of your links are at the top, they should all jump to their respective places.
SET UP YOUR HOME PAGE
Same as 7.0, to set your page as the Home page, click the gear icon > set as homepage
PRO TIP: To make your page have that smooth scroll follow these easy steps:
Navigate to Design Tab > Custom CSS
Insert this code:
html {
scroll-behavior: smooth;
}
BONUS: FAQ
Ta-da! You’ll now have that website with a smooth scrolling experience, yay!
In summary, one-pager websites in Squarespace are a versatile and powerful tool for a wide range of online endeavors. Whether you're new to web development or an established business looking for a streamlined online presence, one-pagers offer a simple and effective solution. They serve as a professional portfolio-like platform that caters to beginners while allowing ample room for expansion.
These single-page wonders excel in engaging visitors with their strategic content organization and mobile-friendliness. They are cost-effective and low maintenance, making them an ideal choice for individuals and small businesses. Furthermore, their ability to drive higher conversion rates by focusing all site traffic on a single page is a compelling reason to consider one-pagers. So, don't hesitate to explore the world of one-pagers in Squarespace and leverage their simplicity, engagement, and conversion potential for your online success. Happy one-paging!
LEARN MORE!
What is a Squarespace Template? and Who is it for? + Debunking Myths about Designer Templates!
How to Connect your Domain to Squarespace in Less than 10 Minutes
8 Facts Why Your Business Needs a Website - No, Instagram and Facebook isn't Enough
5 Reasons Why you need an Instagram “Link in bio” page + How to create one in Squarespace!
Bonus content!
This is a sign to take a breath and take a step back away. Yes, you’ve read it right; I know some of you are still hesitating whether to have a website or not. And there’s nothing wrong with weighing your options before deciding, especially if it’s a big decision. That’s okay, don’t pressure yourself. Establishing a brand is really a long process, and it doesn’t happen overnight. So be kind to yourself and take a rest from time to time.
If you liked this post, Pin it to Pinterest!
For more information, visit Squarespace.com.