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

Squarespace Tutorial for Beginners 2026 - Step by Step

📺 ดูคลิป · 👁️ 58,295 views · 📅 2024 · ⏱️ 47:09 · 🌐 Websites / WordPress / Hosting / Builders

📌 สรุป

คลิปสอนสร้างเว็บไซต์ด้วย Squarespace แบบ step-by-step สำหรับมือใหม่ที่ไม่เคยสร้างเว็บมาก่อน โดยใช้ตัวอย่างเว็บพอร์ตโฟลิโอช่างภาพงานแต่งงาน ครอบคลุมตั้งแต่สมัครบัญชี ใช้ Blueprint AI สร้าง template จนถึง publish เว็บจริงพร้อม custom domain เนื้อหาใช้เวลาครบทุก feature หลักของ Squarespace

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

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

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


📄 Transcript เต็ม (English, 8,904 คำ)

hi there my name is Simon and in this video I'm going to show you step by step how to create a website using Squarespace Squarespace is one of the best and easiest ways to create a beautiful and professional website so even if you have never created a website before you'll be amazed at how easily and quickly you can set up your own website in just a few simple steps in this video I will guide you through every one of these steps and I'll show you how to build a Squarespace web website from start to finish I'll make sure not to skip anything along the way so by the end of this video you'll have a beautiful and fully functional website ready to publish now I've listed all the steps we're going to cover Down Below in the timestamps so if you're looking for a specific part feel free to jump ahead if you don't already have a Squarespace account I recommend to use the first link Down Below in the description to sign up for Squarespace this is my referral link and it will enable you to use my coupon code Medix 10 which will get you an additional 10% off any Squarespace plan so if you want to save some money use that link and enter the code medx 10 at checkout once you're here let's click on get started on the next page we can select what kind of website we want to create in this video I'm going to create a portfolio website for a wedding photographer so I'm going to select photography then here we can choose specific specific features that we want to add to our website I want to use this website to show my previous work and I also want to add a contact for so that new clients can reach out to me so I'm going to select showcase work expertise and offer contact form and now we have two options we can either start our website using one of the designer templates from squares spaces library or we can create our own template using the blueprint AI now I would recommend to check out the templates that Squarespace has because they have a lot of nice templates and maybe you find one that is exactly what you're looking for and if not you can always create your own template using the blueprint Ai and I'm going to show you exactly how to do that in a moment but first let's go ahead and check out the templates by clicking here now here in the template Library we can see that there's already two filters applied the photography filter and the portfolio filter that's because before I have decided to create a photography website here on Squarespace and by applying these filters we get 23 different website templates that we can start with to create our photography portfolio website now we can also delete these filters to get more different website templates that we can start with but I recommend to actually use those filters to just see the templates that are actually applicable to you so I'm going to go ahead and activate the portfolio filter once again then I'm going to scroll down and I'm I'm actually going to select weddings because that's kind of the website I want to create and now we can see that there is one template left for this category and it says wedding photographer based in Charleston South Carolina so this would be exactly what I would be looking for if I were to create a portfolio website for a wedding photographer now when we click on it we can check it out here the desktop version we can also go to the mobile version right here and see what that looks like we can also click on the different buttons on this website and kind of see what the different pages look like and just see if that's kind of the design that we'd like to go for for a website we can also play around with different colors right here and see how we can change up the design a little bit and here by clicking on view demo side we can also actually open up this template and just interact with it as if we were a visitor for this website now I do think that this template would be a great start for the website I want to create however in this video I want to show you how to create your own template using the blueprint AI so I'm going to go back here and then I'm going to go back to templates and then here I'm going to click on build with AI to create my own template so now we have to go ahead and create our Squarespace account once we're signed up we'll get to the first step of the Squarespace blueprint AI which is where we can now build our own website templates in just a few clicks so let's start with the site title which is the name of the website and mine is going to be medic wedding photography now don't worry if you're not sure about your name yet because you can always change it later on then we can choose the brand personality this will determine the overall look and feel for the colors fonts and the AI generated text on your website let's try friendly on the left side we can see some preview text text to give you an idea of what the tone of voice will be I'm going to stick with friendly and move on to the next step now we can start creating the homepage for our new website on the right side we can choose what we'd like to add to our homepage let's start with an intro section this section will then be added into the preview area here on the left side and we can also choose from different layouts I'm going to go with this one right here then I also want to add an about section so I'll add that right here below that let's add a forms section and also a footer section I think that's a great start for our homepage so let's go ahead and move on to the next step on the next step we can choose what pages we'd like to add to our website now by default the bout and the contact page is already selected and we can preview it right here on the left side now we can also add more pages like the shop page a Services page an appointment page or a course page but I'm going to keep my website simple for the beginning and just stick to the about and the contact page but don't worry you can always add more pages later on let's go to the next step now we can choose our color pellet for the website on the right side we can test out different pellets and see what it would look like on our website so we can just test out a few of them I think for a wedding photographer website something a bit golden or silver would look nice maybe this one or maybe this one right here so I'm actually going to stick with this one and go to the next step and here on the final step we get to choose what fonts we want to use for our headings and paragraphs so I think I'm going to choose this one here and if you're not sure which one you want to use don't worry I'm going to show you exactly how to change them later on in the website editor so for now let's move on and click on finish and this takes us into the home dashboard where we can see a preview of our new website we can also use the navigation menu here at the top to check out different pages on the website and to go back to the homepage all we have to do is click on our website name right here up here on the right we can switch to the mobile view and see what our website looks like on a mobile phone and to switch back to the desktop view all we have to do is click on the desktop icon again on the left side when we click on pages we can see an overview of all the pages we currently have on the website under main navigation we can see all the pages that are linked in the main navigation menu here at the top right in the header and as you can see the homepage is currently not Linked In the main navigation menu that's why it's here under not linked now if you wanted to add the homepage to the navigation menu as well all we have to do is Click hold and drag it up here to main navigation and then the homepage will show up in the main navigation as well we can also put this first by dragging this all the way to the top and then it will come up first in the navigation menu but I actually like it better when the homepage is not linked so I'm going to drag it back down here to not linked because people will always be able to just click on the name or the logo up here to get back to the homepage and down here under utilities we have some more pages of the website like the 404 page but we don't need to do anything with these pages right now so for now we can just ignore them and later in the tutorial I'm also going to show you how to add a completely new page to your website but for now let's go back to home now let's go ahead and start customizing our website first we have to navigate to the page we want to edit so if you want to edit the about page we can click on the about page page here to open it up and then we want to click on edit to make changes to this page however I want to make changes to my homepage first so I'm going to go back to my homepage by clicking on the website name here and now I'm going to click on edit and this takes us into this Squarespace website editor where we can start to make changes first let's look at how we can change some of the basic elements on the website like the text the buttons the images or the background for example to change any text all we have to do is click on the text element we want to change then click on the pen icon and make our changes now if you have a hard time coming up with a good headline for your website you can use the integrated AI feature to help you with that all you have to do is click on the AI icon right here and enter what type of headline you're looking for I'm going to enter headline for a wedding photographer website and click enter and now it says capturing love your story beautifully told through our lens I think that's pretty good for this kind of website so let's delete this part here and I do want to have this on two rows so I'm just going to stretch out the text element just a little bit to the right and also to the left and now I have this nice headline in the center and now if you want to make some more changes to the this text element we can just select it and then use this bar here at the top to make changes like we can make it bold or we can make it italic we can also underline the text here we can add a link we can change the alignment here to the left side to the right side or to the center and here we have some more options now I've just used the same method to also come up with a subheading and next I want to make changes to this button here so so first let's select it and then click on the pen icon now first I'm going to change the text from learn more to contact and then as we can see this button is currently linked to the about page which means that when people click on it it will take them to the about page but now it says contact so I want to take people to the contact page so let's edit this and click on the cross and then select the contact page so now people will be taken to the contact page when they click on this button we can also look at the design for this button by clicking on design currently it's set to primary button and to fill now fill just means that we can make this button as large as we want so we can drag it here to the left and to the right to make it even larger or we can set it to fit which means that it will just fit the text that is inside of this button so when we set it to fit then we can just make this element larger but the button will stay the same because it will just be fitted to the text that is inside of the button now I'm going to set it back to fill and now we have to actually drag this out to make this button larger again and then we have some different button Styles So currently it's set to primary we can also choose secondary to just have this outline here or the tary to just have the text but I'm going to go back to primary so now we've made some changes to these headlines and the button down here but I don't like where these elements are positioned I want them to be more in the center and I want to have this section be a bit larger as well so I'm going to hover over this section and then down here we can see this Arrow icon we can just click hold and drag this to the bottom to increase the size of this section then to move around the different elements we can just click hold and drag them to any position inside of these grid lines right here so these grid lines basically help us to make sure all of the elements are correctly aligned to each other and also to the entire page so I'm going to put this uh right here and then I'm going to move this up as well and then the button I would say we're going to leave this right here so now I want to change the background of this section to do that let's click on edit section up here and then let's go to background and here let's first delete this current image by clicking on the trash icon and then what I'm going to do is just drag in an image that I have prepared before for this section into this area here and this will upload this image to this section in the background now because the image I've uploaded is not in the exact same dimensions as this section right here not the entirety of the image is visible so what we can do is use this Focus point to decide what part of the image we want to show so I actually want to show more of the top part of the image so what I can do is just move this Focus Point here to the top a little bit like this and then we will see more of the top of the image down here we also have some special image effects that you can apply something like this or maybe something like this so it kind of moves around when you hover over the page however I'm just going to go back to none and not use any of these effects now one thing that I might want to do is make the background a bit darker so it's easier to read the text in front of it so when we scroll down we can go to Overlay opacity and increase this slider here to the right to make the background more dark or a bit brighter like this I'm actually going to set it to I think 50% looks good so now we know how to change the background of a section now when we scroll a bit further down we can see that here on the next section we have just a simple gray color as a background but we have an image element right here now how do we change this image element it's actually very easy we just click on it and then we go to the pen icon and then here we can see the image that is currently added we can just delete it by clicking the trash icon once again and then we can add our own image but just clicking holding and dragging it into this box and now the image has been changed if you want to you can also attach a link to this image which will make it clickable and down here you can also enter an all text to describing this image which will help with search engine optimization now up here when we go to the design tab we have three different options for this image we have fit fill and shape now under fill the image just takes the shape of whatever you decide the element should be so when we make this smaller then the image will be smaller as well and it will take the shape of this rectangle here now if we set it to fit then the entire image will just be fitted into this element shape so we can just make this as large as we want and Squarespace will just make sure that the entire image will be shown then we also have shape which enables us to use different shapes for this image so here we can maybe go with a 2:3 ratio and then we can test out the different shapes and maybe find one that looks good I'm actually going to keep it simple and just go back to fill but I do want to make the corner ERS of this image round and the way I can do this is by just adding a number in here so maybe let's try 25 and then when we look at the corners we can see that it's rounded like this and I think that looks pretty good so I'm going to keep that but let's actually go back into the settings because one thing I want to change is I want to have kind of them in the center so I'm going to use this Focus Point here and move this to the left so we can see both of uh the couple here in the image so now we've learned how to edit basic elements on your page like the text the buttons the background and images but we also have to talk about sections because each page is made up of one or multiple sections so here on the homepage we have the first section up here which we have already worked on then below we have the next section and we can always see that because it's outlined with a blue line and then below this line we have the contact us section and then we have the footer section here at the bottom now whenever you hover over a section you can move them around so here you can see these arrows going up and down if you want to move this section down we can just click on the arrow and then it will be moved down and the one that was below before will be moved up we can also favorite specific sections so we can save them and use them multiple times on other Pages as well and we can also duplicate them so when we want to use the same layout again we can just click on duplicate and then it will add the exact same section below right here now to remove any section we just click on remove and then confirm and then the section will be removed now let's put this section back to the bottom here so now we know how to manage the sections that are already on our page but how do we actually add a completely new section to our page well to do that we first have to go to where we want to add that new section for example I want to add one right here so all I have to do is click on ADD section and then I have two options I can either choose one of the templates that I can find here so for example if I want to add a Services section then I can click on Services here and look at the different layouts that they have so maybe I want to choose this one here so I can just click on it and then it will just be imported to my page and I can start making making changes just like we've seen before but let's actually create a section from complete scratch so let's delete this one first by clicking on remove and confirming and then let's click on ADD section again and this time let's click on add a blank section so we can start from scratch and now as you can see there's nothing in this section so we can start adding each element individually to add new elements we can just go to add block on the left side side and then I'm going to start with an image which I'm going to place here on the left side then I'm going to click on the section again to add another block and this time I'm going to add some text I'm going to move that to the right side and I'm going to add some text which says about me then I'm going to add another text block and then I'm also going to add a button below that text block all right now I have all the elements that I need for this new About Me section I'm building so we can continue by adding content so let's start with the image here I'm going to go to the pen icon and then I just drag this image into the box then I want the image to fill out the entire space of the element so I'm going to go to design and set this to fill and I'm also going to add a radius of let's say 25 and then I just need to make this image a bit larger maybe like this I want to also increase the area for this section so I'll just drag this down kind of like this and then I can make this image even larger I think something like this looks good and then here for the title I'm going to first of all set this to a heading let's set it to heading two to make it a bit larger then for the paragraph below we're going to move move this down a bit and then here I'm just going to use AI to create a quick paragraph about myself very cool now I can make this text a bit larger so I'll just set this to paragraph one and then just drag this to the right side a bit make this a bit smaller and now I have some space for the button below this text element right here and I think this looks pretty good now I just need to make this entire section a bit smaller again like this and there we go now we have quickly created a nice About Me section here from scratch and now let's also look at the settings we have for each section so I'm going to scroll back up and go to this top section here then let's head over to edit section and then here under design we have some options for the grid now we've already seen the grid before when we were moving around elements here on this section and we can actually make changes to this grid now to see our changes what we want to do is first go to our keyboard and hit the letter G and this will make the grid visible here in the background so we can see our changes now first we can change the row count which will just determine how large this section is and to increase the area we can just increase the row count right here to maybe 20 and then you can see that we have some more space here at the bottom however we can also just use this slider here at the bottom to manually drag the section size up or down and make it exactly how large you want it to be and now as you can see we are back at 16 we can also look at the Gap So currently we have a gap in between those grids and we can maybe remove the Gap and this will enable us to put the elements a lot closer together or we can go back to this Gap right here to have a bit more spacing between the elements when we click on the three dots we can individually change the space between each grid by moving the slider to the left or to the right now I'm going to keep it as it is then here if we activate the fill screen feature it will make sure that the entire screen of your website visitor is filled just by this section and then here under styling we have one of my favorite options here on Squarespace which is the divider so when we activate this feature then we can see a very nice looking border here at the bottom for this section let's actually press on the letter G again to make sure the grid lines are gone so we can really see what this looks like and let's go back in here so under shape we can basically change and try out different shapes for the border of this part of the website now I'm going to actually stick to these wavy lines I think they look nice we can also change the width down here the height and I'm actually going to maybe play around with the alignment a bit and maybe put this to the left side just a bit and then go back now I think that looks pretty good we can also play around with the thickness of this border down here I think medium looks good we can also change the color down here now I think that looks very nice so let's move on and go to the second tab for the settings to background now we've already covered how to change up this background image but if you want to you can also add a video instead of an image by clicking video and then uploading it right here or you can go to Art and then use one of squarespace's different art options as a background um but let's actually go back to image and then let's go to the next tab which is colors now here we can use different color themes based on the color pellets that we have chosen for this website So currently it's set to darkest which means that the background will be dark and the text in front will be bright now we can also change this to maybe lightest two and this will make the background bright and the text it will make it dark so we can basically play around with these different options and the cool thing here is that it will still look good and overall compliant with your overall color pet so I'm going to go back to the option we had in the beginning now let's click out of these settings and then one more thing I want to show you for the the section settings is this option to browse different layouts when we click here then we can see different types of layouts for this section that Squarespace kind of recommends to try out and we can just click on each of them and see what they look like maybe we want to have the heading here on the left side the subheading on the right and the button right here or maybe we want to try this option here or maybe this option so here pretty quickly you can see different options that you can use for a layout for your section now to go back we can just use the undo button here until we are back with the original option we had and now we're going to cover a very important part of your website because it's going to be visible on every page and it's going to help people to navigate through your website and that is the header here at the top now to edit your header all you have to do is hover over it and then click on edit site header then here on the left side you can see this button that says add elements here you can add more things to the header like for example you can add a button you can add some social media links you can add a card icon for people who have an online store you can have an account login icon if you enable your visitors to log in to an account area and then you can also add the language switch if you have your website in multiple languages now I'm going to keep things simple and turn off all of these additional elements for now and here on the right side we have another button that says edit design so here we can change up the overall design and layout for our header So currently we have the logo here on the left side and the links on the right side but for example if you want to add the logo to the center of the header we can change it right here under layout we can just go down and then choose this design where the logo is into Center the links are on the left side and if you have a button it will be visible here on the right side but for my website I'm going to go back to the default view with the logo on the left side then down here we can change the spacing between these links and the spacing between elements on the header we can also add a drop shadow we can add a border and then here if we activate fix position this will mean that when people scroll down your website the header will be kind of sticky to the top of your website and it will just stay in place now if this is turned on then the header will just scroll out of the view for the visitor then here we can change the size of the header by just dragging this to the left or to the right and then here we can set the width to full or to inset then we also have settings for the color of the header currently it's set to Adaptive what this means is that the header style will be taken based on the first section we have on the page so here currently on the homepage it is set to to transparent because here this section will determine that the header will be transparent now let's quickly save our changes and then exit this editor now we can see that the header is transparent so we can actually see the image behind the header but when we go to the about page we can see that the header is now in the same color as this first section and the links are not white anymore they're actually black because the background is bright so the links need to be in dark color and it's the same way for the contact page so this is what adaptive means however we can also change the color from adaptive to solid and then you can just choose any color that you like for your header or you can even set it to gradient and then you can add a gradient for your header but I'm going to change it back to Adaptive because I like the design of the transparent header for the homepage now before we've already talked about the position of the logo here in the center or the left side but how do we actually add our logo to the header well to do that we have to first hover over our website name here and click on it and then here we can see that pen icon when we click on the pen icon then this menu will open where we can add our logo right here so all I'm going to do is just drag and drop my logo into this box then once it's uploaded I can play around with the size of the logo so I can just drag this this logo height to the right to make it larger or to the left to make it smaller and optionally we can also add a mobile logo for the mobile version of our website now later in the video I'm going to show you how to optimize your site for mobile as well and if you want to add a specific logo for that version you can do that here now one thing you want to keep in mind when adding your logo is that you always have to have contrast between your logo and the background so I could add a bright logo here maybe one in white but then when I go to the other Pages the about or the contact page then it will be hard to see because there the header is in a bright color and the contrast between the logo and the background will be a lot lower now unfortunately on Square s we don't have the option to add a separate logo for the different header types we have so for now I would just add one that works on every page on your website now like I've already mentioned before the header will be always visible on every page on your website so that people can easily navigate to different pages another part that will always be visible on every page is the footer of the website like the name suggests it's all the way at the bottom right here and we can also edit this part of the website now what I want to do is add a completely different template for the footer so what I'm going to do is click on the footer and then click on remove and confirm and now I'm going to click on ADD section and I'm going to look at these templates here I'm going to use something very simple so I'm going to just choose this footer here and now here I'm going to add my logo to the left side so I'm going to delete this text element and add an image instead then to add my logo I'm just going to click on the plus icon and then select from library because I already uploaded my logo to the library now it's a bit large so let's make this a bit smaller and then here in the center I'm just going to add my social media link so I can just click on it then go to the pen icon and here I can just add my social media links right here and on the right side I'm going to change this to my own email address then I want to make sure that it's centered in this text element box so let's click out first then let's click on the text element again and then here with this icon we can set this to Center and then it will be aligned with of the other elements we have here now one more thing I want to do is to make this text a link so that when people click on it it will automatically open up their email and put this email in the recipient box for a new email so it will be easy for them to contact me so first let's highlight the text we want to add the link to then let's choose this link icon then here let's choose email and then we'll just add our email once again here and and then click out and now this will be a clickable link the last thing I'm going to do for the footer is decrease the height by just dragging this up so all the elements will be in the center like this so now we know exactly how to change and customize all the content on our pages but how do we actually add a completely new page to our website well that's what I'm going to show you how to do next so first of all we want to save our changes up here and then we want to exit the editor then from here we want to go to pages and then here we can see an overview of all the pages we currently have on the website now to add a new page all we have to do is click on this plus icon here and then we can see different types of pages we can add so we have regular Pages up here then we have collection pages so this would be a Blog Page a store Page a portfolio page and so on the reason these pag are collection pages is because on that page it will basically be just a collection of specific content so for a Blog Page it will be a collection of blog posts for a store Page it will be a collection of products for a portfolio page it will be a collection of different let's say photography project then events the same thing videos and course the same thing and then down here we have some more options like we can create a member site we can also add a drop down to our navigation menu to basically organize multiple pages in one drop down menu and then we can also add a link to an external website now for this wedding photographer website I'm building here I think a page that would make sense to add would be a portfolio page so I can basically showcase my previous work so I'm going to choose the portfolio page and add that to my website then here I can choose from different types of layouts I like this one the best so I'm going to choose this then up here in main navigation we can change the name I'm going to just name it portfolio and then it will take me to the new portfolio page which will also be visible here in the top navigation menu and now because this is a collection page editing the content here will be a bit different compared to what we've seen before on the homepage so here on the actual portfolio page we will just see a collection of all of our projects we have on this page and we can add new ones by clicking on the plus icon or we can also edit each one of those projects by clicking on that and then clicking on the edit button up here to make any changes to this project page so here we can change the text here we can edit the gallery so all of the images that was part of this specific project now let's go back to the pages overview by going to exit and then going back to website now here you can see the portfolio page that we have added which will also be shown here in the navigation menu and we can also change the order of this menu by just dragging it up or down and if you want to add a Blog to your website it works exactly the same way so again we can just go to the pages overview here then click on the plus icon and then under the collection Pages let's add a Blog then I'm going to choose this blog layout and named this blog and now we have a Blog here in the navigation menu where all of our blog posts will be visible and we can click on any of them here and then it will open up the blog post and then we can make changes by clicking on edit here and then just make any changes that we want to this blog post now if you want to turn your website into an e-commerce website and sell products all you have to do is add a store to your website so here under collection Pages we have store and you can just add that and then add your product to sell them on your website now I'm not going to go more in detail because I have a specific dedicated video on how to set up a online store using Squarespace and if you're interested in that I'll leave a link to it down below in the description now I want to show you a very cool feature of Squarespace that allows us to change the overall color scheme and also the fonts of your entire website with just a few clicks so when we come over here to style then we can see here on the right side it says themes now this is our current theme that we're using for this website but we can easily switch it up by just clicking on themes and then here we can see tons of different other themes that we can use for this website so we can just click on each of them and then it will take it for our website and we can see a preview of what it would look like with this new theme so with just a few clicks we can just test those out and if we like this then we can just keep it now I'm going to go back to my original theme here but uh you can also change each part of this theme so maybe I like the colors but I don't like the fonts for this theme in this case I can just click on fonts here and then check out different fonts and the colors are going to stay the same but the fonts are actually changing based on what I select here and it's the same thing with colors so when we go to the color pet here we can just change the color pellet by trying out different options here and if you want to go even more in detail we can click on this Arrow here at the right and then we can just go in and change each individual color of this pallet so here this is the current pallet we're using and if you want to change any of these colors we can just click on the color we want to change and then we can just change it up here now personally I don't like to mess with this because I think it's already kind of optimized like the default themes that Squarespace has but it's good to know that we can actually change each individual color if we want to and it's the same thing with your fonts and also your buttons so here we currently have this button style we can also choose this or this the same with forms and then down here we have miscellaneous so here we have options to add specific animations for our content so when we go to animations here we can choose how the content will appear when a new site is loaded so for example we can set it to fade and then the content will just fade in or we can set it to slide and then it will slide up from the bottom I think fade looks great so I'm going to just stick to fade now let's save our changes and then click exit now one thing that many people Overlook when creating their website is to optimize all the content for mobile phone screens because the truth is that most people who visit your website will visit it from a mobile phone so we want to make sure that all the content looks great on a mobile device as well so let's click on edit again to go into the editor and now we want to switch from the desktop view to the mobile view up here and then we just want to go to all of the pages and scroll through all of the content and make sure everything is optimized for mobile so for example here I would maybe space out these elements a bit more so for example just drag this text up a bit to to the top then make this element a bit smaller like this drag this to the top and then also drag the button to the top as well then we can scroll down I think this looks good so nothing to do here here the image is not shown quite correctly so what we have to do is make this section a bit larger like this and then we're going to drag down all of this content to make space for the image so now we can drag this image down so we can actually see the whole photographer like this so now it already looks a lot better than before and the cool thing here is that whatever we change whatever we move around here or change the size of it won't affect the desktop view so now when I click save and then go back to the desktop view I can see that nothing has changed here so that's why we always want to add an edit content on the desktop view first and then go to the mobile view and optimize where necessary so now let's say we are finished with building our website and we are ready to publish it to the world now how do we publish our website well we have to come over here to settings and then here click on site availability and then as you can see here we can't set it to public yet which is because we haven't chosen a Squarespace plan so what we have to do is click on upgrade to public publish and this takes us to the pricing page where we can choose a plan for our website now for simple websites I recommend to go with the personal plan and this should have everything that you need if you want to sell something on your website you're going to need to go at least with the business plan now with the business plan for selling physical products you're going to have a 3% transaction fee if you want to lower that to 0% you're going to have to upgrade to the Commerce plan and then if you want to get some additional features for your e-commerce store you want to probably go with the e-commerce Advanced plan however to get some more detailed information for the differences between these plans just scroll down here and read it for yourself I'm also going to leave a link to the pricing page down below in the description now I have created a simple page here so I'm going to just choose the personal plan as I won't be selling anything on the website directly then here we can either go with the annual payment or we can go with the monthly payment now something to keep in mind is that if you choose the annual payment it will be lower on average and you will also get a free domain for the first year of using Squarespace now I'm just going to use this website for this tutorial so I'm going to go with the monthly option and confirm the selection then here just enter your details and click on Save and continue on the next step just choose your payment method enter your details and click on on Save and continue and here on the final page before confirming your payment make sure to enter the promo code Medics 10 because this will give you an additional 10% off of your price so when I click apply we can see that the price goes down by 10% once that's done let's click on confirm payment so now that we have completed our payment we can publish our website however before we do that I would highly recommend to get your own custom domain name because it will make your website a lot more professional so to do that we just click on get a domain right here now if you already have a domain all you need to do is connect it to your Squarespace website and you can just click on use a domain I own and then follow the instructions however if you don't have a domain you can just purchase it directly here on Squarespace so you can just go and click on get a domain then you want to look for the domain you want to use I'm just going to go with medic weding photography.com and as we can see it's still available so let's choose it and click on check out then here we can adjust the term length for this domain I'm going to set it to one year because I'm not really going to use this website and then click on Save and continue then to register this domain you need to enter your personal contact information and click on Save and continue and confirm the payment now the Reg registration for our domain is processing so let's click on done at the bottom and this takes us back to the domain settings now before we can activate our new domain we have to verify our email so you want to log in to your email inbox and look for an email from Squarespace saying action required verify your Squarespace domain contact then here just click on verify now now if you don't receive this email in your inbox right away what you can do is go back to the domain settings and then click on your domain and then somewhere here it will say resend verification email and this way you should receive it in your inbox once the email is verified let's click on return to Account dashboard then let's go to our website go to settings then go to site availability and now we can set our website to public and click save and now our website is live so we can just copy our URL that we have registered before go to a new tab paste that in and then we can see our website live now the very last thing I want to show you in this tutorial is how to change the browser icon up here we can actually add our own logo and make everything branded so to do this let's go back to our website dashboard and then go to settings here let's click on favicon which basically means the same same thing as browser icon and here we can just drag and drop a square version of our logo into this box and optionally we can also add one to this box to have a separate one for the dark browser mode if you want to then click on Save and now when we go to our website again we can see our logo right here now if you enjoyed this video then please leave a like and maybe even a comment this would really help to make this video be seen by more people also subscribe to the channel if you want to see more content like this I look forward to seeing you in the next one thanks for watching

← Mailchimp WordPress Sign Up Form Tutoria Elementor Wordpress Tutorial For Beginne →