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

• 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 = $("https://www.aventura.digital/divi-seccion-testimonios/#" + $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.