Building Your Website Structure

Learning Objectives

• Set up a clear website structure using Squarespace's layout tools
• Arrange page elements effectively using drag-and-drop features
• Ensure your layout works well on both desktop and mobile devices

Introduction

Your website's structure is the foundation that holds everything together. Think of it as the skeleton of your site – without a solid structure, even the best content can feel scattered and confusing to visitors.

In this chapter, you'll learn how to build a clear, logical website structure using Squarespace's layout tools. We'll cover everything from choosing the right starting template to arranging elements so your visitors can find what they need quickly.

Lessons

Choosing Your Foundation Template

Before you start building, you need a solid foundation. Squarespace's templates give you pre-built structures that you can customise to fit your needs.

Step 1: Log into your Squarespace account and click 'Templates' from the main menu.

Step 2: Browse the available options and look for templates that match your content needs, not just visual style.

Step 3: Consider how many pages you'll need and what type of content you'll be showcasing.

The key is picking a template that already has the basic structure you need. This saves you time and ensures your site feels cohesive from the start.

Organising Your Page Elements

Once you've chosen your template, it's time to arrange your content logically. Squarespace's drag-and-drop editor makes this straightforward.

Step 1: Click on any page element you want to move.

Step 2: Drag it to where you want it positioned on the page.

Step 3: Release to drop it in place.

Think about the order visitors will read your content. Important information should go at the top, with supporting details below. Your contact information and calls to action should be easy to spot.

Quick tip: Most people scan websites in a Z-pattern – top left, across the top, down diagonally, then across the bottom. Position your most important elements along this path.

Making Your Structure Mobile-Friendly

More than half your visitors will likely view your site on mobile devices, so your structure needs to work on small screens too.

Step 1: Switch to mobile preview mode by clicking the mobile icon in the editor.

Step 2: Check that your most important content is still visible and easy to tap.

Step 3: Adjust element sizes and spacing if needed for mobile viewing.

Step 4: Test your navigation menu – make sure it's easy to use with fingers, not just a mouse cursor.

Mobile screens are narrow, so content stacks vertically. Make sure your structure still makes sense when everything is in a single column.

Practice

Pick one page on your website and reorganise it using the drag-and-drop feature. Try moving your most important information to the top, then preview how it looks on both desktop and mobile. Notice how the change affects the flow of information.

FAQs

Can I change my template after I've started building?
Yes, but you'll need to rebuild your customisations. It's worth switching early if your current template isn't working for your structure needs.

What if I want a completely custom layout?
Squarespace templates are your starting point, but you can customise them significantly. For completely unique structures, you might need to add custom code or consider a different platform.

How do I know if my structure is working?
Ask someone unfamiliar with your site to find specific information on it. If they struggle, your structure might need simplifying.

Jargon Buster

Template: A pre-designed website layout that you can customise with your own content and styling.

Drag-and-drop: A way to move elements on your page by clicking, holding, and moving them to a new position.

Mobile-responsive: A design that automatically adjusts to look good on different screen sizes, from phones to desktop computers.

Navigation: The menu system that helps visitors move around your website.

Wrap-up

You now know how to build a solid website structure using Squarespace's tools. Remember, good structure is about making it easy for your visitors to find what they need. Start with a template that fits your content needs, arrange elements in logical order, and always check how everything looks on mobile devices.

Your website structure is the foundation everything else builds on, so take time to get it right. In the next chapter, we'll look at how to add and organise your actual content within this structure.

Ready to build your own Squarespace website? Get started with a free trial at https://squarespace.syuh.net/pixelhaze