23: Squarespace for Beginners: How to build a Squarespace website in 2024


Thinking of creating your dream website with Squarespace? Let's make it happen together! 🙌

Welcome to this special episode of "ThinkInsideTheSquare," where I, Becca Harpain, guide you through building a stunning, user-friendly Squarespace site. Whether you're piecing together your first page or eyeing an upgrade to Squarespace 7.1, I'm here with all the beginner-friendly tips and tricks.

As your go-to Squarespace expert and the brains behind insidethesquare.co, I'll walk you through every step of the journey. From navigating Squarespace's sleek interface to personalizing your pages with unique fonts and colors, I'm spilling all the easy Squarespace design secrets. No tech jargon, just simple, actionable advice that makes web design feel like a breeze!

Dive into the world of easy, creative website building! Perfect for dreamers, doers, and every aspiring entrepreneur and small business owner in between! Ready to elevate your online presence? Want to launch a website that truly represents you? You're in the right place!

Remember, no question is too small, and every creative vision is worth pursuing. Subscribe so you'll be the first to hear next weeks episode, and if you're hungry for more right now, visit InsideTheSquare.co/podcast for a transcript of this episode and a treasure trove of additional resources.

  • In this episode of Think Inside the Square, I'll guide you through the process of creating a brand new Squarespace website. Whether you're new to Squarespace or considering an upgrade to version 7.1, this high-level overview will help you get started. You'll learn some pointers on using the program. I'll share info about how to plan your pages, a few time-saving tips for adding and editing content, the best ways to customize your fonts and colors, and I'll wrap this up with some important settings you should know about before you launch your brand new website.

    Welcome to Think Inside The Square, a podcast full of quick tips and tricks to help you create a Squarespace website that you're proud of. I'm your host, Becca Harpa, Squarespace expert and creator of Inside the square.co. In this episode, I'm walking you through the basics of creating a brand new Squarespace website in 2024. For a transcript of this episode, along with the links to any resources mentioned, visit inside the square.co/podcast. The term Squarespace is a trademark of Squarespace Incorporated. This content is not affiliated with Squarespace Incorporated.

    This episode is going to be a long one, my friend. We have a lot to cover, so if you're listening on a walk, a commute, or maybe doing chores like I do when I listen to a podcast, do not worry about taking notes. I've written it all down for you. You can grab a copy of my five-step Squarespace roadmap@insidethesquare.co slash roadmap. It outlines the five key areas we're talking about today and has links to other resources to help you create your site. Again, that's available@insidethesquare.co slash roadmap. It's no secret that I love Squarespace. They make it easy for anyone and everyone to build a good-looking website, pick a template, update the content, change a font and a color to, and voila, your new website is ready to rock if only it were really that easy, right?

    If you've spent any amount of time using the program, you know it's not, but I do have some pointers that will help you build a website faster. So let's start with the program itself. How the heck do you use Squarespace? When you log in to edit your site, you'll see a gray bar on the left with words like website, selling, marketing, all the way down to settings and help. This is the menu for using the program. Squarespace has a ton of features and you donate them all. So if you're selling things, you're collecting emails for marketing, don't worry about those. Okay? There are only two that you're definitely going to use, website and settings.

    Website takes you to a list of all the pages in your website. Here. You'll be able to add pages to your menu, create a dropdown folder, rearrange your pages, and here you'll also see a not linked section for your site. So if you make a new page or a blog, but you don't want it to be in your main menu, add it here. This is a great place to put pages like your privacy policy. On the right, you're going to see your website preview, a live view of what your website looks like. Above the preview is the word edit, the title of the page, a little desktop icon, a phone icon, a paintbrush, and an arrow. Clicking on edit opens up the website editor. This is how you edit the content of that specific page. Things like products and videos and blog posts, they all have unique editing features, but if you do see the word edit, that means you click on the word edit and you can edit what you're looking at.

    Squarespace is a wizzy wig editor that stands for what you see is what you get. So if you see edit, you get to edit, and when you're in edit mode, you'll see that change to save and exit along with two arrows for undo and redo. Remember to click that save option when editing. Squarespace does not have a good auto save option at the time of recording this. So when I'm working on a site, I use that save feature often, and I think you should too. So again, if you see edit on the left-hand side of the website preview, you can click on that edit to edit the page you're on, and when you're in edit mode, don't forget to hit save and save often, my friend.

    Okay, there were more options on the right-hand side of this website preview. Next to edit will be the name of the page. Then a desktop monitor icon, a phone icon, a paintbrush, and an error. The desktop icon and the phone icon are how you switch between seeing what your site looks like on a computer or a smaller device like a mobile screen. This is how you can toggle back and forth to answer a few common questions. Here, no, there is no tablet view. No, I don't know why there isn't a tablet view and no, sadly, I have no idea if we'll ever get one. Yes, you can edit mobile separately for some content, but not all, and most standard pages have page sections that let you change the layout of your content on smaller screens by moving things around manually, but not every section is like that for some more details on what can and can't be edited specifically for mobile, check out the list I've added to the Squarespace roadmap@insidethesquare.co slash roadmap.

    So let's keep going. There are two more options here. The paintbrush icon, that is a big deal and it's super important to know about. This is how you access your design menu, where you change colors, fonts, and button styles on your entire website. Each one of these design menus has all kinds of options. You can assign specific font styles to headings, paragraphs, buttons, and even super specific things like a site title. You can work with all kinds of colors using colors, themes. These are collections of colors that automatically apply to the content on your site. You'll want to spend a lot of time in that design menu, especially if you're brand new to Squarespace. Without digging into that design menu too much, I wanna let you know if some of the types of content have their own design menu, like a list section in a storefront. You'll see some design options pop up when you're editing the content of your site, so if you do wanna change something and you don't see it in your design menu, try hopping into edit mode to see if more options come up for you.

    I will be digging into content next, but there's one last option at the top of your website, preview after edit, after page title, after the desktop monitor icon and the phone icon and the paintbrush, there's an arrow pointing to the top right corner. That arrow will expand the website preview to the full width of your screen, hiding the program options on the left, like website and settings. This is a great way to see what your website actually looks like on a monitor. That's the same size that you are using. If you ever log into Squarespace to work on your site and you're stuck in the full preview, just hit the escape key on your keyboard or hover over that top right corner until you see an arrow icon, so you can pull the preview back to the editing size and use your Squarespace menu to navigate the program. Alright, now that we know our way around, let's talk about the content of your website starting with pages.

    When you log into Squarespace and click on website, you'll be taken to a list of all of the pages. This is your page's menu. Every page will have an icon next to it. It'll be a standard page or a blog or a store or a different type of collection. Pay close attention to the icons so you know what kind of page you're looking at. You'll also see one page of the little house icon. That's your homepage, and yes, you can change your homepage at any time. Whatever page you want to be the homepage of your website, hover over the title of that page here in the Squarespace program until you see the gear icon. That icons opens up your page settings, and here you have all kinds of options, including the option to make that page your homepage. So if you ever design a new one, it's super easy to change.

    Now on this list of your pages, you'll also see some labels. The top of this list says main navigation. This is where the pages inside your website menu are listed. If you want to rearrange your menu, you can drag and drop these pages in any order you want to. Just like dragging a vi on your computer, click and hold, drag it to the right place, then let it go. You'll also see a label for not linked. This not linked section of your website is where you'll have pages that aren't in your main website menu. It's where I put landing pages and my privacy policy things that I don't need at the top of my website. Underneath those sections, you'll find links for utilities. This includes system pages, website tools, and trash system Pages are things like your 4 0 4 error page tools or shortcuts to settings like your cookie. Alert and trash is such a great feature. If you accidentally delete a page and want it back, you can restore it as long as it's only been gone for 30 days or less. After 30 days, your trash can is emptied, but before those 30 days are up, you can restore any page that you might have accidentally deleted. I love that feature. Thank you, Squarespace.

    Now let's talk for a second about creating the content of your site. There are so many different ways to share information using Squarespace. Images, audio blocks, text, the possibilities are endless. Squarespace has over 20 types of content blocks that you can use. There are basic blocks. These are made up of content that you manually add to the block itself, like text images and links. Then we have content-based blocks. These pull information from other places on your Squarespace website. To use a product block, you need to have a store. To use a summary block, you need to have a collection to summarize, you get the idea. Now, last but not least, we also have integration blocks. These content blocks are linked to other companies like social media platforms, Amazon, and others. Some of these blocks are premium, which means they may require an additional fee to use on your Squarespace website.

    When you're working on any page and you hop into edited mode, you'll be able to change the content that's already there. Most pages have what are known as fluid engine sections or auto layout. If you click on some of the content in edit mode and you see a blue outline, that means you're using a fluid engine page section. You can drag and drop that content block around, resize it, place it below or above other content and layers, and click on your mobile icon at the top right-hand side of your website preview to change its layout and size, specifically on mobile screens.

    Now, double click on a content block to start editing. If it's text, you'll see a text editor bar to work with. Otherwise, you'll see a new design menu with options and how to use that specific type of content block. You can replace images with your own change shapes, add audio and video files. There are a ton of options. If you're editing something and you want to remove it, just press delete or click the trashcan icon and it's gone. You can also add new stuff really easily. Again, this is for a fluid engine section. When you're in edit mode, you'll see an ad block option. This opens up a list of content blocks that we talked about so you can add more. Don't forget that some of them are basic. Some are based on other content on your site and some are integrations with other programs. So explore that list to find exactly what you need.

    Now, let's say you're in edit mode and you click on an image or some text and nothing happens. No editing options pop up, no blue outline. That means you're clicking on an auto layout. Squarespace has a few of these to make designing easier, they automatically organize your content for you. You'll find list sections and gallery sections of their own menu and collection list like a storefront. It'll have its own design settings. If you click on content to edit it and you don't see ad block on the left, you're probably working on an auto layout. Look to the right to see if you have a completely different set of editing options. If I'd say edit section, edit gallery, manage projects or manage posts, click on that popup on the right-hand side to see the options for that specific auto layout.

    Okay, we have gone through a lot already, so I wanna do just a quick recap before we keep going. When you log into Squarespace, you'll see the program menu on the left and the website preview on the right. Click on the word website to see the pages in your site and access other utilities like your system pages and your trash can drag and drop pages in the main navigation section to be the links in your website menu. Leave pages in the not linked section to keep them off the menu, but still accessible. To change your homepage, click on the gear icon for a specific page and assign it as the homepage. In the settings menu, you'll find other settings there too, like page title and URL, so check those out when you want to edit information about the page, not the information on the page. To edit the info on the page, click on the word edit and don't forget to save while you work. Double click on content to see your options for that content block, and if nothing happens when you double click, look to the right of the page to see if you have a special menu to edit an auto layout to change fonts and colors. Click on the paintbrush icon on the top right-hand side of the screen at any time in edit mode or not. It doesn't matter. And click on the phone icon if you want to see the mobile version of your website at any time.

    Oh, and I've got to mention one last specific content thing on the left-hand side of your screen. When you aren't in edit mode, you can see the menu for using the Squarespace program. That starts with the word website.

    Look towards the bottom and you'll see asset library. This is where you can access all of the images being used on your website. You can bulk upload them and organize them into files. Super helpful if you have a lot of images on your website. Wow, so we are powering through this information. I'm sure you know this, but I'm gonna say it anyway. This is a high level overview of how to build a Squarespace website. There are a ton of details I can share about all the info between, and I will include some links in the show notes for this episode so you can keep this education train rolling.

    Okay. You'll find those show notes@insidethesquare.co/podcast, and if you want a deeper dive on Squarespace 1 0 1 level info visit inside the square.co/roadmap. There, you'll find the unique PDF that I put together for this specific episode of my podcast that digs in the content we're covering. It's a five step roadmap about planning your pages, navigating the editor, creating your content, customizing your site, and some important site settings every Squarespace user should know. In fact, let's move on to that.

    Site settings you should know about. You don't have to have the perfect domain to go live. Your Squarespace site can be something unique.squarespace.com, assuming the word something unique isn't taken. I am the proud owner of Becca's demo site.squarespace.com and house party squarespace.com, but you can pick something cool too. Click on your settings on the bottom lefthand side of your screen, and here you'll see domains. You can link to a domain you own or click on the builtin domain and change it. That's how I got house party.squarespace.com.

    Now, some of the other important settings you should know about will be your business information under settings, commerce, business information. Here you can add your address, phone number, and your main contact email. I also recommend taking look at the links you have for your social media on a site wide level visit settings, website, social links. You can set these up while enabling social links in your website header or in a content block, but if you add it here, all of those content blocks will update automatically when you add a new one, which I think is a really helpful time saving tip.

    I also want you to check out your site-wide, SEO under settings Marketing, SEO Appearance. You can add page specific SEO titles and descriptions inside the settings menu for individual pages and individual blog posts, but if you add them for your site-wide SEO settings, again, that settings, marketing, SEO, appearance, that'll be a good catch-all just in case you don't update a specific page when you launch it. Last but not least, an important setting that I recommend is add adding a privacy policy. Add this page to the not linked section of your site, so it won't be a part of your main navigation, but you can still link to it. If you sell products link to this page under your store policies. You'll find that under settings, commerce Cart and checkout store policies.

    Okay, we just covered so much information and I truly hope you enjoy this episode of Think Inside the Square. It's definitely the longest one I've recorded to date because I had a lot to share with you. Thank you so much for listening to this episode all the way to the end. I truly hope you enjoyed it. I have a lot more tips and tricks to share with you about making an amazing Squarespace website that's uniquely yours, so be sure to subscribe to this podcast wherever you happen to be listening to this episode.

    And again, definitely check out the guide that I made to go along with it. It's A PDF that covers all five areas that we just talked about, available for free@insidethesquare.co/roadmap. Thanks again for listening, and most importantly, have fun with your Squarespace website. Bye for now.

  • Squarespace Roadmap: insidethesquare.co/roadmap

    Overview of page types: insidethesquare.co/podcast/02

    Overview of page section types: insidethesquare.co/podcast/03

    Squarespace menu overview: insidethesquare.co/update

    Squarespace course: insidethesquare.co/start

Music Credit: Arpenter // Audio Editing: Adobe Enhance


insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

24: The Art of Organizing Your Website Content // Squarespace Content Tips

Next
Next

22: Behind The Scenes of InsideTheSquare