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

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

Featured Image: Free-Photos/Pixabay

Leave a Comment