How to add section Borders In Squarespace To Create an Editorial Look

Editorial-style web design is trending and for a good reason.

Editorial design is typically a method for designing print publications such as magazines or newspapers. It offers a clean and organized layout for lots of text and images. It can be very simple or it can be bold and outside of the box. Bringing the ideas of editorial design into web design is actually perfect because websites also have images and text that need to be arranged in a legible yet interesting way. 

A characteristic of Editorial design is using thin lines to separate design elements resulting in a clean organized look. In this post, I will be providing easy copy and paste CSS code to add borders to your sections and to split those sections into supplemental sections with more lines! yay! By the end, you’ll have an organized, bold looking editorial style website! 

To start, you will want to find your section ID. To find your section ID, it will be different in Squarespace 7.1 than it is in 7.0. Luckily, I will show you how to do both! For this tutorial, you will need your Custom CSS window up. To get to your CSS window, go under the Design tab in the toolbar then click on Custom CSS which is the last tab under Design. 

You will also need the Squarespace ID finder extension for your browser. If you have not yet added the Squarespace ID finder extension to your browser, DO IT NOW! If you plan to use more CSS in the future, this will be a very helpful tool. Click here to add the extension. This extension helps you find the ID of every element on your website so you can copy and paste it into your Custom CSS Window and style it with CSS! It’s very simple. 

Section ID Squarespace 7.1

Once you have the Squarespace extension added. Go to your site and click on the extension in the upper right-hand corner of your browser. Once you click it, you will see every ID of every element on your site. Most of them will be red, but the section id can be found in the upper left-hand corner of each section in blue.. Click on the ID in the section you want to target and copy and paste it into your Custom CSS window.

Section ID Squarespace 7.0

In Squarespace 7.0, if you are using a template from the brine family, each of your sections will have a name. Hover over the section you are trying to target. In the upper left hand of the section, click settings. In the settings menu find ‘URL SLUG’ whatever the URL slug is will be what you want to copy and paste into your Custom CSS window. However, you will want to replace / with #. So for the example below, you would enter #about in your Custom CSS window.

Now that you have identified the section for which you would like to add a border. Add this code:

section[id]
{border-bottom: 1px solid red;
 border-top: 1px solid red; }

Red lines are working with this Squarespace template that I chose for this tutorial, but you can change the color by replacing ‘red’ with black or a hex code.

Let’s take it a step further and add vertical line to split the section up again. Go to any insert point either above or below and add a line.

Once you have added your line, use your Squarespace ID finder to copy and paste the ID block for your line, in your Custom CSS window.

After you have copy and pasted your line ID into your Custom CSS window, paste this code underneath.

#block-id{
  transform: rotate(90deg);
  margin-left: -25%;
  width: 150%;
}

You should now have a vertical line. If the line stretches outside of your targeted section, add this line of code in your section code block.

 overflow: hidden;

You should end up with something like this! Feel free to play around with the margin percentage to move the line from left to right! you can also play around with the spacing of your elements so they fit perfectly inside the new sections you’ve created!

Just a few simple lines of code and you now have a bold, sleek design underway!

If you enjoyed this tutorial - feel free to check out my other Squarespace Tutorials!