Ok, so reason #371 I love Squarespace (totally kidding. I’ve actually lost count) is that it is basically “drag-and-drop.”

Squarespace makes it superrr simple for even the babiest of beginners to get started designing their site.

But don’t let the platform’s user-friendliness fool you! The fact that Squarespace is drag-and-drop does not mean you are stuck with some cookie-cutter website. In fact, Squarespace makes it easier than ever to create a completely custom, nothing-like-the-template design!

So, how do you begin to translate what you see in your mind’s eye onto the blank page before you?

Squarespace blocks!

Exactly as they sound, Squarespace blocks are the foundational building blocks you use to construct your site (and to tell Squarespace exactly what it is you are trying to drag-and-drop).

No having to jump into web-developer mode and add some scary bit of code to get your content just right. Squarespace blocks do the work for you, telling the millions of tiny little internet robots exactly how you intended for your image or text to appear when someone visits your site.

Oh, and ps…if you are new to Squarespace, and have done the usual healthy amount of googling, you have heard that they recently released a whole new version of their platform.

Do not let this overwhelm you!

The new platform is that much easier to use, and honestly, the good news about being new to Squarespace RN is that you won’t have to relearn everything, unlike those who first learned on Squarespace 7.0!

New to squarespace? You can sign up for a free trial here and I also got ya a little off the price! Use code PAIGE10 for 10% off your first year. (Yes, that’s an affiliate link!)

How to add a block in Squarespace 7.1

Blocks can be added to *almost* any page or section on your site (with the exception of gallery sections, collection sections, and the header).

So, the first thing you need to do is get you a blank canvas to add to!


From Squarespace’s main navigation:

  • Go to pages, then click the little plus sign in the not linked section.

  • Squarespace has a handful of page types for you to choose from, though for now, go ahead and select a blank page.

Select your new page from your list of pages on in the left navigation, the look for that edit button in the top left of your selected page’s window. This will allow you to edit the contents on that specific page!

Pro-tip: Top left is also where you go each time you finish editing a page’s content. Clicking done will allow you to save or discard the changes made on that specific page.

Now it’s time to add your first bit of content! Click that blue add page content sign to get started with your design. Again, Squarespace will offer you 1,000,001 content section layout options but let’s really let our creativity shine by going for a blank section.

Now we are ready to add our first block!

Hover over your blank section. See those funny little sideways teardrops with the lines attached? Each one of those represents a block insert point. Go ahead and click it to add your first block.



Now, if you’ve done any poking around in Squarespace, you may have noticed there are several blocks to choose from (more than what’s pictured here.)

So how do you know which ones you’ll need? Let’s start with the basics.

Allow me to introduce you to…

5 Squarespace blocks every beginner must know to build their first site

1. The text block

You’re going to need some text to let people know what it is your site offers.

(Not a lot of it, mind you. Best practice is to avoid lengthy, difficult-to-read chunks of text and stick to the important bits!)

Go ahead and click an insert point, and select text from the block menu.

The options for formatting your text are much like any other text editor. Pretty self explanatory. It’s the clipboard icon, and it’s neighbor to the right that you may not recognize!

These come in handy when copying and pasting text from an external source (ie. copying bits of your site’s written copy from a google doc). Pasting it onto this little clipboard first will clear any funky spacing etc. that you don’t want messing up your clean, beautiful site!


Psssst! Don’t forget to head into your site styles panel to customize your site-wide heading and paragraph font settings. More on that here.

2. The Image block

There is virtually no end to the ways you can insert and style your images in Squarespace, but when you are first getting started, the basic image block will do.

(Don’t worry, you’ll still have options to restyle that image once it’s uploaded.)

Find your insert point, and choose the image block shown in the basic section of the block menu. Then, when it prompts, go ahead and upload your image!

Oh, and FYI…Google favors sites that don’t take forever to load. Appease the internet gods by resizing your images to 500KB or less prior to uploading. Check out this post for how that’s done.


Once uploaded, head into the design tab of your image block editor.

The best way to understand each of these image design settings is to see them in action. Go ahead and select each different option and take note of how each one affects your image!

For more on styling image blocks, check out this handy help doc straight from the source!

Pro-tip: Want to reuse the same image on another page? Rather than uploading the image again, click search for image under the contents tab of your image block editor. Recent uploads can be found under the imported tab.

3. The SPACER BLOCK

Ok, if you’ve been speed-reading up to this point, you may want to stop and pay special attention to this section.

Seriously. This little fella can make or break your site design. And here’s why:

Reason #1: It creates space.

The fastest way to spot a DIY’d-but-not-in-a-good-way site is that it lacks white space (or empty space, if you’re opting for a colored background.)

There is beauty in simplicity, and if you think you have enough space, go ahead and add some more and that’s probably the right amount.

Pro-tip: Rather than resizing the height of each spacer block to create more space between bits of content, consider adding multiples of the default-sized spacer block instead.

This will help you to have a consistent amount of space between elements on the page, and throughout your whole site. And inconsistency is another dead-give-away for a poorly DIY’d site.

Reason #2: It helps you layout your content

Spacers are the easiest way to let Squarespace know where it is you would like to drag-and-drop your content. Unless you want every single block you drop to span the whole width of the page, you are going to need to use spacers to create a sort of grid that you will snap the rest of your content to.

Say you want to have an image on the left of your page, and a block of text on the right of your page. You would need first need to create two columns (or a grid of two) to place your content under.

To do this, you would insert two spacer blocks. Then, drag the two blocks side by side (as below).


You will notice when you try to select an insert point below the spacers, that your insert point no longer spans the whole width of the page. Use these new shorter insert points to insert your image and text.

Be sure to note where the black line of your insert point falls, as this is exactly where (and how large) your newly dropped content block will be. You can easily change your layout by adding more spacers side by side to form more columns, or by resizing the width of your spacer blocks.


Want to learn more about styling your site with spacer blocks? (The answer is yes. Yes you do.) Then head over to this post.

4. The Button bLock

Spending all your time building a site just for kicks? Then you can ignore this bit.

But if you actually want people visiting your site to take some sort of action, the button block is your best friend!

What’s the number 1 thing you want people to do when they visit your site? Book a consult call? Visit your course enrollment page? Sign up for a freebie that gets them on your email list? (For more on creating a freebie worth subscribing for, check out this post…because ain’t nobody clicking a button that says “sign up for my newsletter.”)


Whatever your desired call-to-action (CTA), send them there with a button block!

Oh, and button blocks are made for more than just links! Click the settings gear in the clickthrough url box to change the button link to:

  • A file for download

  • A pop-up email contact window

  • A phone number (dialed automatically in mobile view)

Btw, this is another block that will take some styling in the site styles panel first to get it looking just right (more on that here), but once you’ve got it matching the rest of your site’s style and vibe, this little baby can be used for literally anything.

5. The Form Block

Insert your form block like you would any other block: Yada yada, click insert point, select form block…

Ok, so not the sexiest name for a block. But stick around, because I promise you these guys are anything but boring!

In a nutshell, form blocks are the ultimate way to automate business tasks! And tasks automated = time saved. (Not so un-sexy now, right?)

Wanna know more about how form blocks can be used? Check out 6 Squarespace block hacks to save business hours every week.

Forms are a little less straight forward than our previous basic blocks, because once you insert your block and open up the form editor, you actually have to build the thing.


To customize your form:

  • Under the build tab, click add form field and add desired fields one at a time.

  • Drag-and-drop the fields in the order in which you want them to appear.

  • Delete any default fields that you do not wish to use.

  • Click edit on each field to add a description of the field (ie. give an example answer)

  • Clicking edit will also allow you to select whether individual fields are required or not required.

Next, you will need to tell Squarespace where to store the information submitted when a user fills out a form. These settings are found under the Storage tab of your form block editor. For a list of storage options and how to connect them, check out this handy article.

The final step is to tweak your form’s advanced settings.


This is where you customize:

  • The label on the button used to open the form

  • The label on the button used to submit the form

  • Button alignment (within it’s block btw, not the page.)

  • The messages users see after submitting a form

  • In lieu of a post-submit message, you can also opt to send them to a post-submit redirect or url.

Super long form? Pop that bad boy into lightbox mode.

Your monster-sized form will be replaced with a sleek button that when pressed, opens the form in it’s own little page within the same window.

New to squarespace? You can sign up for a free trial here and I also got ya a little off the price! Use code PAIGE10 for 10% off your first year. (Yes, that’s an affiliate link!)

/


/

Looking for more basics?

You’ll also love . . .

Squarespace basics: What are blocks?