In this lesson we’re going to take the sitemap you created in the last Module and create the blank pages that make up your website. If you haven’t created your sitemap yet I would recommend taking 20 minutes to quickly sketch that out before you go any farther. There’s a worksheet back in Lesson 1.1 you can use to make it super simple!
Now that you have a good idea of what’s going where on the site, let’s get straight down to business and turn that sitemap into a real website!
First log into your Squarespace account using the info you set it up with, then choose the site you’re working on if you have more than one going. You can log in by going to www.squarespace.com or to the URL Squarespace sent you when you set up the site.
When you log-in you’ll see the home menu on the left hand side and a live preview of your site on the right. From this menu you could go to several different parts of the site, but for right now we’re going to focus on the Pages section.
Here you can see every page on the site and which Navigation area they’re in, or if they aren’t linked at all. You’ll notice there are one or two named Navigation areas, depending on what template you’re using, and one Not Linked section.
The very top section will be your primary site navigation, or site menu, which might show up in a different location of your site depending on the template. Pages added here will automatically display in your main menu. Most of the time you’ll see that at the top or left hand side of the site.
These may be the only two sections you see here, or you might have a Secondary Navigation and/or Footer Navigation section. Depending on your template this displays a menu in the footer of the website or displays a second menu somewhere towards the top of the page. If you don’t add any pages here these menus won’t display.
To delete a page here you can hover over the name of it and click the little trash can icon to the left. You can also change your page settings by hovering over the page name and clicking the gear icon to the right.
If you need to restore a page you’ve deleted you can click on the trash can icon below your pages and select the page to restore. This area will hold deleted pages for up to 30 days.
When you first create a new site Squarespace adds pages with sample content that showcase the theme’s layout. These pages are called Demo Pages, and you’ll be able to recognize one of them because it will say Demo beside it in the Pages list. When you try to edit a Demo Page or it’s settings a popup will appear warning you that this is a Demo Page and giving you the option to either delete it or create a page just like it.
Let’s start adding pages now with the main menu, which is listed as Main Navigation in the template I’m using. Your names may vary so experiment with the different menu sections to get a feel for where they show up in your template.
Start by clicking the plus sign beside your primary navigation section to add a new page, then select the page type you want to use. I’ll be using a standard Page for this walk-through.
Type the name of your new page in the Page Title box and click enter, or choose a sample page layout from the list and click Start Editing. If you aren’t sure what you want your page to look like the sample layouts are a great option, they’re set up so that all you have to do is replace the text and add any photos you want to use. Whether you start with a blank page or sample layout you can still add or remove content blocks to make it fit your needs.
Once you’ve added a new page don’t worry about adding content. Right now we’re just creating a skeleton layout for the site, so continue adding pages to go along with the sitemap you created. We’ll come back shortly and add content and design.
Designating a home page
Once your menu is set up you’ll need to set one of these pages as your new home page. You can do this by hovering over the page title, clicking the gear icon, and clicking the Set as Homepage button at the bottom of the Basic Settings.
If your main menu starts to get crowded you might want to bundle some of the items into submenus. You’ll do that using Folders. First, click the plus sign to add a new page to your primary navigation area and select Folder. Name your folder and hit enter. Keep in mind that your folder name is going to show up in your menu, so name it appropriately.
You can now add pages to this folder by either dragging and dropping existing pages into the dashed box underneath the folder name, or by clicking the Add Page link under the folder. Any pages you add here will show up in a drop down menu. The folder itself won’t open a new page, but when a visitor clicks it they’ll be able to go to the pages you’ve set up underneath it.
Using Index Pages
Index pages are available in certain templates as a way to display images and content from multiple different pages in a single destination. Index Pages will have one of three design styles, depending on your template:
The grid style pulls thumbnail images from each page or section you add to the Index and arranges them in a grid. This layout could be used to create a neat looking visual site navigation.
The stacked layout displays individual pages or sections vertically stacked on top of each other. This could be used as a nice home page or single page site.
The slideshow layout displays each page as a full-screen background image with the text content overlaid on top of it. The pages scroll like a slideshow, and clicking a page title opens the full page. This could be used to display different galleries or portfolios.
To add an Index Page click on the plus sign for your main navigation and choose Index as your page type if it’s supported. Note that your icon might look different than mine depending on the type of Index Pages your template supports.
How you add content to your Index depends on your template. You’ll see a plus sign below the Index Page title with something like Add Pages, Add Project, Add Gallery, Add Section, or Add Module. You can click on that to bring up the Create New Page menu, which will show you the different page types your template’s index supports. You may also be able to drag existing pages into the index the same way you can with folders.
If you have a stacked index page you can add and remove sections in the Manage Sections area, which you’ll see at the top when you hover over the index page on the right hand side of the screen.
You can reorder pages by dragging and dropping them just as you do the regular menu.
Not all Index Pages require that your pages use thumbnails, but it’s usually a good idea to add them. You can do that by hovering over the title of the page or section you want to edit and clicking the gear icon. Click the Media tab in the page settings and add a thumbnail image either by uploading from your own computer or purchasing a Getty image. There’s a list of great resources for free stock photos in the last Module of this course.
What should you include in your menu?
Depending on the quantity and type of pages you need on your site you might be able to include them all in the main menu. If you have more than 5-7 pages though, I recommend using submenus and
deciding what actually needs to be linked from the main navigation. At the very least though you’ll probably want the following in some form:
- Services or Products or Work With Me or some way for people to give you money if that’s what you’re about
Examples of things that shouldn’t be in the main menu:
- Individual project or portfolio pages. Use an index or folder for these, or create a portfolio page and add links to your individual projects there.
- Password protected pages. Generally these will be shared on an individual basis, such as sending an email with the password and link to your resource library to new email subscribers.
- Terms of service and legal notices. These can be linked from your footer or blog sidebar.
A few other things to keep in mind as you’re building your menu:
The Home menu item is optional. This one is a bit controversial, some designers still recommend having a menu item named Home, but my opinion is that’s kind of outdated. Having your site logo link to the homepage has become so commonplace now that also having a Home menu item is a waste of space in most cases. If you want it, include it, but don’t feel like you must. This doesn’t mean you delete your home page by the way, it just means you drag it into the Not Linked section in your Pages list.
This isn’t the place to be clever. Cleverness has it’s place for sure, but not here. Save it for the copy, baby. Your page names need to explain to someone who has never visited your site what they should expect when they get to that page. You don’t have to call your blog “Blog”, but make sure whatever term you use is widely understood among your target audience.
That’s it! You can include pages for your portfolio, your blog, frequently asked questions, or anything else you feel is important for visitors to have quick access to.
Finish adding pages to your site and when you’re done meet me in the next lesson where we’ll start adding content!