Seleccionar página

Uno de los inconvenientes de la versión responsive de cualquier tema de WordPress en el móvil es que si en la versión PC pones 4 columnas se ven correctamente pero en la versión móvil o Tablet solo se verá una columna, lo cual en temas de diseño perjudica ya que vas a tener que bajar para ver todas las opciones.

Como crear columnas en la versión Móvil en DIVI

Existen varias formas de realizarlo aquí voy explicar la más simple creo yo, debemos de tener en cuenta estas opciones del CSS

  • display: inline-block;
  • max-width:50%;

Con estas líneas le indicamos que el texto este en línea con los otros bloques y que el tamaño de cada bloque (Ósea columna es del 50%)

  • En este caso la versión PC tiene 4 columnas y la móvil queremos de 2 líneas
  • SI la versión Pc tiene 6 columnas y el móvil queremos 3 (Seria 33%)

Caso práctico: Como poner 2 columnas en el móvil:

  • En divi creamos una fila con 4 columnas
  • Y en cada columna añadimos un cuadro o un box? o unos botones… lo que quieras. [ Yo en mi caso añadí un anuncio]
  • En la configuración de esa fila hacemos clic [ Ver imagen anterior]
  • Vamos a configuración de las filas en el último apartado ( Avanzado)
  • Añadimos en las siguientes líneas este código
    • Elemento principal de la columna 1
    • Elemento principal de la columna 2
    • Elemento principal de la columna 3
    • Elemento principal de la columna 4
      • display: inline-block;
        max-width:50%;

RESULTADO FINAL VERSION

Como crear en divi columnas

Si te gusta el tema de diseño web te recomiendo esta web del diseñador web Malaga

Articulos relacionados