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
 
  • Click "Apply". You will now see an image content block stacked right underneath the left spacer. 

Step 2 - Adding Back End Info.png
 
 

Step 2: Learn how to rearrange your content blocks

 
  • Directly underneath this content block, you should see the words "Write here..."Squarespace has conveniently placed a text content block right on the page for us! Click and drag that text content block so it lines up right beside the image block. Remember to watch which lines become bold (as we learned in Lesson 2) as you place your content to ensure you are adding it to the right column

  • 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 content blocks, until you see the dark grey banner indicating what that content block is. If you click and drag on the grey banner,  you'll have no problems moving content blocks around! 

Step 2 - Rearrange content blocks.png
 
 

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.

  • Hover your mouse over the bottom left grey tab of the first text content block and add the next text content block immediately underneath. 

Step 3 - Adding text content block.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. 

  • Select the tab on the very bottom left-hand side and add another spacer content block. Note that when you hovered your mouse on this grey tab, the entire line was highlighted. This implies that the content block will span the length of the whole page. 

Step 4 - Adding a spacer.png
 
  • 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. 

Step 4 - Adjusting Spacer.png
 

 

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