Building Your Website Structure on Squarespace

Learning Objectives

• Add and organise pages on your Squarespace site
• Create clear navigation menus that guide visitors
• Ensure your website works well on mobile devices

Introduction

A well-structured website helps visitors find what they need quickly. Good navigation reduces bounce rates and keeps people engaged with your content. In this chapter, you'll learn how to add pages and create navigation that works for your audience.

Lessons

Lesson 1: Adding and Arranging Pages

Squarespace makes adding new pages straightforward:

Step 1: Log into your Squarespace account and go to the Pages panel.

Step 2: Click the "+" icon to add a new page.

Step 3: Choose your page type:

• Layout pages for standard content
• Blog pages for regular posts
• Store pages for selling products
• Gallery pages for showcasing images

Step 4: Give your page a clear title and start adding content with the drag-and-drop editor.

Step 5: Preview your page on different devices using the device preview options.

The order of pages in your Pages panel determines how they appear in your navigation menu. You can drag and drop pages to reorder them at any time.

Lesson 2: Creating Clear Navigation

Your navigation menu is like a roadmap for your website. Here's how to structure it effectively:

Step 1: In the Pages panel, drag pages into the order that makes sense for your visitors.

Step 2: Create folders for dropdown menus by clicking the "+" button and selecting "Folder".

Step 3: Name your folder something descriptive like "Services" or "About Us".

Step 4: Drag related pages into the folder. These will appear as dropdown options in your navigation.

Step 5: Keep your main navigation to 5-7 items maximum. Too many options can overwhelm visitors.

Most people scan navigation from left to right, so put your most important pages first. Your contact information should be easy to find, typically in the top right corner.

Lesson 3: Making Your Site Mobile-Friendly

More than half of web traffic comes from mobile devices, so your site must work well on phones and tablets:

Step 1: Use the mobile preview in your editor to see how pages look on smaller screens.

Step 2: Check that text is readable without zooming in.

Step 3: Ensure buttons and links are easy to tap with a finger.

Step 4: Test your navigation menu on mobile – it should be simple to open and use.

Step 5: Keep loading times fast by optimising images and avoiding heavy content.

Squarespace templates are responsive by default, but you should still check how your content displays on different screen sizes.

Practice

Take 10 minutes to reorganise your navigation menu. Try moving your most important page to the first position. Create a folder for related pages and test how the dropdown menu works on both desktop and mobile.

Ask yourself: Can a first-time visitor find what they're looking for in three clicks or less?

FAQs

How can I reorder my pages on Squarespace?
Drag and drop pages within the Pages panel. The order here determines how they appear in your navigation menu.

Can I create dropdown menus in the navigation bar?
Yes, create a folder in your Pages panel and drag related pages into it. This creates a dropdown menu on your live site.

Do all Squarespace templates support multi-level navigation?
Most templates support at least one level of dropdown menus. Some support deeper nesting, but it's best to keep navigation simple for better user experience.

How many pages should I have in my main navigation?
Aim for 5-7 main navigation items. If you need more, use dropdown menus to group related pages together.

Can I hide pages from my navigation menu?
Yes, you can disable pages in navigation while keeping them live on your site. This is useful for landing pages or pages you only want to share via direct links.

Jargon Buster

Nested Navigation: A menu structure where pages are organised in levels, with sub-pages grouped under main pages.

Dropdown Menus: Menus that expand to show additional options when you hover over or click a main navigation item.

Mobile Responsiveness: When a website automatically adjusts its layout and content to work well on different screen sizes.

Pages Panel: The area in your Squarespace admin where you manage all your site's pages and navigation structure.

Wrap-up

Good website structure makes the difference between visitors staying and leaving. Focus on creating logical navigation that helps people find information quickly. Test your site on different devices and ask others to try navigating it.

In the next chapter, we'll look at adding and formatting content that engages your visitors and encourages them to take action.

Ready to take your Squarespace skills further? Join our membership for more detailed tutorials and expert support: https://www.pixelhaze.academy/membership