Cómo crear un carrusel de testimonios fácil en Squarespace
Para mostrar las reseñas de tus clientes de forma estética
Mostrar testimonios potentes de clientes, consultantes o estudiantes que se han beneficiado de tus servicios y/o programas, es clave para impulsar la credibilidad de tu portafolio y generar confianza entre los visitantes a tu sitio web.
A veces, por una cuestión estética, viene bien agrupar los testimonios en un carrusel que ofrezca un elemento interactivo a tu diseño, sobre todo si tienes muchos testimonios.
El tutorial
Como indica el propio Squarespace, las secciones de lista son secciones especiales que permiten agregar rápidamente elementos de contenido y cambiar entre distintos diseños sin tener que reacomodarlos manualmente.
En este tutorial te mostraré cómo puedes diseñar un carrusel de testimonios usando la sección de lista automatizada para construir un carrusel sencillo y minimalista que luce súper bien en casi cualquier sitio.
Marcas de tiempo:
00:00 Intro
01:04 Cuándo usar un carrusel de testimonios
02:34 Carrusel en una secciones de lista
03:22 Comienza el tutorial
Para comenzar
Elige una sección de lista
Donde sea que quieras colocar tu carrusel de testimonios, elige AÑADIR SECCIÓN.
Entre las opciones de prediseños que te brinda Squarespace, opta por alguna de las secciones que vienen marcadas con una i , donde el contenido se parezca al diseño que queremos crear. Si la sección marcada sólo contiene fotos con muy poco texto o nada de texto, es posible que se trate de una sección de galería no de una lista.
Editar el contenido en una sección de lista (a grandes rasgos)
En la esquina superior derecha de tu nueva sección, encontrarás un apartado que no aparece en las secciones regulares que pone EDITAR CONTENIDO. En ese apartado podrás agregar tus testimonios y configurar la apariencia del contenido.
Elementos
La primera pestaña dentro del apartado de EDITAR CONTENIDO, se refiere a los elementos que quieres ver en tu sección.
Puedes activar o desactivar un título general para la sección si deseas poner algo como “En palabras de mis clientes”, y activar o desactivar un botón general, si por ejemplo quieres enlazar a una página con tu portafolio o casos de estudio.
También puedes activar o desactivar elementos dentro del contenido del testimonio (la parte del carrusel que irá girando). Por ejemplo, puedes optar por activar o desactivar la imagen de cada elemento dependiendo de si quieres colocar la foto de tu cliente o un logo de alguna empresa con la que hayas trabajado.
Contenido
Es esta pestaña agregarás el cuerpo de cada uno de tus testimonios como un elemento.
Recomiendo seleccionar una frase destacada del testimonio para colocar a manera de título del testimonio. No todos los visitantes a nuestra web se tomarán en tiempo de leer los testimonios completos, sin embargo, hay más probabilidades de que lean una frase destacada. Procura elegir frases que describan un problema que sea muy común entre tus posibles clientes y/o que hablen sobre resultados que la mayoría de tus clientes objetivo están buscando.
En la cajita correspondiente a descripción, agrega el contenido del testimonio completo y la fuente.
No olvides agregar un texto alternativo describiendo la imagen si decides poner una. Es importante para la accesibilidad de tu sitio web y puede potenciar tu SEO.
Diseño
En esta pestaña, encontrarás todos los comandos que impactarán en el aspecto de tu sección. Juega con las opciones hasta dar con el diseño de tu preferencia, pero asegúrate de que estás trabajando con un CARRUSEL (ni una lista simple ni las diapositivas servirán para este diseño).
Configuración del contenido
A continuación, voy a compartirte la configuración exacta del carrusel de testimonios que usé como ejemplo si deseas crear una replica exacta.
Pestaña Elementos
Sección
Título (activo)
Botón (activo)
Elementos
Mostrar imagen (activo)
Mostrar el título (activo)
Mostrar el cuerpo del mensaje (activo)
Mostrar botón (inactivo)
Pestaña Diseño
Carrusel
Alineación (centrada)
Máximo de columnas (1)
Recorte de imagen (círculo)
Desplazamiento infinito (activo)
Mostrar diapositivas adyacentes (inactivo)
Diseño > Estilo
Tamaño de texto (personalizado)
Título del elemento 1.6rem
Descripción del elemento 1.1rem
Tarjeta (inactivo)
Navegación (centrado)
Desplazamiento de navegación (S)
Diseño > Tamaño y espacio
Ancho del diseño (recuadro)
Ancho de los medios (personalizado 10%)
Ubicación de los archivos de medio (centrado)
Ancho del contenido (personalizado 70%)
Ubicación del contenido (centrado)
Espacio entre los elementos (S)
Espacio entre diapositivas (S)
Relleno vertical (personalizado)
Relleno superior 4.2max
Relleno inferior 4.2max
Posición (centrado opción 2)
Facilítate la tarea de diseñar y elige tu plantilla Premium:
Navega por categorías
y recuerda:
#SéDiferenteHazLaDiferencia
