Si deseas destacar tus productos o servicios en tu sitio web de Google. Un carrusel de imágenes con enlaces puede ser una excelente opción para mejorar la experiencia del usuario y aumentar la tasa de conversión. Te permite no solo mostrar imágenes visualmente atractivas. También vincular cada imagen con una página específica de tu sitio web, como una página de producto o una página de destino.
Te mostramos como hacer un carrusel de imágenes de una forma
sencilla. Una excelente manera de mostrar una variedad de imágenes de tu
empresa, productos o servicios en tu sitio web de manera visualmente atractiva.
Además, puede ayudar a mejorar la experiencia del usuario y hacer que tu sitio
web sea más atractivo para los visitantes.
Lo más importante:
●
Un
carrusel de imágenes hace que tu sitio web se vea más atractivo y profesional.
Además, la adición de enlaces facilita la navegación del usuario hacia las
páginas relevantes de tu sitio web.
●
Un
carrusel de imágenes con enlaces puede ser una excelente manera de promocionar
tus productos o servicios en tu sitio web.
●
Mayor
compatibilidad con dispositivos móviles: (smartphones y tablets). Google Sites
se adapta automáticamente a dispositivos móviles.
TUTORIAL: ¿Cómo hacer un carrusel de imágenes en Google Sites con enlaces?
Para crear el carrusel con enlaces y personalizar la
presentación como lo desees. ¡Sigue estos sencillos pasos, tendrás un carrusel
de imágenes con enlaces listo para publicar en tu sitio web de Google y
aumentar la interacción de los visitantes con tu negocio!
1)
Primero necesitarás tener una cuenta de Google y crear una
página en Google Sites.
2) Selecciona las imágenes que deseas
utilizar en el carrusel de imágenes. Asegúrate de que todas tengan el mismo
tamaño y resolución para lograr una apariencia uniforme. Si no tienes un tamaño
específico en mente, un tamaño común para un carrusel es de 500px x 500px.
3) Sube las imágenes a una página de
Google Sites. Elige abrir una página en blanco para hacer un borrador donde
subirás tus imágenes. Agrega una sección de imágenes a la página.
4)
Ingresa a vista
previa. Da clic derecho sobre la imagen y en abrir imagen en una pestaña nueva.
5) Copia el enlace, de cada imagen debe verse algo así:
6) En la página de destino donde vas a
colocar el carrusel de imágenes, copia el código de abajo y pégalo en la opción
que dice: “incorporar código desde la web”. Pero antes no olvides remplazar los
enlaces, de: a href y img src.
Finalmente copia el siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Carrusel de imágenes con desvanecimiento</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
.carousel-item img
{
width: 100%;
height: auto;
}
body {
overflow:
hidden;
}
</style>
</head>
<body>
<div
id="carouselExampleFade" class="carousel slide
carousel-fade" data-ride="carousel">
<div
class="carousel-inner">
<div
class="carousel-item active">
<a
href=" https://www.tuenlace.com/ "> <img
src="https://tuimagen.jpg" alt="Imagen 1"></a>
</div>
<div
class="carousel-item">
<a
href=" https://www.tuenlace.com/ "><img src="
https://tuimagen.jpg" class="d-block img-fluid" alt="Imagen
2"></a>
</div>
<div
class="carousel-item">
<a
href=" https://www.tuenlace.com/ "><img src="
https://tuimagen.jpg" class="d-block img-fluid" alt="Imagen
3"></a>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 2000
// Cambiar cada 2 segundos
})
})
</script>
</body>
</html>
DESCARGAR CÓDIGO
Conclusión
Un carrusel de imágenes con enlaces en Google Sites puede ser
una excelente manera para que tu negocio destaque sus productos o servicios en
su sitio web. Mejorando la experiencia del usuario y aumentando la interacción
con el sitio web. Haciendo que el sitio web, se vea mucho más atractivo y
profesional. Puede ser un elemento estratégico para realizar promociones y
destacar productos y servicios.
Esperamos que este tutorial
te sea de utilidad y lo coloques en práctica. Tal vez te pueda interesar leer: como colocar un subdominio en Google Sites.
Eso es todo, esperamos que esta información te sea útil.
.png')
No hay comentarios.:
Publicar un comentario