Managing content in squarespace

Creating and editing content in Squarespace is a completely different paradigm from using Wordpress. Squarespace uses a concept called a block. Everything you build in Squarespace will be a in a block. There are tons of types of blocks, from individual images to whole galleries, videos, text, buttons, and more.

This makes Squarespace much more layout-versatile. It also can make Squarespace more challenging. If you ever feel like a content update you need to make is too much for you to handle, put in a ticket. You can also submit a ticket if you ever just want another set of eyes on your work. We have been building websites for a long time—feel free to lean into our expertise!

Creating Blocks

1. Find the right place for your block.

With your page or post editor open, hover your cursor between two blocks to reveal a black pin called an insert point.

An insert point is accompanied by a guideline that tells you where the block will be inserted between two blocks or between a block and the edge of the page.

Screen Recording 2017-11-03 at 12.18 PM.gif

2. Click the insert point to open the block menu and select a block.

Clicking on an insert point opens the block menu

To select a block from the menu, just click the icon associated with it. The block menu will close, and your new block will be placed where the insert point was. Some complex blocks–like images, galleries, and videos–will open a settings menu after the block is placed. We'll talk more about that in the editing blocks section.

Now's a good time to mention that, if you want to delete a block, just hover your cursor over the block you want to remove and click the trash can icon. Bye, block!

Screen Recording 2017-11-03 at 12.38 PM.gif

Moving Blocks

1. Click and drag the block you want to move.

Hover your cursor over the block you want to move. When it looks like an open hand, it's ready to grab the block. Now you can drag it around the page or post you're editing.

Screen Recording 2017-11-03 at 12.47 PM.gif

2. Release the block at the desired insert point.

Once you start dragging the block you will see one of two things: a guideline or a box.

We talked about guidelines in the creating blocks section. A guideline indicates that the block will be placed between two blocks.

A box, on the other hand, will indicate that the selected block will be placed within a text block and that the text will wrap around the block based on the box. 

Screen Recording 2017-11-03 at 12.55 PM.gif

3. Resize the block if you need to.

When two blocks are side by side, you can determine how much horizontal space the blocks take up by dragging their edges back and forth. Some image and gallery blocks can also be resized vertically.

Screen Recording 2017-11-03 at 01.27 PM.gif

Editing Blocks

There are so many blocks to choose from, and there's not enough space to go through all of them here. Squarespace maintains a thorough and up-to-date list of all their available blocks and how to use each one. We'll outline some of the ones you'll use most often below.

1. Text Blocks

Text blocks are probably the most basic and fundamental part of your website content. Place your text block, then start typing away!

Once you've written your content (or pasted it from somewhere else), you can use the text toolbar to format your text by making it bold or italic, creating links, playing with alignment, creating headings, and more.

Screen Recording 2017-11-03 at 01.40 PM.gif

Let's talk about links for a second. They're super important and easy to do. Highlight the text you'd like to link, then click the link icon in the text toolbar. In the link menu, you have three options for your link: Content, Files, or External. If you choose Content, you can pick from any of the pages in your site to link to. This is the best way to link from page to page. If you choose Files, you can link to a file that you upload or a file that's already been uploaded. If you select External, you can type in a URL to send the user to. In this instance, we recommend checking the "Open in New Window" box.

Screen Recording 2017-11-07 at 02.13 PM.gif

2. Image Blocks

An image block lets you embed one image or graphic in the page. Once you've placed your image block, the image menu will open. The image menu has two tabs: content tab and design tab. You'll upload your image on the content tab. The most important thing on the design tab is the Clickthrough URL. It functions just like the links we talked about above, except instead of making a text link, it makes an image link.

Screen Recording 2017-11-07 at 11.11 AM.gif

3. Video Blocks

Video blocks follow a very similar process to image blocks. When you place the block, the video menu will open. There you will paste the Vimeo (or YouTube) link to your video. All you need is the link, not the embed code. Once you put in the link, the video should automatically show up... and that's it! Now if you get a Vimeo error that says the video cannot be played or embedded, you'll need to make sure that the settings in Vimeo allow for embeds.

Screen Recording 2017-11-07 at 02.21 PM.gif

4. Gallery Blocks

Galleries can be a great way to share multiple images easily. There are four gallery layout options, but the one we used when building out your initial pages is called carousel. Select the carousel block, and on the content tab in the gallery menu, upload the images you want to use and put them in the order you want them seen. On the design tab, you can change how the images automatically transition and whether or not the gallery has arrows on the sides. Once you're done, click apply. Then you can resize the gallery if it's too tall.

Screen Recording 2017-11-07 at 02.32 PM.gif

5. Spacer Blocks

These little guys might be the most important part of your site! You'll want to use these on every page and post. Spacer blocks add whitespace where there is none, and they're used frequently in your site to make the main column of content a little narrower on your site. With the top, left-hand insert point selected, click on spacer. Drag the spacer so its guideline stretches the entire left side of your content. Then resize the spacer so it's as small as you can make it. Then repeat the process for the right side of the column.

Screen Recording 2017-11-07 at 03.21 PM.gif