How Google site (Web 2.0) Works

in Steem Pakistan2 years ago

What is Google Sites?

Turn forms and surveys into business growth
Automate your forms
Google Sites is Google's website builder. When you pit Google Sites vs. WordPress or another advanced website builder, it won't really stack up—it has way fewer features. But it still has what you need to create a blog, portfolio, business site, or company intranet. It's also simple enough for non-business users to create websites for their families, friends, and classrooms.

In fact, you can get pretty polished with Google Sites. Site Builder Report shares some professional-looking Google Sites examples, like the site for Dr. Xu Chu's petrology group:

An example of a site built in Google Sites

Is Google Sites free?

Yes! You can build a Google Site at zero cost. Plus, since it doesn't have pricing tiers, you get all of its features for free.

How to use Google Sites

Go to sites.google.com and choose one of the options at the top to start a new site: use a template, or start from scratch. You can switch to Google Sites' classic editor at the bottom-left of this page, but this tutorial will explain how to use the new editor.

The landing page for Google Sites

Since my cats need to improve their online presence, I'll make a website for them as an example. As you build yours, use the preview option in the top-right menu to see what your website will look like on different devices.

Create a header

Every new Google Sites page starts with a premade header. At the top-left of that header, you'll find a field that says Enter site name. The name you enter here will appear on your website, but you can give your site a private name on the main Google Sites page where you go to edit your sites.

When you hover your mouse over the site name, you'll have the option to add a logo that appears to the left of the name. It comes up small, so use a simple and clear image.

Editing a Google Sites header

Go to the lower-left of the header section to edit your header. Select an image to use as your background, then choose from four header types: cover, large banner, banner, or title only. The first three options present your background image in various sizes, while the last only uses header text.

Adding a photo to a Google Sites header image

The lower-right corner of the section has options to adjust the image for better header readability and lets you choose where to anchor (center) your image. There's no set Google Sites header size. Instead, it takes your image and adjusts it to different resolutions based on where you anchor it. I suggest using the highest resolution you can, then checking how your header looks on different devices using the preview option.

After you decide on your banner size and background image, work on the header text. Click on it to edit its style, size, font, and alignment. Drag the dots at the top of the text box to move the box left or right (but not up or down). Or delete it if you don't want any text.

Want to add an image on top of your header image? Double-click anywhere on the banner, then use the circle menu to add from a URL, your Google Drive, or your computer. You can also use the menu's middle button to add extra text boxes.

The circle menu in Google Sites

Choose a theme
Click the Themes tab at the top of the menu on the right to modify your site's design. Each theme has a few preset color schemes and fonts.

Google Sites themes: preset options

Looking for more control? Click the + icon under the Custom category to make your own theme that Google Sites will save for later. You can modify fonts and colors to your heart's content.

Add text and media

Adding text and media to Google Sites
Time to dig into Google Sites' website building elements. Click the Insert tab in the right bar to add the following elements to your site:

Basic elements: The top section of the Insert menu lets you insert a text box or images, embed HTML code, or add Google Drive files. You can also access these options through the circle menu by double-clicking anywhere on your site-in-progress.

Content blocks: These premade blocks of text and images save you time on adding individual elements and arranging them.

Collapsible group: A collapsible group consists of a header with collapsible text lines underneath. You can change any combo of header and body text into a collapsible group by clicking the Collapsible toggle that appears when you click on their text boxes.

Table of contents: Google Sites' tables of contents automatically generate links that jump to different sections of your website using text from each section. You can remove items but can't add them.

Image carousels: Add two or more images to an image carousel that you can navigate using the dots below it, or have it automatically cycle through the pictures.

Buttons: Create a link button that draws its font and colors from your theme.

Dividers: Google Sites creates simple dividers with a design based on your chosen theme.

Placeholders: A placeholder section holds space for an image, YouTube video, Google Calendar, or Google Map.

Just like the header text, any text box you add through these elements has options to change its format and size. Click the three dots on the right end of the editing bar to edit line spacing, add an indent, or create code-style formatting. The keyboard shortcuts you use in Google Docs to edit text also work in Google Sites.

Coin Marketplace

STEEM 0.28
TRX 0.12
JST 0.033
BTC 69386.82
ETH 3714.50
USDT 1.00
SBD 3.85