How To Edit A Line Color In Squarespace​

Written By Jocelyn Figueroa

Good news! You no longer have to use custom css in order to change the colors of your line blocks. So set aside your code notes and get ready to see how to adjust the colour with this quick and easy tutorial!

How To Add A Horizontal Line Blocks To Your Squarespace Website

The Squarespace site allows you to add in horizontal lines easily. Click the block options to get started.

Step One: Click The "Add Block" Button

Make sure that you first go to the page and section that you want to add the horizontal line block to.

Choose the line block option Squarespace provides for your page.

Step Two: Choose The Line Block Option

This option will appear in the basic block section of the available Squarespace blocks.

Drag the line around the page. You will be able to change the width or length of the lines, but a Squarespace site currently cannot change the height without code.

Step Three: Position The Horizontal Line Block Where You Want It To Be

You can stretch the horizontal line or shrink it by first clicking the block, then click and drag the edges of it to the left or right. Currently, Squarespace does not have a built in option to make the lines taller - but custom css is available to adjust that if needed.

Once you're done, click save. You don't want the change you made to disappear.

Step Four: Click "Save" At The Top Left Hand Corner Of Your Screen

Don't skip this step! You don't want your work to disappear, and you will want to see your line blocks when you are editing the color of it.

How To Change The Color Of The Horizontal Line Block

Always go to your Squarespace editing options before trying custom css or code to change the colour of an element.

Step One: Click The Paint Brush Icon At The Top Right Hand Side Of Your Screen

This is where you will go in order to customize your site colors, your animations, your form appearances, your button appearances, your fonts - and your line blocks!

You don't have to use sqs block horizontalrule hr, you can change the background color without code! Follow this tutorial for more.

Step Two: Click The Arrow To The Right Of Your Color Palette

This will allow you to edit not only your line color, but also the colors of all different types of blocks and sections on your Squarespace website.

This tutorial is easier than a video. Just click the line to change the colour without code.

Step Three: Click The Line Block On Your Website

This is a fun shortcut that we encourage you to try when editing the colors of your Squarespace blocks. When you click the block you want to customize, the list of items on the right hand side of your screen will filter to appropriate options.

Click the circle with the colour in order to change the color. Topic is now archived.

Step Four: Click The Colored Circle To The Right Of The Word "Line Color"

The current color shows the current color of your line block. Once you click the circle, you will be able to change the color of your line block.

Archived and is closed.

Step Five: Choose The Color You Want

You will have two options. The first option is to choose a color from your palette (which we recommend in order to keep brand consistency). The second option is to use a custom color.

Colour, width, and video. Change the colour and then save the change you made!

Step Six: Click "Save" In The Top Left Hand Corner Of Your Screen

Note: Sometimes the "Save" button won't work the first time you click it. This is normal. Just click "Save" again!

Jocelyn Figueroa
Previous

How Do I Curve Letters In Canva?
Next

What Is a Sales Funnel?