your Squarespace Website --
with easy to implement codes


How I love to start off with a completely custom squarespace website

Anyone else a big Pinterest fan? I thought so!

Head on over to our favorite search engine, and type in websites. You will be inundated with stunning sites. Pick your top 5 and figure out what you *actually* like about those websites!

Screenshot the sections of the different websites you like and then go into Photoshop, Canva, or Adobe InDesign and create a long document (width = 6 in. height = 23 in.) and lay out the sections in the order in which you want them. 

If you want more free rein on your design, lay out what you want in each section. This will be the "template" or inspiration board in which you work off of.

1. Write on a color block

Create a block of color on top of your background and then add text to that on squarespace 7.0- Brine template

You can achieve this by going into Canva, creating a new document that is 2500 px by 1500 px and making it the color in which you desire. You then add your color image to Squarespace using the "poster" block, click "apply" and simply write the Title and Subtitle on the color block. 

Put spacers on each side of the color image block to make it smaller. To add a button to the block, click on the image, click edit, go to design, image link (button), and add the Button Text and Clickthrough URL. Click save!

If you want to change the color of the text in the block, go to design -> site styles -> click on the whole block -> under image block: poster -> find "Title color" and change it. 

2. Create custom background

want to create a squiggle background Or blob? any element like this must be done in canva or adobe indesign, etc.

Make your way into Canva again.  Create a document size on Canva of 11 in. x 8 in. (if it ends up being blurry, make it bigger) and add the squiggle or element you want in the background. Then export it as a png.

Go into your page, hover over the section you plan on adding it, and click "Banner".  Add the image and you will see a circle form on the banner. You can move that circle to center on your image or wherever you want the focal point to be.

If you can't read your text, go back to site styles -> design ->Click on the text (it probably will be Heading 1) and change the color. THIS WILL CHANGE IT ACROSS YOUR ENTIRE WEBSITE.

3. Create sideways text

Another feature you do in canva!

Whether you want a sideways text that overlaps an image or simply the text, go into Canva and upload the photo (if you want it), add the text, rotate it, and overlap it on the image.  Export that as a png and then add that to an image block on your site!

4. Add a box shadow

Create a block of color on top of your background and then add text to that on squarespace 7.0- Brine template

This code adds a cool drop-shadow effect to a box. First you need to figure out the block you are targeting (like the Buyers block). I use a Chrome extension called Squarespace Collection/ Block Identifier. Make sure it has access to your Squarespace site and then when you click on it, it will show the block number (appearing something like the below).

Use that #block-yui… code with the following code in your Custom CSS section in site styles and Voilà!

#block-yui_3_17_2_1_1607038895076_5426 .image-block-outer-wrapper {

    box-shadow: 0px 4px 8px 2px rgba(0,0,0,.1);


5. Add a custom font


This is something I use on literally almost EVERY Squarespace website I design. First you need to upload the OTF or TTF font to site syles custom CSS and then use the following code with the URL that Squarespace provides (I titled my font Garlic, but you can name it whatever):

src: url(‘//’);
font-weight: regular

6. Add custom font to image card block

Another great one to customize your image card block

Just know it will change EVERY image card block across your website.

.image-title-wrapper * {

    font-family: Garlic !important;


7. Create a sidebar 

How to create a sidebar in your Squarespace Blog without code!!

Want this on EVERY page of your website? You can do that too! Same concept and just add a Summary block. Check out the video for a full tutorial on how to achieve a sidebar!

8. Create cool button

want to implement a button with a custom graphic?

Make your way into Canva again and create a transparent graphic with a text that says "learn more" or "click here". Then upload the png to the Squarespace section and add space blocks on each side of the graphic to make it a bit smaller. Finally, add the link to the graphic!


Interested in more tips to diy your squarespace website?


with their Showit or Squarespace website with intentional website strategy so they can book more clients and make more money doing what they love!

Helping creative entrepreneurs


Read The Blog

Privacy policy

back to top

How to design a website that converts!  Learn how to DIY your website with this FREE guide.

Let's connect!