How to use Google Sites - Tutorial for Beginners

Aug 24, 2023

How to use Google Sites - Tutorial for Beginners

Are you new to Google Sites? In this video, Scott Friesen shows you everything you need to know to get started building your own website. From creating a site from a template to managing your web pages with ease, you’ll be a Google Sites expert in no time!

00:00 How to start a new website
01:32 Using the Insert tab on Google Sites
03:09 Managing Pages on Google Sites
03:30 Using Themes with Google Sites
05:08 How to Preview and Share your Site
08:01 How to Publish your Google Site
09:21 How to Add and Edit web page content
11:59 Adding and Organizing Pages

---\r
\r
► SUBSCRIBE to the Simpletivity channel: https://www.youtube.com/c/simpletivit…\r
\r
► Get your FREE productivity guide: https://www.simpletivity.com/free\r
\r
► Visit the website: https://www.simpletivity.com \r
\r
Let’s Connect!\r
Facebook:   / simpletivity   \r
LinkedIn:   / scottdfriesen  \r
Twitter:   / scottdfriesen  \r
Instagram:   / scottdfriesen  \r
\r
Scott Friesen is a productivity specialist and founder of Simpletivity training and consulting. He is also a prolific public speaker, workshop leader, and time management coach.\r
\r
Icons made by Freepik from www.flaticon.com\r
#simpletivity #googlesites #website

Content

0.26 -> - [Narrator] Are you ready to build

1.42 -> your first website with Google Sites?

3.91 -> Or perhaps you just need a refresher

6.03 -> of all of the features and options.

8.58 -> Well, in this video, I'm gonna give you

10.19 -> everything you need to know

11.79 -> to get started with Google Sites.

14.09 -> Hello everyone, Scott Friesen here, at Simpletivity,

17.1 -> helping you to get more done and enjoy less stress.

20.8 -> And first off, if you don't know

22.48 -> where to go to access Google Sites,

25.06 -> all you need to do is go to your browser's address bar

28.34 -> and type in sites.google.com

32.08 -> and you'll come to a screen which looks very similar

34.84 -> to what you see here.

36.26 -> At the very top, we can start a new site

38.7 -> by clicking this plus button,

40.76 -> or we can choose one of the templates available here.

44.38 -> But down below is where you're going

46.16 -> to see all of the sites that you have created,

50.03 -> or perhaps websites that others have shared with you.

54.52 -> For example, if they've given you editing rights.

57.75 -> So in this case, I have one existing website,

60.961 -> but we wanna get started with a new website.

64.4 -> I can either hit this plus button

66.17 -> and start with a completely blank page,

69.2 -> but in some cases I wanna get started a little bit faster.

72.87 -> So I'm gonna choose this template.

75.39 -> Either way, you're going to be brought to that website.

78.66 -> You're gonna be brought to a brand new web page.

82.16 -> Now, the great thing about starting with a template

85.07 -> is that you have many of the features,

87.36 -> many of the images and themes and text,

90.969 -> things that are ready to go as you start

93.5 -> to build out your site.

95.54 -> But let's get familiar with the different menu options

99.05 -> and choices available to us.

101.6 -> Here on the right hand side of the screen,

103.8 -> we have a tab format with things

106.3 -> such as insert, pages and themes.

110.09 -> Now the insert tab is where you're probably going

112.89 -> to be spending most of your time, why?

116.27 -> Because this is where we get to add content,

118.92 -> where we get to drag and drop different types

121.59 -> of content onto our various web pages.

125.33 -> So for example, let's say under this learn more button,

129.69 -> I would like to add in this sort of carousel style

133.25 -> of these three images with some text down below.

136.79 -> All I need to do is click on this and drag it

139.93 -> over onto my webpage and you can see

142.62 -> that there's going to be a blue line,

145.02 -> which hovers wherever I drag my cursor.

148.71 -> That's telling me that that's where this will be inserted

151.66 -> when I release my cursor.

154.2 -> So I'm gonna release it right here

156.3 -> and here you can see now I've got a few boxes

159.26 -> where I can start to add images or possibly a video,

163.35 -> and I can edit my text down below.

166.56 -> On the right hand side here,

167.62 -> we've got a variety of different things

169.43 -> in which we can add to our websites,

172.56 -> everything from collapsible text,

174.68 -> all the way to other Google related functions,

177.67 -> such as maps, Google calendar, YouTube, slides, docs,

181.81 -> and a variety of other things,

183.35 -> which you will find in Google drive.

186.01 -> So this insert tab is obviously a very important part

189.55 -> of the Google Sites menu.

191.8 -> Next up, we have our pages tab,

194.37 -> which is gonna show all of the pages

196.81 -> that are included on our website.

199.2 -> We started here in the home screen,

201.56 -> but if I want to go to my projects pages,

204.3 -> all I need to do, is click that here.

206.7 -> Now you can see I've got a different page

209.31 -> that I can edit and start to manipulate.

212.4 -> And if I want to click the three dots

214.69 -> to the right of any of these pages,

216.8 -> I can change their functions

218.66 -> such as making this the homepage,

221.38 -> I can duplicate this page

223.34 -> and I can also change it's properties

225.06 -> such as changing the title or the name of that page as well.

230.2 -> Lastly, we have our themes and here you can see,

233.3 -> we can change the theme that we're looking at right now.

236.96 -> Currently we're using this impression theme,

239.92 -> but what if I prefer this a diplomat theme?

242.79 -> I'm gonna click on it and I'm immediately going

244.93 -> to get a preview of that theme.

247 -> As you can see, not only does it change the title

249.7 -> or the header of my websites,

252.52 -> but it's also going to change the font and the text

256.39 -> and sometimes the layout of other things as well.

259.87 -> If I don't like that color, which it chooses,

262.19 -> I can choose another color if I wish

265.02 -> or I can actually insert my own hex code

268.06 -> if I have something that is particular,

270.01 -> let's say to my branding.

272.25 -> It'll also give you some choices

273.69 -> as to what type of text or what type of font

276.36 -> that you would like for this particular theme.

278.71 -> You can change these themes at any time

281.9 -> when you are editing your website.

283.9 -> However, when first starting off,

285.55 -> you might want to actually start

287.56 -> by looking at the themes

289.13 -> before you get too heavily involved

291.32 -> with editing the other components of your website.

295.07 -> We're gonna come back to this insert area

296.86 -> in just a moment so that we get comfortable

299.08 -> with moving things around, within our respective webpages.

303.02 -> But before we do so, let's jump up here

305.46 -> and see some of the other options

307.27 -> we have available to us.

309.34 -> We do have the ability to undo and redo.

312.89 -> Another important area here is the preview button.

316.09 -> Why don't I go back to our homepage

318.07 -> just since there's a lot more to look at here.

320.22 -> I'm gonna click on the home screen

321.96 -> and I'm gonna select this preview icon.

325.58 -> What it's going to do, is it's going to basically show us

328.8 -> what this website will look and feel like

331.21 -> to people who are actually visiting our website.

335.03 -> So here you can see I've got the menu

337.46 -> on the left hand side of the screen.

339.63 -> I can see how things are going to look and feel,

342.09 -> and I can even test out and click on the buttons

344.83 -> or any active links that I have.

347.46 -> Now in the lower right-hand corner,

349 -> we also have the option to preview our website.

352.36 -> Not only just on a large screen,

354.52 -> such as a desktop or perhaps a laptop computer,

358.27 -> but also on a phone.

360.36 -> And this can be very important

361.79 -> because your images in particular

364.25 -> will be laid out and displayed

366.35 -> in perhaps a different format than what you're used

369.11 -> to when viewing it on your desktop.

371.61 -> You can also preview this in tablet mode,

373.77 -> which can be helpful because a tablet

375.93 -> is not quite the same as a phone

378.6 -> and presented in more of a square format.

381.71 -> So you can toggle between these three

383.61 -> to make sure that your website looks and feels

386.1 -> the way that you want to.

387.73 -> Lastly, we just need to hit this X to exit the preview,

391.2 -> and we are returned back to our editing window.

395.14 -> Next up, we have the ability to share a link

398.12 -> or copy the link to our website.

399.93 -> However, in this case we can't

401.52 -> because we have yet to publish it.

403.61 -> More on that in just a moment.

405.81 -> Here we have the option to share this website with others.

409.57 -> Meaning if we want to add collaborators

412.28 -> or people who would like to give permission

414.9 -> so they can edit this website,

416.45 -> we can do so here.

417.95 -> And if you've shared documents on Google drive,

420.25 -> you'll be very familiar with this window.

422.71 -> It acts and behaves just like

424.36 -> you have experienced within drive.

427.33 -> Next up, we have our settings icon,

429.73 -> which is gonna give us some important things to consider.

432.79 -> Number one, we can adjust our navigation.

435.8 -> So for example, in this case, I have,

437.91 -> what's called a side navigation

440.02 -> where I have this collapsible menu on the left-hand side.

443.58 -> But I can change this to top navigation,

446.37 -> which might actually be easier for my users

449.04 -> where they can actually see the names

450.83 -> of all my pages here in the top right-hand corner.

454.42 -> So you can toggle that based on your preferences.

457.58 -> You can also adjust the color of that title area.

461.32 -> If you want to upload some brand images,

463.84 -> such as your own logo, you can do so and/or a favicon.

468.48 -> A favicon is the tiny icon which appears

471.41 -> within the address bar.

473.42 -> Lastly, we have these three dots

475.18 -> where we have a few further options

476.83 -> to take a look at including, a version history

480 -> of all of the changes which have been made on your website

482.88 -> and you can quickly and easily duplicate that site.

486.44 -> Now the most prominent button on the top part

488.78 -> of the menu is our publish button.

491.17 -> Remember, none of the changes that we make here

494.05 -> on any of our web pages will take effect

497.55 -> until we actually hit the publish button.

500.59 -> So you can confidently experiment with things.

503.38 -> You can use the preview option here,

506.27 -> and when you're happy with how everything looks and feels,

509.5 -> we can select the publish button here.

512.28 -> Because I haven't published this particular website yet,

515.75 -> I'll need to give it a web address.

518.16 -> So in this case, let's call this an awesome website

521.87 -> for cool people, something like that.

526.12 -> So this is going to be the name of this particular website.

529.8 -> As you can see, because I haven't registered

532.21 -> a custom domain, I'm going to have this

534.9 -> sites.google.com/view, in front of that website name.

540.87 -> This is going to be fine

542.14 -> when you're first starting out

543.5 -> and first putting your website together.

545.52 -> But later on, you will most likely want

547.49 -> to add a custom domain.

549.62 -> I can hit publish and this case, now this website is live

553.85 -> and if I want to share this link,

555.9 -> I can copy this link and share it

557.72 -> with whoever I would like to.

560.44 -> Let's return back to our insert area here,

563.19 -> because really when it comes to creating a website,

566.17 -> it's all about the content on the pages themselves.

570.1 -> Below the header area here,

572.11 -> you can see that things are divvied up

574.44 -> between different sections and they're identified

577.41 -> by these little dotted lines,

579.58 -> these little gray, horizontal dotted lines.

583 -> Now these are not gonna be visible to viewers,

585.43 -> this is just for your needs

587.01 -> so you can see the spacing and the distinction

589.91 -> between these different areas.

592.34 -> Now, if you'd like to move any of these sections,

595.19 -> so for example, if I want this learn more button

598.21 -> to come first, all I need to do

600.04 -> is come to the left-hand side, click and drag

603.09 -> and now I can move this to a different section

605.95 -> of that website and you can do

608.09 -> that with any of the sections here.

611.14 -> Google Sites also makes it very easy

612.92 -> for us to move and add things around.

615.56 -> So let's say I would like to add a second image

618.74 -> to this section here.

620.46 -> Over on the right-hand side,

621.72 -> all I need to do is select images

624.3 -> and I'm gonna say select in this case.

626.97 -> It's going to immediately go to my Google drive,

629.62 -> where I may have an image that I would like to upload here,

632.64 -> or I can do so by URL or a Google image search.

636.37 -> Of course I can upload my own images as well.

639.56 -> In this case, I'm gonna grab this image here.

642.04 -> I'm going to double click on it

643.62 -> and it's going to bring it in

644.9 -> at the bottom of this web page.

647.86 -> All I need to do is click and drag it

649.75 -> if I want to bring it into this section of the webpage here.

654.47 -> Now, if you need to resize any component,

657.35 -> all you need to do is select that component

659.56 -> so you can see these blue dots, which will surround it.

663.35 -> Now I can click and drag and make this image larger.

666.4 -> And although it looks as though it's going

668.5 -> to overlap the image on the left,

671.12 -> when I release it, what's going to happen

673.17 -> is it's going to automatically resize the image beside it.

677.01 -> Each content type will also have further options

680.12 -> when you click on them themselves.

682.04 -> So here, for example, when I click on this image,

684.83 -> I have the choice if I want to crop this image,

687.7 -> if I want to uncrop it,

689.62 -> if I want to add a link so that when someone clicks

693.05 -> this image, it goes somewhere else.

695.03 -> Or I can remove this image as well.

697.87 -> The same goes for anything that is text-based.

700.53 -> So here you can see on the left-hand side,

702.7 -> I've got a description area for this photo.

705.32 -> If I click on it, I can change the text type.

708.04 -> I can change the font and size

710.06 -> and do other formatting as you see here.

713 -> So make sure that you click on a image,

715.47 -> click on any type of content

717.33 -> to see the other options that are available to you.

720.53 -> Of course, as you continue to build out your website,

723.53 -> you're going to want to add new pages

725.86 -> and perhaps not all of them need to be listed here

728.32 -> within the menu.

729.62 -> So let's get comfortable with adding pages,

731.96 -> subpages and changing our navigation options.

735.85 -> Here you can see at the very bottom,

737.73 -> we have a plus symbol, so we can add a new page.

741.5 -> Now by hovering over it,

743.01 -> we have the choice to either add a new page or a new link.

747.32 -> Remember, sometimes you may want

749.48 -> an option here within the menu,

751.7 -> but you're going to link them

753.24 -> to an external page or maybe a another website altogether.

758.07 -> That's where you would use the new link option.

761.04 -> But in most cases, you're gonna want to select a new page.

764.15 -> I'm gonna click this button and give this one a name,

767.11 -> and I'm just gonna call it new page, for this example.

770.03 -> I'm going to hit done and now you can see,

772.12 -> I have this new page within my pages view,

775.12 -> but it also appears here within the menu option.

778.94 -> Now, if I come over and select the three dots,

782.12 -> I can choose to hide it from my navigation.

785.89 -> Meaning if I select this option,

788.04 -> now new page is hidden from the menu.

791.45 -> You can also see that there's a little line through it,

794.09 -> letting me know that it is no longer in the navigation.

797.73 -> But if I want to change that back,

799.46 -> I can go here and say, show in navigation.

802.92 -> Now, one of the options available to us here

805.09 -> is to make something a subpage or to add a subpage.

809.37 -> But in this case, let's say,

810.67 -> I want to make this new page, a subpage

814.05 -> of my contact page.

816.29 -> All I need to do is select it

818.24 -> and drag it and hover it over top

821.06 -> of any of the other pages

822.79 -> that I would like to have it nested under.

825.64 -> So in this case, I'm going to release it

827.86 -> and now you can see that it is indented underneath

831.18 -> the contact page.

833.24 -> Now, what has changed is that if I hover over a contact,

836.94 -> you can see that I can go directly to that new page,

840.35 -> but maybe I think this style of menu option

843.76 -> is a little messy,

845.33 -> and I don't want them to see this new page option here.

848.35 -> Well, just as we did before,

849.647 -> we can come here and say, hide from navigation.

852.97 -> Now you can see that I no longer have the new page option

856.84 -> when I hover over a contact.

859.03 -> So depending on your needs,

861.08 -> depending on how you want your visitors

863.26 -> to access your menu,

864.81 -> you can choose this option below.

867.06 -> If I want to, I can also click and drag this

869.61 -> and put it in a different section of my website.

872.87 -> So in this case, if I hover over the entire page,

876.69 -> it's going to be nested or create a subpage there.

880.41 -> However, if I want it as its separate page,

882.63 -> I just need to find a line,

884.76 -> in between one of my other sites.

887.42 -> I'm gonna go ahead and say, show this in navigation.

889.88 -> So it's back in that third position

891.86 -> and that's how we can easily and quickly manage

895.03 -> all of our pages right here within Google Sites.

898.7 -> Now, if you have any further questions

900.84 -> about how to use Google Sites,

902.7 -> be sure to let me know in the comments down below.

905.9 -> Thank you so much for watching today's video

908 -> and remember, being productive

910.2 -> does not need to be difficult.

911.85 -> In fact, it's very simple.

Source: https://www.youtube.com/watch?v=0woNTtlcxgM