Google Sites Tutorial: Build, Customize, and Publish Fast (Full Transcript)

[00:00:00] Speaker 1: Google Sites makes it super easy to create your site either from scratch or starting with templates. So let's walk through how to get started. When creating a site, you can begin with a blank canvas or choose a pre-designed template. To save time, we'll choose a template that we can modify to give ourselves a better starting point. If you'd like to start from scratch though, everything we talk about with the templates will still apply. We can hit Template Gallery to see more template options. We'll choose Restaurant for Tim's Tasty Treats, but we'll obviously need to do some work with it to make it look like a dessert store. But we'll address that in a bit. And now we're in the Site Editor. And there are a few main components that we want to be aware of. To simplify just about any web page, they're always made up of three primary components. The header, which usually contains titles, basic taglines, logos, and your navigation bar, or navbar for short. The navbar is the primary place where people can find and go to different pages on your site, which we'll get to in a moment. The second are sections, which contain the bulk of the content for each of your pages. This is where you place your text, images, videos, forms, and anything else that you would want displayed on a specific page. The third is the footer. And this is where you would typically have contact info, frequently asked questions, copyright information, or a larger group of links that people can use to find more things on your site quicker. In most cases, your header and footer will be consistent with each page unless you have a reason for it not to be. And your sections will be the heart of each page. Now going back up to the header, if we hover over it, on the bottom left of our header we can change its style. And we can either have it be just a title with a colored background, or choose an image banner. Let's go ahead and select banner and choose an image. Once we choose that image, we have two primary options with it. One we can toggle adjust for readability, which will make sure it's contrasted from the text. And the other is anchoring, which will tell the image where it should align from. So if I select top right here, it'll align from the top of the image. I'll go ahead and set this back to center for now. Now with the nav bar, let's check out our pages tab to see how we can customize it. Here we'll see our list of pages and dropdowns. We can reorder pages here by just clicking and dragging, and you'll see it change live on the nav bar when we do. We can select the three dot menu and change different page properties if needed. If we hover our mouse over this plus icon, we can add new pages, custom links, a full page embed, which is basically a full screen of some sort of external content, or a menu section. Now any page can be its own dropdown by just clicking and dragging one page over another. The difference between this and a menu section is the page is clickable, but the menu section is just a dropdown. Now at any point during our editing process, we can undo or redo our changes, preview what the site will actually look like when it's published, which can be key to make sure it looks okay on mobile devices too. Google Sites will automatically optimize your site for mobile, but it's always good to make sure it's laid out correctly. When the website is published, you can copy the link to the site. You can share the draft or published version of the site with specific people and set them either as viewers or editors. And then in the settings window, you can adjust how you want your nav bar to appear and add your logo elements to the nav bar, as well as the browser window tab here. Now to actually add content to your pages, we can use the insert panel. Anytime you want to add elements or customize the layouts to your site, this is where you'll do that. To add elements, you can either add individual pieces and place them wherever you'd like, or you can choose a content block, which offers preset layouts for placing text and pictures side by side. There are many types of elements we can add here, but they're all very easy to use. For example, let's say we wanted to add a button that links to something. We can select button, give it a name, and specify if we're linking to a specific page on our site or anywhere else. And then we can select insert, which places it onto the page, and then we can click and drag it anywhere, and we'll see a grid that helps us keep our button or any content we drag aligned. And then we can resize it if our text or other content doesn't fit inside the box. You also have the divider and spacer to help adjust your layout. This can be useful for better image spacing, or if you need better separation for your sections. You can also add collapsible groups, which are like drop-downs in the middle of the page. Just keep in mind that these can only contain text or image boxes. And then you have several direct integration elements with your Google Storage that you can add to your site directly and easily. Just make sure that any file you do add from here has the proper share permissions, which you can manage inside of Google Drive. To modify any piece of content on your website, you can simply just click on that element. And if it's a couple layers in, sometimes you may need to click into one layer at a time. Now let's take a look at things we can adjust. For text, we can change which style it belongs to, the font, size, and other text properties. And of course, we can change the text itself. Just highlight or delete the text and then type in whatever you'd like. For images, we can both crop and resize them. And if we resize an image but we want to take out any accidental cropping, we can select uncrop. So generally, when we select an element on our page, it'll show the same properties as it does when we add that piece. And on the left side of the page, we have options for our sections as well. We can move their order on the page as well as change their style or background image. And with background images for sections, the same readability and anchor adjustments are also available here. And to delete any element or section, the trash can is your best friend. Now that we understand how to build the functionality of our site, let's talk about how it looks. Over here in the themes tab, we can choose one of the preset themes from Google, which will give us a basic color scheme and font selection. If we want a more customized theme though, especially because Tasty Tim thinks he's special, we can build one in the custom window. Here we can add the name of our site or business, add a logo, which will typically be placed in the top left corner of our header, and a wide banner image that'll be the header background. Then you can either select preset colors or add your own custom color scheme. Again, Tasty Tim, he's a menace. And then lastly, we can choose the fonts for our titles and headings, as well as the text for everything else in the body of the site. And once we hit create theme, that theme will be added to our custom themes. And if we need to do any fine tuning, we can hit this three dot menu and select edit, and then we can fine tune our colors, all the individual text properties, our branding images, how our nav bar appears, how all our primary elements appear, and the overall spacing of our content. And we can preview what these changes will look like with this eye icon here. I definitely just heard Tasty Tim say aye aye, captain. But that aside, that's the foundation for how you build your website. Now, once you've finished the editing process, you've previewed it and confirmed it's ready to go live, go ahead and select the publish button. You can publish your site on a free Google provided domain, which means your URL will start with this before your site name, and Google will host it for free. Or you can connect your own custom domain if you own one, or create one through Google Workspace for a more professional web address and branding. Once you hit publish again, your website will be live for everyone to see. And you can manage your publish settings by hitting this drop down here. And if you ever need to take the website offline, you can hit unpublish here. At any given time, all your changes are automatically saved in Google Drive, so you don't need to worry about losing your changes. If you make changes to your site while it's live, you can review those changes here to compare with the site that's currently live and republish it if you want to push that version live. And that's how you make a website using Google Sites. I hope this tutorial helped you and made it much easier to design and create a website from scratch. Let me know your thoughts in the comments below, and what featured dessert you'd like to see in a Tim's Tasty Treats promo if Kevin ever lets me make one. Thanks for watching.