- 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.
