Method to Change Background Color of only a specific part within a Blog Post on Squarespace
Here is the method to apply different colors to multiple parts (sections) within a blog post in Squarespace website.
In other words, this is the method to add a shape behind a text on a Squarespace blog post. No CSS is required for this method.
Let’s learn how I applied multiple background colors to specific portions of the same blog post page.
In Text Editor, if you click the Block Background button, it changes the background color of the full page of the blog post.
Therefore, click on the side of page, then hover over the text. Now click + icon and add Spacer.
Add another Spacer block at the end of the text.
Now click anywhere inside the selected text and then click on the Block Background button.
Success.
A different background color will be applied behind the specific call out section inside the blog post. You can choose custom color or add round corners to the shape (as shown in video demo).
Now hold the colored shape and drag it to wrap text around it. To change its size, hold any of its edges and move the mouse left and right.
These spacer blocks will not display on the published page. However, if you wish, you can safely delete the spacer blocks.
Using the same method, you can also apply multiple colors on a single blog post page in Squarespace.
Learn more Squarespace tutorials or visit Home page.
