Lesson 3: Adding your Content Blocks

 
 

Now comes the part where we put everything together. Our grid is set up, meaning we can now insert our content blocks.

In this lesson we will: 

  1. Add an image content block

  2. Learn how to rearrange your content blocks

  3. Add an additional text content block

  4. Add an additional spacer at the bottom to create more space


Step 1: Add an image content block

  • Select the tab located on the bottom left of the left larger spacer and choose the "Image" content block. 

Step 1 - Adding Content Block.png
 
Add-Image.gif
 
 

  • An additional “Image” window will pop up.

  • Click the "Apply" button in the bottom right hand corner.

Add Image Edit.png
 
 

  • There is now an image content block stacked underneath the left spacer. 

Add Image Content Block.png
 
 
 

Step 2: Learn how to rearrange your content blocks

  • Directly underneath this content block, you should see the words "Write here...". Squarespace automatically places a text content block on each new page you create.

  • Click and drag that text content block so it lines up to the right of the image block. Pay attention to which lines become bold as you place your content to ensure you are adding it to the right column (as we learned in Lessson 2).

  • TIP: It can be tricky to click and drag content blocks, especially if you're working on a trackpad on a laptop. Try hovering your mouse in the top centre of the content block. The dark grey banner indicating what that content block is should appear (such as “Text or “Spacer”). Click and drag the grey banner portion and you'll have no problems moving content blocks around! 

 
Move-Text-Block.gif
 
 

Step 3: Add an additional text content block

  • Now that we have the layout of our page, it's easy to add additional blocks underneath existing ones to preserve the grid structure we've created.

  • When your cursor is hovered over a content block, you’ll notice grey tabs appears as you move closer to the edges of the block.

  • Hovering close to the left side of a content block produces grey tabs in the top left and bottom left corner of that content block.

    • Selecting the grey tab on the top will produce an additional content block above.

    • Selecting the grey tab on the bottom will produce an additional content block below.

Grey Tabs Left.png
 

  • Hovering close to the right side of a content block produces grey tabs in the top right and bottom right corner of the content block beside it.

    • Selecting the grey tab on the top will produce an additional content block above the content block beside it.

    • Selecting the grey tab on the bottom will produce an additional content block below the content block beside it.

Grey Tabs Right.png
 

  • Hover your mouse over the bottom left grey tab of the text content block and add an additional text content block right underneath.

Add-Second-Text-Block.gif
 

  • Your page should have this structure now.

Page Structure.png
 
 
 

Step 4: Add an additional spacer at the bottom to create more space

 
  • It's important that your website has ample room on the pages so that viewers don't get overwhelmed.

    • Adding a spacer at the bottom of the page can help create more breathing room on your page. 

  • Notice that when you hovered your mouse on the grey tab, the entire line was highlighted. This implies that the content block will span the length of the whole page. 

Bottom Spacer.png
 
 

  • Select the tab on the very bottom left-hand side and add a spacer content block. 

Add-Bottom-Spacer.gif
 
 

  • If you would like, you can adjust the length of your content blocks by dragging the grey circle located at the bottom of the selected spacer content block up or down. 

 
Make-Spacer-Larger.gif
  • Your page structure is all set up!

 
 
Final Page.png
 

The last and most important step is to select “Save” in the top left hand corner. Remember to save your pages frequently and often! You don’t want to lose any progress you might have made with your site. Upon clicking “Save”, you will also be leaving “Editing Mode” in Squarespace.

We reviewed how to get into “Editing Mode” in the previous lesson. If you need a quick refresher, head back over to Lesson 2!

 

 

This is how your page should look. Now head to the next lesson and we'll start adding some content in!