Como crear un carrusel de testimonios con divi y sin plugins

Hola a todos ! Soy Fer y esto es Divi Ui 😉

En esta ocasión quiero enseñarles a crear un elegante carrusel de testimonios con divi sin usar plugins.

Tener un carrusel de testimonios elegantes será una buena ayuda para convertir a los visitantes de tu sitio web en clientes potenciales.

No lo olvides, los testimonios de los clientes aumentan confianza y credibilidad 😉

Nota*. No necesariamente puedes hacer un testimonio, en realidad puedes usar cualquier módulo de divi y convertirlo en carrusel, solo debes seguir los mismos pasos de este vídeo pero cambiando el módulo de tu preferencia 🙂 ¡Empezemos!

1. Alinear verticalmente el módulo testimonios

Para ello usaremos los siguientes fragmentos de código, debes ir a avanzado > css personalizado del módulo. Copia estos códigos y pégalos de la siguiente manera.

float: none;
margin: 0 auto 20px;

Pégalo en > Descripción de opinión

margin: 0px!important;

2. Darle diseño al módulo

3. Activando la función carrusel de testimonios con divi

Estos códigos convertirán cualquier módulo en carrusel. Puedes mirar el video para saber en dónde y cómo colocarlos, porque también debemos colocar sus respectivas clases para que funcione

Primero añadimos la librería swiper.js

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

Luego inicializamos la librería usando el siguiente script.

<script>
jQuery(function($){
  // Insertar los bullets o paginación debajo del slider
  $( "<div class='swiper-pagination'></div>" ).insertAfter( ".ui-swiper .swiper-wrapper" ); 
});
</script>

<script>
  jQuery(document).ready(function( $ ) {
  var swiper = new Swiper(".ui-swiper", {
    slidesPerView: "auto",
    centeredSlides: true,
    spaceBetween: 25,
    loop: true,
    grabCursor: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      dynamicBullets: true,
    },
    navigation: {
      nextEl: '.ui-siguiente',
      prevEl: '.ui-anterior',
    },
    
    breakpoints:{
      0: {
        slidesPerView: 1,
        },
      768: {
          slidesPerView: 2,
          centeredSlides: false,
        },
      950: {
        slidesPerView: 3,
        },
      }
  });
});
    </script>

4. Añadimos los estilos css

Esto le dará estilos al módulo testimonio, a los bullets, y añadirá un lindo efecto a las tarjetas no activas del slider 😉

/*Cambiar icono testimonio*/
.et_pb_testimonial:before {
    left: initial;
    top: 22px!important;
    right: 20px;
}

/*Cambiar colores de los bullets*/
.swiper-pagination-bullet{
  background-color: #A2A5FC!important;
  opacity: 1;
}

.swiper-pagination-bullet-active{
  background-color: #3525E6!important;
}

@media (min-width: 981px) {
  /*tarjetas activas*/
  .ui-testimonio.swiper-slide-active  {
transform:  scale(1.1)!important;
transition: transform .4s ease;
opacity: 1!important;
}

/*tarjetas no activas*/
.ui-testimonio.swiper-slide {
opacity: 0.5;
transition: all 0.4s ease;
}
}

Y listo ! eso sería todo. Me pareció práctico y espero que a ti también, no dudes en escribirme si tienes alguna duda. Puedes descargarte esta layout en gumroad ! 😉

Ah ! casi lo olvido, seguro esto puede interesarte, "Cómo añadir una barra de promociones en divi y sin plugins". Ya que hablamos también de marketing, esta barra te ayudará si ofreces productos de afiliados, landing o en tu propio sitio web.

Descargar carrusel de testimonios gratis en gumroad