Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 8

Can a block have its own background colour?


Scoobie
Go to solution Solved by foleyatwork,

Question

Can each Block in the layout engine have its own background colour?

This would be a big way to customize the look of the templates.

This has been discussed various times on here but I don’t think I’ve seen a definitive simple answer – in particular there’s been a lot of discussion across various threads that block IDs YUI seem to change so targeting a block ID with color doesn’t seem to work permanently.

Colored blocks are pretty standard now on major websites as a way of structuring different types of content. See the examples below:

squarespace_needs_colored_blocks.JPG

squarespace_blocks.JPG
Edited by scoobie
Link to post
  • Answers 33
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Can each Block in the layout engine have its own background colour? This would be a big way to customize the look of the templates. This has been discussed various times on here but I don’t think I’

I think a color selector should be introduced to the block builder by Squarespace, the same way it's built into the style settings. This way users can easily choose the color for each block.

Recommended Posts

  • 0
Guest

I agree this should be a standard feature. Any progress to date or workarounds?

Link to post
  • 0

Hi @scoobie, I made a video tutorial for you on how to Adding a background color to a block. Hope this helps! https://www.askquesty.com/post/change-background-color

Edited by AskQuesty
Initial Revision

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Link to post
  • 0

There is a very easy way I found to change the color block - 

  1. Make sure the page you are working on is open on your screen
  2. Click home in the upper left
  3. Go to the Design Tab
  4. Go to Site Styles
  5. Either type Collage into the search box or scroll down to Image Block>Collage
  6. Click on the color circle
  7. Replace the HSL code with your own HSL code
  8. To find your HSL code, you can use a site such as this one
  9. Either choose your color or add your hex code in the Color Value box if you have it
  10. Copy the HSL code from H to the end of the parenthesis
  11. To replace the default HSL code in Squarespace, click the circle and highlight the default code - press control/command V to replace.
  12. Click save

There is no need to inspect the elements and do hard coding unless you choose to

 

Edited by Jennifer-Badr

Jennifer Badr - MFA | MS

Design & Marketing Professional

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...