Cómo Hacer una Sección de Testimonios de Clientes 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.

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 Baffa

Jorge Baffa

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

Todas las Guías

los Módulos 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.

0 comentarios

Enviar un comentario

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