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

CHANGE THE HEADING 1 TO 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):

@font-face{
font-family:’Garlic’;
src: url(‘//static1.squarespace.com/static/5fc558c6be9b693951286cc7/t/5fc55b91f81c9a2a0c56018d/1606769553641/Garlic-Regular.ttf’);
font-weight: regular
}
h1{
font-family:’Garlic’;
}

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!