Cómo Hacer una Sección de Testimonios de Clientes con Divi

En el video te muestro cómo hacer una sección de testimonios dentro de la home o cualquier página de tu sitio web WordPress que estés haciendo con Divi.
  1. Inicio
  2. Divi
  3. Guías Divi
  4. Cómo Hacer una Sección de Testimonios de Clientes con Divi

WordPress es Mejor con Divi

  • Cómo Instalar Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.
  • Módulo Anuncio. Vamos a usar el módulo de anuncio o blurb para mostrar a las personas que dejaron su testimonio.
  • Módulo Texto. Vamos a usar este módulo de Divi para mostrar el texto de los testimonios.
  • Módulo Código. Lo vamos a necesitar para insertar en la página el código que hace que todo funcione.

¿Cómo Hacer una Sección de Testimonios con Divi?

En el video te muestro cómo hacer con WordPress y Divi una sección de testimonios dentro de la home o cualquier página de tu sitio web que estés haciendo con Divi.

La particularidad de esta solución es que va mostrando el testimonio de cada persona a medida que pasamos por encima de la pestaña correspondiente.

La sección de testimonios de clientes que estamos haciendo con Divi tiene dos columnas.

En la columna 1 vamos a poner unos módulos de anuncio que muestran el nombre y la foto de la persona, junto con su ocupación. Uno debajo del otro.

En la columna 2 vamos a mostrar el texto del testimonio.

A medida que pasamos con el mouse por encima de los módulos que tienen el nombre y la foto en la columna 1, en la columna 2 aparece el texto del testimonio que corresponde a esa persona.

Cómo Hacer una Sección de Testimonios con Divi paso a paso

En el video explico paso a paso cómo construir con Divi la sección de testimonios de clientes y a continuación te dejo los IDs y códigos que utilizo en el video para que puedas simplemente copiar y pegarlos en tu Divi.

Estos son los ID y códigos que hay que poner en la pestaña Avanzado del módulo Anuncio de la columna 1.

  • ID CSS: testimonial-person-1
  • CSS Personalizado > Imagen:
width: 25% !important;
  • CSS Personalizado > Título:
margin-top: 25px;

 

Estos son los ID y códigos que hay que poner en la pestaña Avanzado del módulo Anuncio de la columna 2.

  • ID CSS: testimonial-copy-1
  • Clase CSS: show-testimonial (solo para el primer testimonio).

 

Este es el código CSS que vamos a pegar dentro del módulo de código de Divi.

<style>
.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}
</style>

 

Y debajo pegamos este código JQuery:

<script>
jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});
</script>

 

Dejame debajo un comentario contándome que te pareció esta posibilidad de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.

Jorge B.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

2 Comentarios

  1. Juan Carlos

    Muy bueno tu video y bien explicado, pero la tecnología actual te pide que todo lo que sea video para cualquier evento o negocio sea visto por tablet o celular en tu caso. tu video no permite que sea vea en celular ni en tablet. Podrias darnos un alcance al respecto. Gracias por la ayuda

    Responder
    • Jorge Baffa

      Hola Juan Carlos,
      Esto está pensado para pantallas de escritorio ya que en móviles no tiene sentido por el tamaño y disposición de la información (una cosa debajo de la otra). Para la vista móvil debes hacer otra cosa.

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *