Ultimate Google Sites Tutorial 2024 | Create A ‘Full Feature’ Google Sites Website

Summary

Este tutorial completo de Google Sites para principiantes guía paso a paso en cómo crear un sitio web atractivo y funcional utilizando Google Sites, una herramienta de construcción de sitios web sin código y gratuita. Aprende a personalizar páginas, agregar secciones, incluir formularios de contacto y configurar un catálogo de productos para comercio electrónico. Descubre cómo aprovechar plantillas, herramientas gratuitas y recursos para diseñar un sitio web que capture leads y venda productos tanto físicos como digitales, todo con un enfoque en la experiencia del usuario y la optimización para motores de búsqueda.

Takeaways

• 🌐 Google Sites es un creador de sitios web de código libre que ofrece funcionalidades completas para crear sitios web estándar o tiendas en línea de comercio electrónico.
• 🔑 Es completamente gratuito para todos los usuarios de Google, lo que permite a cualquier persona crear un sitio web atractivo y funcional para su negocio pequeño.
• 🏗️ El proceso de construcción de un sitio web comienza visitando sites.google.com y autenticándose con la cuenta de Google deseada para construir el sitio.
• 📐 Se pueden elegir plantillas prehechas o crear un sitio web desde cero, personalizando los elementos como el menú principal, la navegación y la apariencia del sitio.
• 🖼️ Se pueden subir imágenes para el logotipo, favicon y otros elementos visuales, lo que ayuda a dar una identidad única al sitio web y mejorar la optimización para motores de búsqueda (SEO).
• 🎨 Se pueden elegir temas y estilos para el sitio web, personalizando el aspecto general y la tipografía para que se adapte al estilo de marca de la empresa.
• 📝 Se pueden agregar páginas principales y subpáginas, organizándolas en un menú de navegación para una experiencia de usuario óptima.
• 🔗 Se pueden insertar bloques de contenido, como texto, imágenes, botones y secciones de productos, para construir las páginas del sitio web de manera interactiva y atractiva.
• 📊 Se puede conectar Google Analytics para entender el rendimiento del sitio web y ajustar la estrategia de marketing en consecuencia.
• 🏦 Para los negocios de comercio electrónico, se pueden agregar productos a la tienda en línea utilizando herramientas como Stripe para procesar pagos y Equid para incrustar productos directamente en las páginas del sitio.
• 🌐 Una vez que el sitio web esté completo, se puede publicar y compartir con el público, promocionándolo a través de diferentes canales de marketing para atraer a nuevos clientes.

Q & A

¿Qué es Google Sites y cómo es útil para los usuarios de Google?

Google Sites es una herramienta de creación de sitios web sin código, poderosa y gratuita para todos los usuarios de Google. Permite a cualquier persona crear fácilmente un sitio web estándar o una tienda en línea completa para vender productos en línea.

¿Qué tipo de tutorial se ofrece en el script proporcionado?

El tutorial ofrece una guía completa de Google Sites para principiantes, enseñando paso a paso cómo crear un sitio web atractivo y funcional utilizando herramientas gratuitas en combinación con Google Sites.

¿Cómo se puede acceder a Google Sites y qué se hace al principio?

Para acceder a Google Sites, se escribe sites.google.com en el navegador. Al principio, se inicia sesión con la cuenta de Google deseada y se selecciona la opción de crear un sitio web desde cero o elegir una plantilla prefabricada.

¿Qué son las plantillas de Google Sites y cómo se pueden personalizar?

Las plantillas de Google Sites son diseños de sitio web prefabricados entre los que los usuarios pueden elegir. Se pueden personalizar según las preferencias y necesidades, cambiando elementos visuales y de contenido para adaptarse a la marca o al propósito del sitio.

¿Qué es un sitio web 'responsive' y por qué es importante?

Un sitio web 'responsive' es uno que se adapta y se muestra correctamente en diferentes dispositivos, como computadoras, tabletas y móviles. Es importante para brindar una buena experiencia de usuario y mejorar la accesibilidad del sitio.

¿Cómo se pueden agregar páginas y subpáginas a un sitio creado con Google Sites?

Se pueden agregar páginas y subpáginas seleccionando la opción 'nueva página' y luego nombrándola. Las subpáginas se añaden como elementos secundarios bajo las páginas principales, y se pueden organizar en el menú principal del sitio.

¿Qué son los 'spacers' en Google Sites y cómo se utilizan?

Los 'spacers' son elementos de diseño en Google Sites que se utilizan para ajustar el espacio entre secciones y elementos de la página. Permiten personalizar la distribución y la apariencia del contenido en el sitio web.

¿Cómo se pueden agregar secciones a la página principal de un sitio de Google Sites?

Se pueden agregar secciones a la página principal seleccionando elementos de 'content blocks' y personalizando cada una con imágenes, texto, botones y otros elementos de diseño. Cada sección puede tener un estilo y una función específica dentro de la página.

¿Qué es un 'header' en un sitio web y cómo se personaliza en Google Sites?

Un 'header' es la parte superior de una página web que a menudo contiene el nombre del sitio, un logotipo y a veces un menú de navegación. En Google Sites, se personaliza agregando texto, imágenes y ajustando el estilo y la alineación según las necesidades del sitio.

¿Cómo se pueden agregar y personalizar los elementos de navegación en Google Sites?

Los elementos de navegación se pueden agregar y personalizar en la sección de configuración de Google Sites. Se pueden elegir la ubicación del menú (arriba o lateral), el estilo, los colores y agregar elementos adicionales como enlaces directos o incrustaciones de páginas completas.

¿Cómo se pueden integrar herramientas de análisis y colaboración en un sitio de Google Sites?

Se pueden integrar herramientas de análisis, como Google Analytics, y habilidades de colaboración a través de la sección de configuración. Esto permite a los propietarios del sitio entender el rendimiento del sitio y trabajar en equipo en su desarrollo y mejoras.

Outlines

00:00

😀 Introducción a Google Sites

El tutorial comienza con una introducción a Google Sites, una herramienta gratuita y sin código para crear sitios web. Se menciona que es ideal tanto para sitios estándar como para tiendas en línea de comercio electrónico. El presentador se ofrece a mostrar cómo crear un sitio web adaptable y funcional usando Google Sites junto con otras herramientas gratuitas, con el fin de atraer clientes, citas, y ventas de productos físicos y digitales. Antes de comenzar, se anima a los espectadores a suscribirse al canal para recibir futuras tutoriales y se inicia la guía paso a paso para crear un sitio web para pequeñas empresas.

05:00

🛠️ Configuración Inicial y Plantillas

Se describe cómo empezar a crear un sitio web en Google Sites, incluyendo la elección de una plantilla o comenzar desde cero. Se detalla cómo acceder a la galería de plantillas y personalizarlas. Se enfatiza la importancia de iniciar sesión con la cuenta de Google adecuada y configurar opciones como la navegación, colores, logotipo, favicon e incluso la posibilidad de conectar un dominio personalizado. También se menciona la integración de Google Analytics y la adición de un banner de anuncio si es necesario.

10:03

🎨 Personalización de la Interfaz y Temas

El guía continúa explicando cómo elegir y personalizar los temas de Google Sites para que se adapten a la identidad de la marca. Se incluye la selección de colores, fuentes y estilos de letra. Luego, se muestra cómo agregar páginas principales y secundarias, y cómo organizarlas en el menú de navegación. Se discute la adición de bloques de contenido y la creación de un diseño atractivo y profesional para el sitio web.

15:05

🏠 Creación de la Página de Inicio

Se centra en la creación y personalización de la página de inicio, incluyendo el uso de imágenes de encabezado, subtítulos, botones y secciones de contenido. Se detalla cómo utilizar el espacio con elementos de separación y cómo previsualizar el sitio para asegurar su responsividad en diferentes dispositivos. Se sugiere la adición de secciones que destaquen los beneficios y características de los productos o servicios ofrecidos.

20:06

📚 Sección de Preguntas Frecuentes y Footer

El tutorial cubre cómo agregar una sección de preguntas frecuentes utilizando el bloque 'colapsible group' para mejorar la interacción con los visitantes. Luego, se procede a crear el pie de página, que incluye información de contacto, enlaces a redes sociales y una imagen de fondo para mejorar la estética del sitio. Se enfatiza la importancia de hacer que el correo electrónico y el número de teléfono sean clicables para una mayor usabilidad.

25:08

📝 Adición de Formularios y Mapas en la Página de Contacto

Se muestra cómo integrar un formulario de contacto en la página correspondiente, utilizando Google Forms, y cómo personalizar el formulario para adaptarlo al tema y necesidades del sitio. También se menciona la posibilidad de agregar un mapa y otra información relevante para los visitantes que quieran localizar la empresa físicamente.

30:08

🛒 Creación de una Tienda en Línea

El presentador explica cómo agregar productos a una tienda en línea utilizando Google Sites, incluyendo la creación de un carrusel de imágenes de productos y la adición de información detallada sobre cada producto. Se habla sobre la integración con Stripe, una plataforma de pagos, para permitir a los clientes realizar compras directamente desde el sitio. También se menciona la herramienta Equid para incrustar productos y gestionar el flujo de compra.

35:11

🚀 Publicación y Compartir el Sitio Web

El último párrafo se enfoca en los pasos finales para publicar el sitio web, incluyendo la revisión de cambios y la elección de compartir el sitio con otros para colaboración. Se discute cómo hacer que el sitio esté visible para el público y cómo compartir el enlace publicado en diferentes canales de marketing. Se ofrece un resumen de los recursos y plantillas disponibles para aquellos que deseen acelerar el proceso de creación de su sitio web, y se cierra el tutorial agradeciendo la atención y animando a los espectadores a dejar comentarios y preguntas.

Keywords

💡Google Sites

Google Sites es una herramienta de creación de sitios web sin necesidad de código, ofrecida por Google. En el video, se presenta como una opción gratuita para usuarios de Google que desea crear sitios web estándar o tiendas en línea completa para vender productos. Es fundamental para el tema del video, ya que es el medio a través del cual se enseña a construir un sitio web.

💡Responsive Website

Un sitio web adaptable (responsive) es uno que se ajusta a diferentes tamaños de pantalla y dispositivos, como teléfonos móviles, tabletas y ordenadores. En el video, se enfatiza la importancia de crear un sitio web adaptable para mejorar la experiencia del usuario y asegurar que el contenido sea accesible en cualquier dispositivo.

💡E-commerce Store

Una tienda en línea o tienda de comercio electrónico (e-commerce store) es un sitio web donde se pueden vender productos directamente a los consumidores. En el video, se menciona la capacidad de Google Sites para crear una tienda en línea completa, lo que implica la integración de productos y un proceso de pago.

💡Templates

Los templates son plantillas predefinidas que se pueden utilizar para dar una estructura básica a un sitio web. En el video, se habla de la opción de elegir entre una variedad de templates prehechas en Google Sites para facilitar el proceso de construcción del sitio web y personalizarlos según las necesidades del usuario.

💡SEO (Search Engine Optimization)

La optimización para motores de búsqueda (SEO) es el proceso de mejorar la visibilidad de un sitio web en los resultados de búsqueda de Google u otros motores de búsqueda. En el video, se menciona la importancia de agregar texto alternativo (ALT text) a las imágenes para mejorar la SEO y ayudar a que el sitio web sea descubierto en los motores de búsqueda.

💡Custom Domain

Un dominio personalizado es un nombre de sitio web que se elige y se adquiere para un sitio web, en lugar del dominio gratuito proporcionado por Google Sites. En el video, se discute la opción de conectar un dominio personalizado a un sitio de Google Sites para darle una apariencia más profesional y controlar el enrutamiento de tráfico.

💡Google Analytics

Google Analytics es una herramienta de análisis web que permite a los propietarios de sitios web entender el rendimiento de su sitio y el comportamiento de los visitantes. En el video, se sugiere conectar Google Analytics para medir el éxito del sitio web y obtener información valiosa sobre la audiencia y la interacción del usuario.

💡Content Blocks

Los bloques de contenido son elementos predefinidos que se pueden insertar en un sitio web para agregar características como texto, imágenes, formularios y más. En el video, se utiliza la opción de insertar bloques de contenido en Google Sites para construir las páginas del sitio web, agregando elementos visuales y funcionales.

💡Stripe

Stripe es una plataforma de pago en línea que permite a los propietarios de sitios web aceptar pagos en línea de manera segura. En el video, se menciona Stripe como una opción para crear páginas de pago para productos en una tienda en línea de Google Sites, lo que facilita el proceso de venta y pago.

💡Equid

Equid es una herramienta que permite incrustar productos y tiendas en línea directamente en sitios web, incluidos los de Google Sites. En el video, se sugiere utilizar Equid para agregar productos a las páginas del sitio web y permitir a los visitantes realizar compras directamente desde Google Sites.

Highlights

Google ofrece un potente creador de sitios web sin código llamado Google Sites, completamente gratuito para todos los usuarios de Google.

Cualquier persona puede crear fácilmente un sitio web estándar o una tienda de comercio electrónico completa para vender productos en línea.

Tutorial completo de Google Sites para principiantes que muestra cómo usar Google Sites para crear cualquier tipo de sitio web adaptable.

Aprenderás a capturar leads, citas, vender coaching o productos físicos y digitales utilizando Google Sites y otras herramientas gratuitas.

El creador de sitios web de Google Sites te permite crear un sitio web para tu pequeña empresa sin coste alguno.

Se puede acceder a Google Sites a través de un navegador y se puede elegir entre crear un sitio web desde cero o elegir una plantilla prehecha.

Google Sites ofrece docenas de plantillas de sitios web prefabricadas que se pueden personalizar.

Se puede configurar el sitio web en Google Sites, incluyendo opciones de navegación, colores, logotipo, favicon e incluso dominios personalizados.

Es posible conectar Google Analytics a Google Sites para entender el rendimiento del sitio web.

Se pueden agregar anuncios o banners especiales en el sitio web para eventos o ventas.

El editor de Google Sites permite la selección de temas y estilos para el sitio web, y se pueden agregar páginas y subpáginas según sea necesario.

Se pueden insertar y personalizar bloques de contenido, como textos, imágenes, botones y otros elementos para construir páginas web.

Las páginas web creadas en Google Sites son adaptables y se pueden previsualizar en diferentes dispositivos como desktop, tablet y móvil.

Se pueden agregar formularios de contacto y mapas a la página de contacto del sitio web para facilitar la comunicación con los visitantes.

Para tiendas en línea, se puede utilizar Stripe para crear páginas de pago y agregar productos al sitio web de Google Sites.

La herramienta Equid permite incrustar productos directamente en las páginas del sitio web de Google Sites, facilitando la gestión de tiendas en línea.

Después de completar la creación del sitio web, se puede publicar y compartir el sitio web a través de diferentes canales de marketing.

El tutorial ofrece plantillas premium de sitios web de Google y plantillas de imágenes de Canva con un descuento del 10% para personalizar el sitio web de acuerdo con tus necesidades.

Transcripts

Google offers a powerful and no code

website builder called Google sites

which is completely free for all Google

users anyone can easily create a

standard website or a full feature

e-commerce store for selling products

online and today I'm excited to walk you

through from start to finish a complete

Google sites tutorial for beginners in

this tutorial I'm going to share how you

can use Google sites to create any kind

of responsive website that you can think

of so that you can capture leads

appointments sell coaching or physical

and digital products and more using a

combination of Google sites and other

free tools essentially after watching

this tutorial you'll be able to create a

stunning and full feature website using

Google sites for your small business and

the great thing is it's completely free

okay so just quickly before we go ahead

and launch into Google sites consider

subscribing if you haven't done so

already or if you're new to this Channel

and that way you'll stay updated with

actionable videos and tutorials designed

to equip you with the skills knowledge

and tools to help your small business

Thrive online and with that happy note

out the way let's go ahead and build a

standout website for your small business

using Google

sites okay so to get started simply head

over to your browser and type in

sites.google.com and that's going to

take you here or feel free to click the

link in the description below this video

now once you arrive here you might be

asked to sign in with your Google

account if you're currently not signed

in so what you want to do is make sure

that you sign in with the correct Google

account the Google account that you want

to use to build a website you can also

navigate up to the top right hand corner

and make sure that you're using the

correct account then if we navigate over

here we have the option to create a

website from scratch or we can choose a

pre-made template if we navigate over to

template Gallery this is where we have

access to dozens of pre-made website

templates that we can choose from and

now we can start building from we can

customize these templates the way that

we like you can see we have small

business templates like a dog walker

website holiday party website photo

portfolio website restaurant and sellon

and then we have other templates down

here now for the purpose of today's

tutorial what we're going to do is

create a Google sit's website completely

from scratch to do that simply navigate

up to blank site and that's going to

take us to a blank website canvas and

the first thing that we want to do is

name our site go ahead and add the name

of your website it the name of your

business and for the purpose of today's

tutorial I'm going to create a website

for a business called juicy s and this

is going to be a full feature e-commerce

website however if you just want to

create a standard Google sites website

you can still follow along with this

tutorial I'm going to show you

everything you need to know to create a

responsive and functional Google site

next what we're going to do is navigate

over to settings and we want to make

sure that our website is set up

correctly if we navigate down here you

can see we have navigation selected and

then we have the mode over here at the

moment we have top selected if we select

here we can also select side essentially

this is going to put your primary menu

either at the top of your website page

or on the side of your website for an

optimal user experience I recommend

selecting top then come down to the

color of your primary navigation for now

we're going to keep transparent selected

however you can always come back to

settings at any time to make changes

then navigate over to Brand images here

you have the option to upload a logo and

that logo is going to appear up in the

top left hand corner in your primary

menu and then if we navigate down to

favicon this is where you can add an

image which will appear in your browser

okay so I'm going to quickly upload a

logo and here's my logo here then add an

ALT text describing this image and this

is important for SEO search engine

optimization which essentially helps

your website get discovered on Google

Search and other search engines you can

also navigate down and select a color

from your logo to use for your website

theme again come down and upload a

favicon I'm going to use this image here

and click on open and as you can see if

we navigate up to the top leftand corner

of our site we have our logo in here and

when our website is live and someone

opens up our website our favicon image

will also display in the browser like

this okay now because I want my site to

be minimalistic what I'm going to do is

actually go ahead and delete this logo

in my primary menu I just want the text

of my business name then if we navigate

down to viewer tools here we're going to

leave these settings as they are then

navigate down to custom domains this is

where you can connect a custom domain if

you have one like I mentioned it's

completely free to create and launch a

website using Google sites you get free

hosting and you get a free Google sites

domain however if you want to add your

own custom domain you will need to

purchase a domain and connect that with

Google sites if you want to learn more

about connecting a custom domain to your

Google site what I'll do is add the

appropriate tutorial up above and down

below in the description for you to

check out later next what we're going to

do is navigate down to analytics and

this is where you can connect Google

analytics so you can understand the

performance of your website again this

is not vital right away however if you

want to learn how to connect Google

analytics with your website then what

I'll do is add the tutorial up above and

down below in the description which will

guide you through this process and then

we also have an announcement banner and

this allows you to show a b B you can

customize the color of the banner add a

message and a button label as well as a

link to where that Banner goes if

someone clicks on that Banner you can

also choose to add that Banner on the

homepage only or all pages on your

website now I recommend not adding a

banner right away you can always come

back to settings at any time and add a

banner if you have a special

announcement typically you want to add

an announcement Banner if you have a

sale special event or something

important that you want to share on your

website this is a great way to add a

specific call to action okay so now that

you understand settings what we're going

to do is navigate up here close settings

and then navigate over to themes and

this is where we can choose the overall

look and style of our website and these

are the different themes that we have

access to so what you want to do is take

the time to choose the theme that works

best for your business again you can

come back to themes and change your

theme at any time if you don't like the

look of your current theme now for me

because I want to create a sleek and

minimalist website I'm going to keep

Simple selected then I'm going to select

this color here however you can pick

your own brand color if you like then

I'm going to come down to font style and

I want to make sure that I have light

selected and this website theme is going

to make my website look sharp and

professional next what we're going to do

is navigate over to Pages here we want

to add all our website Pages as you can

see we currently have the homepage what

we're going to do is navigate down to

add and then click on on new page this

is going to be the about us page and

then click on done add another page and

I'm going to add a contact page and

again you want to repeat this process

with all your pages I'm going to add

shop online and then done and again I

want to add store locations and those

are my main five pages now what we can

do is Click on each page and we can drag

and drop that page to a different

location on our menu as you can see this

is what our menu looks like we have home

about store locations shop online and

contact I'm going to come down and move

shop online above store locations okay

so I'm happy with the arrangement of my

primary Pages now what I want to do is

add sub Pages by simply clicking new

page and adding the sub page our story

and then done and with this page what

I'm going to do is click on the page and

drag that up to about and add that under

the about page and as you can see we now

have a sub item if I navigate over to

about you can see we have our story

under about this is a sub page okay so

I'm going to navigate through that same

process of adding additional sub pages

to this website okay so just like that

I've taken the time to add my primary

items to my menu as well as my pages you

can see if I navigate over to pages and

click expand I have an about page and

then within the about page as sub items

I have these sub pages and you can see

those over here under about now if I

navigate down to shop online and click

here you can see that this is not a page

this is a menu section so what I did is

I went down here and added a new menu

section rather than a new page you can

see that these are sub Pages within this

section menu if I navigate up to this

section menu and click here you can see

that nothing happens because this is not

a page however if I click on any of

these sub items sub Pages that's going

to take me to that specific page page if

I click on product one you can see that

takes me to the product one page and

again I did the same down here I added a

menu section and if I click on this menu

section that's going to show me these

four sub pages and these are four

locations to our physical store and then

below this we have the contact page so

again if I navigate back up to the top

you can see that this is a page however

I could change this to a menu section if

I wanted to this purely depends on how

you want to set up your website pages

and your primary navigation now if I

navigate down to the bottom and click

here and rather than adding a page

subpage or menu section you can add a

link into your primary menu maybe you

want to link to a YouTube channel or an

external website you can do that by

adding a link you can also add a full

page embed this could be if you want to

embed a form an online store or

something else from a different platform

okay so I'm happy with my pages what

we're going to do now is navigate over

to insert and these are the different

items or blocks that we can use to build

out our website pages okay so let's go

ahead and start customizing the home

page come down and add your business

name in here and up here we want to keep

title selected here we can change the

font if we like I'm going to come down

to theme and you can see we have letto

selected we can change the style of this

font or we can select a different font

if we like next to that we can change

the size and then we have access to

these other formatting options like bold

italic underline and text color we can

also add a link to this text and we have

the option to add an emoji change the

text alignment copy this text block

delete or if we click here and other

formatting options down here now if we

navigate over to the right hand side if

you add a text box you'll have access to

all of these formatting options okay so

I'm going to click out of here I'm happy

with this title then what I'm going to

do is navigate down to hitter type and

I'm going to select large banner and

these are different hter types that you

can choose from I like large Banner B so

I'm going to keep that selected for each

of my pages now let's go ahead and add a

header image go ahead and upload an

image I'm going to use this image here

now all of the images that I've created

and used in this tutorial I created with

canva and you can use canva completely

for free to create your images now for

each of your page hiters I recommend

downloading your images as a JPEG 1280x

720 pixel and with canva you want the

file size to be medium and 70% I find

that this sizing works best for this

type of header on Google sites okay so

back here what I'm going to do is add a

text box and I want to add a subheader

I'm going to add the Mind drink and I'm

going to make this Center aligned and

make the font larger and then make the

font lighter I'm going to come down and

click on light and then make the font

lighter by coming down to theme and then

selecting light then what I'm going to

do is Click out of here navigate up to

this text text box and then drag this

text box and place it below the header

up here and then what I want to do is

navigate up to images click here and

then upload image and I'm going to

navigate down and select a button that I

created using canva and then click on

open and then what I'm going to do is

Click out of here drag this button and

place that under here now to make the

button larger what I can do is click

here and drag the section out and that's

going to make the button larger I can

also play around with the text here and

the spacing if I like I'm going to come

down to 60 and drag that into the middle

now what we can also do is navigate over

to spacer and then add this spacer below

shop now to make the header even larger

so for example if I click on the spacer

here I can drag the spacer out if I like

and you can see that's going to change

the dimensions of that image and the

placement of my elements so I'm happy

with that and now you can see the header

text the subheading and the shop now

button is above the drinks in this image

so I'm happy with that so spaces allow

you to essentially adjust the different

elements on each of your sections so

again everyone will have a different

layout and website style so what you

want to do is play around with the

divider the divider is great for playing

around and changing the way that your

elements appear in your sections now

once youve made any changes what you can

do is navigate up to preview and you can

preview your website pages on desktop as

well as tablet and mobile and you want

to make sure that your website pages are

responsive across devices okay so I'm

going to close the preview and that's

going to take us back here now let's

continue to build out our homepage first

what I'm going to do is click on this

image here and then click on link and I

want to link this image button to all

products this is the all products page

and then click on apply and if a website

visitor clicks on shop now that's going

to take them to the all products page

okay so now that we've created The

Hitter what we're going to do is

navigate down and add more sections to

our homepage what I'm going to do is

navigate across to content blocks and

I'm going to click on this content block

here and then add highlights about our

business I'm going to go ahead and click

here and upload an image I'm going to

add this image here and I'm going to do

the same with this element here and I'm

going to use this image here again these

are images that I created and downloaded

from canva here we want to add a title

Fruit Juicy then I want to make sure

that this is a heading I'm going to make

this slightly larger I'm going to select

24 and then come down to font and change

this to normal then what I can do is go

ahead and duplicate this element then

drag the element and place that here I'm

going to click here delete this and

that's going to add the same header here

now I'm going to quickly change this veg

juicy now let's go ahead and add body

text and as you can see I've quickly

added the body text I've also made some

quick formatting then I'm going to go

ahead and duplicate the section and then

move that over to this section here and

then delete this element because I don't

need it and as as you can see what I

would do in this section is ADD

information about two of our most

popular fresh juices that you can

purchase on our website I could also add

quick key benefits okay so as you can

see we now have two sections on our

homepage what I'm going to do is

navigate down to spacer and click here

and then drag the spacer up above and in

between these two sections and that's

going to allow me to add nice spacing

between each of these sections that's

going to make my website page look less

crowded and that's where these spacers

come in handy again I can click on the

spacer and I can drag it out and add the

size that I want again we can preview

what this looks like on our desktop and

mobile for example on mobile if I come

down here it looks like this if I come

down and click on desktop you can see

that there is a bit of space between

each of these different sections okay so

let's close the preview and then

navigate down and I'm actually going to

navigate up here and click on duplicate

and that's going to copy that section

then I'm going to drag this section and

add it below the section I just created

now let's add a new section below this

spacer okay so to do that what I'm going

to do is navigate up to the top and

click on text box and then add sharpen

your mind I'm going to make this a

heading and then change the sizing to 24

I'm also going to make this Center

aligned and I'm happy with that then I'm

going to click on text box again and

here we want to add information about

our brand okay so I've added this text

here talk about the brand and its

benefits you can also share why your

business stands out from other similar

Brands so here essentially what we want

to do on our homepage is share why our

brand is special I'm going to navigate

up here and change the sizing to 14 now

we can also drag the sides if we like

and then reposition that text box I'm

happy with that next what I'm going to

do is add a button and add learn more

then come down to link and then click on

about and then insert I'm going to drag

this button and place that in the middle

here and now if a website visitor clicks

on this button that's going to take them

to the about us page okay so let's

navigate back down to this section what

I'm going to do is drag this text box

here and place that directly below this

header text and I'm also going to do the

same with this button and as you can see

each of these three elements are now one

section now your button might look

strange like this what we want to do is

click on the button and then navigate

over to fi and we can choose the style

here I'm going to click outlined and

then navigate over to alignment and then

click on centered I'm also going to

change this again make it smaller and

then what we need to do is rearrange

this entire section just like that now

with each of your section so as you can

see this is a full section here we have

another section here this is a section

another section and this is our header

section what we can do with each of

these sections is we can change the

color for example we have style one if I

click on style two that's going to

change it to style two if I click on

style three that's going to change the

section to style three and we can also

upload an image and that's what I want

to do with this section I'm going to

navigate across to upload and then

upload this image here and again this is

an image that I created with canva with

the same dimensions that I mentioned

with the heading image up here now what

we want to do is make this section

larger to do that simply come down and

locate the spacer again click here and

what we're going to do is drag this

spacer and add that above and then we're

going to go ahead and click on the

spacer again duplicate and then click

and drag the spacer and place it below

our button now what we can do with each

of these spaces is we can click on the

spacer and we can drag it to make the

section larger I'm going to do the same

up here and I like the look of that

section again you can play around with

it just click on the spacer and drag out

the sides and I'm happy with that now we

can come down and we can remove the

readability adjustment if you like or

you can choose to enable it this just

depends on how your image appears on

your website pages and it contrasts with

the other elements like text and buttons

I'm going to go ahead and adjust for

readability and I like the look of that

now the text is quite hard to read so

what I'm going to do is highlight this

text and then go ahead and bold that

text I'm happy with this now we can also

come down and click on anchor image if

we like and you can choose the placement

where you want to Anchor that image for

example the image is currently anchored

in the middle but I can click any of

these options when you make those

changes then simply navigate up to

preview to make sure that those changes

that you have made are responsive on

your different devices I'm going to go

ahead and click on preview and then

navigate down to the section that we

just created okay so perfect I like the

look of that I'm going to go ahead and

click on mobile and see what that

section looks like on mobile again I'm

happy with that for now so I'm going to

exit out of this and then navigate back

to the bottom of our homepage next what

I'm going to do is add an image and then

click on upload and click on this image

here and click on open and this is an

image I created with canva which is

going to work as a divider I'm going to

click on this image drag out the sides

and then double click to change the

placement I'm happy with that and again

I'm going to come down and add a spacer

and add the spacer above this image and

I'm happy with that next I'm going to

come down and I want to add three images

that talk about the primary benefits of

our products to do that I'm going to

navigate up to content blocks and click

on this three section block and then I'm

going to Simply come down and I'm going

to delete this and this text block here

as well as these four

here and that's going to leave me with

these three image placements so I'm

going to go ahead and upload three

images this one here product benefit one

then two more

images and these are three text images

that I created inside canva now in order

to create images like this that are

transparent that have a transparent

background you will need to upgrade to

canva Pro however you can access canva

Pro for 30 days completely for free and

that's going to allow you to create

images like this or to download images

with a transparent background now if you

do not have the time to be particular

and to create a responsive and stunning

website whether it's a e-commerce

website or a standard service-based

website then what I'll do is add my

templates down below that you can

purchase that will give you access to

these templates you will also have

access to my canva templates which will

allow you to Simply replace the content

that I've already created with all the

correct Dimensions you'll also have

access to video tutorials that will show

you how to use each of those TP

templates so again if this sounds like

you feel free to check out my Google

sites templates down below next what I'm

going to do is come down and add this

content block here and then come down

and add an image and I'm going to use

this image here and I can just drag out

the sides until the image fits well into

this section I'm going to add a title

and then text down here and then change

the size and I'm happy with that I can

change the alignment I'm going to

highlight this navigate up to alignment

and and click on left align and I'm

going to do the same with this text down

here left align and this is information

about our products in terms of what we

use to produce our products okay so what

I'm going to do is navigate down and add

a spacer and this spacer is going to go

above these two sections and I'm going

to drag this out and I like the look of

that then I'm going to come down to the

section and copy the section and then

rearrange these elements and again

change the alignment of this text and in

with this text down here and then I'm

just going to quickly go ahead and

change the image and the content here

and as you can see I've quickly gone

ahead and changed the content next I'm

going to come down and then click on

spacer and then this time what I'm going

to do is change the spacer background

and add an image and I'm going to add

this image here now what I'm going to do

is click on the spacer and drag this out

so that that image fits into this

section and I'm happy with that again I

can change if I want to remove the

readability I think that looks a lot

nicer the colors are a lot more

prominent I don't have text to Overlay

so there's not going to be a contrasting

issue now let's preview our homepage I'm

going to go ahead and click on desktop

and this is what our current homepage

looks like you can see it looks sleek

attractive and minimalistic okay so

let's go ahead and exit out of the

preview and then navigate back down to

the bottom of our homepage and the next

section that I want to add is the

frequently asked questions section to do

that simply navigate up to collapsible

group click here and go ahead and add

your FAQ for the purpose of this example

I'm just going to add faq1 and then add

some basic text in here and as you can

see I've quickly added an answer to our

first FAQ if I click on this drop down

that's going to generate the answer to

the first if AQ okay next what I'm going

to do is quickly just go ahead and

duplicate this group and then duplicate

again and all you would do is go ahead

and make changes to each of these f a

q's I'm just going to change this to

three okay so next what I want to do is

navigate up to the text block again and

then come down and move this above my

FAQ and add a title for this section and

as you can see I've quickly gone ahead

and added a title as well as a brief

description about this fa AQ okay now I

feel like I need to add space up here so

again I'm going to navigate down add a

spacer and I'm going to add the spacer

below this image and above the FAQ again

I can change the size of the spacing if

I like okay so I'm happy with that now

what we want to do is create a footer

and the footer is going to be the same

on every page once you create your

footer here it will appear on every

footer of your website similar to how

your primary menu displays on every page

of your website ideally you want to add

your logo address email and phone number

so what I'm going to do is navigate up

to this section here this content block

and click here and then come down and

add my logo I'm going to use this logo

and click open then I'm going to delete

each of these images so I'm going to

delete this image then this image here

and remember I just want to delete the

image not the entire element then I'm

going to add address email and phone

number then I just want to add the

appropriate information below each of

these elements and I'm happy with each

of those four elements within my footer

now you can play around with the

formatting of your footer if you like

now you want to make sure that your

email and phone number are clickable for

example if we click on our email what

you want to do is navigate up to insert

link and you want to add the link mail

to colon and then your email over here

and then click on apply and when someone

clicks on your email down here that's

going to automatically compose a new

email for them to send to your email

address you also want to do the same

with phone number for example if you

highlight your number is click on link

and then within the link what you want

to do is add tell T L then callon and

then your phone number and then hit

apply and when someone is on your

website on their mobile device what they

can do is click on this number and

that's going to automatically allow them

to call through to that number this is

going to make your website footer a lot

more responsive okay so I'm going to

navigate over to this logo and make it

smaller and I'm happy with that I'm also

going to do the same with each of these

boxes and I'm happy with that I'm also

going to delete this little text box

down here next what we want to do is

come up here and drag this text box

below here and we want to add important

information like your business name

copyright terms and conditions and

privacy policy and as you can see I've

bolded that text now we can also

navigate over to Social Links and we can

add our business's social media channels

to our website footer for example I'm

going to quickly go ahead and add three

social media links and you can add more

down here if you like and you can also

upload images for each of your social

media links if you don't it will be

generated by default based on the link

that you added so as you can see I've

added Facebook LinkedIn and my Instagram

channel for this business I'm going to

go ahead and click on insert and that's

going to add those social media links in

here I'm going to drag this and place

that here you can also click on the

social media links and you can change

the style like the size the type if it's

solid and the color as well as the

alignment okay so I'm happy with this

and to make my footer look a lot more

attractive what I'm going to do is

actually add a background image so to do

that I'm just going to go ahead and

click on spacer and that's going to add

a spacer here then I'm going to click

here and add an

image and let's find my footer image

again this is an image that I found on

canva then like I've showed you in the

past I'm going to use this divider and

drag it out until it fits nicely in this

section now what I can do is navigate

over to anchor image and I'm going to

come down and click on bottom and that's

going to bring that image up so I'm

happy with that and as you can see we've

gone ahead and we've completed our

homepage let's go ahead and see what it

looks like by navigating over to preview

and then navigating through our homepage

I like the look of that you can see it's

very professional it's sleek and it's

very minimalistic and I love the look of

our footer okay so I'm going to close

the preview and navigate back down the

page and I'm happy with the footer next

what we're going to do is navigate up

the page and head over to our contact

page again let's quickly add a image to

our header I'm going to add this image

here and click on open and then again I

want to click on header type and click

on large Banner I can change this text

if I like but I'm happy with that for

now then I'm going to come down and

click on text box and then add get in

touch with us today I'm going to click

here and then click on heading and then

change the size to 24 and then the

alignment and then I'm going to add

paragraph text below this send us a

message we would love to hear from you

have a question we're just an email away

then what I want to do is add a form and

this is a contact form that a website

visitor can use to get get in touch with

us what I'm going to do is navigate down

our navigation bar on the right hand

side and look for forms and you can see

this is a form that I created earlier

inside Google forms go ahead and click

on the form and then click on insert and

what I'm going to do is drag this form

out so that it fits the entire page I'm

happy with that and as you can see I now

have a form on my contact form now you

have complete freedom to customize the

form the way that you like all you need

to do is head over to your Google forms

within your Google account then design

the form with your theme colors and add

your field options as well as set your

settings now if you want to learn more

about adding a Google form or a

different type of form into your Google

site what I'll do is add a tutorial up

above and down below in the description

which will guide you through the process

of adding different types of forms to

your website this could be a contact

form a booking form a paid form and this

is using Google forms and calendly so go

ahead and check out that tutorial if

you're interested in diving deeper into

creating forms for your Google sites

website and for example if you're a

service-based business you could add a

booking form to a booking page on your

Google site now if we navigate down the

page what we can do if we like is we can

also add a map to our contact form and

other information if we like if we have

a physical location okay next what we're

going to do is navigate up to our menu

and what we want to do is add products

to our our online store this is if you

run an online store in e-commerce

business I'm going to go ahead and click

on all products and then I'm going to

navigate over to image and then click on

upload and use this image over here and

click on open and again I'm going to

change the header type to large Banner

then what I'm going to do is navigate

over to the right hand side and then

click on this content block here and

then navigate down to image Carousel and

then I want to add some product

images and I'm going to add these three

images here now we can rearrange these

images if we like and then we can click

on insert I'm going to make this image

smaller and then navigate up here and

just like that I have my Carousel now

what I'm going to do is navigate up here

click on this image and then click on

delete and then grab our Carousel and

add that up here then I'm going to add

information about this product okay so

as you can see I've added the title

product one then what you want to do in

the product description is talk about

the specific product here for example

what is it how does it work what is the

cost how long does it take and what is

required then what I'm going to do is

come down and add a button here we want

to add by now and then under link what

we want to do is link to a payment page

where that customer can purchase this

product now you can do this completely

for free using a payment platform called

stripe and what stripe allows you to do

is list your different products and all

the information about those products

then you can create a payment link this

is essentially a payment page that that

is Standalone that is specifically for

that product and you can customize this

payment page how you like so that it

represents your brand and that customer

when they click on buy now it's going to

take them to this stripe payment page

where they can pay for that product and

that is how you can set up an e-commerce

store and add your products to your

Google site using stripe okay so back

here what I'm going to do is quickly add

a spacer and I'm going to add this

spacer above this product and below the

hiter I'm going to make make this

slightly larger and now let's preview

this product page shop online if we

navigate down here we have our first

product and you can see that this is a

Carousel and that customer can simply go

ahead and click on buy now and that's

going to take them to the stripe buy now

page okay so let's close this

preview now you can also use a tool

called equid which allows you to

actually embed your products directly

inside your online store so you can

actually embed singular products and

into your product pages rather than

creating elements like this or you can

embed the entire store from equid into

your Google site and the benefit of

using this free tool is that you can

embed your products directly inside

Google sites meaning that everything is

done within your Google site they can

add products to their cart they can

navigate through to the payment page and

purchase that product and all you need

to do as a website owner is to head over

to equid to manage those orders now for

those that are building an e-commerce

website and online store using Google

sites then what I'll do is add a

beginners tutorial up above and down

below in the description that will dive

deeper into leveraging stripe and equid

to add an online store so that you can

add products to your Google site so go

ahead and check that out if you want to

build an online store okay next what you

want to do is continue building out your

website Pages now I've showed you how to

customize your website Pages now it's on

to you to navigate through all your

different pages that you've added and

then to customize and add the content to

those pages similar to the process that

I've just showed you you now know

exactly how to customize each of your

website pages okay so what I'm going to

do is navigate back to home and once

youve finished creating your website

page what we can do is navigate up to

publish and down here what you want to

do is add your business name and your

free Google sites URL your domain will

look like this again like I mentioned

you can create a custom domain and

connect that to your Google site if you

want to learn how to do this again I'll

add the tutorial Down Below in the

description then when you're ready to

publish your new website online for your

potential customers to discover your

website simply come down and click on

publish and just like that your site has

been published successfully you can come

down and view your website or you can

simply navigate up to this drop down and

then click on view published site and

that's going to take you to your new

Google site okay so let's return back to

the Google sites editor then you can go

ahead and make changes to your website

and then before you publish your website

you can click on this drop down and

click on review changes and publish and

that's going to allow you to see all the

changes you've made before you publish

those changes live on your website you

can also unpublish your website at any

time and that's going to take your

website offline now if we click on share

here you can come down and add people

that you want to collaborate with on

your website at the moment you can see

our website is public online however

only you have access to actually edit

your website you can then come down and

copy your published site link and you

can start promoting your published

website across your different channels

social media channels your email and

through your other marketing platforms

and materials okay so I'm going to click

done again like I mentioned I have a

full e-commerce Google sites template

that I created that you can take

advantage of if you do not have the time

to create it yourself as well as access

to my canva image templ templates that

you can then customize the way that you

like for your own website if you're

interested in my website templates what

I'll do is add a 10% discount Down Below

in the description which will give you a

nice discount on my premium website

templates however that is everything

that I wanted to cover in this updated

and Ultimate Guide to building a website

with Google sites and there we have it

guys that is it for this Google sites

tutorial for beginners now if you have

any questions about Google sites or the

resources and tools that we mentioned

today make sure to pop them down below

and with that said thank you so much for

watching this tutorial all the way

through to the end if you got value make

sure you leave a like and a comment and

I will see you in the next video take

care

everyone