How to Edit your Squarespace 7 site

There's so much you can do with a Squarespace site. From adding videos and photo galleries to displaying charts and graphs, the possibilities are endless. 

But before you can make the magic happen, you have to grasp how to edit your site in the first place. 

In this tutorial, we'll go over how to change the styling, edit, add and remove content in Squarespace, and a few tips and tricks that will make the process easier.

Part 1: Editing using the style settings

If your goal is to adjust any of the following:

  • font type, size and color
  • background color
  • navigation style
  • site width/spacing
  • sidebar visibility

you'll want to use the style settings.

To do this, click Design → Style Editor. In the style editor, you will find a number of customization options, which vary depending on the template.

The Squarespace Style Editor

The Squarespace Style Editor

To change any of the items, click on the colored dot or arrow next to it, and options will expand. For example, a color picker will appear to change the color, or a dropdown menu to change typography.

Make sure to click "save" in the upper left corner of the screen once you're done editing!

One last helpful hint: If you hover over an element on your site, it will be surrounded in blue lines while the style editor is open. Click on that section and the styling options for that element will appear in the sidebar, making it easier to identify what you are altering. Click "Show all" to reveal all the options again.

In this case, we clicked on the page body text, so the options to edit the text typography and color appear. 

In this case, we clicked on the page body text, so the options to edit the text typography and color appear. 

 

Part 2: Editing your site content

There are so many different types of content that you can edit on your Squarespace site, and we'll go into each (galleries, summary blocks, text, etc.) in a bit more depth in future lessons. However, we will start here by explaining the basic skills necessary to edit your site, and perhaps you'll be able to figure out the rest just by getting "over the hump" here. 

Let's go!
 

Understanding the expanded vs. Shrunken screen

When you are logged in, your Squarespace site will have two states: 

State 1: Expanded (or Full Screen)
In this state, your site will behave exactly as it would for any user who clicked on your link. You will not be able to edit your site or access the Squarespace options, even though you are logged in, unless you do one of the following:

  • Press the escape key (ESC) on your computer, which will collapse the frame, or
  • Click the arrow in the upper-left corner of the frame, which will also collapse the frame. If you are logged into Squarespace, this little tag will always appear if you hover your mouse over the upper left corner of the frame.

Once you click on this, your site will shrink, revealing....

State 2: Shrunken. 
In this state, you have full access to the editor and all Squarespace settings.

Screen Shot 2015-06-10 at 11.36.01 AM.png

To edit a particular page, click on Pages in the menu and then select any page you want. 

Changing content on pages

When you are in shrunken mode, you will find that a little black box appears with the option to edit or change settings whenever you hover over a page of your site. Below are a couple of examples.

If you hover over other parts of the page, such as banner images or navigation, a black box with editing/settings options for those will appear as well. 

Once you click "edit," the frame will expand to full screen, and the part of the page you can now edit will be highlighted, while everything around it will be grayed out. 

You can go ahead and type in new text, or hover over content blocks such as images or galleries to bring up the editing options for those:

Hover over the image, and click "edit" in the black box

Hover over the image, and click "edit" in the black box

Now your image editing options appear!

Now your image editing options appear!

Removing content on pages

This one is really simple. To remove a text block, click on the trash can on the right end of the formatting bar.

To remove other content blocks such as galleries, sound files and summary blocks, hover over the element and you will find a trash can next to the "edit" link.

Just click on the trash can, and it will delete. 

Just click on the trash can, and it will delete. 

Pro tip: You can also delete a content block by clicking it and dragging it toward the bottom center of the screen. A little circular trash icon will appear. Drag the block directly over it such that it outlines in blue, then release. 

In the picture above, we're dragging an image into the trash. Notice the blue outline on the trash icon. I can now release my mouse and the image will disappear!

In the picture above, we're dragging an image into the trash. Notice the blue outline on the trash icon. I can now release my mouse and the image will disappear!

Boom, deleted!

 

Adding Content to Pages

This is the final, most important aspect of editing your Squarespace site. It's way simpler to grasp visually than in words, so pay close attention to the pictures!

To add a content block, first make sure your page is in edit mode. Then hover along the left hand side of the page (on the outer edge of the text, for example), and you will see an odd shaped dot appear:

look familiar?

look familiar?

Place your mouse directly over Weird Dot Thing and a horizontal line will appear. This line marks where on your page the content block will appear when inserted.

Click on the dot at the end of the line, and voila! All your content block options will show up!

Click on any of the content blocks to add it. It will appear right where the line was.

Or (more advanced) you can click and drag one of the content blocks to anywhere on the page that you want it to appear.

And there you go!

So those are the basic things you need to know to get started editing the styling and adding, changing or deleting content on your Squarespace site! We'll go into greater depth on using the different content blocks in the future, but after reading this tutorial you should be off to a great start. 

Make sense? Still confused? Let us know in the comments!