Mostrar los logos de tus clientes, marcas con las que trabajas o medios que te han mencionado es una de las formas más efectivas de generar confianza. Un carrusel de logos en movimiento automático llama la atención sin ocupar mucho espacio. Lo mejor es que no necesitas ningún plugin para lograrlo. En este tutorial te muestro cómo crear un carrusel de logos en Divi sin plugins, usando solo unos fragmentos de código que copias y pegas.
La idea es darte una opción ligera que no añada un plugin más a tu instalación de WordPress. Con un poco de HTML y CSS aplicados en tu tema Divi, vas a poder crear un carrusel de logos totalmente automático que se desplaza solo, dando esa sensación de movimiento continuo y profesional.
¿Por qué un carrusel de logos sin plugins?
Cada plugin que añades a WordPress suma peso y posibles conflictos. Para algo tan sencillo como un carrusel de logos, recurrir a código propio es más eficiente: mantienes tu sitio ligero y tienes control total sobre el comportamiento. Un carrusel de logos automático transmite confianza (prueba social) y se ve profesional en páginas de inicio, de servicios o "sobre nosotros". Si quieres dominar este tipo de soluciones con código en Divi, el Curso de Divi 5 completo te da las bases.
Paso 1: Prepara los logos
Reúne los logos que quieres mostrar y prepáralos para web: mismo formato (preferiblemente PNG con fondo transparente o SVG), tamaños consistentes, y optimizados para que no pesen. Que todos los logos tengan una altura similar es importante para que el carrusel se vea ordenado y equilibrado. Súbelos a tu biblioteca de medios de WordPress para tener sus URLs listas.
Consejo: unifica el tratamiento visual de los logos. Si vienen en colores muy distintos, considera mostrarlos en escala de grises (con un filtro CSS) para un look más uniforme y elegante, y opcionalmente que recuperen su color al pasar el cursor. Esa coherencia visual hace que el carrusel se vea mucho más profesional.
Paso 2: Inserta el HTML de los logos
Usa un módulo de código de Divi en la sección donde quieras el carrusel y pega el HTML que contiene los logos. La estructura es una lista de imágenes dentro de un contenedor que luego animaremos con CSS. En los recursos del tutorial dejo el HTML completo listo para que solo cambies las URLs de las imágenes por las de tus logos. La estructura está pensada para que la animación de desplazamiento continuo funcione de forma fluida.
🎓 ¿Quieres crear soluciones a medida con código en Divi?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde aprendes a combinar HTML, CSS y los módulos de Divi para construir exactamente lo que necesitas sin depender de plugins. Accede como suscriptor y diseña sin límites.
Paso 3: Aplica el CSS de la animación
El corazón del efecto es el CSS. Con una animación (usando @keyframes y transform: translateX) hacemos que la fila de logos se desplace de forma continua e infinita de un lado a otro. El truco para que el bucle sea perfecto (sin saltos) es duplicar los logos en el HTML y animar el contenedor de forma que cuando termina una secuencia, empieza la siguiente sin que se note el corte. El CSS controla la velocidad del desplazamiento, el espaciado entre logos y el comportamiento del bucle. En los recursos dejo el código completo.
Paso 4: Ajusta velocidad y responsive
Con el carrusel funcionando, ajusta la velocidad de la animación para que el movimiento sea cómodo de seguir — ni tan rápido que maree, ni tan lento que aburra. Revisa también cómo se ve en móvil: ajusta el tamaño de los logos y el espaciado para pantallas pequeñas con media queries. Un detalle útil es pausar la animación cuando el usuario pasa el cursor por encima, para que pueda fijarse en un logo concreto. Si te interesan otros tipos de carrusel, también está el tutorial de carrusel de productos con WooCommerce y Divi.
Consejo: mantén la animación suave y continua. Un carrusel de logos que se mueve de forma fluida transmite profesionalismo; uno que da saltos o tirones consigue el efecto contrario. Tómate el tiempo de ajustar la velocidad y el bucle hasta que el movimiento se sienta perfecto.
Preguntas frecuentes sobre el carrusel de logos en Divi
¿De verdad no necesito ningún plugin?
Correcto. Todo se hace con HTML y CSS dentro de un módulo de código de Divi. No añades ningún plugin, lo que mantiene tu sitio más ligero y bajo tu control total.
¿Necesito saber programar?
El HTML y el CSS están listos para copiar y pegar. Solo cambias las URLs de las imágenes por las de tus logos. Entender el código te ayuda a ajustar la velocidad y el diseño, pero no es indispensable para que funcione.
¿El carrusel se ve bien en móvil?
Sí, ajustando el tamaño de los logos y el espaciado con media queries para pantallas pequeñas. El desplazamiento automático funciona igual en móvil; solo conviene adaptar los tamaños para que se vea equilibrado.
¿Puedo añadir o quitar logos después?
Sí, solo editas el HTML del módulo de código para añadir o quitar imágenes. Recuerda mantener la estructura (incluida la duplicación de logos para el bucle continuo) para que la animación siga funcionando sin saltos.
Conclusión
Un carrusel de logos automático es una forma eficaz de transmitir confianza y prueba social, y con Divi lo creas sin añadir ningún plugin, solo con HTML y CSS. Prepara los logos con un tratamiento visual uniforme, inserta el HTML en un módulo de código, aplica el CSS de la animación continua y ajusta la velocidad y el responsive. El resultado es un carrusel ligero, fluido y profesional que refuerza la credibilidad de tu sitio sin penalizar el rendimiento.
🎓 ¿Quieres crear soluciones profesionales con código en Divi sin depender de plugins?
En uxdivi.com/cursos tienes el Curso de Divi 5 completo donde aprendes a combinar HTML, CSS y los módulos de Divi para construir cualquier funcionalidad a medida. Accede como suscriptor y domina Divi de verdad.
Recursos y descargas del tutorial
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.