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: 

  1. Add your first page—the About page

  2. Add the back end information of that page

  3. Create your page grids

 

Step 1: Add your first page—the About page

 

Go to Home > Pages > Primary Navigation

  • Select the +, located to the right of "Primary Navigation"

  • Select "Page".

Create-a-new-page.gif
 

  • Give your page a name under “Page Title". We recommend "About"

  • Below “Page Title”, located at the very bottom, select "Start Editing". Select "Save".

Create New Page - Title.png
Create New Page - Start Editing.png
Create New Page - Save.png
 
 

  • 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! 

About Page.png
About in Main Nav.png
 
 
 

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. 

About-SEO.gif
 

 

  • 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.

About Back End.png
 

  • 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.

About Back End Description.png
About Search Engine.png
 

  • 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

 
About URL Slug.png
 

  • At the very bottom, located underneath “Page Controls”, select "Save". 

About Page Controls.png
 
 

Step 3: Create your page grids

Your content is ready to be added to your page!

  • 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.

  • Select “Edit”.

 
Edit Page.png
 
 

  • 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.

Spacer.png
 

  • Select "Spacer". You will notice a spacer has now appeared above the words!

Spacer.gif
 


  • Repeat this step three more times. You will now have 4 spacers stacked on top of each other.

4-spacers.gif
 

  • Select and hold the top spacer, and drag it so that it lines up right beside the second spacer.

    • You will notice little bold line indications, showing you where your content will be placed if you release your cursor. 

 
 
Step 3 - Spacer 2.png

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. 

 
Step 3 - Spacer 3.png

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. 

 
 
Two-Column.gif
 

  • Now you will notice the top content block spacers has been split up in half!

Step 3 - 2 Column Grid.png
 
  • Repeat this step until all four spacers are lined up beside one another.

4-Column.gif
 

  • 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.

Step 3 - Adjust Spacer Size.png
 
 

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.