How to Use Squarespace Tutorial [2024]

For damn near 17 years now Squarespace has operated as a top-rated online website builder for good folks like you and me. In the time they’ve continued to help millions grow online businesses, they’ve also adapted and improved their services.

One of the things that make these OGs so badass is that it’s super fast and easy to build a Squarespace website from scratch, and you need absolutely no prior experience. In fact, it may very well be the most user-friendly and intuitive web builder known to man.

Plus, compared to their competitors, they boast one of the largest assortment of creative tools around. Oh, and they’re really affordable too.

In this Squarespace tutorial for beginners, we’re breaking down the step-by-step process on how to build a Squarespace website from scratch! There\'ll be plenty of images and thorough instructions, so you’ll have your website up and running in no time!

Plus, if you’d prefer to listen to one of our website-building pros actually tell you how to use Squarespace to maximum efficiency, check out our video below!

Step 1: Sign Up For a Squarespace Account

To sign up for a Squarespace account and get started with building a killer website, follow the link here. That link will bring you to the homepage of Squarespace where all the magic begins. Once you’re there, just click on get started to… well, get started!

Squarespace will ask you a bunch of questions, but instead, click on I’m just browsing at the top right to continue on to the next page.

From there we can actually start designing the look of our site. This page is filled with some of the top templates Squarespace has to offer. Scroll down to choose one that stands out to you or fits the bill for your site. 

Then you can choose to preview the template for its feel, or even preview a demo site that uses this template.

And when you’re looking at these templates, don’t pay so much attention to the photos, text, and even the colors, because you can change all that stuff pretty easily. Pay most attention to the general layout of each template instead.

Once you choose your template, click on start with [insert name] and that will prompt you to create an account. So go ahead and create a Squarespace account using either Google, FB, Apple, or an email address.

Afterward, you’ll be asked to choose a name for your site, and then you’ll get a few walkthrough pages for how to proceed with Squarespace. We’ll be going over all this stuff in detail, so you can skip it for now.

And now the setup is done and Squarespace has opened its door to us! We’re ready to begin our customization process with logos, fonts, colors, and all the other fun stuff!

Step 2: Create a Logo 

Looking at your Squarespace website now, it’ll be pretty barebones minus some preset filler data and images. The first thing any badass website needs to succeed is a logo – you’ll want your brand to be spotted from a mile away. So let’s get that logo poppin’.

To the left of your dashboard under the name of your site, you’ll see where you can add a logo. If you already have a logo saved on your computer, click on the upload arrow, find your image, and upload it to your site. Done.

If you don’t have a logo yet, no worries – we’ll show you how to swoop one up in a snap! 

Just head on over to Logomakr, where they’ve got tons of free icons and images you can use to make and edit a logo for free! We use it all the time and couldn’t recommend it enough.

When on Logomakr, start by searching up any keyword most related to your site to find some cool free logos. Choose one that you like to bring into the editor.

After choosing the new face of your brand, you can resize it, add text to any side, manipulate fonts and colors, and more. But we recommend keeping your logo simple and clean. Below is a quick logo we thought up and will be using as we build our Squarespace website alongside you.

Once your logo is ready to rock, hit the save icon in the top-right corner. You’ll be given the option to download high-resolution files at a price, but we’re cool with low-resolution files for this one. Hit the “no thanks, download low-resolution file” at the bottom to claim your logo.

After you get your logo into your downloads folder, just follow the usual process we covered to upload your logo onto your website. And our logo is complete! 

Squarespace tips: Your logo will automatically replace the title of your website (located to the upper left of your site’s main page). If you’re cool with just using your logo as the representative for your site, cool. Alternatively, you can add your site’s name as part of your logo, just like we showed in our example, so both your logo image and name will appear on the site.

Step 3: Choose Your Fonts and Colors

The next step in our Squarespace website design is to choose our fonts and colors. Under your newly uploaded logo in the Squarespace editor, you’ll see a button that reads Next. 

Go ahead and click on it, and a bunch of fonts in different categories will pop up in this sidebar under Choose your fonts.

As you click on a font, the entire site will be changed to that font so you can see how it looks before committing. So just choose a basic font for now and don’t be alarmed if you can’t find an ideal font from this selection – we’ll show you how to change your font in just a moment.

Then, click on next, and you’ll get some cool color palettes to choose from, which will augment the look of your site’s buttons. Squarespace gives you some basic designer palettes, plus you can choose your own colors, which is sweet.

Find a color scheme you like, preview it for certainty, and hit Done once you’re ready to move forward. If you didn’t find the perfect font or color for your site and want to make some surplus adjustments, head over to Design in the sidebar, and find fonts and colors near the menu’s top.

You’ll have lots more options to choose from now, and altering the font of your entire site is as easy as clicking on something that catches your eye. Tubular!

Colors can be changed just as easily, but you’ll have more parameters to spice up. If you choose to edit your color palette and then choose to edit from color–>custom colors, you’ll discover full control over the color palette of your site.

Each color section corresponds to a different piece of your site, namely, your buttons, text, footer, and backgrounds. It’s all broken down for you piece by piece on Squarespace, and the changes you make are super easy to spot. Don’t be afraid to turn that dial!

Step 4: Edit Your Pages

Editing your pages basically means adding new pages or deleting pages from your site’s current template that are undesirable. Adding pages will also alter/create the main menu at the top of your site (for convenience’s sake, of course).

So head back to the home page, and click on Pages in the sidebar menu. You’ll see a list of different pages that are already up and published on the site. We’re deleting the more redundant few here, like “read me”, “news”, and “partner”, but you can keep that stuff if you like.

Some of the pages will be connected by a line, meaning they’re a subcategory of another folder. To free pages from this format, just drag and drop them out of their fixture.

The order of pages in the sidebar menu will also adjust the order on the website page, so keep that in mind.

To create a new page, just hit the plus icon next to the main navigation and choose which kind of page you’d like to create. Then name your page. We chose to delete our About folder (which is the default setting on Squarespace) and create an About page instead.

Squarespace tips: In order to find and/or change the URL Slug ( /blahblah ) of any page, click the settings icon next to the page. Find the space dedicated to the URL Slug and make sure it’s labeled as whatever you want it to say.

You may want to create some pages, like a “gallery” page, or “products” page, or whatever will work best for formulating your site. No matter what kind of page you’re aiming for, the Squarespace editor makes entire-page adjustments as easy as cherry pie!

Step 5: Customize Your Website

So now that our foundation has been built, we’re ready to start adding pictures, funkifying texts, and all that other good good!

You’ll see a button labeled Edit at the top left of your home page above your store’s logo. Click on that button to access what is essentially edit mode. Your site will convert to full screen and you’ll see a bunch of blue lines at different places. 

From this mode, just drag your cursor atop any part of your page you’d like to edit and click the edit prompt to get underway. We’ll start with editing our header. Once again, just move the cursor over to the header and click the Edit site header button.

A movable toolbox will pop up that lets you edit your header’s layout, elements, colors, stylization, and more – that includes allowing you to readjust your logo size (or your entire logo for that matter) with ease.

Squarespace tips: Most people instinctively click a website’s logo to return to the home page, which is usually located in the top left corner of a website. For that reason, we recommend choosing a layout that leaves the logo in that location.

If you go down to elements, you can edit things like the button texts as well as add your social media accounts. 

One clutch aspect about the Squarespace website builder is its intuitive nature. After adding any social media accounts, the corresponding icons will appear within your header which leads directly to your account. Thanks for making this all very pain-free, Squarespace!

The colors editor is pretty straightforward, offering a bunch of different options for header coloring at just the click of a button. You can also opt out for a completely transparent header to keep your image intact.

The last section, the style section, offers the most modulation and lets you get a little more in detail with header padding, size, and spacing. Feel free to play around there until something jumps out at you.

Moving on from the header, let’s learn how to edit our background image. To do this, you’ll have to click on the pencil icon right underneath the blue horizontal line that runs right below the main menu.

A toolbox will pop out with 3 main menus: format, background, colors. Format lets you change the overall size and alignment of this section. In the Background section is where we’ll be able to change our background image or add a video to the background.

Quick tips: Squarespace aside, heavy-hitting images are a must when learning how to design a website. The more kickass the content, the more kickass your website, brand, and business will perform. Squarespace does offer some free and premium images on their platform (what pals), but you’ll want to go the extra mile on this road before it’s all said and done.

If you find an image that works, just double-click on it to have it uploaded. Alternatively, you can also upload an image from your personal computer wherever you keep images.

In the likely case you can’t scour out any suitable images in this stock photo collection for your website, we recommend using Pixabay. They have millions of high-quality royalty-free images for building wagyu-steak prime websites, or whatever else your heart desires!

With the background out of the way, if you want to change any of the text in this section, it’s as easy as double-clicking the desired text and typing in the new text right on the screen! Of course, that includes changing the font, alignment, and size or heading style of the text too.

There’s also a rather central button in this section that you can edit by scrolling over and clicking the pencil icon (it should actually say “button” near this icon as well). That lets you change what the button says, its size, and its alignment.

Here in this editor, you can also choose the clickthrough URL, which is where the button actually sends people. You can make another page on your site, for example, or maybe another website altogether – the choice is yours.

Next up for customizing our Squarespace website is to add and remove sections. To remove a section, find the red trash icon usually somewhere near the top right of the section and delete it. To add a section, hit the blue plus sign in between 2 existing sections.

A bunch of different sections and section categories are going to pop up on the screen; There’ll be headlines, lists, quotes, appointments… all different kinds of sections to add. Choose something suitable, and remember to focus mostly on the template and layout of these sections.

From there, we can replace all of the images and text by simply hovering over them and clicking on our favorite pencil icon.

Not only does Squarespace load up your images super quickly with alignment intelligibility, they also let you choose the design of your images. And, you can add a clickthrough URL to each image, just like with our button before.

A background image can also be added to each section by hitting the pencil icon and adding one in. In this regard, you’ll have all the color and format editing options as previously so.

Squarespace tips: When you load in an image in this section, it’ll come with a white overlay to support the black text on top by default. You can adjust the opacity of this overlay to forge a better relationship between the image and text.

As per usual, we recommend creating your own version of those common and useful sections found on most successful websites, like the about section, image gallery, contact form, etc. Check some references and decide on what is most useful for your own personal website.

Follow the same procedures we covered to add in new sections, format images, stylize texts, link buttons, the whole 9. Oh, and once you’ve completed a section you can adjust the placement order of said section by hitting the up or down arrows found near the pencil icon.

Oh, and after adding a gallery, in order to edit the images within the gallery just click on the little photo icon located near the pencil icon. Doing so will let you remove and upload images to your leisure.

We’re not sure if there’s a limit to how many photos the Squarespace gallery can handle, but we’ve never hit the cap, so fill er’ up!

Lastly, if (and when) you add a video section to your website, it’s as straight-forward as all the other seamless customization tidbits found on Squarespace, minus one thing:

After you input the video URL (essentially uploading it) into its home in the section, you still need to remove the custom thumbnail placed there by the website. Be sure to uncheck that box to use your own video’s thumbnail when the time comes.

Your video’s description is also automatically brought over to Squarespace and can be used as a caption for it if you like. Sweet.

The way to learn this stuff is just to repeat it for every single section and then you’ll be able to navigate your website very quickly.

Step 6: Add a Contact Form

Although it’s technically just another section on your website, this gets its own step because of its sheer importance for business success. A contact form is a must-have for your business if you want clients, customers, or anyone else to be able to contact you (which you do!)

So let’s go ahead and add one in:

Go to the bottom of your page and hit the blue plus arrow that lets us add in new sections. Then, go down to contact in the left side menu and choose a layout that tickles your fancy.

We recommend using one that actually has a form in it to make acquiring data from your milieu of patrons easier.

So just like before, you can alter the background using the pencil edit icon, and you can edit text by simply double-clicking it and typing right on the screen. So now let’s edit the form itself by clicking on the edit icon (you’ll grow to love this powerful pencil soon enough).

Here in the Edit form, you can edit the names of each section of your form. If you use the first contact template on Squarespace, the stock form will have an input for a name, email, and message.

You can also choose your Form name here, but it’s not really that important since you’ll almost never see this form name.

To add another piece to your form, like a phone number or date, just click on Add form field below the pre-existing fields. Drag and drop the form fields to rearrange the order. Plus, you can either make each section required or not by checking the Required bubble within the field.

So now if you scroll up and click on Storage (located in the middle of the main top menu), you’ll see where you can input the email address that all of these contact forms will go to.

You can also connect this contact form to Google Drive or Mailchimp, which is a cool service that lets you send out thousands of emails at once. It’s great if you’re running sales or need to reach your clientele with offers and promotions.

Lastly, in the Advanced tab, you can alter the text and alignment of your form’s button, as well as the message that pops up after each submission. Oh, and you can also choose a URL to redirect your submitters to after they’ve filled out the form.

PS The footer which dutifully rests at the bottom of your web page is a quick and easy edit we’re sure you can handle by now. And feel free to delete that “Made with Squarespace” bit! Hehe.

Step 7: Add a Favicon

Maybe you’re asking yourself, “what is a favicon?”, right about now. Well, a favicon is that little symbol found in the top left corner of your browser tabs. For example, as you read this on Create a Pro Website, you’ll notice our favicon is a blue upward-pointing arrow.

Okay. So these small logos are called favicons and you can add your own custom logo for your website. We recommend using the same logo as your business logo (the one we secured earlier) for rather obvious reasons.

If your logo is one that wouldn’t look so well minimized, or you created a logo with a name attached, we’ll need to make some adjustments before applying the favicon.

An easy way to do this is just to head back over to Logomakr, and choose the same logo as before. If you don’t have a logo yet, search for something that best speaks about your business. 

Once you’ve got the one, choose the color and center it within the editor on Logomakr before saving it just like before. That’s it! We’ve got the favicon logo ready for action.

Now head back to your Squarespace website. Save all the work we’ve put in thus far and head back to the Squarespace home. There, click on Designs, and then go down to Browser Icon.

That’ll show you where you can upload the logo we just prepared to be used as a favicon on your website. Oh, and give it some time to pop up if it doesn’t show in your browser tab at first!

Quick tips: Favicons are really small, usually no bigger than 16×16 pixels or 32×32 pixels maximum. Be sure to use a logo that looks good when small. Resize your logo on a website like Fotor to see how it looks as a teeny tiny image.

Step 8: Add Content to Pages

So if you remember from earlier, we made a bunch of pages which can be seen at the main menu right above the header on your site. Most of these pages are blank right now, so let’s see how to add some content to them.

Go to Home click on Pages to access what we’ve created thus far. Choose any page you like, and then click on Edit in the upper-left corner of the page. Then you’ll see a blank page with an Add Page Content plus button in the center.

Then, just like with the homepage, you can add in any section of your choice. To easily add in even more content or elements from there, click on one of the gray lines sticking out from the bottom of any one of the sections.

You’ll see two gray bumps at the end of the line – one lets you add content under the entire column (if there are more than one item there) while the other lets you add elements under just the selected section.

You can click these jutty gray buttons to add any sort of element or block that you desire. Scroll through what’s available and feel free to play around here – getting lost in the sauce is eagerly advised.

Step 9: Get a Domain Name

So as you’ve probably noticed throughout this entire step-by-step Squarespace tutorial, there’s this strange nonsensical domain name lingering in the address bar belonging to your website. Well, it’s time to take one big step closer to legitimacy and get a real domain name!

In order to get a custom domain name, click the Subscribe button down at the bottom of the page near the trial expiration information.

So now you’ll have to finally select a nifty plan and pay for using Squarespace. What you’re paying for here is a web hosting service, or server to hold all of a website’s information. A website’s domain must be located on one hosting server or another. 

If you want to actually own your own website, it’s imperative to own a domain name. Otherwise, your website will always be something like “blahblah.squarespace.com”, meaning that Squarespace owns it and you don’t!

In other words, you don’t have free reign over your site: Squarespace could remove it for any reason and you won’t be able to monetize using ads for your website. Plus, your site just doesn’t look as suited up without an original domain.

So you need a domain name no matter how you cut it. All of Squarespace’s annual plans come with a free domain name (yay!). But if you want to take it slowly and just try out the service for a month, you can always buy a domain name elsewhere for an entire year for about 20 bucks.

No matter which length of plan you choose in the end, we do recommend going with the business plan. It’s the best bargain considering all the whistles and bells that come with it, so you’ll get a true taste of Squarespace’s hospitality.

Go ahead and pick a suitable plan, pay for it, and then click on the big button that reads Get a Domain. That takes you to your web page where you can either get a domain fresh out of the box or use your own domain if you already own one.

If you choose to get a new domain, you’ll see a bunch of recommended domains for your site. You can also type in a domain you’d like to see if it’s available and go with that one. Once you choose your domain, go to add your domain and pay for it at the checkout.

It’ll take about 10 minutes to verify your domain and you can check its status in a box at the left of the screen. And now you’ve got your own Squarespace website domain name!

Quick tips: Domain names should generally be under 15 characters.

Step 10: Publish Your Website

So the final step is to publish our spanking new, dazzling, breathtaking website for all the world to see! To do this, go on over to Settings, and at the very top, you’ll see an option that reads Site Availability. Open that up to see all the visibility options.

Right now, it should be set to private. Just set your site to Public to make it available for any and all visitors. Now, hit the save button at the top, and BOOM! Your fresh-out-the-box and fully-functional site is now open for business.

And that’s it! That was our Squarespace tutorial for beginners! It’s one of the best eCommerce platforms for young adepts on their path to success, so hopefully, you found some value in our humble instruction!