Ultimate Google Sites Tutorial 2024 | Create A ‘Full Feature’ Google Sites Website
Summary
TLDREste 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
😀 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.
🛠️ 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.
🎨 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.
🏠 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.
📚 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.
📝 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.
🛒 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.
🚀 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.
Mindmap
Keywords
💡Google Sites
💡Responsive Website
💡E-commerce Store
💡Templates
💡SEO (Search Engine Optimization)
💡Custom Domain
💡Google Analytics
💡Content Blocks
💡Stripe
💡Equid
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
Browse More Related Video
5.0 / 5 (0 votes)