¿Cómo utilizar la sección Testimonios en el Editor de bloques de Waclis?

La sección Testimonios del Editor de bloques de Waclis permite mostrar opiniones, experiencias o comentarios de clientes dentro de tu Página web.

Puedes utilizarla para comunicar:

• experiencias de compra;

• resultados obtenidos;

• opiniones sobre un servicio;

• valoraciones sobre la atención;

• experiencias de implementación;

• comentarios sobre productos;

• casos breves de clientes;

• recomendaciones.

Los testimonios pueden ayudar a que nuevos visitantes conozcan la experiencia de otras personas o empresas que ya trabajaron contigo.

Waclis incluye diferentes diseños dentro de:

Secciones → Testimonios

Puedes seleccionar una composición prediseñada y posteriormente personalizar:

• textos;

• nombres;

• imágenes;

• cargos o empresas, si el diseño los incluye;

• íconos;

• fondos;

• colores;

• distribución;

• cantidad de testimonios;

• comportamiento responsive.

¿Qué es una sección de Testimonios?

Es una sección diseñada para presentar comentarios atribuidos a personas o empresas.

Por ejemplo:

LO QUE DICEN NUESTROS CLIENTES

“Necesitábamos organizar nuestro catálogo y el proceso
resultó mucho más sencillo de lo que esperábamos.”

María González
Gerente comercial
Empresa Ejemplo

O varios testimonios:

LO QUE DICEN NUESTROS CLIENTES

┌─────────────────────┐
│ “Excelente atención │
│ y acompañamiento.”  │
│                     │
│ María González      │
└─────────────────────┘

┌─────────────────────┐
│ “Pudimos implementar│
│ la solución de forma│
│ muy rápida.”        │
│                     │
│ Juan Pérez          │
└─────────────────────┘

┌─────────────────────┐
│ “Nos permitió       │
│ mejorar nuestro     │
│ proceso comercial.” │
│                     │
│ Carla López         │
└─────────────────────┘

La estructura exacta dependerá del diseño elegido.

¿Cuándo conviene utilizar Testimonios?

Utiliza esta sección cuando tengas comentarios reales de clientes que ayuden a responder preguntas como:

¿Qué experiencia tuvieron otras personas con esta empresa?

¿Qué resultado obtuvieron?

¿Cómo fue el proceso de compra o implementación?

¿Qué destacan quienes ya utilizaron el producto o servicio?

Ejemplo para una empresa de servicios

“Nuestro equipo necesitaba una solución que pudiera
adaptarse a la forma en que trabajamos. El proceso de
implementación fue claro y pudimos comenzar rápidamente.”

Carlos Rodríguez
Director comercial
Empresa Ejemplo

Ejemplo para una Página web de productos

“El producto llegó en excelentes condiciones y la atención
durante la compra fue muy buena.”

Laura Fernández
Cliente

Ejemplo para una empresa B2B

“Logramos centralizar procesos que antes administrábamos
por separado y mejorar el seguimiento de nuestro equipo.”

Martín López
Responsable de operaciones
Empresa Ejemplo

Testimonios y Citas o frases no son lo mismo

Dentro de la biblioteca de Waclis también encontrarás:

Citas o frases

Aunque visualmente pueden parecer similares, tienen objetivos diferentes.

Testimonios

Representan una experiencia u opinión atribuida a un cliente, usuario o empresa.

Ejemplo:

“El proceso de implementación fue mucho más sencillo
de lo que esperábamos.”

Ana Martínez
Empresa Ejemplo

Citas o frases

Pueden utilizarse para destacar:

• una frase institucional;

• una idea;

• una declaración;

• un mensaje inspirador;

• una cita relevante.

Por ejemplo:

“La innovación comienza cuando simplificamos lo complejo.”

No necesariamente representa la opinión de un cliente.

¿Cuál elegir?

Utiliza Testimonios cuando el valor está en:

quién cuenta una experiencia real.

Utiliza Citas o frases cuando el valor está principalmente en:

la frase o mensaje destacado.

¿Cómo agregar una sección de Testimonios?

Ingresa al Editor de bloques de la página o área editable donde quieras agregarla.

Después abre:

Secciones

y selecciona:

Testimonios

Paso 1: abre Testimonios

Waclis mostrará las composiciones disponibles.

Dependiendo del diseño, puedes encontrar estructuras orientadas a:

• un testimonio destacado;

• varios testimonios;

• Cards;

• testimonios con fotografía;

• testimonios con información adicional;

• composiciones horizontales o verticales.

Elige principalmente según:

• cantidad de testimonios;

• extensión de los textos;

• importancia de las fotografías;

• espacio disponible;

• estilo general de tu Página web.

Paso 2: agrega el diseño elegido

Selecciona la composición que quieras utilizar.

Una vez incorporada, podrás modificar individualmente sus elementos.

Paso 3: reemplaza el texto del testimonio

Selecciona el elemento que contiene la opinión.

Habitualmente será un:

Paragraph

o algún elemento de texto dentro de la Card.

Reemplaza el contenido de ejemplo por el testimonio correspondiente.

Utiliza el testimonio real

No es recomendable convertir una frase comercial escrita por la empresa en un supuesto comentario de cliente.

Por ejemplo, evita presentar como testimonio:

“Somos la mejor solución del mercado.”

si nunca fue expresado por el cliente atribuido.

La sección funciona mejor cuando transmite experiencias reales.

Puedes editar un testimonio para hacerlo más claro

Si el comentario original es muy extenso, puedes reducirlo manteniendo fielmente su sentido.

Por ejemplo, un cliente puede haber escrito:

“La verdad es que al principio teníamos bastantes dudas
porque veníamos trabajando de otra manera desde hacía
muchos años y no sabíamos cómo iba a resultar el cambio,
pero después de comenzar vimos que el proceso fue más
simple de lo esperado y el equipo nos ayudó bastante.”

Para una Card puede ser más apropiado:

“El cambio fue más sencillo de lo esperado y tuvimos
acompañamiento durante todo el proceso.”

Siempre que la versión publicada refleje correctamente lo expresado por la persona.

Evita testimonios demasiado extensos

Una Card con:

2 o 3 líneas

y otra con:

15 líneas

puede generar un diseño desequilibrado.

En una sección con varios testimonios conviene mantener una extensión razonablemente similar.

Utiliza testimonios breves y concretos

Un buen testimonio puede explicar:

Situación → experiencia → resultado

Por ejemplo:

“Necesitábamos centralizar nuestro catálogo y mantenerlo
actualizado. Pudimos implementar el nuevo proceso rápidamente
y reducir varias tareas manuales.”

Evita frases excesivamente genéricas

Por ejemplo:

“Todo excelente.”

puede aportar menos información que:

“La atención fue muy rápida y pudimos resolver la configuración
en el mismo día.”

Cuanto más concreto sea el comentario, más útil resulta para el visitante.

Paso 4: configura el nombre

Si el diseño incluye el nombre del cliente, selecciona el elemento correspondiente y reemplázalo.

Por ejemplo:

María González

Puede ser un:

• Heading;

• Paragraph;

• elemento de texto;

dependiendo de la composición.

¿Es necesario mostrar nombre y apellido?

No necesariamente.

Puedes utilizar el nivel de identificación que corresponda y para el que tengas autorización.

Por ejemplo:

María González

o:

María G.

o, en ciertos contextos:

Cliente de Empresa Ejemplo

La elección dependerá del tipo de testimonio y de cómo quieras presentarlo.

Paso 5: agrega cargo o empresa si corresponde

Algunos diseños pueden incluir información adicional.

Por ejemplo:

María González
Gerente comercial
Empresa Ejemplo

Esto puede resultar especialmente útil en testimonios B2B.

Ejemplo

“El proceso nos permitió organizar mucho mejor la
información comercial.”

Carlos Fernández
Director comercial
Distribuidora Ejemplo

La información contextual ayuda al visitante a interpretar de dónde proviene la experiencia.

No agregues información irrelevante

No necesitas convertir cada testimonio en una ficha completa.

Por ejemplo:

Nombre
Cargo
Empresa
Ciudad
País
Teléfono
Correo electrónico
Sitio web

normalmente sería excesivo.

Utiliza solamente los datos que aporten contexto.

Paso 6: reemplaza la fotografía si existe

Si el diseño incluye una imagen del cliente:

1. selecciona Image;

2. abre Contenido;

3. utiliza Set Image;

4. selecciona la fotografía.

Utiliza fotografías apropiadas

Si incorporas una fotografía de persona, intenta utilizar imágenes:

• nítidas;

• correctamente encuadradas;

• consistentes entre sí;

• con una calidad suficiente.

Si tienes tres testimonios, puede resultar visualmente extraño mezclar:

foto profesional
+
selfie recortada
+
logotipo de empresa

sin una razón clara.

Puedes utilizar logotipos en testimonios B2B

Dependiendo del diseño y del enfoque de la sección, en algunos casos puede tener sentido mostrar:

• fotografía de la persona;

• logotipo de la empresa;

• ambos;

• solamente información textual.

No existe una única alternativa correcta.

Lo importante es mantener una lógica consistente.

Si utilizas fotografías circulares

Comprueba que el rostro permanezca correctamente encuadrado.

Cuando una imagen cuadrada se presenta dentro de un círculo:

     ______
   /        \
  |  ROSTRO  |
   \________/

las esquinas de la fotografía dejan de verse.

Por eso el sujeto debería permanecer cerca del centro.

Alt de la fotografía

Si la imagen aporta información, utiliza el campo:

Alt

Por ejemplo:

María González, gerente comercial de Empresa Ejemplo

Evita:

foto1

Si utilizas el logotipo de una empresa

Un Alt apropiado podría ser:

Logo de Empresa Ejemplo

Usa testimonios con autorización

Antes de publicar:

• nombre;

• fotografía;

• empresa;

• cargo;

• comentario;

asegúrate de contar con la autorización correspondiente cuando sea necesaria.

Esto es especialmente importante cuando el contenido identifica a una persona o empresa concreta.

No atribuyas testimonios a clientes sin autorización

Una frase como:

“Excelente solución.”

acompañada por:

Empresa ABC

se interpreta como una declaración de esa empresa.

Por eso es importante utilizar información real y autorizada.

Cantidad de testimonios

No existe una cantidad obligatoria.

Puedes utilizar:

• 1 testimonio destacado;

• 2;

• 3;

• 4;

• 6;

• otra cantidad según el contenido.

Un único testimonio destacado

Puede funcionar muy bien si tienes un comentario especialmente relevante.

Por ejemplo:

                 “La implementación nos permitió
                 reorganizar todo nuestro proceso
                 comercial.”

                 María González
                 Empresa Ejemplo

Este formato da mucho protagonismo a la experiencia.

Tres testimonios

Una distribución habitual:

[ Testimonio 1 ] [ Testimonio 2 ] [ Testimonio 3 ]

Permite presentar varias perspectivas sin ocupar una sección demasiado extensa.

Seis testimonios

Puedes utilizar:

[ 1 ] [ 2 ] [ 3 ]

[ 4 ] [ 5 ] [ 6 ]

si cuentas con suficiente contenido relevante.

No agregues testimonios débiles solo para completar la grilla

Es preferible tener:

3 testimonios sólidos

que:

6 testimonios

de los cuales varios apenas aportan información.

Orden de los testimonios

Coloca primero los que tengan mayor relevancia para el visitante.

Puedes priorizar según:

• claridad;

• resultado obtenido;

• empresa;

• sector;

• tipo de experiencia;

• relación con la oferta principal.

Ejemplo

Si vendes una solución B2B, puede ser estratégico comenzar con un testimonio que explique:

problema
→ implementación
→ resultado

en lugar de uno que solamente diga:

“Muy buena atención.”

Diferentes tipos de testimonios

Puedes combinar experiencias relacionadas con distintos aspectos.

Por ejemplo:

Testimonio 1
→ implementación

Testimonio 2
→ soporte

Testimonio 3
→ resultados

Esto permite mostrar una experiencia más completa.

Evita repetir tres veces el mismo mensaje

Por ejemplo:

“Excelente atención.”

“Muy buena atención.”

“La atención fue excelente.”

La sección aporta más valor si cada testimonio destaca algo diferente.

Estructura típica de un testimonio

Según el diseño, puedes encontrar algo similar a:

Card
├── Image
├── Paragraph
├── Heading
└── Paragraph

O:

Card
├── Quote / Paragraph
└── Person
    ├── Image
    ├── Heading
    └── Paragraph

Utiliza Navigator para conocer la estructura real del diseño seleccionado.

Navigator en Testimonios

Puede resultar especialmente útil porque muchas Cards tienen elementos muy parecidos.

Por ejemplo:

Grid Row
├── Grid Column
│   └── Card
│       ├── Image
│       ├── Paragraph
│       ├── Heading
│       └── Paragraph
│
├── Grid Column
│   └── Card
│       └── ...
│
└── Grid Column
    └── Card
        └── ...

Antes de:

• clonar;

• eliminar;

• mover;

identifica la unidad completa.

Clonar un testimonio

Si necesitas agregar uno nuevo:

1. selecciona la Card o contenedor completo;

2. utiliza Clonar elemento;

3. reemplaza:

   • testimonio;

   • nombre;

   • cargo;

   • empresa;

   • fotografía;

   • Alt;

   • enlace, si existiera;

   • ID, si corresponde.

No clones solamente el texto

Si seleccionas Paragraph y utilizas Clonar:

Card
├── Paragraph
├── Paragraph
├── Heading
└── Image

podrías duplicar únicamente la opinión.

Para crear un nuevo testimonio necesitas clonar toda la unidad.

Revisa IDs después de clonar

Si el elemento original utiliza un ID personalizado, comprueba que la copia no termine utilizando el mismo identificador.

Los IDs deben mantenerse únicos dentro de la página.

Eliminar un testimonio

Si el diseño incluye más testimonios de los que necesitas:

1. selecciona la Card completa;

2. utiliza Eliminar elemento.

Recuerda que Waclis no solicita confirmación.

Si eliminas el elemento incorrecto, utiliza Deshacer inmediatamente.

No dejes Cards vacías

Si quieres pasar de tres testimonios a dos, evita simplemente borrar:

• texto;

• nombre;

• fotografía;

de la tercera.

Eliminar la unidad completa permitirá reorganizar la grilla correctamente.

Revisa la grilla después de eliminar

Antes:

[ 1 ] [ 2 ] [ 3 ]

Después:

[ 1 ] [ 2 ]

Tal vez quieras que ambas Cards ocupen más ancho.

La distribución dependerá de la composición.

Testimonios de distintas longitudes

Este es uno de los aspectos más importantes de esta sección.

Por ejemplo:

Card 1
“Excelente experiencia.”

Card 2
“Necesitábamos resolver varios problemas relacionados
con nuestro proceso comercial y el equipo nos acompañó
durante toda la implementación...”

Las alturas pueden quedar muy diferentes.

Primera solución: mejorar el contenido

Antes de utilizar CSS, intenta que los testimonios tengan una extensión razonablemente similar.

No significa que deban tener exactamente la misma cantidad de palabras.

Pero evita diferencias extremas.

Segunda solución: adaptar la Card

Si necesitas mantener cierta uniformidad puedes trabajar con:

• Min Height;

• estructura flexible;

• alineación.

Evita utilizar un Height fijo demasiado pequeño.

Por qué Height fijo puede ser problemático

Supongamos:

.testimonio-card {
    height: 260px;
}

Después agregas un texto más extenso.

Puede:

• desbordar;

• cortarse;

• superponerse.

En muchos casos es más seguro permitir crecimiento natural o utilizar Min Height.

Ejemplo con Min Height

Si realmente lo requiere el diseño:

.testimonios-section .testimonio-card {
    min-height: 280px;
}

La Card puede crecer si el texto necesita más espacio.

Mantén consistencia visual entre Cards

Intenta que todos los testimonios compartan:

• mismo Padding;

• mismo Border radius;

• misma Typography;

• misma alineación;

• mismo tratamiento de fotografía;

• mismo tamaño de nombre;

• misma jerarquía visual.

Classes compartidas

Puedes trabajar conceptualmente con:

testimonios-section
testimonios-grid
testimonio-card
testimonio-texto
testimonio-persona
testimonio-foto
testimonio-nombre
testimonio-cargo

Linked styles

Si todas las Cards utilizan:

testimonio-card

es normal que Waclis pueda mostrar:

Linked styles

cuando modificas propiedades compartidas.

Puede ser conveniente para mantener todas las Cards iguales.

¿Qué ocurre si quiero destacar un testimonio?

Puedes mantener:

testimonio-card

y agregar:

destacado

Por ejemplo:

class="testimonio-card destacado"

O utilizar un ID

Si verdaderamente se trata de una pieza única:

id="testimonio-principal"

No elimines necesariamente la Class compartida.

Fondo de Testimonios

Puedes utilizar:

• Cards blancas sobre fondo gris;

• Cards sin fondo;

• Section con color;

• Section con imagen;

• un testimonio destacado sin Card.

La elección depende del diseño general.

Una estructura sencilla puede ser suficiente

Por ejemplo:

────────────────────────────────

LO QUE DICEN NUESTROS CLIENTES

         “Comentario del cliente”

             María González
             Empresa Ejemplo

────────────────────────────────

No todas las secciones de Testimonios necesitan varias Cards, sombras y efectos.

Comillas

Las comillas pueden ayudar a comunicar visualmente que el texto es una declaración.

Por ejemplo:

“Necesitábamos simplificar el proceso y pudimos hacerlo
mucho más rápido de lo esperado.”

Algunos diseños pueden incluir además un ícono de cita.

Si existe, mantenlo como elemento visual y no como sustituto de la atribución.

No exageres el tamaño de las comillas decorativas

Un ícono muy grande puede competir con el contenido.

Debe reforzar la idea de testimonio sin convertirse en el elemento principal.

Valoraciones o estrellas

Si la composición elegida incluye una representación visual de valoración, utilízala solamente cuando tenga sentido para el contenido que estás presentando.

Por ejemplo:

★★★★★

No es necesario incorporar estrellas a todos los testimonios.

Y no deberías presentar una puntuación como si hubiese sido otorgada por un cliente cuando no cuentas con esa valoración.

Nombre y cargo: jerarquía visual

Puedes utilizar:

María González       ← mayor peso
Gerente comercial    ← menor peso
Empresa Ejemplo      ← menor peso

Esto permite distinguir rápidamente:

• quién habla;

• desde qué contexto.

Evita que cargo y empresa compitan con el testimonio

El foco principal debe seguir estando en la experiencia.

Los datos de atribución son información secundaria.

Tipografía del testimonio

Puedes diferenciar el texto del testimonio mediante:

• tamaño;

• estilo;

• peso;

• line-height.

No es obligatorio utilizar cursiva.

Una tipografía legible suele ser más importante que imitar visualmente una cita tradicional.

Line height

Los testimonios pueden ocupar varias líneas.

Utiliza suficiente Line height para mantener una lectura cómoda.

Un texto muy apretado puede resultar difícil de leer.

Ancho del texto

En un testimonio destacado, evitar líneas excesivamente largas puede mejorar la lectura.

Por ejemplo:

┌────────────────────────────────────────────┐
│                                            │
│      “Texto distribuido dentro de un       │
│       ancho cómodo de lectura.”            │
│                                            │
└────────────────────────────────────────────┘

Puede utilizarse Max Width cuando sea necesario.

Testimonios responsive

Una sección con tres Cards puede verse:

Desktop

[ 1 ] [ 2 ] [ 3 ]

Tablet

[ 1 ] [ 2 ]

[ 3 ]

Celular

[ 1 ]

[ 2 ]

[ 3 ]

No mantengas tres Cards estrechas en móvil

El testimonio necesita espacio para leer.

Una composición como:

[1][2][3]

puede generar textos extremadamente angostos.

En general, es preferible reorganizar.

Un testimonio por fila en celular

Suele ser una opción cómoda cuando cada Card incluye:

• comentario;

• fotografía;

• nombre;

• cargo.

Dos por fila puede funcionar en casos concretos

Por ejemplo, si son testimonios muy breves y el diseño mantiene suficiente espacio.

Comprueba siempre la legibilidad.

No ocultes testimonios solamente para resolver responsive

Si has decidido mostrar tres experiencias relevantes, intenta mantenerlas accesibles en móvil.

Reorganiza primero la grilla.

Fotografías en móvil

Una fotografía que funciona con:

100 × 100

en desktop puede necesitar revisión en celular.

Comprueba que no ocupe demasiado espacio respecto del texto.

Padding móvil

Cards amplias pueden utilizar un Padding generoso en desktop.

En celular puede ser conveniente reducirlo para aprovechar mejor el ancho.

Ejemplo conceptual

Desktop:

Padding: 32px

Mobile:

Padding: 20px

si el diseño lo necesita.

Hover en Testimonios

Un Hover puede utilizarse como refuerzo visual.

Por ejemplo:

• aumentar ligeramente sombra;

• cambiar borde;

• elevar suavemente la Card.

Ejemplo

.testimonios-section .testimonio-card {
    transition: transform .3s ease;
}

.testimonios-section .testimonio-card:hover {
    transform: translateY(-4px);
}

No es imprescindible

Un testimonio no necesita ser interactivo.

Si la Card no tiene:

• Link;

• botón;

• acción;

un Hover demasiado marcado puede hacer pensar que es clicable.

Utiliza el efecto de forma coherente con la interacción real.

Si no es clicable, un Hover muy sutil

Puede ser más apropiado que un efecto fuerte.

También puedes optar por no utilizar Hover.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

para hacer aparecer:

• toda la Section;

• la fila;

• las Cards.

Testimonios con Delay progresivo

Por ejemplo:

Testimonio 1 → aparece
Testimonio 2 → después
Testimonio 3 → después

Puede funcionar visualmente, pero mantén los Delay moderados.

El visitante debería poder comenzar a leer rápidamente.

No animes cada fragmento por separado

Evita:

foto → animación
texto → otra
nombre → otra
cargo → otra

si no existe una necesidad clara.

Animar la Card completa suele ser más coherente.

Testimonios dentro de una landing page

Una secuencia frecuente puede ser:

Banner
↓
Problema / propuesta
↓
Beneficios
↓
Servicios / producto
↓
Testimonios
↓
CTA

Los testimonios refuerzan la propuesta antes de una acción final.

Testimonios cerca de un CTA

Por ejemplo:

LO QUE DICEN NUESTROS CLIENTES

[ Testimonio ] [ Testimonio ] [ Testimonio ]

¿QUIERES CONOCER LA SOLUCIÓN?

[ Solicitar información ]

La experiencia de otros clientes aporta contexto antes de la llamada a la acción.

Testimonios en Home

También pueden utilizarse en la Home para reforzar:

• reputación;

• trayectoria;

• experiencia;

• satisfacción.

No es necesario colocarlos siempre al final.

La ubicación dependerá de la estructura general.

Testimonios para diferentes públicos

Si tienes clientes de distintos sectores, puedes seleccionar testimonios representativos.

Por ejemplo:

Retail
Distribución
Servicios profesionales
Industria

Esto ayuda a que distintos visitantes encuentren experiencias cercanas a su realidad.

Evita una lista de logos disfrazada de Testimonios

Si solo quieres mostrar empresas que trabajan contigo:

[ Logo ] [ Logo ] [ Logo ] [ Logo ]

puede ser mejor una sección específica de logos o una galería.

Un testimonio debería contener una experiencia o comentario.

Combinar logotipo + testimonio

Sí puede tener sentido:

[ Logo Empresa ]

“Pudimos simplificar el proceso de actualización
de nuestro catálogo.”

María González
Responsable comercial

Aquí el logo aporta contexto a una opinión real.

Testimonio vs caso de éxito

Un testimonio suele ser breve.

Por ejemplo:

“Redujimos considerablemente el tiempo que dedicábamos
a actualizar la información.”

Un caso de éxito normalmente requiere más desarrollo:

• problema inicial;

• solución;

• implementación;

• resultados;

• métricas.

Si tienes mucha información, puede ser mejor crear:

• una sección de Contenidos destacados;

• una página específica;

• una Card enlazada a un caso completo.

Puedes usar el testimonio como entrada a un caso de éxito

Por ejemplo:

“Logramos centralizar toda nuestra operación comercial.”

Empresa Ejemplo

[ Ver caso completo ]

Si el diseño dispone de Button o Link.

Cuidado con cifras y resultados

Si un testimonio incluye:

“Aumentamos nuestras ventas un 40 %.”

asegúrate de que ese dato provenga realmente del cliente y corresponda al caso.

Evita agregar métricas para hacer el testimonio más impactante si no fueron verificadas.

No todos los testimonios tienen que ser perfectos comercialmente

Un comentario real y específico puede resultar más útil que una frase extremadamente promocional.

Por ejemplo:

“Al principio tuvimos que reorganizar algunos procesos,
pero el acompañamiento del equipo nos ayudó a completar
la implementación.”

puede transmitir una experiencia más concreta que:

“Todo fue absolutamente perfecto.”

Mantén el lenguaje original cuando sea importante

Puedes corregir errores menores o reducir longitud, pero intenta conservar:

• tono;

• intención;

• significado.

El testimonio debería seguir representando a quien lo emitió.

CSS personalizado para Testimonios

Si necesitas una personalización avanzada, utiliza Classes específicas.

Por ejemplo:

testimonios-section
testimonios-grid
testimonio-card
testimonio-texto
testimonio-foto
testimonio-nombre
testimonio-cargo

CSS con alcance limitado

.testimonios-section .testimonio-card {
    padding: 28px;
    border-radius: 16px;
}

Evita

.card {
    padding: 28px;
}

porque puede alcanzar otras Cards de la Página web.

Ejemplo de fotografías uniformes

Si necesitas controlar imágenes:

.testimonios-section .testimonio-foto {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
}

Esto puede ayudar a mantener retratos con dimensiones visuales consistentes.

¿Por qué Cover en retratos?

Si el contenedor es cuadrado o circular, Cover puede ayudar a llenar el espacio.

Comprueba que el rostro no quede recortado de forma incorrecta.

IA para personalizar Testimonios

ChatGPT, Claude o Gemini pueden ayudarte.

Por ejemplo:

Estoy trabajando con una sección de Testimonios en Waclis.

La sección utiliza:
.testimonios-section

Cada tarjeta utiliza:
.testimonio-card

Las fotografías utilizan:
.testimonio-foto

Necesito:
- tres tarjetas por fila en desktop;
- una por fila en celular;
- Cards con Border radius de 16 px;
- Padding de 28 px;
- fotografías circulares de 72 px;
- altura visual consistente sin cortar textos largos.

No modifiques otras Cards ni fotografías de la Página web.

No utilices Height fijo si puede generar overflow.

No agregues JavaScript.

Devuélveme solamente el CSS necesario.

Ejemplo práctico: tres testimonios

Queremos crear:

LO QUE DICEN NUESTROS CLIENTES

[ María ]
“Pudimos ordenar nuestro catálogo
mucho más rápidamente.”

[ Carlos ]
“El acompañamiento durante la
implementación fue excelente.”

[ Laura ]
“Ahora nuestro equipo administra
todo desde un único lugar.”

Paso 1

Abre:

Secciones → Testimonios

Paso 2

Selecciona una composición de tres unidades.

Paso 3

Reemplaza las opiniones.

Paso 4

Reemplaza:

• nombres;

• cargos;

• empresas;

si el diseño los incluye.

Paso 5

Reemplaza fotografías si corresponden.

Paso 6

Completa los Alt.

Paso 7

Revisa que las tres opiniones tengan longitudes razonablemente compatibles.

Paso 8

Comprueba:

Desktop
[ 1 ] [ 2 ] [ 3 ]

y:

Mobile
[ 1 ]

[ 2 ]

[ 3 ]

Paso 9

Personaliza:

• fondo;

• Padding;

• Border;

• Border radius;

• Typography;

si es necesario.

Paso 10

Configura una animación o Hover solamente si aporta valor.

Paso 11

Guarda.

Paso 12

Utiliza:

Ver página

y comprueba la sección completa.

Ejemplo práctico: testimonio destacado

Puedes utilizar un diseño de mayor protagonismo:

           “La solución nos permitió centralizar
           información que antes administrábamos
           mediante diferentes herramientas.”

                  [ Foto ]

               María González
              Directora comercial
               Empresa Ejemplo

Este formato puede utilizarse cuando tienes una experiencia especialmente relevante.

Ejemplo práctico: testimonios B2B

EMPRESAS QUE YA TRABAJAN CON NOSOTROS

“Pudimos reducir considerablemente el tiempo
destinado a actualizar nuestro catálogo.”

Carlos Fernández
Gerente de producto
Distribuidora Ejemplo

────────────────────────

“El proceso de implementación fue rápido y
nuestro equipo recibió acompañamiento en cada etapa.”

Laura Pérez
Responsable de Ecommerce
Empresa Ejemplo

Aquí cargo y empresa agregan contexto.

¿Qué hacer si una Card queda mucho más alta?

Primero:

1. revisa longitud del testimonio;

2. comprueba Padding;

3. evalúa reducir el texto manteniendo su sentido.

Si necesitas uniformidad adicional, utiliza:

• Min Height;

• layout flexible;

antes que un Height rígido.

¿Qué hacer si la fotografía se deforma?

Comprueba:

• Width;

• Height;

• proporción;

• object-fit.

Para retratos uniformes puede ser apropiado:

Cover

dentro de un contenedor definido.

¿Qué hacer si se corta el rostro?

Ajusta:

• fotografía original;

• posición;

• encuadre;

• comportamiento de imagen.

Una fotografía diferente puede ser mejor solución que aumentar la complejidad del CSS.

¿Qué hacer si nombre y cargo aparecen desalineados?

Comprueba:

• estructura;

• Margin;

• Typography;

• altura del testimonio.

Utiliza Navigator para verificar que ambos pertenecen a la misma Card.

¿Qué hacer si cambio una Card y cambian las tres?

Comprueba:

Linked styles

y la Class compartida.

Si quieres un estilo común:

el comportamiento es correcto.

Si quieres una excepción:

utiliza una Class adicional o ID único.

¿Qué hacer si quiero mover el orden de los testimonios?

Selecciona la unidad completa:

• Card;

• Grid Column;

• contenedor correspondiente.

No muevas solamente Paragraph si quieres reorganizar toda la opinión.

Después revisa Navigator.

¿Qué hacer si en móvil el texto queda demasiado angosto?

Reduce la cantidad de columnas.

También revisa:

• Padding lateral;

• Width;

• Margin.

No reduzcas excesivamente el tamaño de la tipografía para mantener varias Cards por fila.

¿Qué hacer si los testimonios ocupan demasiada altura en celular?

Puedes:

• reducir Padding;

• simplificar textos;

• utilizar fotografías más pequeñas;

• revisar espacios verticales.

No ocultes experiencias importantes solamente para reducir longitud.

Buenas prácticas para Testimonios

Recomendamos:

• utilizar testimonios reales;

• contar con autorización para publicar la atribución correspondiente;

• mantener fielmente el sentido de cada comentario;

• priorizar experiencias concretas;

• evitar textos excesivamente largos;

• mantener Cards visualmente consistentes;

• utilizar fotografías de calidad si las incorporas;

• completar Alt;

• mantener nombres y cargos con jerarquía secundaria;

• revisar IDs después de clonar;

• adaptar la grilla a celular;

• utilizar Hover solamente cuando tenga sentido;

• utilizar animaciones con moderación;

• limitar el CSS a la sección;

• comprobar el resultado mediante Ver página.

Errores frecuentes

Utilizar una frase comercial propia como supuesto testimonio

Los testimonios deberían representar experiencias reales.

Publicar nombre, fotografía o empresa sin contar con la autorización correspondiente

Verifica antes de publicar.

Utilizar testimonios excesivamente largos

Resume manteniendo el sentido cuando sea apropiado.

Utilizar comentarios demasiado genéricos

Los testimonios concretos aportan más información.

Confundir Testimonios con Citas o frases

Testimonios representa una experiencia atribuida.

Mezclar fotografías con estilos muy diferentes sin una lógica

Mantén coherencia.

Clonar solo Paragraph

Selecciona la unidad completa.

Repetir IDs al clonar

Revisa identificadores.

Eliminar textos y dejar una Card vacía

Elimina el contenedor cuando quieras reducir la cantidad.

Mantener tres Cards demasiado estrechas en celular

Adapta la grilla.

Utilizar Height fijo y cortar testimonios largos

Prefiere soluciones flexibles.

Crear un Hover fuerte sobre una Card que no es clicable

Puede generar una expectativa de interacción.

Mostrar información únicamente mediante Hover

Los dispositivos táctiles funcionan de otra manera.

Utilizar CSS global para .card

Limita el alcance a Testimonios.

No revisar Ver página

Comprueba siempre el resultado final.

Flujo recomendado

1. SELECCIONAR TESTIMONIOS REALES
↓
2. DEFINIR QUÉ INFORMACIÓN MOSTRAR
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR SECCIÓN
↓
5. REEMPLAZAR TESTIMONIOS
↓
6. NOMBRE / CARGO / EMPRESA
↓
7. REEMPLAZAR FOTOGRAFÍAS
↓
8. COMPLETAR ALT
↓
9. AJUSTAR CANTIDAD DE CARDS
↓
10. REVISAR LONGITUDES
↓
11. ADAPTAR RESPONSIVE
↓
12. PERSONALIZAR ESTILOS
↓
13. HOVER / ANIMACIÓN SI CORRESPONDE
↓
14. GUARDAR CAMBIOS
↓
15. VER PÁGINA

Checklist antes de publicar Testimonios

• Los testimonios corresponden a experiencias reales.

• Cuento con autorización para la información que publico cuando corresponde.

• El sentido original del comentario se mantiene.

• No quedan textos de ejemplo.

• Los testimonios tienen una extensión razonable.

• Los comentarios aportan información concreta.

• Los nombres están correctamente escritos.

• Los cargos y empresas son correctos, si se muestran.

• Las fotografías fueron reemplazadas.

• Las fotografías tienen buena calidad.

• Los Alt están completos.

• Las Cards comparten una apariencia coherente.

• Revisé Linked styles.

• Los IDs son únicos.

• Revisé elementos clonados.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Los textos no se cortan.

• No existe scroll horizontal inesperado.

• Hover no genera una interacción confusa.

• Las animaciones son moderadas.

• El CSS personalizado está limitado a la sección.

• Probé Ver página.

En resumen

La sección Testimonios permite presentar experiencias de clientes de forma visual y organizada.

Puede incluir:

• comentario;

• nombre;

• fotografía;

• cargo;

• empresa;

• otros elementos de contexto según el diseño.

La clave está en presentar contenido:

• real;

• concreto;

• legible;

• creíble;

• correctamente atribuido.

Recuerda:

Testimonio → experiencia de una persona o empresa.

Cita o frase → mensaje destacado que no necesariamente representa una experiencia de cliente.

Cuando utilices varios testimonios:

• mantén longitudes razonablemente similares;

• utiliza Cards consistentes;

• revisa fotografías;

• adapta la grilla;

• evita alturas rígidas que puedan cortar contenido.

Y antes de publicar información identificable, comprueba que cuentas con la autorización necesaria para utilizarla.

Una buena sección de Testimonios no necesita afirmar que tu empresa es excelente: permite que la experiencia de tus propios clientes aporte esa evidencia.