🥇 Carrusel de Productos Woocommerce en Divi SIN PLUGINS (Carrusel / Slider)| En sólo 3 pasos!! 🥇
HTML-код
- Опубликовано: 21 окт 2024
- 🔴 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... 👈
Mi tienda de plantillas Divi:
victoraqui.com...
Mejor servicio de Hosting Wordpress:
bit.ly/fdsrhsed
Activación de licencias Divi para 1 sitio, a un precio accesible:
rapihosting.co...
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
@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!!!!
Este video es una joya, ahorro de dinero, y del tiempo de carga para la web. Muchas 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
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
Hola, empiezo a seguirte. Gracias
Si funciona! Gracias. Revisen el post que hubo una actualización
Buen video, directo a lo que se necesita.
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.
Muchas gracias por los vides. Te he descubierto hace poquito y me estás ayudando muchísimo
Muchas gracias por el aporte!!! abrazos!!!
¡Tú eres genial!
Víctor...es genial!
gran aporte Victor! ya lo probaré! gracias
Excelente video Victor, gracias
Me sirvió a la perfección lo recomiendo! ¡Muchas gracias!
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
Muchas gracias, vamos a probar :)
Hola Victor. En tu blog lo presentas de otra forma. Por ejemplo, no pones el codigo para sincronizar con la libreria Splide.js
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!
Excelente!!! quedó de maravilla, importante recordar lo de la actualización para que funcione!!
Hola Espectro Team, a qué actualización haces referencia? Saludos
excelente, la actualización funciona muy bien
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. ;)
Excelente... mil gracias...!!!
En el enlace del artículo se explica muy bien!
Muchas gracias!!
Lo voy aplicar! Gracias.
Muchas gracias...
Genial! Muchas gracias!! 😊
Excelente. Gracais
Muy bueno, gracias Víctor, un gran efecto! No sé qué tan pesada resultará la librería
Gracias por el video
¡Gracias!
muchas gracias
Saludos desde Cuba
Saludos desde Perú hermano ;)
@@victoraquino-paginaswebypr9782 Excelente tutorial herma 👏👏
Genial! Gracias!!
Excelente contenido 👍!!!
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 ?
Me encantó
excelente!!!
¡GENIAL!
Gracias!!
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
Gracias
Muy bueno
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
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 :)
Genialuy buena intención
Gracias bro
MUY BUENO
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.
hola que tal victor, buen video, solo que no me deja copiar el codigo desde tu pagina, hay alguna solución al respecto??
excelente video ,bien preciso de 10
Gracias amigo. Tu comentario es una gran ayuda para el canal :)
eres un crack!
Genial el tutorial, funciona perfectamente. Podrías decirme como camiar el estilo de las flechas del carrusel ?
Muchas gracias
Excellent.
Interesante!
Excelente!
¡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.
😉 Genial
Muy buen tutorial.
Muchas gracias por el apoyo amigo Yova 🙂
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.
se puede realizar en el tema Astra?
muy bien
eres un crack.
Quiero darle un efecto de arco a las imágenes como podría lograrlo?
esto funciona igual al usar elementor?
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
amigo hice tal cual y no me funciono, puede que tenga conflicto con algun plugin tengo l divi carroucel
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?
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??
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]
Buen vídeo.
Muchísimas Gracias por el apoyo amigo Luis 🌝
Tienes mas videos como estos?
hola, como lo hago para gutenberg?
Niceeee
Gracias por el apoyo amigo!
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
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
Genial
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
Yaba yaba Divi
Esa es la actitud Divilover...
Buenas, no me deja ver los codigos despues de poner el correo electronico. Espero su respuesta, Gracias
Hola amigo ya está funcionando.
ya no está en funcionamiento la página?
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
yea!
Dar like, suscríbirse.
Gracias, funciona bien en escritorio pero en móviles no se ve bien
Pudiste solucionarlo?
crack :)
No consigo darme de alta para poder viualizar los codigos.. no te funciona bien la web
NICE
😊
nice
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 me carga el link
Te he seguido paso a paso, pero no funciona el Slide
Cual es tu enlace?
A mi tampoco
@@lgsitiosweb A mi tampoco me funciono
@@ALE18361906 esperemos Víctor pueda revisar que pasa porque veo que nos pasa a varios
@@lgsitiosweb Chicos, primero agradecer lo activa que se ha vuelto ésta comunidad con éste tipo de retroalimentaciones que hacen que la mejora constante esté presente más que nunca. Es genial. El error estaba en el código Javascript, estaba asociado a una clase que había utilizado en las pruebas y que no llegué a cambiar (decía tienda2 en vez de vic-overlay, chanfle ). En resumen. Ya está corregido en el blog, listo para copiar y pegar. Nuevamente gracias por sus testeos, sin los cuales nunca nos hubiésemos dado cuenta!! Me anima a subir más contenido genial para ésta gran comunidad Divi. Coméntenme cómo les fue con el carrusel. Y sólo si les gusta el contenido, suscríbanse y denle like a los videos. Saludos!
😀
el link al articulo no funciona
todos los artículos no funcionan, además tienen buenos artículos que quisiera consumir
Lo siento, estaba usando mi web como laboratorio de científico loco testeando unas funciones geniales que creé para un nuevo video. Parece que hay un conflicto, nada del otro mundo. Más rato lo soluciono. Gracias por estar pendiente.
@@victoraquino-paginaswebypr9782 dale bro
Ya están en línea amigo. Nuevamente gracias por consumir mi contenido.