Metics Media · คลังวิเคราะห์

Squarespace Tutorial for Beginners 2026 - Step by Step

📺 ดูคลิป · 👁️ 5,553 views · 📅 2026 · ⏱️ 38:26 · 🌐 Websites / WordPress / Hosting / Builders

📌 สรุป

คลิปนี้สอนสร้างเว็บไซต์ด้วย Squarespace แบบ step-by-step สำหรับมือใหม่ที่ไม่มีความรู้ coding ตั้งแต่เริ่มสมัครบัญชีไปจนถึง publish เว็บพร้อม custom domain ให้ใช้ได้จริง ผู้สอน (Matt จาก Metics Media) ทำตัวอย่างร้านชา "The Gentle Kettle" โดยใช้ Squarespace Blueprint AI builder เป็นตัวสร้างโครงสร้างเบื้องต้น และอธิบายการแก้ไขทุก layer ตั้งแต่ section/block/page ไปถึง SEO, ร้านค้า, blog และ domain

🔑 ประเด็น / ขั้นตอนหลัก

🛠️ เครื่องมือ / บริการ / ลิงก์ที่พูดถึง

💡 เอาไปใช้ / ข้อสังเกต


📄 Transcript เต็ม (English, 6,945 คำ)

In this video, I'll show you step-by-step how to build a professional website using Squarespace, even if you've never built a website before. I'm Matt, and today we'll go through everything: setting up your account, choosing your design, customizing your site with your own text, images, and colors, adding pages like an about page and contact form, and getting your site live on the internet with your own domain name. By the end of this video, you'll have a fully functional website that you built yourself. And the best part is, you don't need any technical skills or coding knowledge to do it. To follow along, simply use the link on screen or click the first link in the description below. That'll take you straight to Squarespace, where you can start a free 14-day trial, no credit card needed. And when you're ready to upgrade to a paid plan, you can use the code METICS10, that's m e t i c s 10, at checkout for an exclusive 10% discount. All right, so once you've clicked that link, here's what you'll see. Squarespace will ask you what your site is about. Go ahead and pick whatever's closest to your situation. This just helps them suggest relevant content. For me, I'm going to type tea, since I'm making a website for a tea shop. But, if you're not sure at the moment, you can always click I'm just browsing in the upper right and skip this step. When you've got your topic selected, click next. Next, check off what you want to do with your site. Things like offer a contact form or showcase work are pretty common. I'll say sell products and click finish. Don't overthink this, it just helps Squarespace customize your starting content. You can always change it later. Now, create your account. You can sign up with Google, Apple, or email, whatever's easiest for you. Just enter your details and you're in. There's no credit card required. After creating your account, Squarespace will walk you through their blueprint AI builder. This is where you set up the foundation of your site, and honestly, it's really well done. Just follow the steps and pick what feels right. I'll point out some of the key details along the way. First, give your site a name. Don't stress too much about this, you can always change it later. I'll call the site the same thing as the business I'm making a site for, The Gentle Kettle. Then, pick a brand personality. This affects the fonts and colors Squarespace suggests for you. I'll go with friendly. Then, click next. Now, pick which sections you want on your home page. Squarespace has already made a few recommendations based on what you told it earlier. For example, here I have a product section recommended, so I'll check the box for that. And adds it right away on the left side preview. What else do we have recommended? I want to add an about section, a form section, and a footer section. You can add or remove whatever you want. And here's something that's easy to miss. If you click on any section, you can actually change between different layouts for them. Click the change layout button and pick from one of the available options. I like this one for the hero section. Go through, add your sections, customize your layouts, and then when you're done, click next. Next, choose which pages to add to your site. The home page is always included, and Squarespace will make a few recommendations. In my case, that's the about, contact, and shop pages. You can always add or remove pages later, so don't worry about getting it perfect now. If you want to preview through each of these pages, you can click these left and right arrows to scroll through what it's created for you. When you're happy with your selections, click next. Now, pick a color palette. These are curated by Squarespace's designers and grouped by personality. You can customize your colors later in the editor, so just pick one that's closest to what you like. So, here we have professional as the first category and friendly as the second category. Since I'm going for a friendly vibe, let's look at these color options. And I really like this one here, so I'll click next. Finally, choose a font pairing. This is a preset combination of heading fonts and body fonts together. In the friendly category, we have a couple options. I really like this one. Toggle through and find one you like, and when you're happy, click finish. Squarespace will take a moment to build your site. And when it's done, just like that, you've got a website. Now that our site is set up, let me show you around the dashboard and how to get into the editor, where we'll do all our customizing. This is your Squarespace dashboard, your home base. You've got setup checklist in the center, some helpful tutorial videos and AI tools below that, and on the left sidebar, you'll find all the main sections. Your website is where you'll spend most of your time, products and services is for your store, and settings, which looks like a gear icon, is at the bottom, and that's where you'll manage your domain, billing, and other settings. To start editing your website, at the very top right, you can click edit site, or you can click website in the left sidebar. But, here's something that trips people up. That doesn't put you in the visual editor quite yet. You'll need to click the edit button in the upper left corner of the toolbar. Or, here's a shortcut, you can also just double-click directly on the page, and that'll drop you right into edit mode. Before we start making changes, let me explain how Squarespace organizes your site, because once you get this, everything else clicks into place. It's three levels: pages, sections, and blocks. Your site is made up of pages, like your home page, about page, and contact page. Each page is made up of sections. Those are the large horizontal areas, and inside each section, you have blocks, the individual pieces of content like text, images, and buttons. Up in the toolbar, you'll see some important controls. In the upper right, you have the desktop and mobile buttons, which lets you preview how your site looks on different devices. Check this regularly. The paintbrush icon opens site styles for global fonts and colors. We'll come back to that later. And when you're in edit mode, you'll see save and exit buttons in the upper left, plus undo and redo controls. So, if you make a mistake, you can always step back. Don't forget to hit save before you leave if you've made any changes. I'm going to hit exit real quick and show you one more thing outside the editor. Under the website section in the left sidebar, you've got four key areas: pages, for managing all your site's pages, styles, for managing your global fonts and colors. This is the same thing as what the paintbrush icon opens. Assets, for your media library, and SEO/AIO to help optimize your site for search engines. We'll come back to that one later, as well. Let's double-click to get back into the editor. Before we dive into editing content, let's refine the overall look and feel of our site. Site styles is where you control the visual identity of your entire site from one place. And getting this right first means everything you add later will already be matched to your brand. Click the paintbrush icon in the upper right in the toolbar to open site styles. You'll see six sections here. Each one works the same way. Click the left side for a quick gallery of presets, or click the arrow on the right to expand into full detailed settings. At the top, you've got themes. These are preset combinations that change your fonts, colors, and button styles all at once. It's a quick way to try different looks. If you want to play around, pick one that's close to what you're going for, and then you can fine-tune the individual settings below. At any point, if you make a change you don't like, you can click the undo button in the upper left to roll back to a previous version. For fonts, the quick view shows you curated font pairings, one for headings and one for body text. These are designed to work well together. If you want more control, expand the section to the right, and you can change individual font families, sizes, weights, and spacing for each heading level, paragraphs, buttons, and more. Next down, we have colors. Colors in Squarespace work on a palette system. You define a set of colors, typically a lightest, light, accent, dark, and darkest, and those colors get applied across your site through what Squarespace calls themes. Your palette is the pool of available colors, and themes are preset combinations that apply to those backgrounds, text, buttons, and so on. You can apply different themes to different sections for visual variety without clashing. If this feels confusing, just start by changing the accent color to match your brand. That one change updates buttons, links, and highlights across your entire site. Next, we have buttons. Under buttons, you can set your button styles globally. Choose between filled, outlined, rounded, or pill-shaped. You've got a primary, secondary, and tertiary styles, and every button on your site follows these settings. Change it once here, and it updates everywhere. Next, we have forms. The form section controls global styling for form fields, borders, backgrounds, and button styles. And miscellaneous has things like animation speed. Most beginners don't need to touch these. The defaults work well. But, now that we've set our styles, everything we add from here will already look consistent. Great. Now that our site has a visual identity, let's start actually changing the content on our pages. This is where you'll spend most of your time. First, one thing you'll notice as you move elements around is that everything snaps to an invisible grid. This is Squarespace's fluid engine grid system, and it's actually your best friend. It keeps everything aligned and proportional, and here's the bonus, it's a big part of why your site will automatically look good on mobile, too. The grid adapts your layout for smaller screens. Before we start editing, there's one really important thing to understand about how clicking works. A single click on any block selects it. You'll see a toolbar pop up with additional options relevant to that block, like moving, resizing, or duplicating, even deleting. But, a double-click does something different depending on the block type. For text, double-clicking puts your cursor right in the text so you can start typing. For images, buttons, and other non-text blocks, double-clicking opens an editing menu specific to that block. So, to edit text, double-click it. The formatting toolbar pops up where you can change heading levels, bold, italics, alignment, links, and lists. Heading levels aren't just cosmetic. They help search engines understand your page structure. Use heading one or H1 for your main title. H2 for subsections and so on. See that AI icon in the toolbar, the three dots there? Click it. Type a prompt, delete the old text from your field, and then submit your prompt, and Squarespace generates copy for you. Once you generate something, you get quick edit buttons to simplify, shorten, or lengthen the text, which is really handy for dialing in the right tone. Here I shortened it, and this is pretty nice. So, we'll click back out of the AI, and I'll set this to a nice H1, and put it in the center. From there, you can edit it as much as you want by hand. So, I'll go ahead and remove this first part, leaving just "Hand-picked loose-leaf teas for daily rituals." Nice. Now, let's edit images. Let's scroll down the page to find a standalone image. Here we go. For images, double-click to open the editing options. Then click the plus button to add or replace an image. You can upload a file from your computer, select from the library of photos already on Squarespace, or browse stock images. For stock images, simply type in the search bar what you're looking for. In my case, I'll say "loose-leaf tea." And I'll select this beautiful option here. Then click add image, and just like that, I've swapped out the photo. This top section allows you to adjust the focal point of the image. So, if you drag the circle around, it changes what Squarespace focuses on if your image is cropped. You can click edit to bring up a full photo editor, and if you click the top right circle icons, that's filters. So, you can apply cool filters right from within Squarespace, and then click save to save a duplicate image, which gets added to your library. Here, you can also update alternate file names and alt text. Make sure you always add image alt text. That's a short description of your image that helps with accessibility and SEO. In the design tab, you can choose whether your image will be set to fit, fill, or even add shapes. For this image, I think it'd be cool to put it in this shape here. Now that you know how to edit images, let's edit buttons. I'll scroll back to the top to edit our hero section button. Buttons work the same way. Double-click to edit. Change the button text, click edit to set where it links to. That can be another page in your website. You can click the X to remove the current link, either select a page from your site from the drop-down, or search for the page you want and click to select. You can also link to external sites by pasting the URL in this field here, or you can link to an email, phone number, or even a file by clicking this URL drop-down and selecting an alternative type of link. Toggle open in new tab if you set an external URL so that people don't accidentally leave your website. Remember, your button's visual style is already set from what we did in site styles, but you can change if it's a primary, secondary, or tertiary button under the design tab. Before we move on, toggle the desktop mobile switch in the toolbar to see how everything looks on a phone. The grid system handles most of the heavy lifting, but it's good practice to check this as you go rather than saving it all for the end. Okay, so you know how to edit individual blocks. Now, let's work with the bigger building blocks of your page, sections. Sections are the large horizontal areas that make up each page. Your hero section is one section, your services list is another, your contact form is yet another. Each section can have its own background, layout, and color scheme. To add a new section, hover between two existing sections and click the blue add section button. You'll see a library of pre-designed section templates, hero sections, about sections, galleries, testimonials, pricing tables, and more. These save you a ton of time because the layout is already done. Simply pick one and customize the content. Here's a really powerful feature that's easy to miss. Once you've added content to a section, look for the view layouts button in the pop-up. Click it, and Squarespace will show you different ways to automatically arrange everything that you've already placed. So, one method of creating sections would be to simply create a blank section, drag in all your text and images first, then click layouts to instantly reorganize them into a polished design. Now, one thing that often confuses beginners, there's a difference between a section's background image, like in our hero section up here, and a photo block, like this one here. A background image sits behind the content in a section. See, it's behind the text and buttons. Whereas, a photo block is a content element that sits alongside your text and buttons. When you want a big visual impact behind your content, use a section background. When you want an image as part of your content layout, use a photo block. To change a background image, select the section you want to change, click edit section, click the background tab, and then under the image tab, click replace. Just like your content images, you can upload a file, select one from your Squarespace library, or browse stock images. I'll browse for a stock image, and search for "pouring tea." And let's select this one here. Just like content images, you can change the focal point of the background image. I'll set it right on this teacup. Now, one other important detail for background images. If you scroll down the background section here, you'll see a slider for overlay opacity. This controls how dark your background image is, which is great for quickly adjusting the contrast between your text and your background image. Just like content blocks, every section has its own set of settings that is accessible in this pop-up here. We've been adjusting the background image, but you could also set a color or even art to your background. In the design tab, you can change things like the row count, which is how tall your section is. You can make it fill the whole screen, and change the height and alignment there. And here's a nice one. The colors tab lets you quickly adjust the color scheme between your content and background, which is especially useful for changing the contrast when you change a background image and your text becomes hard to read. Now, how do you reorganize the page? First, click any section, then use the up and down arrows in the floating toolbar to quickly rearrange them. You can also use the toolbar to duplicate sections, or click the heart icon to save a section for reuse on other pages, or you can click the trash can to remove them entirely. Now, how do you add new blocks to a section? Well, inside any section, simply click add block in the upper left. Here, you can add text, images, buttons, forms, galleries, videos, maps, and so much more. Simply click the block type you want, and drag it where you want it to be. The grid system will help you keep everything aligned. And remember to check the mobile view when you're done. The grid automatically stacks things for smaller screens, but it's worth verifying. While we're adding content to our pages, let's set up something almost every website needs, a contact form. We already styled how forms looked back in site styles, so now let's build one and configure where submissions go. First of all, click save in the upper left to save any changes you've made. Then click exit, and that'll bring us out of the visual editor. Click pages on the left side under website, and then navigate to your contact page or any other page where you want a form. Here, our contact page already has a form, so let me delete it, and I'll show you how to add one from scratch. Click the add block button, select form, and simply drag it where you want it to go. You can click the blue squares on the side of the form to drag it and resize it to the size you want. Squarespace's pre-built contact form comes with a name, email, subject, and message field right out of the box. But of course, you probably want to edit it. So, go ahead and double-click the form to start editing it. Here, you can click edit form fields, and then click add field. Squarespace has all the common field types, text, email, drop-down menus, checkboxes, dates, and more. Keep it simple, though. The fewer fields you actually have, the more likely people are to actually fill it out. In my case, maybe I want to add a phone field. You can reorganize fields by clicking the six dots to the left and dragging them to a new location. You can click the arrow to the right of a field, and change the label. For example, maybe I want to call this "cell phone." And for each field, you can toggle on the switch to make it required, or leave it off to make it optional. Now, the important part, where do submissions go? Let's go back to the form settings, and then under the storage tab, you'll see you can manage submissions and export form submissions. By default, responses are stored in Squarespace, and you can view them in your dashboard by clicking the manage submissions button. This opens in a new tab. I'll go ahead and close this out. But you'll probably also want email notifications. Make sure the email notifications field has the correct email address that you want notifications to go to. This way, you'll get notified every time someone submits the form. Back in the content tab, if you click post submit at the bottom, you can customize the confirmation message or redirect to a thank you page after the submission. Keep the the friendly. Something like, "Thanks for reaching out. We'll get back to you within 24 hours. You can also change what the button text says on this content tab as well. For example, maybe you want to change submit to send message. As always, double-check how it looks on mobile. Looking good. All right, our pages are looking great. Now, let's set up the header. That's the navigation bar at the top of every page. And while we're there, we'll add a logo and set the favicon. To customize your header, make sure you're in edit mode. Hover over the header at the top of your page, then click the edit site header button. This opens your header settings. On the left side, there's an add elements button. If you click this, you can choose what appears in your header. Logo, social links, cart, account, and even language switching if you set it up. Toggle each one on or off depending on what you need. To add your logo, click on the site title or placeholder logo, then click the pencil, and click the plus button to add your logo. Then click upload file to add it from your device. Here's a key detail. The logo size is controlled by a height value, not a width value. Set the height value until your logo is a good size. You'll also want to set a mobile logo max height as well. Toggle to the mobile view, click your logo, then the pencil icon, and set your mobile logo height independently of the regular logo height. If your logo is a square image or an image with a lot of negative space around it, you can click edit to open it in Squarespace's editor, and then use the cropping tool in the upper right. If you click custom, you can drag the edges to remove blank space. Then click save. This can make it easier to set a logo height because that blank space isn't counting towards your total logo height. Now, clicking back on the header again, on the right side, you can click edit design. And here on the first tab, the design tab, you can change the layout of your header. Toggle through the different layouts to see if you find one that works better for you. In my case, I actually really like this with the logo in the center, the menu on the left, and the cart and button on the right. Near the bottom of the design page, you can also adjust link spacing. That spreads the links of your navigation out. And element spacing. That just adjusts the other general elements. If you scroll down further, you can see the overall height of the header. I want to reduce this a bit, make it a little slimmer on mine. You'll also see a toggle for fixed position. When fixed is on, the header sticks to the top of the screen as visitors scroll. When it's off, it scrolls away with the page. I'd recommend keeping it fixed for most sites. It keeps the navigation accessible. Under the color tab, you can change between three different color modes. Solid, which gives you a solid color. This is a classic and works for many sites. You can adjust the background colors and navigation colors specifically. You could do gradient, which gives you a smooth transition between a color and a transparent look. Or my favorite is adaptive. Adaptive is the interesting one. It automatically changes the header color based on which section it's overlapping as you scroll. So, over a light section, it might be dark. And over a dark section, it turns light. Or sometimes it becomes transparent like when you have a background image like this one in the hero. This one feature can make your site feel very modern. To edit specific elements on your page like this book now button, for example, simply click on it, click the pencil, and change the button to say what you want it to say. For my site, I'll change it to say shop now, and edit the link to go to the shop page. Now, how do you rearrange the items in your menu here? This is managed outside of the visual editor. So, let's click save, and then exit. You'll manage it under the pages section under the website navigation. The order of the pages in your pages panel is the order they appear in your header. So, if I drag this about page up in the main navigation, the page will refresh, and my menu will be rearranged with the new order. Last thing while we're on the header, logo, and other top of page elements here. Let's set the favicon. That's the tiny icon that appears in browser tabs. By default, you just get the cube that comes with Squarespace sites. To change this, back out to your main navigation, scroll to the bottom and click settings. Make sure you're on the website tab, then select favicon from the list. Click the plus button to add a favicon, and click upload file. Upload a small square image. Save it. And when you exit the settings, you may notice that the favicon doesn't update right away. To see it, refresh your browser, and upon loading, your new favicon will appear. We just set up the top of our site. Now, let's handle the bottom. The footer appears on every page just like the header. In edit mode, scroll to the bottom of any page, hover over the footer, and click edit site footer. You can edit it just like a regular section. You can click add block to add text blocks, links, social icons, a newsletter sign-up, whatever you need. Most sites include contact info, social links, and maybe a brief tagline or copyright notice. For our tea shop here, I'll add our address, phone number, email will update later after we get a custom domain. I'll remove this made with Squarespace text, and swap out the site title for our site logo. Since we've already uploaded the logo, we can simply grab it from our library. Squarespace includes pre-built footer layouts you can choose from similar to section templates. So, if you want to change this footer, you could always click remove, then add a new section, and select a footer type. So far, we've mostly been working on the homepage. Let's talk about managing all of your pages and how navigation works. In your left nav, go to website, and then pages. You'll see your pages organized into two areas. The first is main navigation, which are the pages that show up in your header, and not linked for pages that exist but aren't in the navigation. Things like a thank you page or a privacy policy. In either section, click the plus button to add a new page. Squarespace gives you page types, blank page or pages with various sections already added. Let's add an FAQs page. You can drag pages up and down to reorder them in your navigation. You can remove them from your navigation by dragging it to the not linked section. And you can remove a page entirely by clicking the trash can icon that appears next to it. And you'll need to click confirm to let Squarespace know you're absolutely certain. If you deleted a page but you didn't mean to, you can always click on deleted pages, and then hover over the page you want to restore, and click the restore button. I'm going to put this contact page back, and move FAQ to not linked. Click the gear icon next to any page to open its settings. Here you can change the page title, customize the URL slug, or even add a navigation title. A navigation title lets you show a different name in the header than the actual page title, which is useful if your page title is long but you want to show something short in the nav. Here you also get quick access to your page SEO settings like SEO title and description, and social image for adding a social sharing image. If you have a lot of pages, you can organize them into drop-down menus in the navigation. Just click the plus icon, scroll all the way down the list, and click drop-down. Then simply drag your pages into the new drop-down. Then when you hover over the drop-down in your header, those pages will show up underneath it. If you want to share updates, recipes, news, or articles, Squarespace has a built-in blog. Let's set one up quickly. Go to pages, and click the plus icon, then scroll down, and select blog under the showcase section. Squarespace will set up the blog structure automatically, a main listing page and individual post pages. All you have to do is pick the style of main listing page you want. Let's go with this one. To create a new blog post, click the arrow to the right of your blog page in the main navigation, then click plus to the right of blog content. This opens a blank blog post. Here's the nice thing. Blog posts use the exact same editor as regular pages. Same blocks, same drag and drop, same grid system. So, everything you already learned applies here, too. You can even use Squarespace AI to generate articles for you. When you're done editing, be sure to save. Let's click exit, and I'll show you some crucial post settings. Once you exit the visual editor, you can scroll down and see your new blog post listed as a draft in your blog post list. Click the three-dot button to the right of it, and click settings. There are several different tabs of settings here, but let's start with options. Here you can change your blog post status. You can change it from draft to needs review, published, or even schedule it to be automatically published later. Let's have it released tomorrow. Clicking back to options, here you can also set your tags. You add relevant tags for internal use to your blog post, and you can separate them by typing a comma on your keyboard or hitting return. Clicking back, you can also add categories here to help website visitors find blog posts by category type. We'll call this one how-to guide, and then check the box to apply that category. Finally, you can toggle the switch to allow comments on your post, or leave it toggled off to disable them. Next, let's add a featured image. You can do that under the content tab. You can upload a file from your computer by clicking add image or click search for images to look for stock images or grab images from your library. Now, you can also add a social sharing image under the social image tab. Now, here's one crucial thing to understand. The featured image and the social share image are two different things. The featured image shows up on your blog listing page. Set it separately from your post content. The social share image is what shows up when someone shares your post on social media. You can set this to the same image or a different one. Once you click save, you'll see your blog post update in the blog post list with your new featured image and schedule status. Be sure to delete all the placeholder blogs before setting your website live. You can check the box next to all of them and click delete. Then click delete again to confirm. If we manually set our blog post status to published, then view the blog overview page, you can see it shows up with our featured image, the title, and the category, as well as the published date. Now, if you're selling anything, products, services, digital downloads, Squarespace has a full e-commerce system built in. Let's add a product to see how it works. Go to your store page, then click add product, and choose a product type. It can be physical, digital, service, gift card, and more. I'll choose physical product since I'm selling some loose leaf tea. Here you can fill in the product name, description, price, and more. For the description, you can even use the built-in AI writer. Click the AI icon, give it a prompt, and it'll generate a product description for you. Scrolling down, product images must be uploaded. There's no stock option for products. Multiple images can be added at once, and then you can drag to reorder them. One really cool feature is that you can click to generate product details automatically based on your images. I'll click generate, add a short description of the product, then click generate. It automatically generates a name, description, tags, suggested price, and even SEO metadata, all from the photos. It's not always perfect, but it's a huge time-saver as a starting point, especially if you're adding a lot of products. If you're running a sale, you can toggle the on sale switch, set a sale price, and then your product page will display the strike-through price as well as the sale price. You can manage stock here as well by toggling off unlimited stock, and then setting how many you have. Once you've gotten your product set up, next you'll want to configure shipping and taxes. To do this, first you'll want to save, hover over save, and then either publish right away, save as hidden, or schedule to publish. I'll publish it right now. And you can see our new product show up right away. Okay, to configure shipping and taxes, click pages on the upper left to exit the section, then website, and then scroll to the bottom and click settings. Then from the left side menu, select selling, and here's where you can set up your payment gateway, taxes, shipping, and even pick up and local delivery options. We won't go deep into these settings today, but you should set these up before your site goes live. To manage incoming orders and create discount codes, exit out of here, go to products and services on the left side, and then orders. This is where your orders will come in, and you can manage discounts right below that on the left side with the discounts tab. You can also quickly access your products by clicking products, and just like with placeholder blog posts, I highly recommend removing placeholder products. Simply check the box next to each one, and then click delete in the bottom right. Great. Now, we have our first product live on our store. Next, let's make sure people can actually find your site with Google and AI chat assistants. Squarespace has some really good SEO tools built in, and there's a quick shortcut that does most of the heavy lifting for you. Let me show you. Here's the absolute fastest way to get your SEO started. On the left side, click website, then SEO/AIO, and look for the optimize button in the upper right. Click it, and Squarespace will automatically generate SEO titles and descriptions for all of your pages based on your content. It's not a replacement for doing it manually, but it gets you 80% of the way there in about 10 seconds. You can scroll through and see all of the SEO work it's doing for you automatically. Click save at the bottom right to lock it in. For more control, you can edit SEO settings on each individual page. Go to pages, then the page settings, and the SEO tab. Here, if you scroll down, you find fields for SEO title and meta description. The title is what shows up in Google search results. That's the blue part in this preview up here. The description appears below it. That's this part here. While you're in page settings, click social image and set a social share image for each page. This is the image that shows up when someone shares your page on Facebook, X, or LinkedIn. Without one, the platform picks a random image from your page, and it's rarely the one you would choose. Be sure to click save when you're done. One more quick SEO tip. Add alt text to all your images. We covered this in the editing section earlier, but it's worth repeating. Alt text helps search engines understand what your images show, and it makes your site more accessible to people using screen readers. All right, our site is looking great. It's time to talk about getting it live on the internet with a custom domain. Right now, your site is on a free 14-day trial. During the trial, your site is private. Only you can see it. To make it public, you'll need to choose a plan. Squarespace has several tiers, and which one you need depends on what features you want. To see the pricing options, click the settings gear in the bottom of your left side menu, then click billing on the left side, subscriptions, then select your website, and click subscribe. At a high level, the basic plans cover everything you need for a standard website with pages, forms, and SEO tools. The higher tiers add e-commerce features like selling products, abandoned cart recovery, and subscription options. If you're just starting out, pick the plan that matches what you need today. You can always upgrade later. For me, I'll select the core plan. You can choose to pay annually and save a little bit of money or pay a slightly higher rate monthly. I'll choose annually. Then enter your billing address, enter a payment card, then on the review order page, be sure to add our code m e t i c s 10, manics10, to get 10% off any plan you choose. Click confirm payment to lock it all in. You'll get a purchase confirmation. Now, let's set up your custom domain. At the top of the page, click get a free domain for a year. If you already have a domain you want to connect, you can click use a domain I own. But, I need a domain for this site, so I'll click get a domain. You'll be given some domain options right away, but you can always search for a domain name if you prefer. I like the gentlekettle.com, so I'll go ahead and click the shopping cart and then check out. It's free for 1 year, so I'll change this to just a 1-year term, and then save and continue. Next, you'll need to enter your contact information to register your domain. Once you've done that, click save and continue at the bottom of the page. Review the order, then click confirm payment, and you'll get a confirmation saying that you've acquired your domain name. Click the X in the upper right to exit this. Next, you'll need to verify your email. Open your inbox and look for the email from Squarespace. It should look something like this. Click verify now, and you'll get a confirmation message. You can click to return to your account dashboard, and then click website. And now, if you click the link to your website, in my case the gentlekettle.com, you'll see that the website is still private. Your Squarespace site is live, but it's hidden right now. We need to set it to public. Go to your site settings, and at the top under the websites tab, click site availability, and change it to public. Then click save. And now, if you visit your domain, just like that, your website is live on the internet. You now know how to build a professional website with Squarespace from scratch. If you haven't started yet, click the link in the description below to get your free trial, and don't forget to use code manics10, m e t i c s 10, at checkout for 10% off any plan. Good luck with building your website, and thanks for watching.

← Hostinger Review 2026 - Is it Actually G Cloudways WordPress Tutorial 2026: Step- →