📲 Pon dos columnas o más en móvil o responsive con DIVI → Columnas adaptables a móviles en DIVI

[@cesar_boost]

Ya podéis comprar DIVI con descuento con este enlace: www.elegantthemes.com/affiliates/idevaffiliate.php?id=73931

[@matispotorno]

este video me encanta porque no tiene introducción ni pierde el tiempo con rellenos innecesarios, segundo 28 y ya esta editando! Seguí así!

[@cesar_boost]

Hola Matías muchas gracias por comentario, tomo nota para los próximos videos hacerlas igual de eficaces un saludo🤝🏼🤝🏼

[@GiulianaIppoliti]

Muchas gracias, ¡me ahorraste horas de trabajo! 🤟

[@WATGroup]

Craaaack. Millones de gracias. Varios videos y ninguno me resolvió el programa excepto tú. Ayer vi el video, lo puse en práctica y me funcionó, pero OJO, no me funcionó con 980px, me funcionó con 1080px. Hoy, martes, continué editando mi página y creo que lo estoy perfeccionando. Gracias crack!! 20.02.2024

[@cesar_boost]

Me alegro de que te haya servido!! miraré lo que me comentas para mejorarlo

[@Ale_Bedoya]

Uy pensé que no iba a funcionar, pero al 28/06/2024 funciona perfectamente, ¡muchas gracias!

[@cesar_boost]

me alegro ale gracias!!

[@variedadesdecolombia6037]

Genial, lo estábamos buscando para uno de nuestros sitios. Muchas gracias.

[@cesar_boost]

Que bueno!! me alegro que te haya servido!

[@mariafdac123]

muchas gracias, genial tu explicacion

[@cesar_boost]

De nada María, me alegro de que te haya servido

[@jorgeoum]

Amigo un millón de gracias, gracias por compartir tu conocimiento

[@cesar_boost]

Gracias Jorge 🚀

[@Jordi_SP]

llevaba 3 dias, si si, 3 dias de ansiedad haciendo y rehaciendo botones modificando manualmente columna, algun codigo css que encontraba por ahi, modificaciones con divi supreme y otros modulos, etc, etc... y no conseguia esto de manera eficiente, ya que dependiendo de la anchura del movil o tablet los botones se terminaban moviendo (jugando con fixed, absolute, etc me refiero) y ya estaba hasta pensando en rehacer toda la página para no tener que depender de estos botones que eran vitales para mi... con tu solución es tan sencillo y tan tan tan necesario para RESPONSIVE en moviles, que no entiendo como una empresa como DIVI no ha pensado en incluirlo en la pestaña "diseño"... MUCHAS GRACIAS.. El responsive es tan importante hoy en dia que casi todo el mundo mira mas el movil que un pc, que no entiendo como divi no empieza a añadir nuevas pestañas de diseño centradas en dispositivos móviles con opciones tan necesarias como el tratamiento de columnas que da muuuuuchos quebraderos de cabeza cuando se trata de que se vea bien desde el movil mas pequeño hasta el mas grande...

[@cesar_boost]

Hola Jorid, estoy totalmente deacuerdo contigo. De hecho en su día pase por lo mismo. Con respecto a divi, me parece que hay una manera en la cual puede dejarse esto por defecto. Es decir, que nada más utilizar el tema, se pueda poner en automico en responsive las 2 o 3 columnas. Tengo que seguir investigando sobre ello, si lo consigo te avisaré el primero. Muchas gracias por tu comentarío!!

[@noctisdefsoul5677]

@@cesar_boost Comento para obtener esa noticia tambien, muchas gracias.

[@cesar_boost]

@@noctisdefsoul5677 hola noctis, seguramente para la semana que viene este

[@ciclismodeltatienda]

Muchisimas gracias Cesar !!!.... simple y práctico !!.... Un abrazote desde Nogales, Sonora, México !!!

[@dianacarolinatorresmartine7766]

Porfin alguiqn repondiò a mi pregunta, y sin enredos.

[@cesar_boost]

Me alegro de que te haya servido Diana!!

[@dentromarketing]

Muchas gracias por este tutorial 👏🏾

[@cesar_boost]

Con mucho gusto!!

[@toursencancun]

Buenisimo!! mil gracias

[@cesar_boost]

Muchas gracias!!

[@jopime_guitar]

Muchas gracias, buenísimo el tutorial.

[@cesar_boost]

Me alegro de que te haya servido jopime

[@VictorSotelo]

Saludos, gracias, buen video... una pregunta, hice los pasos del video y en el movil se ve perfecto, pero en tablet se fatal ... estoy utilizando el estilo "encuatro" para unos modulos de iconos

[@rolandopaz8963]

Super, Gracias !!

[@cesar_boost]

Gracias Rolamdo

[@agustinspitaleri7769]

Data muy importante. Gracias

[@cesar_boost]

A la orden Agustin!!

[@digitalglobalcom6019]

Eres un pro hermano

[@cesar_yucra]

Muchas gracias espero que te haya servido!!

[@cesar_boost]

Muchas gracias espero que te haya servido!!

[@davidpadillaD]

Muchas gracias súper útil, me suscribo

[@cesar_boost]

A ti David !!

[@EduMorenoSEO]

Super útil, muchísimas gracias!

[@cesar_boost]

Me alegro que te haya servido Eduardo, un saludo !

[@danielgalichini6111]

¡Muy bueno hermano, lo que estaba buscando! Muchas gracias por compartir tu conocimiento! Saludos.-

[@cesar_boost]

Muchas gracias Daniel!! Espero que te haya servido

[@amandarebecacom]

Me encantó!

[@cesar_boost]

graciass

[@alexmunozcastaneda9200]

eres un crak!! mil gracias

[@cesar_boost]

gracias a tii

[@shaarsdesing4993]

Gracias men facil y al punto

[@cesar_boost]

Me alegro que te haya servido!! Un enorme saludo

[@G-AUSTIN]

Muchísimas gracias por el tutorial crack!

[@cesar_boost]

Me alegro de que te haya servido!!

[@DavidGómezJaime]

Gracias, me ha servido de muvha ayuda

[@cesar_boost]

Excelente!!!

[@christianacuna4639]

magestuoso.. muchas gracias amigo por este genial video. Saludos!!

[@cesar_boost]

A ti, me alegro de que te haya gustado

[@diegostell]

Genio! funcionó perfecto! Muchas gracias!

[@cesar_boost]

De nada!

[@angeloviera9837]

Muchas gracias, funciono perfecto!

[@cesar_boost]

Que bueno Angelo me alegro !!

[@boyhermeshn]

gracias, me sirvió el tutorial

[@NetworkerSupreme]

Muchas gracias! Me ayudó demasiado 🙌

[@cesar_boost]

Muchas de nadas !! 😁

[@robertoresendizroberto7113]

Muy buen video, solo una duda. Cambia algo si lo utilizo en el theme builder?

[@cesar_boost]

Hola Roberto, no cambia nada!! aunque todo es probar ya sabesss

[@yasielraimundoroquezapata9437]

Hola Cesar excelente Tutorial, te felicito. Tengo una pregunta, el código no se me activa en tablet, todos los productos en tablet se me van hacia la izquierda pero no se ponen en dos columnas como en celular, sabes porque pasa esto..??

[@veteporahi.viajes]

muchísimas gracias!! por fin un tutorial útil de verdad. Una duda, tengo un pie de página de 3 columnas (texto, texto y foto), me gustaría que en los dispositivos móviles solo aparezcan 2 de esas 3 columnas (solo una de texto y la foto) hay alguna forma de hacer eso?

[@cesar_boost]

Hola me alegro de que te haya servido, en este caso crea 2 filas que solo sean visitas para dispositivos móviles y una fila con 3 columnas solo visible para ordenadores

[@veteporahi.viajes]

@@cesar_boost muchísimas gracias! he usado este método en otras partes del blog pero en el pié de página no me deja duplicar y ocultar para pc o para movil🤔

[@druuk666]

Genial, gracias me sirvió bastante. Saludos =)

[@cesar_boost]

Gracias Luis! Si necesitas cualquier otra cosa que te pueda servir dimelo y asi me das ideas para hacer videos!

[@carwash6297]

@@cesar_boost Gracias Luis super ayuda

[@CarlosDuarte-sd3ye]

muchas gracias

[@cesar_boost]

De nada Carlos !!

[@TheGrandFuture]

Hola, nuevo Suscriptor!! Que version de Divi tengo que tener ???

[@cesar_boost]

Hola, gracias, la más actualizada siempre

[@PixelPalsyt]

gracias

[@cesar_boost]

a tii

[@florenciomondaca9010]

exelente gracias

[@cesar_boost]

Gracias a ti

[@soymas79_79]

Muy bien video, pero que pasa con la vista de tablet? lo acabo de hacer y en moviles funciona perfecto, pero en table se ven en una columna. Hay que copiar el mismo codigo y cambiarle los px del dispositivo?

[@kimberlyangulo459]

gracias por tu aporte, tendras un codigo para parallax en movil?

[@cesar_boost]

Hola no pero me lo apunto para próximos videoss

[@churromafiass]

Gracias crack !!!

[@cesar_boost]

De nada espero que te haya servido!!

[@planrandom]

Hola, muchisimas gracias =D era lo que estaba buscando. En caso de querer las dos columnas con distintas medidas como se haria? ejemplo, columna izquierda de 25% y la derecha de 75% de antemano agradezco tu tiempo en responder :)

[@cesar_boost]

Hola Rox, muy sencillo, para eso tendrías que hacer lo siguiente: 1) Elimina las Clases CSS. 2) En el módulo de cada uno vete a avanzado → Añadir CSS personalizado y pon en el módulo que quieres que tengas 25% de ancho, "width: 25%, !important;" y haz lo mismo para el otro modulo "width:75% !important; " OJO: Ten en cuenta las vistas de los dispositivos moviles y en tableta. Puede que solo quieres que tengan esos anchos en ordenador y en el resto no, para definir eso selecciona antes de poner los codigos, en donde quieres que esten o no. Espero haberte ayudado

[@bictorino2012]

@@cesar_boost lo intenté y no resultó, tendrás un ejemplo en algún video o sitio? :)

[@bictorino2012]

hola! muy bueno y claro. Tengo una duda más: si tengo 2 columnas en movil como puedo hacer para que la primera sea de 80% del tamaño y la segunda sea de 20% del tamaño del ancho total? (ejemplo: como una lista de precio, es decir , el producto o plato en 80% y el precio en 20%) ? Gracias de antemano.

[@cesar_boost]

Esto tendrias que personalizarlo directamente desde la propia fila, tendrias que irte a dentro de la fila, a cada columna particular, y luego ir a avanzado → código personalizado y aquí poner lo siguiente dependiendo de cada fila width: 80%, o width: 20%, dependiendo de cual sea la columna que quieres más ancha o menos. Y recuerdo haber indicado que solo se utilice el codigo en dispositivos moviles

[@bictorino2012]

@@cesar_boost gracias, probaré 🫶🏻

[@Miguelfica1]

Hola muy bueno el vídeo pero como podria hacer una columna al ancho 100 % y que haya otros dos abajo de 50%

[@cesar_boost]

Hola Miguel, simplemente, crea una columna y en ancho ponle 100%, y create otra abajo y ponle en codigo de endos e igual al ancho 100%

[@snakesebas1989]

Hola!!!, grandiosa función, pero en Tablet queda raro, se desorganiza.

[@cesar_boost]

Hola Sebastian!, gracias por comentario, entiendo, eso es porque quizas el ancho del código esta mucho pequeño y la pantalla de tu tablet es considerable. Prueba a subir el ancho del código para que trate a tu tablet como si fuera un movil.

[@crianzactiva2473]

Jo! a mí me d error, no me funciona. Me sale un aspa roja al en la fila de @media cuando añado el CSS, Qué puedo hacer?

[@cesar_boost]

Hola Crianzaactiva, ¿Te has fijado que por casualidad no tengas más código CSS puesto? ¿Algún plugin de divi como divi plus o algo así? También repasa que hayas puesto el ID en la fila, tiene que ser exactamente el mismo del código, sino también puedes comprobar la versión de divi, tiene que ser actualizado. Me dices si te funciona

[@dannnytv9666]

acabas de ayudarme con el peor dolor de cabeza de la semana. (L)

[@lilylgarza502]

Excelente video! Muchas gracias por compartir!! Tengo una duda, hay manera de hacerlo con varios modulos en las columnas? Tengo una fila que tiene tres columnas (cada columna con varios modulos hacia abajo) y al momento de ser un dispositivo móvil queda la columna 3 debajo de la 1 y queda vacío debajo de la columna 2. Y como son varios modulos en cada columna, el espacio que queda vacío es muy grande y no se ve estético. Hay manera en que esto pueda arreglarse? Saludos!!

[@cesar_boost]

Hola Lily, si claro, prueba a quitar los paddings de la fila y vete probando, una vez hayado cual es el padding, aplicado al resto de filas. Si no es el padding de la fila, mira a ver el de la columna dde la fila 3

[@mundowebpro8214]

Gracias por este recurso lo he usado varias veces, y va genial. pero me he encontrado un problema al aplicarlo en una plantilla creada con divi de un producto de woocommerce. Sigo todos los pasos, pero en la página del producto no se muestran las diferentes columnas. Hay alguna forma de solucionarlo?

[@cesar_boost]

Hola que tal, me alegro de que te haya servido, si te entiendo, ten en cuenta que este recurso es más para todos los modulos "nativos de divi", en cambio los modulos de woocommerce que tambien estan introducidos en divi, son más adicionales, entonces es dificil que se apliquen a ellos. Aunque creo recordar que el modulo tienda, si te fijas bien hay una opción de elegir la cantidad de columnas en las que mostrar los productos, deberia de mostrarse bien: Sino prueba a poner en la fila ó modulo de tienda lo siguiendo en el CSS del modulo. → display: flex !important; Ya me cuentas

[@pepigomez224]

Hola me encanta, pero tengo un problema que no se me activa. Gracias

[@cesar_boost]

Hola Pepi, comprueba el ancho del codigo CSS (puedes ir cambiandolo) y comprueba desde que dispositivos quieres que se vean las columnas.

[@rodrigosarras7081]

Y para que se vean centrados en dispositivos tablets y móviles?

[@cesar_boost]

Solamente alinea los elementos al centro en la fila y en los módulos o prueba en apartado de CSS: align-items: center !important;

[@EcosMusic]

Hola! Funciona igual con la sección de productos de wooccomerce ? necesito que en los móviles solo me aparezca una columna pero no me lo permite.

[@cesar_boost]

Hola, no, para los productos de WooCommerce, en el modulo de Tienda puedes configurarlo para que te aparezcan a 1 columna todos los productos. Aunque por conversion no te lo recomiendo. Es mejor tenerlos a 2 columnas con un ancho grande

[@micaelabelenramirez7565]

@@cesar_boost hola y como hago para hacer un ancho grande, por que a mi me figura las dos columnas pero las imagenes son muy chicas

[@cesar_boost]

@@micaelabelenramirez7565 Hola Micaela prueba en el ancho de la fila, poner ancho máximo 100% y en el ancho normal 95% o 100% me cuentas qué tal te va

[@JoseRodriguez-cc4du]

Podes hacer lo mismo pero en vez que se muestren las 3 columnas, que sea un slider.

[@cesar_boost]

Hola José, me lo apunto para el siguiente Video, muchas gracias !!

[@visahu1]

Hola, el ultimo elemento no se coloca en fila de a 2, sabrias porque??

[@cesar_boost]

Hola mira aver que no haya conflicto de códigos o que tengas el espacio/ separación de los elementos personalizados y no permitan funcionar al código

[@jeancondezo3523]

cuando hago de tres columnas y 4 filas, y le doy endos, si me sale perfecto al inicio en 2 columnas pero de la tercera columna, las 4 filas se van al final(hacia abajo) y en una sola columna, como puedo solucionarlo esto. gracias.

[@cesar_boost]

Mira cambiando el widh de la fila o cambiando el tamaño del codigo

[@sofyruano8745]

He usado la función "endos" y me quedan dos columnas arriba y una abajo. Cómo puedo hacer para que la tercera columna que está abajo quede en el centro de las de arriba?

[@cesar_boost]

Hola soy, no te he entendido bien, si pudieras reformularme la pñregunta te lo agradeceriaa

[@sofyruano8745]

@@cesar_boost en escritorio tengo 3 columnas y en móvil quiero dos columnas en la misma fila y la tercera columna se pone abajo. Con la clase css "endos" ya tengo ese efecto, lo que me falta y no se como hacer es que la tercera columna en móvil quede centrada. Gracias por tu ayuda

[@siltominstitute6024]

Si en las columnas hay imágenes, ¿cómo podemos conseguir que haya un espacio entre las columnas de imágenes en el móvil?

[@cesar_boost]

Hay que poner en el modulo de imagen, ir a separación en el padding: tanto por izquierda como por derecha añadele por ejemplo 2%. Prueba y me cuentas

[@luchoramirez1477]

cool

[@cesar_boost]

Muchas gracias

[@rogerpineiro1055]

Oye amigo una pregunta. Para configurar las columnas asi horizontal tipo mobil, qué tengo que hacer para poner los códigos css. O de donde los copio? Le agradecería su respuesta.

[@cesar_boost]

Hola Roger los tienes en la descripción del vídeo, simplemente copia el código CSS en la parte que indico el vídeo

[@rogerpineiro1055]

Gracias brother

[@javierarturomarquezrodrigu8223]

Y iPad?

[@cesar_boost]

vale igual

[@TheVeli69]

Pues a mi esto no me funciona