Create A Beautiful Website In Minutes
I've seen so many business owners get bad advice on building a website who end up getting stuck and frustrated.
If you are brand new to business and brand new to web design, please use one of the simpler to use platforms such as Squarespace. I've worked with all different platforms, and if you're curious which platform is right for you, you can message me. But, for my start-ups and new business owners, I always recommend Squarespace.
Squarespace has improved tremendously over the last 2 years and it’s easier than ever to create a beautiful and functioning website in a very short amount of time.
Here is my quick tutorial of how to create a website from start to going live. You can build all the pages, colors, and fonts in literally less than five minutes. And you can finish your entire website in as little as an hour with Squarespace.
Setup Your Squarespace Pages
So we're going to go to Squarespace.com and we're going to hit the button that says get started. Now from here you are able to choose from their pre selected templates.
You can choose by industry or by type, but today we are going to build our own from scratch using the build your own template. From here, we're going to say, let's go.
What is your site called? You're going to put your business name here.
Hit next. From here, we're going to hit an intro section. We definitely want an intro section. You can choose from different layouts for your header.
You can choose whichever one you like. If you have products, you can add products. We're going to add services section. From here, you can choose different styles for your services.
Then we're going to choose the About section, you’ll see several different layout to choose from. Then we also have a social section. We're going to keep this one simple. And then we're definitely going to need a footer section. We can do a pretty standard one, two column, three column. Or we could add a large photo at the bottom, which I think looks pretty fancy. Then we're going to click “next.”
You’ll see next the other pages you want to add. Add other pages like the about page, the contact page, and services page.
Then we're going to click next.
Choose Your Colors and Fonts
Now we're going to choose a color palette. Squarespace has made it super simple by giving you color presets to choose from. You can always changes these later to more custom colors.
If you need help with choosing fonts and colors,
download my free High-converting Website planner.
Next you can choose your fonts. Squarespace has create pre-made font pairings for you to make things super easy. They are grouped by sans serif, serif, and then a mixture of both. Again, this is just based on what kind of feel or mood you want to portray with your brand. See my post here about how to choose fonts for your website.
We're going to choose Fino for this one just because it looks a little more high end for a wedding photography website. And then we're going to hit finish. And now our template is ready! Yay! Literally done in minutes!
Squarespace does have an AI section where if you would like to have it write text for you, you can hit continue and write a little paragraph about your business, and it will generate some text that's more custom to you.
We're going to skip that for now.
Editing Your Squarespace Website
You’ll notice a sidebar with menu items. This is like your table of contents. You're mostly going to be working in the website section because this is where your pages are. Click on “website.”
You'll see the main navigation has your main pages up in the top corner.
Your home page is under the not linked area because the logo is your link to home. So it doesn't need to be, it doesn't need to be added into the main navigation. If I move it up to the main navigation, it would show up as a menu item in the top navigation. But, we don’t want to do this, since this is redundant. Your logo is the home button. So we keep that in the not linked area.
So how you edit your website is pretty simple. You hit the edit button to edit directly on the page. Each section is highlighted by these blue lines that show different sections. You can add more sections in between and in between you have also pre designed areas. So if you wanted to add more about maybe your staff or your products.
or another services or maybe your portfolio, you definitely want to add a testimonials. Let's do that right now because I want to make sure we get some testimonials in here. Let's add some testimonials in here. Now, oops, I didn't want it right under the header. So what we're going to do is we're going to move it down.
So when you hover over a section, you'll see this navigation over on the right side, you'll see these arrows of moving up or moving down. And I can move this below our brand. I want it almost to the bottom. Yep, so our social media is at the bottom. I've got our testimonials on the second to the bottom.
You can also heart certain sections so that if you want to add this same section to another page, you can click heart so that when you add another section, go to your saved sections, and you can now add this section to any other part of your website on any page, which is super helpful and speeds up your process greatly.
You can also duplicate a section if you'd like to keep that layout. And maybe move it down.
Okay. So now is how do we change photos and how do we change text? So changing text is pretty simple. We just highlight the text. You can start typing just like any word editing software. You can highlight certain areas and change the color. You can make certain words italicized. You can even underline certain areas as well.
We can change the colors of these outlines. All of that, although I do not like any of that. So we're going to hit undo because I do not like any of that. Undo is command Z, um, at least on the Mac. So, how you want, if you want, We also have a button down here. If you click on the button. You can hit the edit button.
You can change the text of what you want it to say and the link. How you change the link is you're going to click on this little gear icon. You can make it point to a page. So if you hit, it'll show you your pages or if you don't see it, you can start typing which page you want to show up, your contact page.
And it will link to those pages. You can choose whether you want it to open in a new window or not. Or if it's going to an outside web address, you would paste the web address here. Or it can go to a file, an email, or even a phone number. Then just click off when you're done. And make sure and hit save so that it makes it live.
We're going to change the top header here so that you can see where your logo is. If you have a logo, you would upload it here. You can also change your site title there. If you have a mobile logo, you would add that here. Some of the elements to put up at the top is if you would like to add a button, which I do suggest because that is going to be on every page and allows an easy place for people to um, basically.
no, exactly what action to take? What we would say is get started, but we would link it maybe to your contact page. So that it goes to the correct page you can also add social links but I do not recommend adding social links to the top header because we really want them to hit that get started button and Not go away from your website to social media There's also some different styles if you'd like to play around with different types of headers There's gradients.
There's solid color There's a dynamic And if you'd like to add a border to, let's say, just the bottom of it, you can add a border to the bottom as well. And then just click off and click save when you're done. Now, how do we add or change photos to our website? So these are already placed, which is fantastic.
How to change these is you would click on it, click that pencil icon, and from here you can replace it, you can delete it. We're going to delete and we're going to say add image, you can either upload a new one, select from your library that's already been uploaded to Squarespace, or browse stock images, which is what we're going to do.
We're going to browse some stock images. So as you can see, you could alternate between your library, free images or premium images, which gives you some more options. Free images are pulling from Unsplash, so if you'd like to go to unsplash. com and kind of search for those ahead of time, you can, or you can search directly in here.
We're gonna use some search terms, and we're gonna say... We're going to look for a vertical image here just so it fits really nicely in that spot. We're going to hit add image.
Yep, it fits. And we want to make sure that it's set to fill so it fills that frame. And then if you wanted to link on image, you can add a URL here or use the, use the gear icon to link it to another page on your website. The image alt text is going to be for,
yeah. So same idea with all the other ones. We're going to delete and we're going to browse stock photos. And we're going to look for certain imagery. We're looking for vertical imagery. Let's try this one.
Click off of it. Then our third one, same idea. We're going to browse
and we're going to choose this one.
When choosing photos, keep in mind the color palette of the photos. The more cohesive they are together, the better. That's going to make your website look branded and also really easy on the eyes. You can change the focal point of your... You can change the focal point of your image by moving this circle over the area that you want to be in the center of the photo.
So we like that one. When we're done, we're going to hit save. Then how you edit is just start typing your service here and you can type in your pricing there. If you'd like to add buttons, you can also add buttons as well.
Let's say we want to add items to a certain section, this section doesn't have much on it, so we are going to add from this add block, we can add image, text, buttons, galleries, videos, forms, audios, newsletters, shapes, accordions, all kinds of things, um, there's quite a long list, the most popular ones are up at the top, so that would be text, And if you hit command G, you'll notice that there, well, you can't see it because there's a photo on here, but there is a grid on there.
If I delete this photo, you'll see the grid and you can move your items anywhere on that grid. Uh, I'm going to hit undo so that I can bring that back, which is command Z. From here, you can type whatever you want and you can change the size by hitting. Headings or paragraphs. Now, heading one is only reserved for your very top heading section.
That is an SEO thing and a Google thing. So you can use heading two, heading three, heading four, or the paragraphs for every other section, but only use the heading one once per page. So we're going to say we want to use maybe heading three. We want it a little bit larger here and we can add a paragraph underneath it.
That we can grab and pull and say, and we want that in this section. So you can adjust the boxes, you can make them longer, you can move them around, you can overlap things. Let's say if we want a block, a shape, we want a shape to go behind that text. We're going to move that and then we're going to say move backward two times and then we can move our type so that it fits into this nice shape box.
So there's a lot of fun things you can do with Squarespace. I really just want to do an overview so that you guys have an idea of how to edit this and really get this. Um, this is going to be your about section, so make sure and put your photo in your about section and then a little bit about you. This is going to be your testimonial section.
This is a little bit different from the other section in that it has predetermined content sections. So in addition to edit section, it adds edit your content. So this section you can't edit directly on it. You would hit. it, edit content, and then under the content bar, you'll see all of your testimonials here.
So the first one, you would add a photo. If you want to add a photo, you don't have to, the title, and then the description maybe would be their names as well. And you can move these around. And you can also choose if you would like to have a title, you can change that title, let's say testimonials,
you can also change if there's a button over here or not. And if you don't want to show an image, you can just have it be the testimonials. You can also change how they are displayed, and if you only want two per section, three per section, or more, you can show the adjacent slides, and then there's some more adjustments.
But we really like this, um, with the image, so we're going to keep it that. If you'd like to change the color, How to change the color is under the edit section, and you'll see colors. So we can change the colors here. Let's choose that green color. The final section, well not final section, the next section is follow on social media.
There are two ways you can do this. You can connect your Instagram to Squarespace if you'd like it to automatically pull your photos, but I like to curate this section so I know exactly what photos are showing up on this section. And so these are all just individual photos that link to Instagram.
So again, this one has a edit content section. Where if you go to the content, all the photos are added individually. So same idea of changing, you can replace, upload, or select from library, and then you can move them around. And then the button, you would choose which Instagram you want it to link to, so that link will be there.
And then your last section is the footer, and also make sure to add your name, add your information. We're going to repeat the navigation down here as well. This is just helpful for people so they don't have to scroll all the way back up to the top.
So we're going to type about services, contact. We're going to make these the paragraph one, and then we're going to, how we add links is highlight the word. Just as in a word editor program, we're going to hit this link button and then we're going to link it to a page. So we're going to hit the backslash and we're going to say about, and then hit apply.
And then you'll see that line show up, then we'll hit services. We're going to type in services. Hit apply, and then the contact, we're going to hit that backslash, contact, and then hit apply. So now you have links to all of your navigation, add your information down here. If you'd like to add your privacy policy and your copyright as well, you can add that at the bottom and then make sure and hit save.
When you're done editing, hit the exit button. And when you're ready to go to your other pages, just click on the left side to the other pages. Here's where you can edit those. Remember to hit the edit button.
Your contact page, the thing you're going to want to change here is make sure to add your email address to the form. So this right now will go to a, um, this This form defaults to the email address that you sign up with. If you'd like to go to a different email address, you're going to click that pencil icon and then hit storage and you can change the email address that you want it to go to.
Okay, the very last thing we need to do before we go live is get our domain name and go live and hit publish. So we're going to go back to the main navigation and we're going to scroll all the way until we see settings. The very first section is domain, so we're going to say either get a domain through Squarespace or transfer or connect a domain through an outside or third party company, you can do either one, you can choose get a domain through Squarespace and it will walk you through it, it's about 20 per year to buy through Squarespace, but you can always transfer it no matter what.
So once you get your domain name, your next way is to go live. So we're going to hit this site availability, which shows that it's private right now. So nobody can see your website except for you. When you're ready to go public, you're going to have to upgrade to a hosting plan. So see right now it is grayed out.
So we're going to hit upgrade to publish. And you're going to choose the best hosting plan for you. I definitely recommend the business plan if you are a business because it offers some things like your Google Analytics connection, it allows e commerce if you're going to sell some products, um, customer accounts, gift cards, those kinds of things.
Obviously there's more the higher you go, but if you don't plan on doing any of that just yet, the personal is totally fine. Um, obviously you're going to save more money by paying annually. But if you pay monthly, it is a little bit more. So choose which option is best for you. Once you have chosen your plan and made your payment, you can now, you can now go live.
So you would either hit publish, this would turn into a publish button at the bottom, or you could go back to settings, go back to site availability, and that public button should be black so that you can hit public and your website will be live and you will be ready to go. So that was a very quick overview of how to create a website in less than an hour.
We did this in just about 20 minutes. So let me know if you have any questions. Um, I know there's lots of tutorials on Squarespace. Squarespace has lots of tutorials, but this is just a real quick way to get you started so you can get live fast without the overwhelm. Enjoy.