In this lesson we’ll go over adding and editing your page content - the pictures and text copy that make up the site. If you’ve been taking the time to work through each step as we go (which I highly recommend) you should have a template installed and all your pages created and ready for you to add content. If you haven’t, this would be a great time to pause and go do that, because we’re about to get into the meat of all this.
Squarespace pages are put together using what’s called Content Blocks. These are different elements that each serve a specific purpose - some display text or images, some create photo galleries, others create whitespace between elements. They are like building blocks made up of different things you might want on your page. Building a page consists of stacking these blocks on each other sort of like a game of Tetris with flexible, resizable pieces.
We’ll dive deeper into those in the next lesson, but first I’ll show you how to add and edit them.
You’ll use the Squarespace page editor to add Content Blocks to your pages, blog posts, products, footer, and sidebar. It’s actually really simple once you’ve gotten used to it, and once you understand how to use it you’ll be able to build any type of layout you need.
Using the Squarespace Editor
To start editing your site content you’ll click on Pages from the Home menu to bring up that list of pages you created earlier. Clicking on the page you want to edit from this list will bring it up in the preview pane on the right side of the screen.
If you move your mouse around the page you’ll notice grey menu bars appearing - these indicate a section that you can edit. You might see a section named Site Title, a Navigation section, a Banner or Header Content section, and a Page Content section. The names that show up in these menu might vary based on your template or page name, so if you’re in doubt as to what the menu is attached to hover over Edit and it will highlight the whole section.
Clicking Edit from the pop-up menu will transform the page into a drag and drop editor. The pop-up Edit menu expands to give you options to Save, Cancel, and Add a Block. The first two are pretty self explanatory, and we’ll get to the last one in a second.
You can add a new Content Block two different ways. First, you can just click Add Block from that menu at the top of the page. It may also display as a plus sign. This will bring up a pop-up listing all the different types of Content Blocks, and when you click on one it will add it to the bottom of the page below whatever content is already there.
What if you want to add a block between two other blocks though? Or above the rest of the content? If you move your mouse around the left side of the editor you’ll notice little sideways teardrops appear. These are called Insert Points and they indicate a place where you can add a Content Block
Hovering over one of the Insert Points you’ll see a dark line stretching out to the right of it. This line shows you how far across the page your block will stretch when it’s added. If you’re starting with a blank page anything you add to it will be full width. Once you’ve added at least one block though you’ll notice Insert Points appear that let you add a second block that’s the same height or width as the first. It will also let you push one block to the left or right and add a second block beside it. You also have the ability to resize most blocks after they’re added by either grabbing the handles and dragging them or using spacer blocks to keep them from stretching the full width of the page.
Let’s go ahead and add a text block to get started. You can use sample text here if you aren’t quite ready to add your own, the important part right now is learning to use the blocks. Click the Add Block button/plus sign and select the block labeled Text in the top left corner of the pop-up. You’ll see a thin grey outlined box appear with a new menu bar at the top of it and a “Write here…” prompt. The menu bar lets you know what type of Content Block it is and gives you the option to delete it. Different Content Blocks will have different options.
Clicking inside this block lets you type or paste text, and a whole new menu bar appears when you start to do that. This one is similar to the tool bar found in most word processors and gives you options to change the text to bold or italic; add a link by highlighting text and clicking the chain link icon; align the text to the right, left, or center; format the text as a header or quote, add bullet points and indentions, paste text, remove formatting, and delete text.
For now just add a few lines of text to your block and then click somewhere else on the page to take the focus away from it temporarily. Hovering your mouse back over the left side of the screen you’ll see Insert Points above and below your Text Block. Click one of these and add an Image Block next. This will add a full width image block and also display the pop-up Block Editor. We’ll talk about these options in the next lesson, for now if you want to add an image you can upload one from this block, or you can click Apply and the image will be represented as a grey box.
Now that you have two Content Blocks you can have some fun moving things around. Grab the Image Block with your mouse by clicking and holding, then start to move it around the editor. You’ll notice as you drag the block around different parts of the screen display either a dark line or a box. These are areas you can place your Content Block, and there are tons of them.
Insert Lines will appear vertically or horizontally as you drag a block around; vertical lines appear beside another block and let you add a column that’s the same height as the first block, horizontal lines let you add a block that’s the same width as either an existing block or the full page. You may also see dark boxes that let you drop a Content Block onto one half of the page or a large area inside some other content blocks. Release the block to place it into whichever insert area is highlighted.
If you want to resize a block you have a couple of options; if you have two blocks side by side you can grab the handles and resize them vertically or horizontally, or you can use Spacer Blocks. These are blocks that are intentionally empty, they’re used solely to add white space around other elements and to help you resize blocks. Let’s say you have a block of text but you don’t want the text to stretch to the edges of the page. First you would click the Insert Point directly above or below the text and add a new Spacer Block. Then you would grab that Spacer and drag it to one side of the text block and drop it there. The block will usually take up half the screen when you place it, and you can grab the handles by hovering over the right or left side and drag it to the size you want. You can do the same with another Spacer Block on the other side to finish centering your text. If you want to use a Spacer to add vertical space between elements you can drag the top or bottom handles to make it larger or smaller.
Dragging and dropping blocks around the page in different areas will give you a better idea of how you can use the editor to create your pages. You can also delete an existing Content Block by hovering over it and clicking the trash can icon on the pop-up menu.
Now that you know how to add, rearrange, and delete Content Blocks we’ll go over the different types of blocks you can use to create your page layouts in the next lesson.