Lesson 2: Adding a Page + Creating a Grid
Now it's time to start adding your pages to your site! We are going to start off with a very basic layout. While Squarespace does offer Starter Layouts, we are going to use a blank page to better equip you with the necessary tools to create pages from scratch. We will go over how to create a grid so that when you begin adding in content, you have a better foundation to lay your content out. Read more about why they are so useful here!
After this module, however, feel free to go create new pages using the Starter Layouts as that is their intended use. (Note that once you've chosen a Starter Layout, you cannot go back in and choose a different one.) It might also be helpful to experiment with different grid structure layouts as well! Feel free to add more columns, and experiment with different widths.
Now let’s get started adding your first page!
In this lesson we will:
Step 1: Add your first page—the About page
Go to Home > Pages > Primary Navigation
Select the +, located to the right of "Primary Navigation"
Give your page a name under “Page Title". We recommend "About"
Below “Page Title”, located at the very bottom, select "Start Editing". Select "Save".
Notice that your new "About" page is listed under the “Primary Navigation” and now appears as a main menu option on the right side of your page!
Step 2: Add the back end information of that page
Under "Primary Navigation", hover your mouse on your new About page and select the cog wheel to the right. A new window should pop up.
The "Navigation Title" and "Page Title" can be left as is.
The "Navigation Title" refers to how you want it to appear in your main menu.
The "Page Title" refers to how you want the page title to be in a browser window.
Keep “Enabled” checked.
In the "Description" box, add a small blurb describing what this page is about.
What is written in this section will appear in search results.
Under “URL Slug”, you'll see "About" in this section, which you can leave as is. The “URL Slug” is the exact address you give to a specific page on your site.
For instance, if you enter in the URL saltdesignco.studio/about you will be brought to the ladies of Salt’s About page.
Yours should follow suit eg. yourwebaddress.com/about
At the very bottom, located underneath “Page Controls”, select "Save".
Step 3: Create your page grids
Your content is ready to be added to your page! Before we do that though, we are going to create the foundation for your content by creating a grid structure first. Grid structures act as the blueprint for where your content goes, keeping everything neat and tidy on the page, making it easy for your audience to read what is on your website.
Note: Every item placed on your Squarespace website is called a content block. Images, videos, galleries, social media icons, products for shops, etc. are all placed on your website using that specific content block.
You should be on your “About” page now. You’ll notice it is blank.
Hover your mouse in the white space of your “About” page.
A little banner titled "Page Content" will appear with the options of "Edit" and “Settings” beside it.
You should now be on the editing screen of Squarespace. A text content block will have appeared as well.
Hover your cursor in the top left-hand corner, above the words “Write here…”. A little grey tab and solid grey line should appear above it.
Select the grey tab. The content blocks menu should appear.
Select "Spacer". You will notice a spacer has now appeared above the words!
Repeat this step three more times. You will now have 4 spacers stacked on top of each other.
Select and hold the top spacer, and drag it so that it lines up to the right of the second spacer.
You will notice little bold line indications. This tells you where your spacer will be placed if you release your cursor.
This little line indicates the spacer will line up only beside that individual spacer. This will condense only that spacer block in half. This is what we are looking for.
This large line indicates the spacer will line up beside all content of the blocks, which will condense all of its content in half. This is not what we're looking for in this exercise.
Now you will notice the top content block spacers has been split up in half!
Repeat this step until all four spacers are lined up beside one another.
Now we need to adjust the column widths between spacers. Select and drag the dotted line between two spacers to adjust the widths.
Move the dotted line second from the left-hand side all the way to the left. Repeat on the right.
You should now have two small spacers flanking the outside, and inside has two larger even spacers.
The small spacers on the outside act as a margin.
You will not align any content blocks to these outside spacers as they will give your content room to breathe, by creating a little extra white space at the edge of your pages.
Your grid is all set up! Play with different variations of the grid to match the wireframes you have sketched for your website, or start experimenting with this layout to see what you can create.