✅Cómo Crear un Grid Tipo Masonry de Testimonios con HTML, CSS y JavaScript en Gutenberg

📌 Pinear Artículo

Buscar ❌

Hoy te traigo otro snippet directo para Gutenberg sin plugins que te va a encantar. Ya hemos visto cómo crear sliders, tablas de precios y carruseles, pero ahora vamos a crear algo que queda genial en cualquier web profesional: un grid tipo masonry de testimonios con animación al hacer scroll.

Es perfecto para mostrar las opiniones de tus clientes o usuarios de manera visual y dinámica, sin depender de complementos externos ni maquetadores visuales. Todo se hace desde un bloque HTML de Gutenberg y en cuestión de minutos.

¿Qué vamos a crear?

• Un masonry grid responsive que se adapta automáticamente a cualquier tamaño de pantalla.
• 12 tarjetas de testimonios listas para personalizar.
• Imagen circular de cada cliente.
• Nombre, cargo y breve reseña.
• Una animación suave tipo fade-in cuando las tarjetas entran en pantalla.
• Sin librerías externas ni plugins.

¿Cómo es el resultado final?

• En escritorio tendrás un grid fluido tipo masonry con varias columnas.
• En tablet y móvil las tarjetas se reorganizan automáticamente.
• Además, cada tarjeta aparecerá con una animación elegante al hacer scroll.

Código completo del snippet

Aquí tienes el código completo para pegar directamente en un bloque HTML de Gutenberg:

<style>
  .masonry-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .testimonial-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
  }
  .testimonial-card.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  .testimonial-card img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
  }
  .testimonial-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .testimonial-content p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #444;
  }
  .testimonial-author {
    font-weight: bold;
    font-size: 1rem;
    color: #111;
  }
  .testimonial-role {
    font-size: 0.85rem;
    color: #13b0a0;
  }
</style>

<div class="masonry-container">
  <!-- Testimonio 1 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/6c4a9ecc-4a02-3e89-acf2-c228485ccab2.jpg" alt="Testimonio 1">
    <div class="testimonial-content">
      <p>“Excelente servicio y atención al cliente, superaron mis expectativas desde el primer día.”</p>
      <div class="testimonial-author">Laura Jiménez</div>
      <div class="testimonial-role">Marketing Manager</div>
    </div>
  </div>

  <!-- Testimonio 2 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/about-us-team-scaled-1.webp" alt="Testimonio 2">
    <div class="testimonial-content">
      <p>“El equipo fue muy profesional y la comunicación fue fluida en todo momento.”</p>
      <div class="testimonial-author">Mario Sánchez</div>
      <div class="testimonial-role">Product Owner</div>
    </div>
  </div>

  <!-- Testimonio 3 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/testimonial-user-1.webp" alt="Testimonio 3">
    <div class="testimonial-content">
      <p>“Nos ayudaron a lanzar nuestro proyecto con éxito y en menos tiempo del esperado.”</p>
      <div class="testimonial-author">Isabel Torres</div>
      <div class="testimonial-role">CEO</div>
    </div>
  </div>

  <!-- Testimonio 4 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/testimonial-user-4.webp" alt="Testimonio 4">
    <div class="testimonial-content">
      <p>“Gran experiencia de usuario y resultados visibles desde el primer mes.”</p>
      <div class="testimonial-author">Carlos Ruiz</div>
      <div class="testimonial-role">UX Specialist</div>
    </div>
  </div>

  <!-- Testimonio 5 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-1.webp" alt="Testimonio 5">
    <div class="testimonial-content">
      <p>“Muy contento con la calidad del trabajo y la rapidez de entrega.”</p>
      <div class="testimonial-author">Ana López</div>
      <div class="testimonial-role">Project Manager</div>
    </div>
  </div>

  <!-- Testimonio 6 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/testimonial-user-2.webp" alt="Testimonio 6">
    <div class="testimonial-content">
      <p>“Su enfoque profesional y compromiso fueron claves para el éxito de nuestra campaña.”</p>
      <div class="testimonial-author">Diego Fernández</div>
      <div class="testimonial-role">CMO</div>
    </div>
  </div>

  <!-- Testimonio 7 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-5.webp" alt="Testimonio 7">
    <div class="testimonial-content">
      <p>“Siempre atentos a nuestras necesidades y ofreciendo soluciones prácticas.”</p>
      <div class="testimonial-author">Paula Gómez</div>
      <div class="testimonial-role">Analista de Datos</div>
    </div>
  </div>

  <!-- Testimonio 8 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/article-image-6.webp" alt="Testimonio 8">
    <div class="testimonial-content">
      <p>“El mejor partner que hemos tenido, nos acompañaron en todo el proceso.”</p>
      <div class="testimonial-author">Víctor Salas</div>
      <div class="testimonial-role">Director Técnico</div>
    </div>
  </div>

  <!-- Testimonio 9 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/testimonial-user-3.webp" alt="Testimonio 9">
    <div class="testimonial-content">
      <p>“Rápidos, eficientes y siempre dispuestos a resolver cualquier imprevisto.”</p>
      <div class="testimonial-author">Elena Morales</div>
      <div class="testimonial-role">Consultora Senior</div>
    </div>
  </div>

  <!-- Testimonio 10 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/04/article-image-1.webp" alt="Testimonio 10">
    <div class="testimonial-content">
      <p>“Muy profesionales, nos ayudaron a optimizar la estrategia y mejorar resultados.”</p>
      <div class="testimonial-author">Roberto Sánchez</div>
      <div class="testimonial-role">Growth Hacker</div>
    </div>
  </div>

  <!-- Testimonio 11 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/05/about-us-team-scaled-1.webp" alt="Testimonio 11">
    <div class="testimonial-content">
      <p>“Siempre atentos a los detalles y con propuestas innovadoras en cada etapa.”</p>
      <div class="testimonial-author">Lucía Ortega</div>
      <div class="testimonial-role">Account Manager</div>
    </div>
  </div>

  <!-- Testimonio 12 -->
  <div class="testimonial-card">
    <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/6c4a9ecc-4a02-3e89-acf2-c228485ccab2.jpg" alt="Testimonio 12">
    <div class="testimonial-content">
      <p>“Confianza total. Estamos muy satisfechos con el trabajo final.”</p>
      <div class="testimonial-author">Sofía Martín</div>
      <div class="testimonial-role">Directora de Operaciones</div>
    </div>
  </div>
</div>

<script>
  const cards = document.querySelectorAll('.testimonial-card');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in-view');
      }
    });
  }, {
    threshold: 0.2
  });

  cards.forEach(card => observer.observe(card));
</script>

Lenguaje del código: HTML, XML (xml)

¿Cómo personalizarlo?

1. Cambiar imágenes, nombres y reseñas

Cada tarjeta tiene la siguiente estructura:

<div class="testimonial-card">
  <img src="URL-DE-TU-IMAGEN" alt="Testimonio">
  <div class="testimonial-content">
    <p>“Texto del testimonio aquí...”</p>
    <div class="testimonial-author">Nombre Apellido</div>
    <div class="testimonial-role">Cargo</div>
  </div>
</div>

• URL-DE-TU-IMAGEN: sustituye por la URL de la imagen desde tu biblioteca.
• Edita el texto de la cita, el nombre y el cargo.

2. Agregar o eliminar tarjetas

Cada bloque <div class="testimonial-card"> es independiente, así que puedes copiarlo y duplicarlo para añadir más testimonios, o eliminar los que no necesites.

3. Personalizar colores y estilos

Dentro del CSS puedes modificar fácilmente:

• El color de fondo de las tarjetas: background: #f9f9f9;
• La sombra: box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
• Los colores de texto y del cargo con .testimonial-role { color: #13b0a0; }

4. Cambiar tamaño de imágenes

.testimonial-card img {
    width: 60px;
    height: 60px;
}

Si quieres avatares más grandes o pequeños, solo cambia estos valores.

5. Ajustar la animación

El efecto que hemos aplicado es un fade-in con deslizamiento hacia arriba. Puedes modificar la velocidad desde la línea:

transition: all 0.6s ease;

• Cambia 0.6s por el valor que prefieras (por ejemplo, 1s para que sea más lenta).

El trigger de la animación se realiza con Intersection Observer (puro JS), que detecta cuándo cada tarjeta entra en pantalla.

Ventajas de usar esta animación en tu grid

• Hace que tu sección de testimonios sea mucho más dinámica y atractiva.
• Mejora la experiencia de usuario al ofrecer un contenido progresivo y fluido.
• Aumenta la atención y la permanencia en la sección (especialmente en landing pages).
• No dependes de plugins externos ni de librerías pesadas como jQuery.
• Funciona en cualquier web hecha con Gutenberg.

Conclusión

Como ves, con Gutenberg y un simple bloque de HTML puedes conseguir resultados totalmente personalizados y profesionales sin necesidad de usar constructores visuales pesados o depender de decenas de plugins.

Este tipo de soluciones te permiten mantener tu web ligera, optimizada y 100% adaptada a tus necesidades, mientras aprovechas al máximo las capacidades nativas de WordPress.

Y si en algún momento necesitas llevar estos diseños un paso más allá y crear componentes a medida o integraciones personalizadas, puedes contactarme directamente y te ayudaré a desarrollar una solución que encaje a la perfección con tu proyecto.

Nos vemos en el siguiente tutorial. Un saludo.