How To Add A Background Color Of Text Block In Squarespace

Today we'll be looking at how to brand a text block background of a dissimilar color, In this background color squarespace tutorial you tin encounter a text cake with a blood-red color background. In this default size you lot can see there'due south no visible groundwork so the showtime thing we have to do is to check what is the id of the block which has the text we want to edit, right click on information technology, select "Audit element". In the inspector we're gonna look for the div that starts with the word "cake" that too surrounds our text don't go confused considering in that location are some divs that contains that word, this is the i that you accept to select. One time yous have found it, double click on information technology, printing CTRL+C to copy it, close the inspector, become to the back-finish of the site, hit "Blueprint", click on "Custom CSS", type a hashtag (#), paste (CTRL+V) the code you lot accept already copied it, add open and closing curly braces and between those type "background" and add the color you want in the background, in this instance I chose scarlet. Hit save to mantain the changes and this is the way you can change the color of the background of any text of your site.

Tutorial: Irresolute Background Color Squarespace

‍

Step ane: Open the inspector tool

Hover on the chemical element and correct click it to display a list of tools, here you'll take to click on "Inspect element".

Stride 2: Copy the "id=block" lawmaking

Once you lot have opened the inspector tool, you can hover on the chemical element in your site, this will highlight the element'due south "course", this will exist helpful to find the "id=block", once you've institute it, double click it to select the entire code and printing (Control+C) to copy.

Step three: Click on "Design"

Get to the left options panel and click on design, if you have problems to observe this panel, go to the upper left corner, at that place you will see a clickable arrow button, click it and that should display the left options panel.

Step 4: Click on "Custom CSS"

Once you've clicked on "Design" in the previous pace, some new options will be displayed, here yous accept to click on "Custom CSS".

Step v: Paste the id and enter the code

Here yous have to write # so paste the Id you've copied from step ii, so you lot'll take to open up curly brackets and enter the background code, such as this.

#block-357cb794a9fdc70ceef1 {

background: cerise;

}

‍