Many new users who are coming to Squarespace site builder are fascinated with the new Squarespace editor.  However, with new advantages here come the issues.   There are certain challenges that many users are stumbling while working with new Squarespace editor.

Those challenges mainly concern the remaining rigidity of Squarespace editor.

From working with Squarespace lightbox to iframe Squarespace and Squarespace collection block identifier are among the majority of inquiries. How to change button color in Squarespace, add adobe fonts to Squarespace or set Squarespace countdown times are new questions that came with modern Squarespace editor.

Squarespace collection block identifier.

Squarespace collection block identifier is the tool that helps you to find certain block or collection of blocks to apply custom codes. All Squarespace content consists of blocks. Each block has its own Squarespace collection block identifier. It could be anything from pictures and texts to lines and collections. Blok identifiers are used to make a selection of block on the website in order to apply changes specifically to these blocks. To find such a blog you need to go to code injection Settings and search for Id.  If you want to apply a custom CSS code or a certain plugin to certain parts of your website you need to specify it with block Id. One of the examples of using CSS custom code is on changing Squarespace colors on site buttons.

 

How to change button color in Squarespace.

How to Change button color in Squarespace can be a really challenging procedure. Seemingly east step cannot be accomplished through straight forward. The problem is that in its current state Squarespace started to apply colors and fonts only through theme change. If you want to change a color of a button you have to go to Squarespace theme editor and pick up the them that has your color in it. Sometimes there is no theme that has your button color or you do not want to change the theme. In this case you need to edit theme itself by finding the button section with its color reflection circle against it. To change the color, you need to press the circle against it and pick the color you want.

If you want a custom update to your button, you can go Custom CSS window and add certain features to your button of choice. In this case you would need to identify button using block identifier and write block Id under the custom CSS code for that particular button.

 

Add adobe fonts to Squarespace.

Another important feature of modern Squarespace editor is to add adobe fonts to Sqaurespace.

In order to add fonts, you need to go to the same old Custom CSS windows and write down your font there. Apart from adding a font and a font family you would need to add the font itself to Squarespace library. It is done by going “Add custom fonts” button located underneath of Squarespace Custom CSS window.

Once you uploaded the font you can select it as a font source in the CSS windows and assign a type of text the font should be working with. It is usually h1,h2,h3 or p. which stands for headings and paragraphs.

 

How Squarespace lightbox is working.

A Squarespace lightbox is an effect that allows to open an image while deeming the rest of the website. To offset this effect, you must click somewhere outside this box to return to previous state.

Lightbox is a nice way to underline certain images that are of great interest for visitors.

The procedure to Add Lightbox is following:

First you need to find add icon widget from the widget bar. Once added you should choose it and click Action. There you would need to choose Show Lightbox action from drop down menu.

Thus, you can enable this feature on your website so the users can focus their attention in the right place.

Iframe Squarespace.

Iframe Squarespace as well as other Iframe is an html element that allows you to embed html element into another html element. If you need to add an Iframe on Squarespace you need to embed it through the code. Squarespace has an option of embedding Code Block element. What you need to do is to choose add Code Block and then put the Iframe code into the block.

Thus, by embedding your code through add Code Block option you can inject Iframe on your Squarespace website.