Current trend for index pages or long pages to incorporate different background colors for each section has made this an increasingly popular style feature. You can achieve this look using Squarespace’s Style Editor; however, additional CSS code will likely be necessary.
Here are a few pointers on how to do it, as well as showing how you can alter the color for individual text blocks.
Background color for individual pages
There are various methods available in Squarespace for setting background color on individual pages. You have two primary choices for doing so – either using the Site Styles Editor or CSS code. While using the former may be easiest, sometimes finding what exactly what you need may prove challenging.
Shape blocks offer a quick and simple solution to creating an eye-catching background on a Squarespace page, giving it a dynamic yet eye-catching appearance without needing any coding knowledge or training. They’re great for text blocks, image cards and buttons and use filter effects such as blur, grayscale contrast drop shadow sepia opacity for added effect – creating an unforgettable background and drawing more traffic to your content!
Background color for sections
Squarespace pages are divided into distinct sections that are easily distinguishable by different colors or content foci, making customization of every section possible through site settings or custom CSS. While you can alter individual page colors through website settings, making changes that only apply to specific pages may prove challenging. Thankfully, it is also possible to make such adjustments using custom CSS.
This strategy works best with index and longer pages that would benefit from having different background colors to break up their length and draw attention to particular parts of your website. Furthermore, this helps ensure that the color scheme remains uniform across your entire site.
Custom CSS also enables you to add unique background colors for individual text blocks on your website, useful for things such as contact forms or disclaimers. By using an ID number to identify each block and adding custom CSS, you can alter its background color in an instant!
Background color for text blocks
Squarespace provides several methods for changing the background color of text blocks. One is using the background color options on the left-hand column of each text block; another option is adding custom CSS snippets – however this method requires knowledge of HTML programming language and some technical expertise to implement correctly.
Now more than ever, index pages or longer pages featuring sections with differing background colors is becoming an increasingly popular design choice – either to break up long scrolling content or just highlight specific sections. Unfortunately, changing any background color in the Style Editor applies globally across all pages which might not always be optimal in certain situations.
Knowledge of HTML will come in handy here, as you’ll need to use custom CSS to change the background color for specific blocks. Inspecting your page using Chrome Developer Tools will reveal its block identifier(s).
Background color for buttons
Longer pages often benefit from using different background colors for sections to break up text and add visual interest, especially index pages or long-form content requiring visitors to scroll through multiple blocks of information. This technique can also help prevent visitors from becoming overwhelmed when scrolling.
Change the color of a button using either Squarespace’s Site Styles or custom CSS. To use Site Styles, navigate to a page (section) which has the button, open up its Style Editor, and change its style settings accordingly.
Clicking “Edit Background” in the Style Editor allows you to select from either a palette of colors or enter an hex code for custom hues, which will apply across all buttons across your site. Furthermore, creating color themes based on pages or block types has been made simpler in version 7.1 and the process for doing this is described further below.
