Тёмный

How To Find A Block ID And Apply CSS To A Specific Block in Squarespace 

Kayleigh Noele Web Design
Подписаться 585
Просмотров 8 тыс.
50% 1

One of the great things about working with CSS in Squarespace is the ability to apply edits to specific blocks. I am forever receiving questions asking how to make changes to ONE contact form but not the other, how to add a border to a few pictures but not others, how to make the H3 smaller in only a certain place… this, is how.
You could inspect the element and find a unique identifier, but if you’re not a designer or developer that’s pretty fiddly. This however, is super easy, super quick and free. In fact, it’s such a great tool that I use it every day instead of trawling through code when I don’t need to.
First up, you’ll need Google Chrome installed on your computer. Google Chrome is simply a web browser, just like Internet Explorer, Firefox, Safari, Opera, etc. Statistically, it’s likely that you’re reading this on Google Chrome anyway, or at least already have it downloaded. If you don’t, you can do so at www.google.com....
Now, open up a new Google Chrome window and head to the Chrome Web Store. The store is made up of themes and extensions that you can download to work in conjunction with Google Chrome and enhance what your browser can do. Think of it a little like the App Store on your smart phone. In this case, we want to download and install ‘Squarespace Block Identifier’.
Now get that extension installed, refresh your browser, open a new window with your Squarespace website (you can be logged in or logged out of Squarespace - it still works) and meet me in Step Two.
STEP TWO: FIND THE SQUARESPACE BLOCK ID
This is the easy part, hit the little icon for extension. It’ll be near the top right corner of your browser window.
Labels should appear on every block on your page with the appropriate Block ID. Click on a label and the ID copies automatically! Hurray!
STEP THREE: APPLY CSS TO SPECIFIC BLOCK
Now, the final step is to paste that Block ID into your website’s CSS panel (DESIGN - CUSTOM CSS). Any CSS you put immediately after the Block ID will be applied only to that block. And that’s literally all there is to it!

Опубликовано:

 

9 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 19   
@Sapphonouveau
@Sapphonouveau 3 года назад
I'm new to squarespace and this helped clarify - basically this only works when a website has been published (been trying to figure out a way of seeing the exact blocks I want to target but this confirmed it!). Thank you!
@lindsaydavis8912
@lindsaydavis8912 3 года назад
OMG. I know this is a year old but this has saved me so much time! Thank you!!!!
@big1ne
@big1ne 4 года назад
You a amazing, I am a new developer and I have been wasting my time going through code but this just simplified everything. Thank you
@rmcellig
@rmcellig 5 лет назад
Excellent video!! Thanks 😀
@saadansari9965
@saadansari9965 3 года назад
i love you
@lessharkboy
@lessharkboy 3 года назад
Doesn't seem to work for me, I'm trying to change a font colour as your example and nothing happens. Does it matter that it's on an Index page?
@kingsaf90
@kingsaf90 2 года назад
can you apply custom css to code blocks too? many thanks
@danielcutting3653
@danielcutting3653 4 года назад
Hi Kayleigh, you mentioned a link to your blog post... could you please provide? Cheers
@remindables4087
@remindables4087 5 лет назад
Excellent video. Can you tell me is there a way to see the ID for a form created in through the shop - the Collection Block identifier doesn't show anything on forms created this way? I'm trying to limit the number of checkboxes. In my shop I have a special offer which allows the buyer to get 10 items at a discount. Instead of manually selecting each individual product item I get my user to select "special 10 pack" item. I have then set up a form (using checkboxes) so my buyer has to checkbox the 10 items they want. I have a list of 30 in the form. I would like the form to only allow 10 checkboxes to be selected.
@blairhornbeck2116
@blairhornbeck2116 4 года назад
Do you know how to target specific things and not just ONE item. For example, I'd like the headers for all of my blog posts to be in my custom font. However, with this extension, I have to go in each time and target that specific post and change it. Is there a way to universally target blog titles, or other things like this?
@maknunhosen6011
@maknunhosen6011 4 года назад
awesome
@georgeorwell9867
@georgeorwell9867 3 года назад
I'm currently battling with Squarespace (redesign on a website already set up in SS). Sorry to be negative here, but after a good while using Elementor Pro on Wordpress, I just don't understand why anybody would use SS tbh. It's like going back to using Pagemaker for print design... I mean, I've just spent an hour trying to adapt a block to multiple columns as per your vid. It works fine initially, but when I add another block below, they just merge, so the ID changes! Nightmare! Total waste of time... could have done this in seconds in Elementor, all within the same block editor too... infinite more control overall...
@kayleighnoelewebdesign8615
@kayleighnoelewebdesign8615 3 года назад
There are tons of reasons clients prefer Sqs to Wordpress, even with Elementor. Each to their own. You do you.
@Bryan-rx1cv
@Bryan-rx1cv 4 года назад
Cool
@voicenotes2244
@voicenotes2244 4 года назад
How do you tag a single code block in CSS?
@erikaeramsey
@erikaeramsey 4 года назад
Thanks for the info! Is this how you would change font styes in the menu block? (using version 7.1)
@kayleighnoelewebdesign8615
@kayleighnoelewebdesign8615 4 года назад
You would need to find the class to target. I can assist via email (small fee).
Далее
How To Add And Use A Custom Font In Squarespace
7:00
🎙А не СПЕТЬ ли мне ПЕСНЮ?🍂
3:04:50
How to Add SVG Icons to Squarespace
10:46
Просмотров 10 тыс.
Layering Gaphics in Squarespace
10:26
Просмотров 13 тыс.
Resize Images for Mobile | Squarespace 7.1
9:45
Просмотров 22 тыс.