Squarespace Page Blocks & Types Tutorial: 12 Blocks You Need To Master To Build Anything
Chapters:
The Different Page Types on Squarespace 7.1
When you click "Pages" in your Squarespace main menu, you'll see there are two main categories of pages: "Main Navigation" and "Not linked."
Pages that are under main navigation will appear in your main menu at the top of your website, also known as your header.
To change the order of your main menu, just click and drag any of the pages in "Main Navigation" to order them how you want.
Pages that are "Not linked" will not appear in your main menu, but people can access them through search engines, directly typing in the URL of the page, or by clicking an internal link (a link you put in a button or hyperlink) on another page.
Remember: You want only your most important pages that contribute to your primary goal to be in your top navigation.
The Blank Page Option in Squarespace 7.1
If you click the "Plus" button on the page's menu, you have a few different options.
The "Blank page" option is great because it allows you to create and customize everything. I recommend people start with this instead of trying to fit their ideas into a template.
Many people try to make their content fit into a template, which definitely gets in the way of their website being unique and helping people understand their product or service.
By the end of this course, you will know everything you need to create a completely custom website.
Remember: Every page can have multiple sections by clicking the "Plus" icon at the top or bottom of a section.
Also, you can rearrange specific sections of a page by clicking the up and down arrows to make them higher or lower on the page.
The Blog Page Type in Squarespace 7.1
A blog is a page you can write a bunch of posts on. When you create your blog, your blog page will populate with all of the blogs that you write over time.
A blog page is super helpful for people because it allows them to easily search for pages, and it allows you to populate different types of pages or posts in a summary block which, trust me when I say, is SO helpful.
Honestly, this is a super powerful tool you can use for any type of content you want to group together, but we will explain this in more depth later on.
The Store Page Type in Squarespace 7.1
If you would like to sell any type of product on your website, whether that is a physical or digital product or even service, then you will need a store. You'll need to create your store first before you can add your products.
I'll talk all about how to build out your store later on as I get into the specifics of e-commerce.
The Portfolio Page in Squarespace 7.1
This page is not super helpful, because you can just use a gallery section or a summary block to do the same type of thing.
A portfolio page is where you can showcase some text and projects, and then if you click on a project it gives you more info on that project and also has options for you to view the next project at the bottom.
The Events Page in Squarespace 7.1
The Events page is awesome for any business or brand that has events that happen at a set time and date.
You can create events with a specific date range and times. Add pictures and specific details for the event, such as a registration link, address, contact or a zoom link.
If you want to create an event, click the "Plus" icon and set a new event.
The great thing about an event page is it will order your events in chronological order for you, and after an event has passed, it will take it off of your event page automatically so you don't have to update this page every time an event passes.
Even better is that it saves your events. If you have an event that happens monthly or annually, you can just go and change some details and the date without having to start from scratch each time.
Folders in Squarespace 7.1
Folders are not pages, but they are a great way for you to organize your pages. Just think about folders in real life to get the idea.
There are two great ways to use folders:
The first is in your main navigation. If you want to add a drop-down navigation menu, then create a folder and add the pages that should be included in that menu. This way, if someone goes to click that navigation menu item, they can choose between the pages you select.
Don't get carried away here, though. You still want your navigation to be as simple and easy to use as possible.
The second way to use folders is to organize pages of a similar topic or kind. Name your folder and put any pages that are alike in the same folder. Notice how you can expand or truncate a folder.
This is helpful if you have a whole bunch of pages and you want to make it easier to find your stuff.
If you plan to have over ten pages on your site, I would consider making a separate blog instead. I know this might sound strange, but using a blog will allow you to keep your content organized, search for it using a search bar, and populate your items in a summary block.
This can be super helpful for businesses that have many locations, employees, services, etc.
You'll learn more about this in my summary block explanation.
Link Pages in Squarespace 7.1
This is only really helpful if you have another website you would like to direct people to in your main navigation.
For example, if you had a Facebook community group you wanted to direct people to, you could create a link, name your link, drop the URL in, and then when people click it, they would be directed off your website to the place you send them.
This is definitely something you want to have a good reason to use. Remember: It's generally best practice to keep people on your website, but if you have to do it, use a link.
How to Use the Spacer Block | How to Customize Any Block in Squarespace 7.1
Oftentimes, people limit their content to what will fit into the template they have chosen. This is bad. You should have no limit to what you want to create.
Also, it's hard to create when you have a complete template in mind. Go through your pages and delete all your demo content.
Spacer blocks are the key to making all of your content in a custom size and shape. Spacer blocks help you limit the height and width of other blocks.
Here are a few common ways to manipulate your content using spacer blocks:
Keep Your Title Content From Going Wall-to-Wall
In general, it is not a good user experience, or UX, to have someone read from one side of the screen to the other. So, to prevent that you can use spacer blocks to frame your words and make it easier for folks to read.
Go to an insert point above the text you would like to change and create three spacer blocks. Drag each spacer block onto the same row by clicking and dragging a block until it highlights the side of the other block.
Now you have three columns.
Take your text block, and click and drag it under the middle column. Again, notice how when you drag one block to another it will highlight where it will be inserted.
This can be helpful when you are trying to drop it under a specific block, or side of a block, instead of an entire row or column.
Once you have dropped spacer blocks, you can click in between them and drag them left or right to make your text wider or narrower.
Arrange Photos or Text in a Grid
To arrange your content in a grid, simply create the top of the grid you would like using a top layer of spacer blocks.
Drop your pictures underneath each spacer block. Reformat the width for preference by pulling the inner divider left and right.
You can stack photos, or text, or a combination of photos and text blocks, along with any other type of block combination you can think of.
Just remember that on mobile, Squarespace will show left content before it shows right content.
Remove Spacer Blocks to Shift Content Up
Spacer blocks are great, but if you feel like you are creating too much... space... then you can always remove them after you have set your content up. When removing a spacer block, any content below it will shift up.
Just be careful because outside spacer blocks that are deleted will make your content expand.
Make Page Sections Taller or Wider
You can adjust the width and the height of a section by clicking the section's pencil icon.
The "Format" tab allows you to change how wide and tall you want a section to be.
If you click the "Background" tab, you'll see you can add a picture and video background.
A quick note about video backgrounds: They are not great because they can make your page load time super slow, especially depending on your browser's internet connection.
I love video, but I tend not to use a video background on any of my sites.
However, adding an image to your background is awesome and I do this all the time to help give it a custom look.
When using an image—or even if you are just trying to make your section a similar height to another section for symmetry—the spacer block can be a great option.
Since each spacer block is the same height, you can drop a certain number of spacer blocks above or below your content and know exactly how much you are adding to a section.
You can also drag the bottom of a spacer block to make it taller, but this just makes it harder to know exactly how much height you are adding.
When you misplace a spacer block
You are guaranteed to drop a spacer block wrong when you are building a website. Usually, this happens when you drop it too far on the edge of another block and it creates a huge gutter and compresses all your content on the other side of a page.
No worries, simply delete the spacer block you added and resize the content in your section.
There are a million ways you can use spacer blocks to adjust and format your content just the way you like it. Have fun with it.Blocks are the parts that make up the content on your site. We will use these blocks to create unique content that is specific to your business or story.
First, I'll introduce the different block types, then I will show you how to customize any block using the spacer block.
2. How to Use Text Blocks and Links in Squarespace 7.1
Click "Pages," then click "Add Blank." Whenever you create a new page, it always comes pre-filled with a text block. If you hover over the middle of any block, you'll notice that a plus icon appears. This is how you insert or create a new block. These are called insert points.
Type in some filler text and let's go over the options.
Your options are similar to any general Microsoft Word document.
You can bold or italicize. You can link (more on this later).
Paragraph styles are next. This is where you can make something a header or regular paragraph text.
You can highlight text to show it as a quote.
You have the alignment button, which allows you to left, right or center-align your text.
You can use bullet points or a numbered list.
Next is indenting your text. You can indent forward and backward using these arrows.
If you are copying your text from somewhere and don't want to import the text styles, then you can click the notepad option. Paste it there, and then it will import as regular text, without the formatting.
The garbage can allows you to remove the text block.
You can also hover over a block, click and hold a block, and drag it to the bottom center of a page so that you drop it into the garbage can.
When linking text, highlight the text and then click the "Link" button. You can either just insert a link, or use more options by clicking the gear icon.
"Web Address" is usually good for outbound links, and is what you will typically choose for general website links.
"Page" allows you to choose from your own pages, which is good for internal links.
"Email" allows the person clicking the link to start an email to the address of your choice that you have pre-filled for them.
"Phone number" is similar, which is very helpful, especially on mobile.
"File" allows the person clicking to download a file that you have uploaded here.
You'll notice that for all of these options you can choose to have the link open in a new browser tab.
Here is a good rule of thumb: If you are linking to anything other than your main core pages, have the link open in a new tab.
This makes it easier for people to stay on your content. You don't want someone clicking on a link to another website and then forgetting about you.
That would be super sad. 😢
Lifehack: Press Control/Shift+Return/Enter when you don't want a big space in between lines. This took me way too long to figure out.
How to Use Button Blocks in Squarespace 7.1
To insert a block, click the plus icon when hovering around the edges of a block.
Notice that the plus icon will vary in location depending on where you hover. This also tells me where the button block will drop into.
Buttons are great for calls to action because they are more noticeable than a text link.
You can then link the button, just like you would for a text block. You can also adjust the block size.
Remember: To style a button's font or color, you need to go to your site styles or style editor by clicking the paintbrush icon in the top right.
How to Use Image Blocks in Squarespace 7.1
Click the plus icon when hovering over a block and then click the image block.
To add an image, click "Upload Image" or drag it into the upload box.
You'll notice that the image will appear super big, but fear not—I'll show you how to customize all your blocks using spacer blocks in a later section.
You can use Squarespace's built-in image editor that can be accessed right below the image. Here you can crop, change a filter and more.
Next, if you click the design tab, you'll see the different ways that you can show your image.
Styling the Font and Layout of Your Image
When using layout options for a text block, you want to move between your page editor and your style editor.
To adjust the settings of an image layout, click the paintbrush icon.
To change general spacing and alignment, click "Image Blocks" and you can adjust those here.
If you click "Show All," you can see all the options for each image layout.
You can add buttons to images or link images under content. You can link the whole image so that if someone clicks on it, it takes them to that URL, or you can add a button.
You can adjust the spacing of buttons under site styles for that specific image layout.
To adjust the colors of an image block, click "Colors" and select the theme of the block. Notice it will show you on the left what color theme that website section is in.
Then click your image block. Here you can adjust image overlay colors as well as font colors. Remember: Whatever you set the styles to here will affect all other blocks of that design on that color theme.
Something else that is helpful is if you click onto another item like a button, you can adjust the color for those here, too.
Other Image Options
Poster allows you to add text right in the middle of an image.
The card layout aligns the image on one side with the text on the other side. You can toggle between left and right under "Design."
The overlap allows the text to slightly overlap the image.
Collage puts a square or rectangle directly over the image as if you were scrapbooking.
Stack puts the text directly below the image.
Note: Each image type has different customization options.
Image Animations
You can add animations to images by clicking the "Design" tab of an image and selecting "Animations." Toggle between the different animations and it will show you an example of what it looks like.
Note: Animations can slow down a page's load time. Use them sparingly and only when they truly add value to the section.
How to Use Gallery Blocks in Squarespace 7.1
A gallery block is more than a block—it's really a section. So when you want to add one, click the "Add Section" at the bottom of your current web page and click "Gallery" under "Add a Section."
Click on whatever layout looks interesting to you. You will be able to fully customize this later on anyway. It will upload with an automatic photo, but to add your own photos click the picture icon at the top right.
Click the plus icon and you can either search or upload images. When searching images, your options are either "View previously uploaded photos," "Search free photos from Unsplash" or "Buy premium images by Getty."
You can also just drag and drop photos into this section.
To delete the photos already there, just click the garbage can at the top right of each photo. Just like the image editor, you'll notice that if you click on a photo, you can edit each image.
You can also rearrange the order of your images by clicking and dragging them around your grid. The top left will display first, bottom right will display second.
If you want to change the layout of your gallery, click your gallery and select the pencil icon, then click the drop-down menu under "Gallery Type."
Each gallery type also has different options for columns or spacing between images.
The animations are the same as the image box, and "Lightbox" means that if someone clicks a specific image, it will get bigger and encompass most of the screen.
Remember: You can change the background color for this section just like you can any other section. To do so, click the pencil icon and then "Colors." Select the background color you'd like.
Remember: Any time you want to change the font or background colors, you need to change these in the style editor by clicking the paintbrush icon at the top right.
How to Use Video Blocks in Squarespace 7.1
To insert a video, click an insert point, or the plus icon, on a section. Then click the video block.
You will not actually upload your video to Squarespace. Instead, you will upload it to a third-party platform like YouTube or Vimeo and then drop the link where it says "Video URL."
For example, go to a YouTube video and click the share button underneath the video. Copy the URL and paste it in the video URL box and your video will appear.
Below that it gives you the option to upload a custom thumbnail. It's a good idea to have video thumbnails because it can speed up your page load time. It usually takes less time for an image to appear than an embedded video. Just make sure the image you upload is under 500KB.
How to Use Form Blocks in Squarespace 7.1
To add a "Form Block," click the plus icon at an insert point. You'll notice you have tons of options to go through here.
For form name, you want something that will let you know exactly which form is being submitted. When someone submits a form, the form name will be the subject of an automatic email sent to you.
This can be helpful to know if someone submitted a question or if they want to schedule a demo.
Let's go through each of the form fields:
The text field is used if you want a single line of text. For description, it appears above the text, and placeholder text is an example of what would go inside the text field.
You can also make things required or not required. If someone tries to submit the form without completing that field, then it will prompt them to first complete the field.
The text area is the same thing as the text field, but the area is bigger to allow for more text.
The select field allows you to create options in a drop-down menu that someone can select. Just be sure to put one option in the text box at the bottom of the edit form block when selecting this field. Note: People will only be able to select one option in this field.
The check box is similar to the select field, except they can select more than one option.
Radio is similar to the check box, except you can only choose one.
Survey auto-fills with a range of choices that someone can check such as "Strongly agree" or "Strongly disagree." All you have to do is set the question for the field.
The name field automatically populates a field for someone's first and last name.
The password field allows them to save a password.
The address field gives all the fields necessary to record their address.
The Twitter field allows someone to add their Twitter handle.
Note: The value of putting a specific field for something like a Twitter handle or a phone number is the system checks the format to see if it is valid. This way, someone can't put letters in for a phone number, for example.
In the website field, someone can add a URL.
The email address field allows someone to add their email address.
The date field allows for someone to input the day, month, and year.
The phone number field allows someone to put their phone number.
In the currency field, someone can select their preferred currency.
Line is useful, especially for longer forms in which you have a section that collects their name, address, and phone number, and you want to then have a survey. It helps divide and organize sections well.
Form Storage
Where does all this information go? The automatic default is that Squarespace will send an email to whatever email is connected to your account.
This can be a lot of emails depending on the form, and you will probably want a way to collect and organize email addresses gathered.
Therefore, many people use a third-party email platform like Mailchimp for free. You can easily connect your Mailchimp account to Squarespace in the field under the email address.
Zapier is a software that allows other software to communicate with each other. For example, you could create a ZAP that triggers anytime someone submits a form and connect it to a Google sheet where it auto-populates and organizes the information into set fields.
Google Drive allows you to again, connect things through Zapier and auto-populate information into forms and sheets.
Form Design
You can customize the button text under the "Content" tab and you change the button alignment under the "Design" tab.
Under the "Content" tab, you have two options for what happens after people submit a form under "Post submit."
You can either write a custom message like, "Thanks, we have received your form and we"ll be in touch within 24 hours." Or you can click "Redirect."
For redirect, you can select a URL of your choice that Squarespace will send people to after they complete the form. This is great for keeping people on your site and having them look at more of your stuff.
If people are submitting a demo or inquiry form, it's nice to send them to a place that has testimonials, reviews or example work to start warming up prospects for the sale.
How to Use the Newsletter Block
If you want to be gathering email addresses—which, by the way, you definitely should—then the newsletter block is a great way to do that.
This block can be used to collect contact information for a lead magnet, free giveaway or just as part of your weekly email updates.
Click the plus icon insert point and select the newsletter block. Name the form something that lets you know what people are opting in for so you can reuse this block later on.
For title, you want to help the browser understand WHY they should put in their info. "Subscribe" won't cut it. Instead, explain the benefits of your item.
Free Fillable Website Design Guide
SEO checklist
Get helpful mindfulness tips in your inbox each week
You should select the option to require the name field. The reason why is because when you are writing emails to your list, you want to be able to personalize them.
People like personalization.
You can also add a disclaimer or promise not to spam folks in the disclaimer box. You can change up the button text to say something more enticing like "Download Now" or "Get the Free Checklist."
Under "Design" you can choose to "Stack" or "Float" form fields. Stacked means each field is on top of the other. Float means the fields can be side-by-side.
Under "Storage" you'll notice that Squarespace automatically connects you to their email software. You can disconnect this here and choose another email provider like Mailchimp if you would like. We'll talk more about email providers later on, but for now, I wanted to just show the basic storage options.
Note: If you are using some other email marketing software then you would not use the newsletter block. Instead, you would use the custom code block. Again, I'll explain more about that later.
Just like the form block, you can choose whether you want to display a message after they hit submit or re-direct them to a custom thank you page.
How to use a Summary Block in Squarespace 7.1
Summary blocks are a great way to pull in content from your blog or store and display it on different pages. To use the summary block, click the plus icon insert point and select the "summary block".
Before you connect your blog Squarespace automatically puts in some filler content that you can play around with.
In order to display blog posts or store items, you need to click "select a page", These need to be built out ahead of time to display here, which, I'll show you how to do soon.
Metadata for gallery blocks include things like tags, categories, dates, and author. You can select to have two or none of these options display with your blog post under primary and secondary metadata.
Last you can choose to filter items by tag, category, and featured. I'm going to go over these in greater depth later on, but this can be helpful if you want to only pull content or on a certain topic, or display just your sock options from your store.
Next, click the "design" tab to go over some other options on how you display your content.
"Wall" displays your content without adjusting the size of your images.
This is great if you don't want to worry about making sure each of the images in your store or blog are the same size, but you want to show them off in an artsy way.
You'll notice for this and many other options you have some styling options you can use such as:
The number of items you want to display.
The Alignment of your text.
And whether or not you want to display the title, image, excerpt, and read more options for each post.
Where you want your meta display if you selected to show it.
You'll also know a "size and spacing" option where you can vary the column and gutter width to fit your preference. Note, you won't have these options for all of the gallery choices, only some of them.
"Carousel" displays your content in a row, with an arrow that you can use to see more options.
Here, "image ratio" becomes important because it will automatically crop your image to a landscape version unless you choose a different option like square.
"List" shows your content from top to bottom in chronological order.
"Grid" shows your content similar to "wall", but this time creating equal space between rows and having a uniform image shape.
How to Use the Map Block in Squarespace 7.1
To use the map block, click the plus icon insert point and select the map block. This is connected to Google Maps. This is especially important if your business has a physical location. You want to have both your written address and the map on your website.
Enter your business name and address, and Google will start to auto-populate your address. Once entered, Google will drop a pin on a map to show your location.
To customize your map, click the design tab. "Labels" show the nearby location and city names. "Terrain" shows the topography and gives a more 3D feel. "Controls" allows people to zoom in and out of your map and navigate to surrounding locations.
You can also show how it is displayed via the drop-down menu. You can select a greyscale, light, satellite, black, white, or blue display. Choose whatever fits into the overall aesthetic of your website.
How to Use the Search Block in Squarespace 7.1
To use the search block, click the plus icon insert point and select the search block.
By default, when you insert a search block it will search all the text on your website. However, if you have an online store or a blog and you want it to only search those things, then you will need to adjust the settings.
To do this, select "Search specific page" and then select your blog, store or whatever specific item you want people to search in the drop-down menu display.
Remember: This search bar can only specifically search collections, like blogs and products.
Under the "Display" tab you can select "Quick Preview." This means it will auto-populate options in a drop-down menu when someone is typing content into it.
Last, you can choose between a light or a dark theme. Just make sure that people can see your search bar.
A quick reason why having a search bar is great for your website is that apart from it helping people find stuff, you can later go back and look at what people are searching for in Google analytics.
So if you see that people are constantly searching for your services or pricing, then you know you might need to display those pages more clearly.
Or, if people are searching for particular content, such as a blog post, it might be worth featuring those blogs on the blog homepage.
How to Use the Instagram Block And Social Buttons in Squarespace 7.1
Let's connect some social media to your website, specifically your Instagram via the Instagram block. Click the plus icon at an insert point and select the Instagram block.
By default, it will display demo pictures.
To connect your own Instagram, click "Save," click "Home," and then click "Settings" in the Squarespace main menu.
Next, click "Connected Accounts" and you can select any of the social media accounts you would like to connect, including Instagram. Select Instagram, choose "Download Data," click "Save," and then you are connected.
You will see your Instagram display on the page where you dropped your Instagram block.
When you select your Instagram block and click the edit pencil icon, you'll see two things: The account you are connected to and the number of items you would like it to display on a page.
Then, when you select the "Design" tab, you can see your options are very similar to the summary block.
Usually, folks select the "Grid" display for this.
You can choose the number of items displayed per row and also the padding you would like between each item.
Remember: If you want to show more social media accounts, you'll need to allow this on the "Accounts" tab.
If all of your images are different sizes, then go to the "Design" tab and select "Crop images."
Also, can have each image displayed bigger when clicked by selecting the "Lightbox" option. The theme you apply to the lightbox option will be the background, so either a black or white background when the image size is increased.
You can select "Open in new tab" if you would like to allow people to learn more about your post, which I don't recommend. You want people to stay on your site.
If you really wanted to show off these images you could upload them to a gallery or summary block instead.
How to Use Code Block and Code Injection in Squarespace 7.1
Code blocks are helpful when you have third-party software that doesn't already have an integration with Squarespace.
For example, I am currently the host of the Sandstone Care podcast that helps teens, young adults and their families overcome challenges with substance use and mental health conditions.
The podcast is hosted on Buzzsprout, which doesn't have a direct integration with Squarespace, but it's not a problem because I can use a code block to help display episodes on my website.
Select an insert point and click the plus icon. Select the code block. I'll go over to Buzzsprout and grab the code for a specific episode that I want to showcase. Copy it.
Come back to Squarespace, click the pencil icon, erase the stand-in code already there, and past the code that I have.
I'll have to save the page before the code will display and when I do I can see that it worked.
The cool thing about something like this is that if I wanted to display all the episodes that come out without uploading each one to the site, I can copy the RSS feed code and do the same thing. Copy and paste it into a code block.
Now, anytime I upload an episode, it will automatically update here, too.
This kind of thing works for all kinds of integrations including other marketing email providers like Active Campaign. You just copy and paste the code here to have it display on your site.
This is how you display code on a particular section. But there is a way to use code on an entire page or your entire website.
Here is how:
If a 3rd party software asks you to put code into the header or the footer of your website, then you will need to do a code injection. To do this, go to your Squarespace main menu, click "Settings" and then "Advanced" and then "Code Injection."
You'll then see the header area and the footer area. You can copy-paste code here and it will be used across all of your websites.
If advised by third-party software to put code on a particular page in the header, then go to "Pages" in the Squarespace main menu.
Find the page you would like to add code to and hover over that page to click the gear icon. Then click "Advanced," and you will see you can inject code into that particular page.
If you are still struggling to get your website looking just the way that you want then schedule a free web design consultation with me and I will help you out!
Written by Clint Mally