Buy me a coffee

Squarespace: How to

In this post, we will learn how to do some simple things on Squarespace

How to Setup Password & Share Site URL?

If your site is private or trial, you can setup password & share url for someone.

Click Settings

Next, Site Visibility

Next, Password Protected > Enter Password > Save

Then copy Site URL and share with friend or developer 🙂

How to Find Page ID?

Method 1. View Source Code

Open Home Page

  • Pressing Ctrl U
  • or Right Click > View Source

view-page-source1-min

Scroll down > Find

<body id="...."

view-page-source2-min

In this example, you will see

<body id="collection-58d01506e3df284bada16b9f" class="..."

collection-58d01506e3df284bada16b9f is Page ID.

When using CSS, you need to add # to before

#collection-58d01506e3df284bada16b9f

Method 2. Inspect Element

Right Click > Inspect (or Inspect Elements)

You will see

 

<body id="collection-58d01506e3df284bada16b9f" class="..."

collection-58d01506e3df284bada16b9f is Page ID.

When using CSS, you need to add # to before

#collection-58d01506e3df284bada16b9f

How to find Block ID

You can also use this Squarespace Page ID Finder free  tool.

Each block will have different ID. Two same blocks also have different ID.

To find Block ID, just Right click on Block > Inspect Element (example here: Image Block)

You can right click on Image, Text, or Button

You will see

You look up, there will be a line: class=”sqs-block blockname-block sqs-block-blockname…” id=”block-c7…”

in screenshot: blockname is image-block, you will see: class=”sqs-block image-block sqs-block-image” id=”block..”

Next, Left click on the line with id = “block .. > Look Right > Click + icon > You will have Block ID: div#block-…

How to find Section ID (Squarespace 7.1)

You can also use this Squarespace Page ID Finder free  tool.

Do similar Block ID > You will see id=”page-section-…” > Click + icon > You will have div#page… is Section ID

 

How to Insert Custom CSS

SS changed position of Custom CSS on some sites, so if you don’t see Design option, find Website > then Scroll down > Choose Website Tools > Custom CSS

Click Design

Next, click Custom CSS

Enter Custom CSS > Save

How to Upload Custom Font

Click Design

Next, click Custom CSS

Scroll down > Click Manage Custom Files

Click Add images or fonts

After upload completed. Click Fonts name > Squarespace will paste font url to Custom Box. Copy and use!

How to open Page Header

Each page has page header.

When inserting code into the Page Header, the code runs only on that page, and will not affect other pages.
For Shop Page, Portfolio Page, Event Page … code will affect the list – detail page.

Hover on Page Name (on Main Navigation or Not Linked) > Click Gear Icon > The setting box will appear.

Click Advanced. Here is Page Header

How to Upload an Image & Get its URL

First, edit any page on your site >> Highlight a text > Click chain icon

Next, click Gear icon

Next, click Files

Next, click Upload File

Choose image from your pc >> It will be uploaded. Once uploaded, it will be here. As an example, I just uploaded a file called abc.jpg

Then click Done >> Don’t Save Anything

REMEMBER: DO NOT SAVE ANYTHING.

The image has been uploaded to the website, now you just need to close the upload window. Do not save anything, otherwise the image link will be inserted into the text.

So, once uploaded, what will its URL be?

  • Let’s say your domain is https://beaverhero.com. The uploaded file is abc.jpg
  • The image url will be: https://beaverhero.com/s/abc.jpg

Some notes

  • You should not include spaces in the file name. Eg: Mountain and Hill.jpg >> You should rename it to: mountain-and-hill.jpg
  • Do not use uppercase and lowercase characters. Sometimes you will mistype when getting the URL (I had the same problem so many times). Eg: Mountain-and-Hill.jpg >> You should use: mountain-and-hill.jpg

How to Preview Site on Tablet

Right Click on anywhere on your site >> Click Inspect (or Inspect Element or Inspect Code..)

A box appear >> Click square icon (see screenshot)

Click Dimenssions >> Choose iPad

Featured Image: Free-Photos/Pixabay

6 thoughts on “Squarespace: How to”

  1. hi Tuanphan,

    I am trying to follow your instructions for adding custom font in CSS. I get the Syntax Error line 1 and i have tried to delete and start over but still get the same message. I know its user error…Can you help?

    Reply
  2. I have a flashing banner/ announcement at the top of my website that I’m trying to remove. I have no idea what it’s called or how to remove it. Any help would be greatly appreciated.

    Reply
    • Hi. Just checked your site. It looks like you used a custom bar (created by a custom code). You can access Settings > Advanced > Code Injection > Find & remove it.
      Or add this to Design > Custom CSS to hide it
      .apply-bar {
      display: none;
      }

      Reply

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder