Build Your Website in 20 Minutes using Squarespace | RJ Ritchie | Skillshare

Build Your Website in 20 Minutes using Squarespace

RJ Ritchie, E-Learning Instructor | Website Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (26m)
    • 1. 20 Minute Website Intro

      0:36
    • 2. Step 1: Choosing your Website Theme

      0:35
    • 3. Step 2: Signing up for Squarespace

      1:13
    • 4. Step 3: Photos, text, & Layout

      3:17
    • 5. Step 4: Edit Text

      6:26
    • 6. Step 5: Buttons, Social Media, and Layout

      6:21
    • 7. Step 6: Enabling your website for the world to see

      0:44
    • 8. Bonus: Learn about other Squarespace website tools

      6:08
    • 9. A few more Items...

      0:21

About This Class

3bc9912c

In this class I am going to show you how how you can develop your own website within 20 minutes using an online tool called Squarespace.

Skills needed:

NONE!

This is a step by step over the shoulder training that will get you online with your new website by the time we are done.

I also include a bonus video showing you other tools you can use that will enhance your site and give you complete knowledge how your site is being viewed by the world.

Just click "enroll" and we will get started.

Thanks,

RJ Ritchie

Transcripts

1. 20 Minute Website Intro : in this class, you're gonna learn how to build your website in 20 minutes using Squarespace. Hi, My name's RJ Richie and I'm a website designer and an online marketing strategist. I've been building websites since about 2009 for natural accounts and for local small businesses to their goal is to help you create your very first website in about 20 minutes using a great tool called Squarespace. What I'm gonna do is teach you how to do all this without any coding. Best news of all is you're gonna have your site up and running by the end of the class. Are class project today is for you to create your very first website and then upload a screenshot, or perhaps a link of your website to the project window. Let's get started. 2. Step 1: Choosing your Website Theme : in Step one, we're gonna be choosing your very first website theme with Squarespace. We're gonna choose a template, find the theme you like, and then we're gonna get started designing your website. Okay? The first thing you want to do is click the get started button. Then we'll go over to the creative site, choose a template you're gonna scroll down and find the template you'd like to use. I found one we're going to use right here. We could live preview, take a look and see if something we like to use. Once you've figured out if this is the right side for you, then just go ahead and click. Start with this design. It's located in the upper left hand corner. 3. Step 2: Signing up for Squarespace: in step two, we're gonna be signing up for Squarespace. You need to actually create an account once you figured out your theme. So you're gonna entering all of your personal information and then we're gonna go ahead and choose whether it's going to be for business or personal and some of your goals, and they were gonna enter in your website title. Let's go ahead and get started. First, you're gonna go ahead and click to start button. Then we're gonna go ahead and click the site content. So choose a category and I'm gonna go ahead and choose business organization right here and click next. Next. We're gonna look for the site content, so I'm going to choose from myself. Let's see here. I think I'm gonna do professional services because I'm teaching a line. So click that one. But there's lots of categories to choose room and you have another other button down at the bottom of clicks. Next menos cycles and I'm gonna be selling products and services. There's other options here for you to choose from. Click Next. They were going to go ahead and put our site title Now this could be changed at any time, so just put something in there for the moment and if you need to change, it will change it later. But go ahead and click done and that's it. 4. Step 3: Photos, text, & Layout: and step three, We're going to take a look at photos. Texan layout. We're going to go ahead and edit some photos by uploading them to your new website, where I was going to take a look at the sample menu and adjust the text on that. And then I'm gonna briefly go over some layout techniques for you to use for your website. Lets get started. Okay. On the left side. Here we have some of the tools that you can use, and we're gonna go ahead and edit this. So this is a sample website view and you click this. This is the edit view. So you're gonna want to go ahead and click Banner because we're going to and then click create. We're going to trade out this photo here in the very front part. And when I wouldn't delete this photo confirm, and then I'm gonna choose one from my own photos that I took my iPhone to. I don't have to worry about copyright, and here comes the photo, and then on you can see that well, school down, and we're going to the same thing. But this voter here said some doing any learning site. I wanna have pictures that represent, you know, computer, that kind of thing. So that's what we're That's where we're changing this out from Handyman. I don't need to be doing handyman so high. I suggest you take your own photos if you can. Otherwise, you can use Getty, which they have some pictures area you can use to. So grabbing another photo here and that's open that there's a photo click save. And here comes the photo. So let's double check how that looks in the example view. And there's two photos. All right, let's click back to edit view, and I want to change the navigation appear because it's gonna be a one page scroll that works really well for the IPADS smartphones as well as your PC. But I want to be able to use it just up and down one page. So I want to get rid of the other pages that are on here on a later video show you how to pages proof right now in this quick one year is gonna click on these delete, confirm, delete, confirm and on this one is kind of tricky because you have to actually delete the link. So I'm gonna go down here and remove the link, and there we go. So now those air all gone. If you noticed, the only thing that you should probably see is the home. But we're gonna change that now. I want to put a phone number up there. That way. Now I have to create here because what we're doing is we're creating a new page other than the sample base. So I'm gonna change this. 236 So by 551212 And that's nobody's phone number. That's a movie number. Give us a call, and then that will be right there. So now my home page, which is the only page I have has my phone number on the top. 5. Step 4: Edit Text: step number four. We're gonna go ahead and edit some text, so I'm going to show you how to edit on some of the sample text that's on the site now. And we're also gonna edit the Texas on the foot or side, which is on the very bottom of your website. So let's go ahead and get going on that right now. Okay? Now we're gonna go ahead and edits, um, text. So I'm gonna go ahead and click the edit button where that does will open up this section for me to be able to edit, and when I click the text part here, and then you can see I have a cursor Now it's kind of flashing. We're gonna highlight the text here, and I'm gonna go ahead and type in burning online. And I don't really like the size of this. So let's take a look at we can change the heading size right now. Um, I don't want it to be bold, and I do want it centered and let's go ahead and take a look. Beheadings. Try heading to see even that's a little too small, so off to change that later. And the default. I'll show you where that is. In another video. Let's go ahead and leave it at this size right now and push save. You have to push, save on every step along the way, Otherwise it will not save. And we're gonna go ahead if you want to edit the e learning section. I remember so you could change your title at any time. Well, this is where you can change it, so just go ahead and type in whatever you want. Now, this section here, you couldn't up. You can go ahead and upload a new logo If you want in. That logo will then go there or you can put Ah, fab icon and that's goes right up here in the very top of the tab, and that needs to be 16 by 16. So just create something and make sure it's 16 by 16 before you upload it there. That's the best size. And if you want to add any social media logos or anything like that, you can put that into all right so that sections down, Let's go ahead and scroll down. Let's see here. Go back to design and we're going to scroll down now and at it, this box. So click at it and then I want to take the different texts here. I'm gonna go ahead and change this type in e learning and I'll go ahead and take this out. Just copy and Carter delete and then type in the learning. Just a little sentence here. You You can have stuff typed out already onward or a text filer, and then just copy and paste it into these sections. And if you want to do that before it will save you a lot of time in the long run, have different sections of your website all planned out, and then you can just cut and paste makes it a lot faster. So let me just finish this here. He learning the line is fun, way to learn and you can do it at any time you want. And then, um, let's just put a couple sentences just giving idea or for many classes to help you achieve your goals. And we're here. I want to go ahead and I don't want we're not gonna be doing get a quote, so we'll go ahead, delete Theis, and it's gonna typing classes and we'll put in a few classes here. No, keep this in mind. This is using their template and just taking out some of the elements that they have and going ahead and putting in some of the things that pertain to my business. So you put in whatever you want and can design this. However you like to just giving you some examples of what I'm going to use for this particular site and this right down here say design and they will put one more. We're just going to say for more info, and that's gonna be the request button. I'll show you how to edit the buttons in the next video coming up here for right now. Let's just stay focused on a text and this little spacer you can insert these spacers, get rid of them. So I'm just showing you how you can make it a little bit smaller and what it does. It just brings it closer to the Texas on the left, all right, and it's bold. That and then that's it. So make sure you click save when you're done with a section, it'll expand it. And now that sections all done Okay, let's scroll down here and take a look at the testimonials and other parts. So click at it and you can go ahead and copy and paste, perhaps a testimony you have from a client or some service or product that you're selling and then over on this side. And then that puts him What? It was there. I'm gonna go ahead and just change this up a little bit. I'm leading the sum of stuff I really don't need, so you could do the same thing. If you don't need it, just delete it. But just in the way so you can click on it and then deleted completely. So is putting R. J. Ritchie and how easily this right now you need to watch me type in a bunch of stuff, But you can go ahead like I said and have that all prepared cut and copy and paste, and then you're rather and I want this lion so I'll just delete the line, and then this assist one kind of center of these things to make it more balance. I'm going to take these out on the bottom here and just have to testimonies rather than three and later I'll go ahead back, perhaps, and cut and paste some testimonies. All right, there we go now looks a little bit better on the bottom there. And then the very bottom is the footer, and we want to go ahead and edit that. So you want to go see what says footer, middle blocks that won't go ahead and do that at it. And then he's gonna cut and paste and click save. So those are all the different containers and what they are is pages, so you'll see that when you go to your manual section there and let's go ahead and click it open and see looks like. 6. Step 5: Buttons, Social Media, and Layout: and step fire. We're gonna take a look at buttons, social media and some. Or lay out I want to go ahead and edit the request. Buttons that are on the site was gonna take a look at how to include your social media information. And then I'm gonna show you how to adjust the site with some layout tools that are available through squarespace. Okay, we're gonna go ahead and and it's the call of action buttons. So this one here says requests and we're going to say for mayor form or information below, and we'll go ahead and click at it right here and then. What you want to do is type in whatever you want in the form name. So instead of get a quote, world change this to learn more. Here we go, and you can change any of these windows here. If you want to put your name or your email address or something like that, you could do that and then you won't apply. Now it's going to say no storage back and connected right now because I haven't set that up . So you go to storage and type in your email address or a Google drive or a male chip account and apply that. And then when you go ahead and apply in the future, it will work just fine. But you need to have that back and storage. I'm not going to do that right now. The advanced side is once that has been filled out the form, then you'll have submit. But in there, you say start learning now and then No, click that and I will send her that. And you could just have a little response that says thank you. Thank you for your interest. Whatever you like to do and then push apply again. This one does gonna open for with the moment because we don't have it. So that's it for those buttons. Pretty simple. All right. And we've got the one here. And then we also have one down below in the footer section. So you go through the exact same process. All right, let's head over here to pages right now, and we're gonna scroll down and you'll see that there's the link to your instagram and Facebook or right down here and those air located in your footer. So you just copy and paste your instagram address right here. And when you're done, click save, all right. And I'm not gonna put one in, but that's where you put in in the same thing goes for the Facebook, so that down on the bottom, there you have them. There's three different little tabs here if you'll notice on the top and gives you different views so you can see a mobile view and you can see an iPad view and in your PCV, which is really cool. So we would absolutely shrink down the exact size you need to take of. You make sure everything's lined up looking really good. Okay. And let's head over to style editor right now we're gonna scroll down now. Style letter has to do with every single layout aspect of your website. So we're gonna go through the style the size of your font, the colors. All those aspects are gonna be right here. The with Right now, you can see the width of my actual website so I can have a border around it, or you can just have a full width and we're gonna leave. It's full with now. When you do that, you have to actually put a zero back here. I'm I'm having it stick at one. So you put zero pixels and P X and in the we'll scroll down anything you do in here and make sure you push Say they're at the top left corner. Let's change the font. So we're gonna change the font on the learning right there is in the top. Says now said my header branding. So I changed that to Ariel. And if I wanted to change the font color, I could do that if I wanted to. And then there's my navigation and then has changed the font to that on It's already it Aerial. So we're good there. But that's where you do. Just scroll down, find it, click it and my call us. Now give us call will now be Ariel and I have seen See, if I slide this now, I could go in and change the size of the phone on the give us a call and then you're done. Push safe and let's look for the mean content header. Okay, Now, remember I said that could change this later. This is where you do it, So I'm gonna go down here and 65 I want just a little bigger. Let's stick with 72 and save. And sometimes, depending on the speed of your Internet service, some of these will stick a little bit or take a little time. So sometimes I go real fast, depending on that. And not so I don't like to give us a column is gonna take that out completely and save. All right Now, we just have e learning that phone number and then learn online and we can swell down here and let's go back to design style editor. I'm gonna look for what is called the main content fonts, and I wanted could choose a different size. I want change this font down to 14 alike. Let's try that and see how that shocked that a little bit and for save and then the scroll down. And let's do these testimonials because they're really big and I get a scroll all the way down the sewer, says quote block. That's what you want to do. So grab that. I want to make this down maybe 24 and canned. If it doesn't slide directly into the 24 ice type it in and makes it faster. So we have that all set and take a look now. So when I got that text changed, we have that text changed and that is it. That's how you change the size of your fought on and the type of what you want. 7. Step 6: Enabling your website for the world to see: in step six. We're gonna enable your website for the world to see. First, you need to upgrade your account and then you're going to choose a personal or business plan. Also a monthly or yearly billing. Enter some of personal credit information and click Subscribe. Let's get started. OK, we're gonna go ahead and pushed the upgrade, but now down on a loyal right hand corner and they were going to choose us a plan. And I have two plans to choose from a business or personal. I'm gonna go ahead and click Personal Click Select right here. And then I'm gonna pay monthly. I don't want to do an annual and type in my credit card information. Expect to pay 16 bucks today. Click. Subscribe right down here, and that's all there is to it. And you have a website 8. Bonus: Learn about other Squarespace website tools: I have included a bonus section for you to learn some other really cool tools that are available in squarespace. I'm gonna show you how to create some pages. We should hit a change. Your template also talk to you about what's called an announcement bar, and then we'll go over some analytics for your site. Let's take a look. Okay? The first thing we do is go to pages and I'm going to go up here. And since we're gonna create pages, I wanna get rid of the phone number here on the top. So I wanted to say home rather than the phone number. Or so we're gonna click the little tools but in and we're gonna type in home here and save at the bottom. Now that will say home once it gets refreshed, and then we're gonna add some pages. So you're gonna go down the secondary navigation and let's go ahead and add the page here, you know? Well, title this. Contact us. Now you see home and contact us, and we'll go ahead and edit this. So now I have a text box and we go ahead and type in. Please contact us at this phone number. This tab here. 5551212 Famous movie number Or send us a note below and I'll show you what I'm gonna do below. So we'll highlight that it will make a bold Let me see. You don't wanna put heading in here. Now, that's way too big. Let's try three. Three Looks good. All right, we'll leave it at three for save, okay? And then we want to go ahead and add the form below this. So I'm gonna push at it, and then you'll see some little see little bubbles pop up. So we're we don't want to do one above the tax for anyone below the text or we'll click that one. And I'm going to scroll down and look for forms. And there it is right there and click form. And when I put right here under the title type in, send us note and apply. And that's the title of that form and then click Save. And now I have a nice contact page so they can call us, or they can go ahead and type in some information and sent it right to us in the advanced section of that is where you go ahead and type in all of your information, like I showed you before. Okay, so now we have home in contact us. Let's had one mawr element to this under secondary navigation. How about a blawg? So will type in a set of new blogger. I think I just put Blawg or are blawg and click the tools and we'll go ahead and go up here . You know, one ad post will make our very first block post type in dinner out last night. Be the title, maybe a little text line in here again. You can have all of this set up inward. Just copy and paste. It will make things a lot faster. Or, you know, if your spell checking everything, they're in there and it will make a lot faster. Nicer for you. Let's go ahead and add an image. So I have a a majority prepared from Thai restaurant. We went to which was really good and ahead and save and publish. Click that. And here comes the photo dinner out last night. That's gonna be my first block. So when you click on that, you'll see the very first block. Now you've got upon top here you got home are blawg and contact us right there instead of the phone number. You know, you have three pages. You get your home page your block page in your contact of speech. So let's go back to home and I'm going to show you under design. 17. You need to change your template. I say you really don't want this theme. So you would go here to tablets and you would say, install new template you go through. The same process is when you started with this template. Okay, this part right here is called Announcement Bar, and we're gonna go ahead and you see this announcement bar right up here on the top that you can put in, like, you know, save 50% on all classes while they last or something like that on the top. There go back to design, and under that, we'll goto analytics. And this is great because you've got traffic overview, which means you can see all the driver that's coming to the site weekly and monthly. How early if you want. And then you can also see mobile usage. So if someone she's in there, usually an iPad or a knife or smartphone RSS subscribers. That's for people who will be reading your blawg. They'll get that set to them through the email or through an RSS reader and referral. So if someone is sending a link from their site to your site, popular content on your pages. So what people are looking at the most next one is searching enquiries like, Is it coming from being our yahoo or wherever? So you'll know? And then site search is what people are looking for in your sight and then an activity log . So anything that's happening, you'll see that on here says you're really great tool. Very impressive. And there you have it Got our nice pages. We've got our little note on top and you've got your website. 9. A few more Items... : Well, congratulations. You've done it. You've created your very first website. I want to thank you so much for taking the class. Please don't forget to upload your project to the project area. And it would be really awesome if you left me a review. Also, don't forget to look for some of my other classes. If you have any questions, please just give me a PM and I'll get back to you as soon as possible. All right. Have a great day. And thanks again by