En este tutorial premium lograrás crear un carrusel de logos en Divi sin ningún plugin, solo agregando algunos cachos de código en algunos módulos. Con esto lograrás un efecto dinámico en los logos de empresas que quieras representar en un sitio web para lograr un efecto de diseño potente y con movimiento.
Aunque Divi debería tener esta funcionalidad por defecto, con estos pequeños cambios tendremos la funcionalidad sin impactar tanto al rendimiento de la web, al mismo tiempo que el efecto será totalmente responsive.
En tutoriales futuros también tendremos este mismo efecto pero con plugins, para todos aquellos que no quieren saber nada de código, también tendremos esa opción, además con el plugin descargable. Es importante mencionar que este efecto no solo lo puedes aplicar para imágenes, sino también para módulos del blog, o básicamente cualquier módulo que quieras, haciendo sus adaptaciones correspondientes.
Al finalizar el vídeo tutorial y poner en practica lo aprendido podrás tener un resultado similar o mejor que este:
Como ves, es un efecto que hace que la web luzca bastante dinámica y le quite ese aspecto estático y aburrido, logrando que con este carrusel de logos en Divi se convierta en un elemento importante en el diseño de tu sitio web.
Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.
Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐
Comentarios
17 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Podrias incluir los logos para seguir el ejercicio por favor.
¡Listo! Los hemos agregado al final. Puedes descargarlos dándole clic derecho y guardar imagen. Gracias por la sugerencia.
Hago los mismos pasos, pero no se muestra nada. Sale una fila sin efectos. Debe ser por Wp Rocket?
Así es, puede ser una posibilidad del plugin de WP-Rocket, prueba desactivandolo a ver. Si desactivandolo sigue persistiendo el problema seguramente falta algún código en alguno de los pasos que realizaste. Es muy importante que insertar el Script en la pestaña del head en la configuración del tema divi, en la sección de integración.
Que tal juan no se si pudiste arreglar el problema pero puede ser que sea por el motivo de poner mal algún código por ejemplo yo puse mal esto «logo-items slider» ya que puse en el lugar donde no era y ya lo solucione. por si te paso algo igual.
Hola que tal, De casualidad se podra modificar las pestañas de deslizamiento para que no sean botones sino flechas? supongo que puede agregarse en una hoja de estilos desde la base CSS
Hola Christian ¿A que te refieres con las pestañas de deslizamiento? Este efecto no genera botones de deslizamiento como tal.
Hola hola linda comunidad, tengo una inquietud ¿ Si quiere realiza lo mismo para otro propósito seguiría los mismos pasos?
Si, si aplicas el CSS a otros módulos que tengan más o menos el mismo tamaño, si podría funcionar. Ya sería solo cuestión de probar.
Hola Jefferson,
He seguido cuidadosamente cada uno de los pasos y me salen las imágenes en una sola columna sin desplazamiento. He desactivado los plugins. ¿Qué otra acción puedo tomar para obtener el efecto de carrusel?
Gracias.
Que tal Luz. Es probable que la última actualización de Divi pueda tener algún conflicto con esta funcionalidad. Prueba corrigiendo algún posible error de acá siguiendo los pasos de esta guía: https://uxdivi.com/blog/updates/actualizacion-de-performance-de-divi-4-10-explicada
Hola una consulta el script primero (1.- colocar el siguiente código en la cabezera de Head en las opciones de Divi.) ¿porque es necesario? saludos
Que tal Roberto, porque el efecto de carrusel se genera a través de ese Script.
Hola a todos.
A mi se me visualiza sin problemas pero me queda en la parte de abajo un espacio muy incómodo que me hace que el diseño de la página se me descuadre.
He intentado quitar margen y ajustar al máximo los valores de separación en cada uno de los módulos pero no lo consigo reducir.
Hay alguna forma de hacerlo??
Gracias!
¿Probaste quitando la separación de la fila y la sección?
Si. Pero al colocar las dos secciones con los códigos del carrusel ese espacio queda ahí. No puedo ocultarlo por que si no el carrusel no funciona.
Vale, allí tendrías que quitar todo el «relleno o padding» de todo, tanto de las secciones, como filas, donde has colocado el código. Para ello basta con que pagas los valores de margen superior he inferior en 0px.