Una de las cosas que menos me gusta de Divi son pequeños detalles que le faltan sobre todo en la versión móvil, le falta aún bastante por mejorar (aparte de temas de blog, menú superior… etc.), por suerte existen CSS y todo se puede arreglar..
El problema de las Filas y columnas en Divi …
Muchas veces queremos hacer un diseño donde se alteren en las columnas… dos columnas una con una imagen y otra con un texto… y en la siguiente fila al revés… un texto y luego una imagen…
En la versión PC queda bien, el problema viene con la versión responsive en el móvil, ya que pone por orden… ósea nos mostrar dos imágenes seguidas.. Mal hecho…
Como solucionarlo? Busca la fila que quieras cambiar el orden:
- Primero vete a la fila (No la sección… la filaaa) : FILA configuración > Avanzado y añade en clase Css: lo siguiente: custom_row
- Coge la primera columna y añade en clases de CSS: first-on-mobile
- Coge la segunda columna y añade en clases de css: second-on-mobile
Para arreglar esto debemos de añadir en el editor de código css él lo siguiente:
/*invertit*/
@media all and (max-width: 980px) {/*** wrap row in a flex box ***/.custom_row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-wrap: wrap; /* Safari 6.1+ */flex-wrap: wrap;}
/*** custom classes that will designate the order of columns in the flex box row ***/.first-on-mobile {-webkit-order: 1;order: 1;}
.second-on-mobile {-webkit-order: 2;order: 2;}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {margin-bottom: 30px;}}
Articulo By DIVI con amor
Excelente, muchas gracias.
Gracias¡¡¡
Hola! donde encuentro el editor de codigo css?
En Divi > Opciones del Tema > CSS personalizado
o sino en
Apariencia > Personalizar > Css Adidional
Pero hay una parte del codigo que es al editar la pagina en la fila o columna que quieras ordenar.
Muy interesante. Donde edito el código CSS para que se aplique
En Divi > Opciones del Tema > CSS personalizado
o sino en
Apariencia > Personalizar > Css Adidional
Pero hay una parte del codigo que es al editar la pagina en la fila o columna que quieras ordenar.
Muchas gracias por la ayuda
Gracias
Muchas gracias por el aporte, me ha sido súper útil en una de mis páginas. También he querido aplicarlo al footer pero no me funciona, hay que hacer algo distinto para modificar el footer?
Gracias
Hola Sara gracias por escribir… segurmante no valga ya que aqui se usan las clases de custom_row .. habria que ver que clases usa tu footer y cambiar esa opcion.. La mejor solucion es hacerlo de forma simple… puedes usar el ocultar columnas para movil y crearla de nuevo en version pc.. ? es lo mas simple