How To: Content

Wether you're changing copy on the home page or writing a new blog post you'll need to know how to navigate the content editor in Squarespace. If this ever gets to be too much, feel free to put a support ticket in and we'll handle it for you! First things first, Squarespace refers to everything on the page as Blocks ex: an image is part of an Image Blocktext is part of a Text Block, etc. This guide will show you how to put the page in Edit mode and then manipulate the blocks however you want.


Edit the Page

After you login to Squarespace, select Pages. You'll see something similar to the navigation listing here. To edit the content on any of these pages, simply select the desired page and once it shows up in your browser on the right, move your mouse over it and click Edit on the section you need to make changes to (seen below).

Click the image to enlarge.


EDIT A BLOCK
Summary Blocks // Image Blocks

Once you're in Page Edit mode you have access to alter any of the elements on the page just by putting your mouse over it and clicking Edit. Squarespace refers to their elements as Blocks ex: an image is part of an Image Block, text is part of a Text Block, etc. The video below is of a page in edit mode, editing elements on the page.

Click the image to enlarge.

As you can see, each Block has a different set of properties you can edit. Typically, you'll be editing Text Blocks which act just like a word processor with the ability to bold/italicize words or make links. You can also edit the size of the font by making it a heading. All of the other blocks will open a small menu when edited.

Some of the ones you'll see frequently on your site are Summary Blocks and Image Blocks.

 
 

Edit a Block - Summary Blocks

Summary Blocks are essentially a reference to one of your blogs that you can style and filter in various ways. Both the Featured Posts and Recent Posts sections on the Articles page are summary blocks, one is just set to display the two most recent posts that are marked as Featured, the other displays an unfiltered list of the 30 most recent posts. You can change up these options in the Summary Block Menu.

 

The Content tab is just choosing what content will be summarized in this block. This should be set up properly and you can most likely leave it alone. Same goes for the Layout tab, it's just styling of the content. However, you might want to check out the Display tab if you want to customize the amount of posts or the type of posts that are being displayed (examples below).

 
 
 
 

Edit a Block - Image Blocks

Image Blocks act very similarly to Thumbnails in Blog Posts so pretty much everything you read here applies there as well.

The Edit button under the image gives you the option to crop, resize, etc. the image. If you want to replace the existing image with a new one you'll first need to hit the Remove button and then add in your new image.

Also, you're able to adjust the focal point of the image by mousing over the image and dragging the circle around. This is really important. To ensure the part of your image that you want everyone to see is prominent, set the focal point right on top of it. This prioritizes that section of the image if it happens to get resized moving to different sized devices.

The Caption dropdown allows you to add a visible caption to the image, while the Filename field adds an invisible title to the image that is used not only for accessibility (browser readers for the deaf, etc.) but also for boosting SEO.

The Stretch option should be used sparingly as it forces the image to fill the entire width of the section it's in and might cause issues in some layouts.

Checking Lightbox enables users to click on the image and see a full-screen version of it while adding a Clickthrough URL takes the user to another page or site when clicked.


ADD A BLOCK

Adding content to your page is essential for embedding videos or images to your blog posts. It seems complicated at first, but once you use it a few times you'll get the hang of it.

Once your page is in Edit Mode you can move your mouse over elements to edit them. You may also notice as you move your mouse around the page that lines and gray teardrops appear. These are Insert Points where you can add new elements to the page.

Clicking on the teardrop opens the Add Block Menu where you can add literally anything from videos to forms and everything in between. For most blog posts you'll be using Text, Image, Video, and Summary blocks.

Video Blocks will accept Youtube or Vimeo urls and allow you to set custom thumbnail images. Summary Blocks are how you'll be doing "Related Material" areas.

The Squarespace docs are very helpful if you're looking for more information about any of these block types:


Moving Blocks Around

Once you create or edit a block, you've gotta put it somewhere on your page. The easiest way to do this is to click into the margins somewhere to make sure you don't have anything currently selected (especially helpful when moving Text Blocks) and then mouse over the block like you're trying to open the Edit Menu. Then click and drag the block wherever you want it to go.

Click image to enlarge.

The block is going to land wherever the black line is at when you're done dragging. If it shows up as a line, it will either be above, below, or next to an existing element. However if you drag into a text block and see a rectangle, this will allow the text to wrap around the block. You'll get used to it. Experiment – play around with it. Nothing goes live on the site until you click Save at the top of the page.


TIPS & TRICKS

  1. Feel free to play around with editing and moving blocks around - nothing is final until you click Save at the top of the page.
  2. Conversely, if you play around too much and destroy the page - don't fear! Just hit Cancel and Discard Your Changes and it will go back to it's previous state.
  3. If you feel you've gotten in over your head, just put in a support ticket and we'll get to it asap!