Squarespace 7.1 Tutorial for Beginners: Start, Build, and Launch A Website in 1 Hour (2020)

hey welcome today we were going to build pay for it and launched a whole new website from scratch in the new Squarespace 7.1 so today we're gonna make a website for my cousin Jack Underwood he is out in LA he is a aspiring actor and currently a model so we're gonna put together a website for him with all of the pictures that he has to get him a little bit more exposure so if you are looking to build a photography intensive website this tutorial is gonna be really good for you if not if you're looking to build more of like a blog or just a personal website something else this is still going to be a good tutorial because we're gonna start from the beginning it's very intro and I'm gonna go over everything you need to know to build a website and the new Squarespace 7.1 if you're gonna watch the whole thing through really quick hit that little gear icon in the bottom right and hit playback speed and go to X or 1.5 X watch this whole thing through really fast and then come back and do it with me and you will have a full web site up and going really quickly oh and one final note I recorded the tutorial on a different day that I'm recording this intro and because I have a good hygiene I changed clothes and so I'm gonna be in different clothes and a different setting when you watch the rest of this tutorial just to let you know except for maybe one part later when I talk about blocks I might pop back into this outfit and jump back in with you alright you ready let's dive in okay part 1 let's get started first things first we're going to in this lesson we're going to choose a template we're going to create a Squarespace account in case you don't have one yet we're gonna start from absolute scratch creative Squarespace account then I'm going to intro you to the backend Squarespace editor where you can move things around and play around and then I'm gonna show you how right after this within a couple minutes you're gonna have a live site up and on the internet that you can reach on your mobile you can send to friends you can do on your desktop whatever it's up and going within just a few minutes so that's what we're going to be going over in this lesson so let's get started so here I am on squarespace's website first I'm gonna hit templates so I'm on Squarespace comm just gonna hit templates right up here at the top and I'm gonna peruse their templates tour just see what they got so let's look around it's just gonna load up once it loads so I'll be frank with you I already know the template that I'm gonna choose but I'll just show you around list templates store right now so they have all these different templates a good thing about Squarespace 7.1 templates is that they all have the exact same functionality so you should think this these are inspiration websites that you're showing here these are starter websites that you're seeing here any website you can make to look like the other they have the exact same functionality you can manipulate and change things in the backend to make any one of these websites look the exact same as any others so they got a bunch if you want a preview some you can hit preview or you can just hit start if you want to do that template today I'm gonna do a template that's in the photography section so I'm gonna hit photography and I think it's at the bottom here it's called gates so my cousin Jack he showed me some websites that he really liked and they had a lot of themes that were in this gates template these wall to wall side to side images is something he really enjoyed so I'll hit this preview button you can see and so that's what we're going to do we have a lot of photos of Jack so this is a very photo centric starting point for a website so this is what I like this is what I want to use so let's get going with this I'm just gonna hit up here start with this design and now Squarespace is going to initiate alright now it's going to ask me to create an account right now you can see I have some filler information I'm just going to delete all this because we are gonna start from scratch I'm gonna say we'll put in my first name last name we'll plus website you can see I've already created an extra one there website one two three this is just a fake email that is going to go to my actual email and I'll create a super secret password right here create account okay so now we're into the welcome to your site area so I'm just gonna call this site what my cousin's name is Jack Underwood and I'm gonna continue I don't really care about learning it because that's what I'm gonna teach you so I'm gonna hit skip okay there we go now we're in okay first things first let's look at the editor here so right now you see here is just sort of a preview of our website and then here are our main nav options over here if you start with pages you'll jump in to see all the pages that are on your website design allows you to make global high-level design changes that will affect everything on your website you can do more detailed granular design changes once you're in the page but we'll get there if you want to sell stuff there's a commerce section we're not going to go into that today marketing here's a marketing section we're not really gonna go into that today we'll touch on a little bit later scheduling and that's another section we're not going to go into today analytics this is a great little section where you can just tap in and it'll show you a bunch of great data about who's coming to your website what pages are popular why aren't where are they coming from this is a great tab but we won't really go into that today it's pretty self-explanatory too and then your Settings tab if you have any questions there's help so here is your main nav and here is your website if you want to edit a page you just go into the pages section and I'm selected on the work page I can just hit edit and it will bring me into a full width screen where I can jump in and just edit this page around or if I just wanted to look at it you can also jump into it by hitting this little arrow arrow and if I wanted to look at it mobile you hit this little mobile button desktop view now mobile so and then if you click on another page it'll bring you to the other page so it's pretty self-explanatory there so let's get this website up and just look at it live on the web not in this little back-end area because it is actually live on the web right now so you see this URL right up here at the top Tunney mushroom Tunney mushroom RX EP Squarespace config this - backslash config means you are in the backend if I copy and paste this and do it just another URL it'll open up the page and then bring me right back into the back end so we don't want to do that if I just copy and paste the text without the config go open a new incognito window and paste it in it's gonna say private site but this is the actual site so let's first make this live so we go back go into our settings site visibility and then hit password protect and then type in any password you want I'm gonna use Jack JC CK all lowercase and hit save now if i refresh this page it'll bring me up to a password I'll hit Jack and go enter and now I can look at this live on my desktop on my computer I can also look at it live on a mobile device so this is great for just troubleshooting and testing things there we go it took a minute to load up but there it is here's the other problem though this is a very confusing URL to remember so let's make this a little more understandable let's go back here back to our settings so I'll go from the top hits settings hit advanced nope I'm sorry we're gonna hit domains and right here is our built in domain so I'm gonna click on this and here is something I can change so I'm gonna say V - jack - Underwood and I'm gonna hit rename and then confirm now you'll see my name my URL up here is gonna change as it updates I'm gonna get rid of this one cuz I only need one and there we go the Jack Underwood that squarespace.com backslash config now again if I just copy and paste this in into my URL over here boom now we have a live site that works put in my password and that is much more memorable I can share that with friends family it's up it's running clients whoever there we go so that's the end of lesson 1 lesson 2 we're going to jump we're going to build the actual pages that we're gonna do and learn a little bit about how these sections work all right welcome to part 2 we're going to build all of our pages and get the rough structure of the website in place now so in this section we're going to do these things create a pages set the home page add gallery images understand how sections work in Squarespace and then add a background image to show you how that's done so first thing we're this website is full of all of this filler content so I need to get rid of this filler content and make it my own the structure of this website I want it to be a home page and that home page is also going to double as the gallery page for all of his content I would a contact page and then I want a about and about Jack page that explains a little bit about who he is and maybe one or two more images so let's create those pages I'm gonna delete this filler content there's a little trashcan button next to a page the about old about page and I can't if you see this I'll hit the delete button it says you can't delete this because it's your home page so I'll say ok and I'll delete it later to create a new page you hit this plus button so I'm gonna hit the plus button I can start with a blank page or I can start with a page layout I can also create these collections a store if I want to sell stuff a blog if I want to create things but we'll leave that for right now it's kind of self-explanatory but I'll also jump into that later if you want to learn but we're gonna start with a blank page this is going to be our home page our new home page so first thing you'll notice it pops up up here so anything that is these two pages are up under the main navigation section if I don't want them up in the main navigation up top of my website I click on it and I just pull it down to this not linked section there we go next let's make this home page actually our home page you'll see the work right now is actually our home page because it's got the little Home icon right there so I'm gonna hit the gear hover over a home page hit the gear scroll down set as homepage click that confirm then close you see the little house moved from work to home so now this is our home page and I can delete work perfect all right now let's edit this home page to edit it I've selected the home page I'm just going to hit here I'm gonna hit add page content using that blue button and I just want to add a blank section there's a bunch of sections you can choose from here if you want to go through them go for it all of them are just different starting points of the same blank type section except gallery that's its own thing but we're just gonna start with blank here and I want to have an image and then text right now it just dropped in a text block actually I want the text to have it open right here I want the text to say this and I'm just gonna pasted in Jack Underwood is an actor and model based in the LA area I want this to be really big text though so I'm gonna hover over this paragraph style and hit extra-large heading that is about what I want but I want this to be half an image on this side and then half the text on this side so in order to add an image or any other block it looks like there's an extra space here so I'm gonna backspace and then do that it looks like they're a bunch of extra spaces now I'm gonna do that there we go to add an image block or any type of block you want to hover over this little insert point you see these insert points going above and below any block right now the text block that I'm in that will go above below and even to the side sometimes so I'm gonna hit above here and I'm gonna see all the different types of blocks that I can enter the main ones you use though are gonna be right up top that's going to be my image for me right now I'm gonna image I'm gonna upload an image and the image I want to upload is this check Underwood image this one just looks super model II and I'm just gonna hit apply once that's done processing I've done this before if you hit it before too early it's sometimes it won't allow it so this is way too big of an image it looks great but I want this next to it so to move blocks hover over it so you have this bar that pops up at the top click down on the bar and then you can move it where it's gonna drop when you let go of your of your cursor it looks like it jumped too early when you let go of your cursor it's going to drop where that black line is so here it's going to drop at the top left its gonna drop on the left side if it's just above the image it's still going to be across the whole thing but it's connected to this image now and if I move it to the right it's gonna be on the right side so this is looking more of like what I want however I want this to be centered so in order to Center text with an image vertically centered I should say I'm gonna copy that and I'm gonna open my image block hit design and change the image block into a card then I'm gonna paste it into the title area there we go so hit apply and then if I delete this text block it will move out to be full width there we go that's sort of what I'm looking to do I can also change my section settings if I wanted it to be right now since the image is so big you're not gonna see much of a change but you'll see small section heading medium large you can change the section height you can change the width I can make it a small with a large width you can move it around within the section add a section background color you can change the color of the entire section we'll get into this a bit later I can do like a tall background blue I can change this to any color I want you know a dark light whatever you want and you'll notice the header up there is changing with it but I just wanted to stick with the default theme so I'm just gonna toggle that on next I want the gallery block so I'm gonna hit this blue button and then like I said the gallery blocks are different than any the other ones so I'm going to hit gallery and these don't have the same edits so all of these again are just different variations of the same so I'm just gonna click this first because I'm going to tweak it the way I want there's a little Vivian barking in the background I'm gonna hit this image button right there and I'm gonna delete all this filler content now I want to add my images so I'm going to hit this plus button hit upload images and then highlight all the images that I want not the last one because that's this one and then just hit open and then wait for them to upload okay so that was like about 28 images and they were pretty high resolution so that took a couple minutes but we are all set if I want it I can click on these and add a description and link out even if I wanted to so when they clicked on the image it would link somewhere but I'm not gonna do that I'm just gonna hit close there we go so what I want these to be is like what I saw in the template I want these to be full width full bleed of the the width of my page and about four across so I'm gonna again hit the section editor here and then change our gallery type so you see this is different this our section editor here is different than our section editor on just a normal section so that's what I was saying this section is gallery sections are a bit different so I'm gonna hit the section editor I'm gonna change the grid type to masonry hit full bleed and now it's gonna go whit to width with some spacing but I'm gonna turn that spacing down to zero and then I want four columns there we go that's looking really good I can also change the scroll animation as I scroll down you notice they fade it in I can do scale end so you'll see them sort of scale in a little bit as opposed to fading in which is they sort of slide up from the top I like the scaling in so finally I'm gonna hit done here and it's gonna save it just in case something happens because that's a lot of images that took a few minutes to load up I'm gonna hit edit again to jump back in now let's add our footer section to add the footer section just hit the plus icon and then we this we want this to be a contact thing so I'm going to contact and I just want big bold easy to see contact info there we go I want this to be a bit smaller so I'm going to highlight it and go - I so want it to be a heading though so I'm gonna hit small heading and then all this looks good so I'm going to hit done so there we go that's our home page our home page is now set I'm going to pull this back up to the top here and want to change a couple things around so it if I go here and refresh my Jack Underwood squarespace.com you'll notice that we're all set here if I scroll down the images slowly come in then we got this contact information need to change this in the footer but there we go we're looking really good I don't want this to say homepage though I want that there's just to say home so I'm gonna in my back end just hit the gear icon change this the navigation just to say home I actually don't need it to say page anywhere so I'm gonna delete that also this is a new thing in Squarespace the new Squarespace 7.1 you got to go to SEO and OH home pages it's gonna you edit the SEO in the main tab other pages you can edit it here but I'm gonna hit save and there we go so there's our home page now let's add our about page so again I want this to be in the main nav so I'm gonna plus here I'm gonna start with a page layout this time and let's see I want it about one of the about layouts I like this one this one looks good so I'm gonna click about three I just want this to say about and let's make sure all those settings are right so I'm gonna hit the gear icon about about about SEO see this as about three I just want this to say about Jack Underwood and then hit save there we go now let's add I want this image to be a cool image of Jack doing something cool and full width I don't like the inset there so I'm gonna hit the gear icon that or that pencil icon background you see we have a background image I'm gonna delete that image and then add a new one so I could just find it in here again I can also hit search images and see from the important images I've already brought in these are all the images I have on my website already this is the one I like I think that's really neat so I'm gonna do that one and then I want scroll down a little bit further and you'll see full bleed so I'm gonna hit full bleed there we go that's pretty neat I like that we're gonna hit save now let's add a contact page again get the plus page layouts we'll do contact this contact one looks simple enough I like that going to change all of our information here again change all of this to just say contact and we'll change all of this but there we go so now I'm gonna move my home and just clicked on my home and moved it up click on about I want this to be home about contact so now we're looking good we have the general structure of the website let's refresh general structure of the website is in place we have our images here they come in we have its filler text but just text there about page is coming together with the images we want and then contact so we have the general structure of our page you'll notice the form doesn't appear here because I haven't connected it to anything and so that's why there's a red box around it over here and when that's happened that's done nothing will pop up here so there we go next thing I want to do is style it I don't really like the fonts I definitely want to change those around and so that's what we're going to jump into next styling and coloring alright welcome back in this section we're going to talk about colors and fonts and how to change those there's a lot of different options in Squarespace 7.1 and we're going to talk a lot a little bit about what the different types of fonts are how do you tweak them in specific aspects and places of your website to get it going so let's just jump in to change the fonts globally across everything you hit this design tab within the design you have the fonts and color so let's start with the fonts I don't really like these fonts you'll notice it pulls up you have a bunch of different preset starting points you'll notice that's a theme of Squarespace is just starting points starting points you can start with you got Sun serif fonts serif and mix this is going to be a Sun serif and a serif a serif is just a it's a little feet that they put I'll see if I can zoom in here you see these little bit little foot at the bottom of a pea that's called a serif these are little feet they put at the bottom of characters and back in the olden days when you were doing type press it was a lot easier to read the characters if they gave them these little accent marks and so serif fonts today sort of have this authoritative feel to them you also have sans-serif fonts that do not have the little feet down there so you'll see the header font and the paragraph font neither of them have the little serifs and that's much more you'll see that much more like modern tech tech companies these days both are coming back though I know MailChimp is is a company who uses who's brought back a lot of serif fonts if I pull them up right here you'll see it there's a son serif fonts and here is a serif font so you can really do sort of whatever you want but for this website it's a lot more modern and sleek and smooth so we're gonna go with Futura that's just a really basic good font it's it's sort of all over so that's the one we're really gonna go with although it's a bit too thick I don't like how thick it is so first I'm gonna save just so it's saves and then in order to find grain tune my fonts I'm gonna hit this gear icon now I want to change the header to see these header fonts they're just too thick I don't like that so I'm gonna hit headings and do wait pull my weight down to about 400 and that's good c3 no that's too thin so I'm gonna stick with 400 I like that now there we go save that so I can now you can see there's just a bunch of different options you saw there were the seven different paragraph Styles here the four of the heading ones if I made the heading one a lot bigger it would be super huge heading two you can change these around however you like and you got all these other styles up here as well so a lot of fine grained detail and tuning that you can do so I do want to change this into something more fun this this is called your site title so I'm gonna hit advance I don't want to change globally all my headings and all my paragraphs I just want to change my site title so I'm gonna hit advanced and then right here you see a bunch of different options that you have to change just very specific types of text around your website so I'm gonna hit site title and then it dropped down my style and change it to custom now I'm gonna hit font family and we're gonna change this I'm gonna browse all fonts I want a script II type font you'll see there are just tons of fonts you can see how small my scrolling thing is just an unbelievable amount of fonts that are loaded into Squarespace so I'm gonna search for one that looks like just a script like like signing something we'll just scroll down I won't spend much to calder script that looks good I like that one that one's nice but I want to change that so we'll change that a bit later so I hit save and there we go so now I'm gonna hit this to jump back to our home page see what this looks like on the home page yeah this is really coming along now the other thing I can change that I'm not going to do in this website because I like the black and white field but is the color so you notice when I hit edit there was and then clicked on my section I showed you earlier you can change the colors of your section if you change from the default theme you have these ten different styles that you can choose from well in order to change these Styles if I hit save get back out if I'm in the design color section you see here are my ten different styles that I can change you can change all of them at once sort of high level if I hit this edit on the palette you see you have a bunch of designer palettes you can choose from I can choose just more of a black and white white muted one I really want to do custom colors you can also import an image which is cool it'll pull out the three primary colors there or from one color if I just said I want to give me three colors that are blue and then there we go now we got my my three blue colors but I really just want to do custom colors so I'm gonna click my accent color I'm gonna do it right in the middle I'm gonna change this HSL means hue saturation and lightness I'm gonna change my lightness to fifty then I'm gonna change my oh it looks like that jumped around I'm gonna change my lightness to 50 then hit enter can I change my light one two I'm gonna copy this and then change that to maybe ten nope ninety the opposite side then my dark one I'm gonna change this one I'm just gonna click and drag this one that was a little cumbersome to 10% there so I got medium super light super dark I like that I'm gonna hit save if I really wanted to go in and find grain so you see and these this will say this section is the white minimal color this section is the white minimal color so if I wanted to change say that the big header text on my white minimal theme on my white minimal theme I'm gonna hit this little pencil icon next to the white minimal and it'll pull up all the different colors that I can change again like over a hundred different ones you can change but you'll see this is our heading extra-large I could change this if I wanted to just change this one to say red I could click over here and it would change all the h1 text that is in my website that extra large header text to read but I don't want that to be the case I want it to be black so I'm just gonna leave it there but there we go you can change a bunch of colors there if you want I'm gonna leave it because I like the black-and-white feel for this website except maybe one thing I might change is this header so I'm gonna hit white minimal default I want to change this header site title gonna change it to right there that accent there we go and that's annoying that that is blocking but I'm gonna pop out hit save and now let's look at it over here this is really coming together now so this sites really coming along I'm liking it quite a lot but finally I would like this not I would like this to all be lowercase so how do I do that that I'm going to get into this header section the footer section and changing these social links in my next section here so in this section we're going to talk about the header the footer and adding social links we're gonna jump into editing the header how do you make that happen how do you make a fixed header right there at the top how do you change the social links that are in there and also how do you make a four column footer as well as other different types of elements and things you can play around with the footer so here we go first thing I want to do I don't really like that this Jack Underwood is all is has the first letter capitalised I want that all to be lowercase so in order to change that up here I'm gonna hit edit site header pulls up this little box I'm gonna change the site logo the site title just to say lower K pop down jump back in site logo make that say lower cade Jack lower KJ and Jack lower K u and Underwood and again I think this is where I can upload a logo image if I wanted to it would replace my site title so I don't want to do that but this is where you can upload a logo to your website I'm gonna hit back let's see I also want to change these social links so I'm going to go to elements and you see this social link this toggle on I can turn off those social links if I don't want them if I am selling stuff I could turn on my cart also I can add a call to action button that'll pop up over here and make it say book me if you wanted to book Jack and then add the website link there but we're not going to do that right now so I'm gonna remove that and hits this social link now I want to edit these so these three right now go to Squarespace don't want that so I'm gonna click on each one of them delete them and then Jack has sent me two of his social media profiles so I'm gonna scroll over here to my content here I'm going to do his Instagram here and just paste in the Instagram link hit enter and it automatically figures out that its Instagram and puts the Instagram logo there same thing with Facebook I'm just gonna paste it in hit enter there we go so his two social links are there and if I go back you'll also notice that if I scroll to the bottom it changed down here as well so we have just those two that's exactly what we want perfect it's gonna change them globally throughout your entire website so you don't have to go to every place where you put in social links also social links are another block you scroll down to your blocks you'll see social links down there so you can add them anywhere on your website but I will delete that you can also change the placement of your header if you get back into header style you can play around with this but you can put the everything wherever you want I like it this way this is what looks best to me so I'm going to keep it there and also you can change the coloring and then style this is where you can set up a fixed header that stays at the top of your page so if you go into style scroll down fix position is on right now it's on scroll back so what that means I'm gonna scroll down it disappears if I scroll back up it pops up that is what scroll back means so I don't want that on scroll back I just want basic so I'm gonna hit basic click out and then it save it looks like it may have toggled off but I'm not sure so I'm gonna refresh it yeah it must have toggled off so I'm gonna edit one more time get back into my site title style fixed position I do want to fix position and I want it to be basic now I'm gonna save it refresh over here and now it's constantly at the top no matter what it's just always up there so that's perfect that's exactly what I want and actually I will jump into it the color I'm not going to change the color but I just want to let you know right now it's transparent the header is going to use a color theme of the first section so this first section is white minimal so it's going to stay with that but you see if I change it to dark minimal you'll see the header is going to change to that too and what that also means is that as I scroll down that header is going to stay black even as the other sections are white that headers gonna stay black because it is mirroring whatever is the first section on my page but I don't want that so I'm gonna turn that off all right rather I don't if you wanted to pick what some other color you can turn off the default theme and make it always gray if you wanted to do that it would always be there so you have some options there but I just want it to mirror my first header and change my firt or my first section and change my first section to white minimal hit save now let's go to the bottom and change this footer area stuff so I'm gonna hit edit again get into my editor I don't want these links down here so I'm gonna delete I also don't want this made with Squarespace I'm gonna highlight all that I'm even gonna hover over this text block and hit delete just deleted the entire section actually so I'm gonna hit plus you'll see a bug you have some footer footer styles you can choose from footer starting points you can see this one is probably what I want to do you have a bunch of different styles these are all three block three columns you can add another column see these three columns you can add another column by hitting the insert button adding a block clicking on the block and then pulling it between two things and once it's there right now it's four even one sometimes it might give you uneven blocks so in order to change the width of a block hover to the right of it or to the left hover to the side of it click down where you have that little icon and you pull right and left and that's how you change the width of different blocks okay but I don't want any of this so I'm just gonna delete that whole thing and the footer and I just want a very simple almost nothing type footer I'm just gonna have site title which I will make this say Jack Underwood and then social and then just delete on this side so there we go that's looking good all right there we go that's this section next section we're really going to delve into all the different block types and how to create multiple columns and adjust them and play around with them a little bit more alright part five we're rolling on through we're gonna talk a little bit more about how you edit each section and the blocks and move them around jump into that a little bit more we're gonna talk about adding links to your website and links where if someone clicks on it it'll automatically pull it up in email or if you're on your mobile device and they tap it it'll automatically pull up do you want to call this number we'll also talk about moving things adding making that contact form on the contacts page work and then adding some animations to the image block that we have so here we go let's jump in first thing first down at the bottom here you'll see these email at example and 555 I don't have the actual emails that Jack wants to put in right now but I know we don't want an address so I'm going to edit going to delete this address and this email at email at example.com let's actually just change this real quick to will at I'm gonna do will dash Myers dot-com now right now this isn't a link if someone clicks on it nothing happens but if I I like the whole thing copy it hit this link button and then hit the gear icon I could just paste it in there but that's not gonna that's not a link so nothing's gonna happen so I'm gonna hit the gear icon here's your link editor you have a bunch of different options for adding a link so I'm gonna hit a mail paste it into the to section and then hit save you'll see this automatically changes it to mail to colon and then the email this is the URL structure for it I'm just going to hit apply and boom now it is a link same thing with the the phone number here so I'm going to copy that hit the link at the gear and then phone hey in there hit save apply and boom both of those are links now if I save that and go over to my actual website here refresh that they change the color you'll see if I click on this it's gonna pull up my email it's kind of obnoxious sometimes so I don't do it very often but then we also have the phone number so if I click on the phone number again on desktop you don't really make calls it'll say do you want to open FaceTime and make a call but if you check it on your phone if you go to this website on your phone and hit it it's gonna say do you want to call and you just hit call and boom you will be up and set and ready to go so let's not save that so that's how you add links you'll also notice that let's move this out of the way you'll also notice that there were some other options in there so if I wanted to say maybe download this hover here hit that link icon hit the gear you can add a file and if you upload the file then someone just clicks on it and they it can download so you can download files here page is like different pages on your website I only have three but you can just click on the page this is a nice little feature also notice this open a new window toggle and then this is a web address if you want it to go anywhere else outside of your website and so I'm going to cancel here delete that and then I want this contact button to go to the contact page so I'm gonna double click on it and it actually looks like this is a form so this means nothing it's not set up that's why it's not showing there I want to delete this because I don't want this to be a form you can set forms to pop up I don't want that right here so I'm gonna delete it I did jump back in I just delete that but I do want a button so I'm gonna hit this insert point right there hit our button and you have three different buttons size sizes small medium and large they're just slightly larger slightly smaller so I'm just gonna leave it on small and say contact and then same here I can open hit this gear to open up the link editor but I know where I want to go I just want to go to backslash contact and then I'm gonna hit apply when I hit save it's gonna update on my live site and now there's my contact what now I can hit that it'll pull me over to the contact page fantastic now let's go over to the contact paging at that form going so I'm going to hit contact and then hit edit so if I double click here on the form it's gonna pull up my form editor so I want this to say Jack Underwood this is just for my own use no one is gonna see this outside of me Underwood contact form I want the storage I want to just go to my email address so will it will Myers com hit connect you can also connect it to MailChimp or xapi or some other things we're not going to go into that today but we're gonna go back to build I can add different form fields if I wanted someone to put in their their phone number their I can hit phone here it'll pop up if I but I'm gonna delete that because I don't want them to if I wanted someone to put in their address there's an address field there's address field somewhere around here all right there but really just name email and message is good for what this needs to be so you'll see I'm gonna hit apply I've ever done it save then if i refresh it over here you'll see it pops up right there perfect so now I'm going to hit edit we'll do the same thing to these links over here to make sure everything works to these emails and phone numbers make these the same will that will dash Myers dot-com copy link I know the structure is a male 2 : email and I'm just going to hit apply in that and now telephone is similar but I'm just gonna go into this because I'm not as familiar with it so I'm just gonna hit save and apply delete this don't need any of that now this contact page is really looking good alright now I want to add some image block animation so I'm going to go back to my home page hit edit on the home page and jump into this image and hit animation so again you can click on any block that you add in your website and it'll pull up this editor and they have different editing choices there for the image block you have these design you can change out these designs you got we could do like a collage and overlap thing which is kind of cool stack it over here we go no it's the entire thing so it stretched the image but if I hit apply and say sometimes these these things just happen in the backend and if you just go through it it's not going to be a big deal that actually kind of looks cool too but I'm gonna just stick with what I know which is this but I want to add an animation so I'm gonna click the animations tab drop down I like the reveal and collide ones where these two things come in together very very subtly I'm gonna hit apply and save and now when I go back to my home page you'll see they slowly fade into each other boom that's kind of neat okay so that's coming together too alright here I am back in my original clothes I originally filmed this part of the tutorial talking about blocks when I rewatched it and was editing it I didn't really like it I don't feel like I explained it well so I've revamped it and that's what I'm gonna do here so let's jump into the About section and try some things out I'm gonna go to pages about and then I'm gonna just add a whole new section that we can play around with there we go boom okay we have a new section so what I want to do and what we'll play around with is adding a text over here an image here and then right below it an image here and a text over here so it's gonna rotate a little bit so in order any block you see right now this text block has dropped down it's denoted with this blue line around it that's indicating where it is it to add any block you just hover on the left side of the top or bottom of any block and then you click down on the insert point so I want to add in an image so i'm gonna click down added an image and you can drag these around anywhere so it doesn't matter that it's on top right now I'm just gonna hit apply and then click down on this image word up here at the top and when I click down I can drag it so I'm gonna scroll down still while clicking down I'm gonna scroll down and hover over next to where my text block is so my text block is somewhere down here I'm just gonna hover over on the left side and you see that black line pop up that's gonna show me that if I let go that is where this image block is gonna be so I'm gonna let go there and there we go so now we have a column over here for text and an image here so let's add this this is my first image I'm gonna make this extra-large heading we're gonna add in an image actually we're gonna add in if I hit this gear icon I can pop up the selections the customization for this one block and I can hit search for image I'm just gonna download one from unsplash because that's where all these are from that one looks good it's gonna pop it in there we go it took a minute hit apply and now we've got a text here and an image here so now below I want to add an image on the left side and it text over here so I can do this if I scroll up here you'll see there's an insert point right below this text if I add an image there it's just going to be stuck right below that text and that's not really what once I want this text and this image to be on the same row so I'm going to cancel I'm going to delete this block I'm gonna scroll down and I'm gonna wait till my insert point shows that it's going across the whole span so I'm gonna hit that insert point and I'm going to hit image so now we have an image that's across the whole way I'm just going to hit apply and will won't add an image right now and now let's add a text block above it so again insert point that spans across the entire image the entire width of the screen hit text and say this is my second image change the text to large and now let's click and job drop this text now as you'll see as I scroll over here I have an option here and you see this black line this black line starts where sort of where my text was but really it's over where my images down to the bottom of the image so if I let go it's going to attach to the side of this image now I can if I pull it up here you see the black line jumps and now it would be at the top of I guess I let go so let's pop down so see I accidentally let go when the black line was against here and it popped up there so I'm gonna scroll down here and hover down there now if I let go there it's going to split these two so now I have an image over here text here text here image over here now let's add an image here nope I want to pull one from unsplash again search for an image um let's see this landscape looks nice add to site there we go okay now that is up now one thing first these images are a little big so let's jump into the image editor if I hit this again on the image block if I hit the little pencil icon in image editor it's gonna pull up a way for me to crop and adjust and change the color of this image so you can change all these settings right here I don't really want to touch anything because I kind of think it's a pretty picture already but I just want to crop it and I want it to be a little more horizontal in nature so I'm going to do for 3 as the ratio sort of position it with these rocks and the son coming through right there you can also add filters over here that's what all this section is but it just looks like it's taking a minute to load so I'm gonna keep over here and then hit save when I'm done yes this is permanent to save there we go and then hit apply and now you see it's not as long it's not as tall there on my page and I sort of want to do the same thing over here to keep the aspect ratio the same all right now those two images are the same so a couple things to note so this is this looks good I have text here image here and you know I would like that to be centered but it's not text here image over there so that sort of looks good but now look at this as I check out the mobile view if I hit in preview Mobile you'll see this is my first image and then it shows the image and then this is my second image I would sort of like this text to be under each of the images that it's talking about because this is a bit confusing on mobile so you'll notice the way Squarespace works with these blocks on mobile is after a certain point instead of having columns it pushes everything into one so there are no more columns on mobile anymore so it just is one single column everything lines up and again that's you need that just to make sure things don't break and you have stuff that's off screen and it just looks bad on a website that's the type of stuff that's gonna ruin some of your credibility if your mobile site doesn't look good a lot of people look at websites on mobile so this column thing it is a good thing but it can be a little bit annoying when you have a setup with multiple columns on your desktop so it's something to be aware of so our way to get around that is just to do exactly what we did on the home page so I'm going to copy this text this is my first image double click on the image hit design and go to this card layout you can also do collage and then on the card layout you'll see it gives me a little block here I'm gonna paste down this is my first image and then I can delete this text block and this will span across the whole way but I want the image switch so again I'm going to hit this little pencil icon design scroll down image I want it on the right and then hit apply and then I'm just gonna do the same thing over here copy that text double click on the image design card keep the position on the left and then paste in and write a title area here paste in that there and then delete this text here so there we go that's how you do sort of this Multi multi column image back and forth again for the blocks the big thing to remember is looking at this insert point insert point where you want to drop something once it's in keep looking at that gray line as you move it around if I move it around to the left you see now this text is spanning the entire right side of this section so if I drop it it's going to be its own new column in this section everything is going to move to the left but if I hover over maybe just this picture it's this lower picture down here this is my second image that is going to be full width and just this top is going to be the left so remember keep an eye on this black line that is your guiding point depending on and just sort of move it around there's no perfect way to understand where the black line pops up and where it doesn't but just keep moving it around until you see it's spanning the entire area that you want your your block to drop oh and I forgot to mention it looks great on mobile too you see even though that it is over here it's left text right image left image right text when you switch to mobile squarespace's fixed it so it just automatically does the right thing with the text under so that is what you want so there we go that's blocks I hope that makes sense let me know if you have any other questions on those but this is really the core the core piece the core building blocks if you will for building out your website is adding these blocks in there so here we go we are on the final part here we're gonna do the final touches and then we're gonna get ready to launch this bad boy so here are the things we're gonna need to do during this section we're gonna add the favicon which is this little image this little small image right up here at the top I'm going to add that we're gonna add a little SEO blip just so that's set for Google and Bing and whatever search engines so they're good to go we're gonna pick a domain name Jack Underwood for Jack and then we're gonna hit launch and we're gonna publish it and get it live so here we go I'm gonna scroll over first thing let's change this little favicon up here to Jack under what I've created the favicon so I'm gonna go back out of settings I'm going to go to design and you see right here browser icon add favicon upload and then go to my file it's in Jack Underwood favicon just Ju it's gonna upload sometimes it takes a little while for it to upload most a lot of times in the back end it will be maybe honestly I've seen it be up to a couple weeks before it changes back there but hopefully this will load up here right there perfect so now we got a nice little Ju up there okay next thing we want to do is add the SEO blip so this check under wood is an actor and model based in Los Angeles in the Los Angeles area so I'm going to go back to design and I'm going to go to marketing so remember earlier in the video I hit edit up here and I went to the settings that I wanted to change the settings up here I hit SEO and it said Oh edit the SEO so only on the home page if you want to edit the SEO description of the home page you this will show up everywhere else you can edit per page the SEO descriptions in the settings of each page but if I click this it'll bring me back to the area I was just in which is the marketing SEO part and I'm just gonna drop this description right down here so I want that to pop up this is the site title it's under its lowercase Jack Underwood because it's copying from the site title up there I want it to be uppercase Jack Underwood so I'm just gonna change that you'll see update right there you'll also see this is just the format if you want to change like the delineation between a page and the site title and I actually do want these all to say Jack Underwood uppercase instead of all lowercase so I'm gonna do that and I'd like the delineation to be this right above the enter button just the vertical line I'll do that and any items I'll just make that change as well Jack Underwood there we go I'd save squarespace also has these good links if you want to look at the google the SEO checklist that that Squarespace has created they've they've got a bunch of good resources there let's see if it loads up here there we go just a bunch of good things you should be able to do make sure your SSL is good ba-ba-ba-ba-ba connect to social media okay so we are all set there now let's pick a domain Squarespace has a great Squarespace domains if you are just want to search domains just type in Squarespace domains click this first none add one that pops up and it brings you to a nice page where you can just search domains it gives you a big search bar and you can just pick in whatever you want Jack has told me what he wants we typed in Jack Underwood and of course the dot-com is taken but what is not taken is the dot me so this is gonna be the one that we're gonna get and luckily it comes free with the purchase of a new website so we're gonna do that so I'm gonna go in here to settings I'm going to hit domain I'm gonna say get a domain you know what we get a free domain I think if we purchase the hosting so I'm gonna go back out and I am going to upgrade so down here your trial ends in 14 days upgrade now to get the most out of your site I can hit upgrade here or I can go to billing an account and billing and just get going there hit upgrade so there's a couple different ways right now I can do here are prices I can do this personal plan 5% annually or I can pay monthly which is a lot more per month but the pay annually this personal plan is the way to go so I'm gonna do that one hit select and now I'm gonna put my credit card information in but I'm gonna hide this from you because you do not need to see this I'm gonna hit save and continue it's gonna bring me to this page I'm gonna put in my promo code here Furman purchase and now we wait and boom so you get a free domain for an entire year so I'm gonna hit this cuz that's definitely what I want I have just purchased this website and the domain that I want get domain it's gonna automatically show that some of the domains are free so you see all these are free so I'm gonna do Jack Underwood dot me that just popped up right there some are more expensive so I think they just give you the $20 domains for free but some of these more expensive ones you don't get them for free so that's why it's there so this Jack Underwood me I'm gonna add proceed to checkout gonna ask me to put in all this information I'm gonna give my real web address there you have to put in this information this is just information stuff they make you do so I'm just gonna quickly run through this and do this hit continue and then ensure and boom it could take ten minutes to process select the source do this hit hit live TV or streaming or YouTube and say wil Myers which show I don't have a show but hit submit and now we are set so now let's go over here this sub domain just works now but now let's go Jack Underwood dot ini' now it's probably gonna say this site isn't ready so it's not ready yet but one thing we can do while we wait go back to settings go to site visibility and change it to public now no one has to put in that password jack anymore and just hit save so once we've done that we're gonna go back let's just refresh this until something pops up well it's not working on Chrome here but I was able to get it working on Safari and me saying I got it working I did absolutely nothing I'm just sitting here waiting for it it does just take a few minutes it's been about five six minutes now hasn't been very long but now it's working on Safari it should be working on Chrome within the next few minutes but there we go now the website is live we have launched it and we are good it is that easy to build a website it's really not that difficult especially Squarespace makes it super super simple to get these up and going so sign up for my newsletter a lot more information in the description if you want to view these on my web site and go more go to will Meyers calm will - Meyers calm a lot more information there I hope this helps let me know if you have any other questions adios

Channel: Will Myers

Views: 70,924

Keywords: Build a Website in Squarespace, Build a Website in Squarespace 7.1, Build a Website for Beginners, Beginner Squarespace Tutorial, Squarepace 7.1, The New Squarespace, Will Myers Squarespace, Squarespace, Build a Website, Build a Personal Website, Build a Portfolio Website, How to use the New Squarespace, squarespace tutorial, tutorial of squarespace, how to build a website in squarespace

Id: Gar3m71NrkM

Length: 61min 18sec (3678 seconds)

Published: Sun Jan 19 2020