My Top 3 Favorite Squarespace Blocks (Version 7.0)

Heads up: I use affiliate links for my fave products. If you click and purchase, I may receive a small commission at no extra cost to you.

Squarespace Analytics 101 Click here: solopreneursidekick.com/squarespace-analytics-101

Squarespace blocks allow you to add any type of content that you want but these 3 are my absolute favorites!

WATCH THE VIDEO:

 

video transcript:

My Top 3 Favorite Squarespace Blocks (Version 7.0)

In today’s video, I want to share with you my top 3 favorite Squarespace blocks. If you didn’t know, Squarespace is built up of blocks, which allow you to add any type of content that you want, whether it’s text, images or buttons – the list goes on.


These 3 are my absolute favorite Squarespace blocks. I’m going to explain what they are and why they are my favorites.


If you’re new to my channel, welcome. I’m Louise of Louisehenry.com (formerly Solopreneursidekick.com). I put out new videos every single week, all about making the tech in your online business easier, so if that is something you would like some help with, make sure that you hit Subscribe down below and that you hit that little Bell icon, so you get notified every time I post something new.


Here are my favorite Squarespace blocks.


#1 – Spacer Block

Number 1 is the Spacer block. This allows me to create really nice white space in all of my designs, as well as allowing me to resize images and blocks however I like.


For example, with this section here, as you can see, I have white space above the top as well as on the sides. That I’ve created using Spacer blocks. Let me go into Edit mode to show you. As you can see, we have the Spacer block across the top as well as on either side. This top one is to create that white space. If I delete this, that’s going to make this graphic way too close to the section above it, and it’s really not going to look as good. That’s what it looks like without the Spacer block.


I’m going to go back into Edit mode. All you need to do is find the little Teardrop shape (it’s being cut off a tiny bit, but this is what it usually looks like). If you click on that, and then select the Spacer block, that is how you add it in. I’m just going to do it up here, add that in, and that adds that blank space across the top.


As I said, it is also great for resizing images. Let me take out these Spacer blocks and show you what it would look like without it. As you can see, that is way too large and does not look very good. All I need to do is insert my Spacer block, drag it over to the right side of this image, and do it again. I’m going to insert another Spacer. This time I’m going to add it to the left side, and then, as you can see, that has given me even spacing on each side, and makes this look significantly better.


I use Spacer blocks all the time. They are all throughout my website - they’re here and here to create that blank space. This is a really important principal when it comes to design.


#2 – Image Block

Number 2 is the Image block. This is because it allows you to add any image or graphic that you would like - and I love that it has 6 styles built in already.


The Image block is great because it allows me to add in regular images like this, but it also allows me to add in graphics like this. These are just added with Image blocks, and I’ve just uploaded a PNG file of a graphic.


Then, what’s super cool about Images, is that they have 6 styles built in. Let me just go to an example page to show you that.


For example, I have this image here, which I got just by clicking on the little Teardrop, and then selecting Image. With this one here, if I select Image, and then go over to Design, you’ll see that there are 6 different display options. For example, we have the Poster – this is going to put text on top of the image. Then we have the Card, the Overlap, which overlaps your text a bit, the Collage, which creates a card that overlaps, and then we have the Stack, which puts the text below. With all of these, you can actually add a button to them as well.


This is really great, and you can customize the look a lot more if you go into Style Editor. You can change the color of the background and the text. There’s a whole lot more that you can change, so this is why I love the Image block.


#3 – Code Block

Finally, my last favorite Squarespace block is the Code block. This is because it allows you to easily integrate other tools with your Squarespace website. Often you don’t need to touch the code at all - you can just copy and paste it into the Code block and it will work automatically.


Whether it’s integrating forms from your email marketing system or embedding a certain plug-in, you can do that easily and with no problems.


I use the Code block all the time. If you go into Edit, then click on the Teardrop and scroll down to Code – that is how you add in this block. Basically, what you can do is just paste in the code from other tools.


For example, I use ConvertKit for my email marketing, so all I need to do if I want to add this to my website is click Embed, copy this code, go back into my website, paste it here, click Apply, then Save, and that is all that I need to do. Now, when I go to this page, there is the form on my website.


That’s one way that I use it. Another way is by adding Share buttons to my blog posts. As you can see, this is just a plug-in that I’ve been able to easily add with a line of code. All I needed to do to add this was paste this in. This applies to all different types of plug-ins. I think you’ll be really happy with how easy it is to integrate other tools.


Those are my top 3 favorite Squarespace blocks. Now, I would love to hear from you. Let me know in the comments which one is your favorite block.


If you liked this video, let me know by giving it a thumbs up and hitting Subscribe. I’ll see you soon with another video.

You can sign-up for a free trial of Squarespace here. Use the code SIDEKICK10 for 10% off your first year!

What's your favourite Squarespace block?! Let me know in the comments!

 

GET YOUR FREE ROADMAP HERE:

Create-Your-Website-with-Squarespace-Roadmap.png