🥇 Carrusel de Productos Woocommerce en Divi SIN PLUGINS (Carrusel / Slider)| En sólo 3 pasos!! 🥇
HTML-код
- Опубликовано: 30 май 2021
- 🔴 Hoy crearemos algo aún más sorprendente y genial. Vamos a convertir el módulo tienda de Divi en un profesional carrusel/slider de productos. Lo mejor, sin plugins y en tres simples pasos...
Usaremos para ello un poco de css y javascript, pero tranquilo. Todo está listo para copiar pegar.
Hemos actualizado el artículo con una nueva librería llamada slick, el funcionamiento es similar, pero soluciona algunos errores que aparecían con splide. Puedes ver el nuevo tutorial completo, con los nuevos códigos para copiar y pegar, desde aquí:
👉 victoraqui.com/crear-carrusel... 👈
Mi tienda de plantillas Divi:
victoraqui.com/tienda
Mejor servicio de Hosting Wordpress:
bit.ly/fdsrhsed
Activación de licencias Divi para 1 sitio, a un precio accesible:
rapihosting.com/licencia-divi/
Adquiere licencias Divi para sitios ilimitados, desde la web Oficial al 10% de DESCUENTO!!!
bit.ly/Divi20des
-----------------------------------------------------------------------------------------------------------
🔴 ¿Deseas crear un carrusel pero de publicaciones del Blog?, Este otro video te va a encantar 🔴
🥇 • 🥇 Carrusel de Publicac... 🥇
☕ ¿Me invitas un cafecito? Así podré estar más despierto para crear más contenido gratuito como éste :P ☕
👉 bit.ly/3tn2QUQ 👈
Sigueme en mi Fanpage de Facebook:
👉 / victoraquinopagina 👈
Otros Trucos Divi que te van a encantar:
🔴 Efecto de Animación en elementos del menú móvil Divi!!!
👉 • 🥇Agregar animación de ... 👈
🔴 Cómo y Dónde agregar css Personalizado en Divi para cada situación!!!
👉 • 🥇Dónde agregar CSS per... 👈
🔴 Cómo aumentar tus ventas con insignias en productos y contadores atrás!!
👉 • 🔖 Cómo añadir Insignia... 👈
#Divi #Wocommerce #carrusel #TutorialDiviEspañol
Términos Relacionados
carrusel divi,carrusel dinámico divi,slider divi,carrusel módulo divi,slide divi,carrusel sin plugins,carrusel divi gratis,cómo hacer un carrusel en divi,cómo crear un carrusel en divi,plugin divi carousel,woocommerce product slider,woocommerce product carousel,slider for woocommerce,woocommerce advance slider,carrusel productos woocommerce,carrusel productos tienda,carrusel de productos en divi,divi carousel slider,divi product slider carousel
Este man es un artista. A la primera no me salió, pero al revisar el articulo, hay una actualización y ahi si funciono a la perfección. MIL GRACIAS
Si funciona! Gracias. Revisen el post que hubo una actualización
Hola, muchas gracias por este recurso!!!!! OJO sigan las instrucciones del Blog está actualizado y es el que es Efectivo. El video es demostrativo de una versión anterior por asi decirlo.
Este video es una joya, ahorro de dinero, y del tiempo de carga para la web. Muchas gracias!
excelente, la actualización funciona muy bien
@Victor Aquino, ha sido una experiencia fascinante seguir cada uno de tus tutoriales y los artículos. Son claros y precisos. Todo lo que he implementado me ha funcionado a la primera vez. MIL GRACIAS!!!!
Trabajo con Divi desde hace poco más de un año. He visto y leido toneladas de información sobre Divi Theme. Pero primera vez que un video es tan directo, rápido y sencillo de seguir. Gracias
Genial! Tío ostias este video estuvo buenisimo. rara vez me suscribo pero esto vale la pena, buen contenido preciso y a lo que uno busca sin palabreos. excelente!
Muchas gracias por los vides. Te he descubierto hace poquito y me estás ayudando muchísimo
Me sirvió a la perfección lo recomiendo! ¡Muchas gracias!
Excelente video Victor, gracias
Excelente... mil gracias...!!!
gran aporte Victor! ya lo probaré! gracias
¡Tú eres genial!
Muchas gracias por el aporte!!! abrazos!!!
Víctor...es genial!
Buen video, directo a lo que se necesita.
Muchas gracias, vamos a probar :)
Lo voy aplicar! Gracias.
Hola, empiezo a seguirte. Gracias
Espectacular, funcionó super bien!
Me alegra oír eso. Si deseas, no olvides confirmar tu correo en el mail que llegó a tu bandeja de entrada, para recibir nuevos trucos, códigos y más. ;)
Muchas gracias!!
Genial! Muchas gracias!! 😊
Excelente contenido 👍!!!
¡GENIAL!
Gracias por el video
Me encantó
Muy bueno, gracias Víctor, un gran efecto! No sé qué tan pesada resultará la librería
Excelente. Gracais
En el enlace del artículo se explica muy bien!
Genial! Gracias!!
Muchas gracias...
eres un crack!
muchas gracias
Excelente!!! quedó de maravilla, importante recordar lo de la actualización para que funcione!!
Hola Espectro Team, a qué actualización haces referencia? Saludos
Gracias 😀
¡Gracias!
Hola Victor. En tu blog lo presentas de otra forma. Por ejemplo, no pones el codigo para sincronizar con la libreria Splide.js
hoy lo voy a probar a ver que tal sale, desde ya gracias por el tutorial
Ok , ya me salió, es bastante sencillo aplicarlo con el artículo, saludos
Excelente!
Gracias!!
MUY BUENO
Excellent.
eres un crack.
Muy bueno
Gracias bro
Excelente tutorial ! Breve, claro, conciso y muy bien explicado, sin añadir información que no aporte nada a la explicación. Un 10 👍
Muchísimas Gracias por el apoyo 🙂
@@victoraquino-paginaswebypr9782 no dejaste eso enlaces mi estimado amigo para copiar el js lo que dice en minutos 1:30 espeor me envia los enlaces xd
@@WindChartDB Hola amigo, los códigos aparecen cuando dejas tu correo en el formulario. Si tienes dudas puedes escribirme al imbox: m.me/VictorAquinoPagina
Interesante!
Muy buen tutorial.
Muchas gracias por el apoyo amigo Yova 🙂
excelente video ,bien preciso de 10
Gracias amigo. Tu comentario es una gran ayuda para el canal :)
Genialuy buena intención
😉 Genial
Gracias
Muchas Gracias
Gracias a ti amigo por el apoyo!
Genial el tutorial, funciona perfectamente. Podrías decirme como camiar el estilo de las flechas del carrusel ?
Muchas gracias
gracias
Buen vídeo.
Muchísimas Gracias por el apoyo amigo Luis 🌝
Excelente video estimado, ya me suscribí y tienes tu like, solo una pregunta sin querer abusar de tu tiempo, sabes de que manera puedo mostrar los productos vistos (recent views) por los clientes?, te agradezco
Genial! Me ha funcionado súper bien. Una consulta, cómo le quitó velocidad a la transición? 🥲 O no tiene que ver con el código css?
Genial
Saludos desde Cuba
Saludos desde Perú hermano ;)
@@victoraquino-paginaswebypr9782 Excelente tutorial herma 👏👏
muy bien
Hola excelente explicacion, amigo esto aplica si quiero hacer el carrusel en una pagina normal en divi, asi como un carrusel de testimonio o de clientes ?
Niceeee
Gracias por el apoyo amigo!
¡Muy buenas!
Muchas gracias por el vídeo.
Una consulta. ¿Dónde habría que tocar para que las imágenes que contiene el slider se vean más grandes (ancho por alto) en las opciones de móvil, ordenador y tableta?
Gracias y saludos.
crack :)
yea!
Excelente video Victor, muchas gracias. Tengo una duda primero hay q tener woocomerce para que esto funcione?
Hola amigo Juan, en realidad la librería Splide puede adaptarse para crear sliders de cualquier elemento. Pero los códigos que muestro en el tutorial está adaptado para generar carruseles de productos, productos de woocommerce.
Yaba yaba Divi
Esa es la actitud Divilover...
NICE
nice
Dar like, suscríbirse.
Hola¡¡¡ Gracias por este video, sólo me gustaría saber como cambiar el tipo de texto a minusculas/mayusculas y centrarlo¡¡ Esta genial, llevaba 3 días buscando esto¡ Gracias
Hola Brenda, puedes cambiar esas configuraciones desde el mismo módulo tienda de divi
Esto se puede hacer con un modulo de productos únicamente o se puede hacer con cualquier módulo? Necesito hacer un carrusel/slider pero con logotipos de clientes, en lugar de productos.
😊
Hola, muchas gracias por el tutorial, pero mi menú movil y en tablet, no se centra y queda omo hueco a la izquerda hasta llegar a la hamburguesa y no se ve si no giras el móvil. En Escritorio se ve bien. ¿qué puedo hacer? Gracias
hola que tal victor, buen video, solo que no me deja copiar el codigo desde tu pagina, hay alguna solución al respecto??
Tienes mas videos como estos?
😀
se puede realizar en el tema Astra?
Quiero darle un efecto de arco a las imágenes como podría lograrlo?
esto funciona igual al usar elementor?
Hola, genial el video! me suscribi al newsletter pero igual no me muestra los codigos, por que?
Hola, escríbeme al imbox m.me/VictorAquinoPagina
Había un problema con el caché de la páginas. Vuelve a ingresar tu correo y ya debían aparecer. Igual cualquier inconveniente me puedes contactar :)
Hola, qué pena, tengo error cuando se cambia a formato móvil, quedan todos los productos pegados y no sé cómo separarlos, ya le puse la clase Gaona los breakpoint y sigue igual 🥺
Y funciona con hostinger??
hola, como lo hago para gutenberg?
amigo hice tal cual y no me funciono, puede que tenga conflicto con algun plugin tengo l divi carroucel
No me permite ver los codigos y al ingresar mi email señala Error de suscripción: The account is suspended. Ya lo he intentado con 4 email diferentes. Y pasa lo mismo
Gracias, funciona bien en escritorio pero en móviles no se ve bien
Pudiste solucionarlo?
Hemos actualizado el artículo con una nueva librería llamada slick, el funcionamiento es similar, pero soluciona algunos errores que aparecían con splide. Puedes ver el nuevo tutorial completo, con los nuevos códigos para copiar y pegar, desde aquí:
👉 victoraqui.com/crear-carrusel-productos-woocommerce-divi-sin-plugins/ 👈
Mi tienda de plantillas Divi:
victoraqui.com/tienda
Mejor servicio de Hosting Wordpress:
bit.ly/fdsrhsed
Activación de licencias Divi para 1 sitio, a un precio accesible:
rapihosting.com/licencia-divi/
Adquiere licencias Divi para sitios ilimitados, desde la web Oficial al 10% de DESCUENTO!!!
bit.ly/Divi20des
buenas bro no aparece la primera linea de codigo solo [html] [/html]
Hola Victor, con las últimas actualizaciones de Divi me dijó de funcionar en todas las páginas donde lo implementé, sabes que pudo haber pasado?
Hola amigo Leandro. Parece que la librería javascript Splide ha sido actualizada a su versión 4. Lo que involucra algunos cambios. Entre ellos, he notado que ahora es necesario que la clase splide sea parte del elemento raíz.
Lo que harás será agregar a cada módulo tienda (que hayas convertido en carrusel) la clase «splide» (adicional a la clase vic-splide que ya habías agregado), y así de fácil ya debería estar solucionado el problema. Gracias por informar del error, voy agregar ésta información al post. Saludos!
Gracias por responder, lo voy a agregar
Cuando uno adiciona el código, dónde lo puedo visualizar después para cambiar ajustes del mismo. Porfa ayuda!
Hola Any, puedes verlo en el mismo módulo código donde lo agregaste. Si tienes más dudas, puedes escribirme a mi fanpage: m.me/VictorAquinoPagina
Saludos
@@victoraquino-paginaswebypr9782 gracias. Cómo soy nueva en divi no me acordaba de los módulos
Hola Que tal, quiero hacer lo mismo pero para una galería de fotos, es posible, con el mismo código no vale
Hola amigo Marlon, últimamente estoy probando un plugin gratuito llamado divi torque, he visto que no afecta el rendimiento y agrega muchos modulos interesantes a divi, como por ejemplo el carrusel de imágenes. Podrías usar esa opción. Con la versión gratuita es más que suficiente.
@@victoraquino-paginaswebypr9782 gracias el dato, ya lo pruebo
buenas. Me ha surgido un problema. Lo he instalado todo como explicas en el video y copiado los códigos del blog pero en mi móvil un Samsung A52 no funciona el carrusel. Se ven los productos en fila de a uno en vertical todos. En cambio en el ordenador de sobremesa se ve todo perfecto. ¿A que se puede deber? Uso la función de "inspeccionar" de Chrome y ahí se ve con todos los modelos de teléfonos bien.
Mándame el link de tu web
@@victoraquino-paginaswebypr9782 todavia estamos en construcción. Soy muy novato en esto de la informatica asi que no tengas mucho en consideracion todos los fallos que hay seguro. El link es masquesuelas.es
@@MasQueSuelas Hola amigo, Lo que sucede es que tu configuración de Litespeed caché es muy estricta y no está dejando funcionar bien ciertas reglas css. En la página, no está cargando los estilos css que hemos importado para el carrusel. Por eso sale así. Y el error no sólo es en tu celular, también en el escritorio porque desde aquí se ve así en vertical, osea sin estilos para ordenarlos.
Si deseas escríbeme al imbox de mi fanpage para explicarte mejor. facebook.com/VictorAquinoPagina/
No consigo darme de alta para poder viualizar los codigos.. no te funciona bien la web
Buenas, no me deja ver los codigos despues de poner el correo electronico. Espero su respuesta, Gracias
Hola amigo ya está funcionando.
Alguien tiene el codigo que dice en el video
si me sale