In this post, we will learn how to do some simple things on Squarespace
In this post
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
Scroll down > Find
<body id="...."
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
Hi. Are these changes allowed to be implemented with a Sqrspace Personal basic plan too?
Thanks
Hi. What do you mean? All (except Page Header), you can do in Personal Plan.
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?
Did you fix it?