Crear un carrusel de testimonios con el módulo deslizador de Divi
Un carrusel de testimonios en Divi
Para crear un carrusel de testimonios en Divi necesitaremos un módulo distinto al que proporciona Divi por defecto.
Sabemos que el tema Divi cuenta con un módulo específico para mostrar testimonios. Podemos añadir imágenes y configurarlas, nombre, cargo, etc. En el tema Divi lo encontrarás con el nombre de Recomendación, y en el tema Extra, como Testimonio. Sin embargo, no cuenta con ninguna opción que permita insertar estos testomonios dentro de un carrusel, esto es, varios testimonios accesibles desde un slider.
Así que vamos a usar otro módulo, para configurarlo de forma que al final tengamos un carrusel de testimonios en Divi sin tener que usar una línea de código.
Bajo estas líneas puedes ver cómo va a quedar nuestro carrusel una vez hayamos terminado la práctica.
Olga Martínez de la Fuente
Gerente Aulamedia SL
Me han parecido de gran utilidad estos tutoriales. Por eso voy a compartir todo lo que pueda y a pasarme todos los días para ver si hay algún nuevo tutorial. ¡Gracias!
Oscar Serrano Pérez
Diseñador gráfico
Fantástico, maravilloso, fenomenal, no tengo palabras. ¡Cuánta profesionalidad! Lo nunca visto. Es mejor aun que cuando tuve los gemelos, soberbio, indescriptible…
Pedro I el Calvo
Diseñador gráfico
Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados.
Crear y configurar el módulo deslizador
Creamos una nueva página o entrada y activamos el constructor Divi.
Vamos a crear nuestro carrusel en una sola columna, así que elegimos una columna cuando pulsemos sobre insertar columna(s) y acto seguido en insertar módulo(s). Hacemos clic en el módulo deslizador y se abrirán las opciones de configuración del módulo.
Como ya sabrás, al abrir los ajustes tenemos tres pestañas, Contenido, diseño y avanzado. Pues en la pestaña Contenido, antes de crear las diaposivas que contendrán los testimonios, vamos a configurar el fondo del módulo común para todas las diapositivas. Vamos a usar el mismo color de fondo, al que le vamos a añadir una imagen de un carácter de comilla. Y será el mismo fondo para las tres diapositivas que agregaremos. Si quieres que cada diapositiva tenga distinto color o imagen tendrás que configurarlo dentro de los ajustes da cada diapositiva.
Así que pulsamos en fondo y en la primera pestaña, color, hacemos clic e introducimos el color que queramos como fondo. En nuestra propuesta hemos usado un azul: #4aacf.
La segunda pestaña de los ajustes de fondo es para degradados, que no vamos a tocar.
La tercera es para añadir imágenes como fondo, así que añadimos las comillas. Si no tienes tus propias imágenes puedes usar las de nuestro tutorial. Descárgatelas pulsando el siguiente link: practica-carrusel-testimonios. La imagen del carácter es una comilla semitransparente que combinará bien con cualquier color de fondo. En tamaño marca ajustar y en posición centrada a la derecha. Tienes una captura abajo para orientarte.
Ya tenemos nuestro fondo listo. Ahora sí, creamos la primera diapositiva.
Crear los testimonios
Aunque este módulo viene preparado para añadir un título y una imagen de forma estándar, no lo vamos a hacer. Quedarán los elementos demasiado separados, como ves en la captura inferior.
Vamos a poner toda la información en contenido básico (texto normal, como en los módulos de textos). Esto nos va a proporcionar más control sobre los elementos que vamos a incorporar: nombre, cargo que ocupa en su empresa y contenido de la reseña o recomendación que nos hace. Podemos jugar con distintos encabezados para nuestro diseño. Yo he usado h2 para el nombre, h5 para el cargo y párrafo para la recomendación propiamente dicha. El tamaño de h2 y h5 es el predefinido en el tema y para el parrafo hemos usado 15 puntos. Tu ajusta tu texto como más te guste. También he cambiado el color de los textos del nombre y cargo. Azul claro para la primera y amarillo para la segunda opción. El cuerpo (el testimonio) lo he puesto claro (blanco).
Cuando tengas el texto listo, pulsa en añadir medio y busca en tu biblioteca la primera foto o súbela si no lo has hecho aún. Ajusta la alineación a la izquierda para que se posicione a la izquierda del texto.
Ya tenemos el primer testimonio configurado. Ahora solo tienes que duplicar esta diapositiva y sustituir texto e imágenes.
Últimos ajustes
Finalmente, si nos parece que el módulo tiene demasiada altura, puedes ajustar la separación > relleno personalizado en la pestaña diseño, módulo general (fuera de la diapositivas), y pon 100 px en superior y base. Si quieres que la animación sea automática si no se pulsa en un tiempo, actívalo en esta misma pestaña abajo del todo.
Y listo, tienes un vídeo como siempre, por si te has perdido en algún momento. Y ya sabes, Si te ha sido útil, comparte.
