Como crear un carrusel de testimonios con divi y sin plugins

Volver al blog

Artículo

Comentarios 5

Fer Rivera

En este artículo

Cerrar video

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.

Código para alinear verticalmente el contenido del módulo recomendación de divi
Módulo recomendación de divi alineado verticalmente


Pégalo en > Retrato de opinión

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

Descargar gratis

5 Comentarios

  1. Yenci Silva

    Hola muy bueno el video con la explicación pero deseo que cada testimonio se mueva solo como podria hacerlo?

    Responder
  2. Yenci Silva

    Muchas gracias ya pude puse este codigo en codigo jQuery que usamos para inicializar la libreria
    autoplay: true,
    autoplaySpeed: 2000,

    Responder
    • Fer Rivera

      Excelente ! que buen trabajo, me alegra que lo hayas hecho tu misma ! muy bien !

      Perdonen que no esté tan tan activo pero algo grande está por venir! 😉 😉

      Responder
    • Alexander

      Gran aporte, sinceramente, justo vine a consultar eso. Muchísimas gracias.

      Responder
  3. Kiara Rodas

    gran blog y detalle, excelente tutorial. Gracias por compatir

    Responder

Enviar un comentario

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

Hola, soy Fer!

Por el momento tenemos los cupos llenos, gracias por tu comprensión.

Pero si necesitas algo urgente, escríbeme a hola@diviui.com