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:
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.
An additional “Image” window will pop up.
Click the "Apply" button in the bottom right hand corner.
There is now an image content block stacked underneath the left spacer.
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!
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.
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.
Hover your mouse over the bottom left grey tab of the text content block and add an additional text content block right underneath.
Your page should have this structure now.
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.
Select the tab on the very bottom left-hand side and add a spacer content block.
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.
Your page structure is all set up!
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!