Cómo crear diseños móviles primero con Divi


Muchos sitios web reciben toneladas de visitantes desde dispositivos móviles. Esto lleva a la pregunta de si sus diseños están suficientemente optimizados para tamaños de pantalla más pequeños. Con Divi, un diseño creado para una experiencia de escritorio termina respondiendo instantáneamente también. Pero el hecho de que algo responda no significa que también esté optimizado.

Si los dispositivos móviles son su principal fuente de visitantes, realmente puede ayudar comenzar a diseñar y construir desde una perspectiva móvil en lugar de una de escritorio. En esta publicación, le mostraremos exactamente cómo hacerlo. Después de pasar por algunos consejos y trucos que debe tener en cuenta, también recrearemos un ejemplo desde cero que tenga en cuenta estos consejos.

¡Hagámoslo!

Avance

Como se mencionó anteriormente, comenzaremos repasando algunos consejos y trucos. Luego, recrearemos un ejemplo desde cero que hace uso de estos consejos. Echemos un vistazo al resultado.

Móvil

móvil primero

Escritorio

móvil primero

Acercarse

(incrustar) https://www.youtube.com/watch?v=58kkJiX36xA (/ incrustar)

Suscríbete a nuestro canal de Youtube

1. Cambie a la vista móvil justo después de agregar una nueva página

Lo primero que debe hacer, después de agregar una nueva página, es cambiar inmediatamente a la vista móvil. Esto le permitirá crear un diseño preciso y orientado a dispositivos móviles.

móvil primero

2. Habilite las opciones de respuesta para cada elemento de diseño y modifique primero los valores móviles

Una vez que comience a diseñar el diseño que desee, querrá habilitar las opciones de respuesta para los elementos de diseño. Esto incluye, pero no se limita al tamaño del texto, el relleno y el margen. Los primeros valores que agregará serán los valores para dispositivos móviles (en lugar de los de escritorio) para asegurarse de que el diseño esté optimizado para dispositivos móviles primero.

móvil primero

3. Elimine el espacio predeterminado entre columnas y agregue relleno manualmente si es necesario

Para crear más espacio horizontal, también se recomienda eliminar todo el relleno personalizado predeterminado entre columnas. Si es necesario, siempre puede agregar el relleno manualmente a cada columna o elemento de diseño y elegir por sí mismo cuánta distancia desea que haya.

móvil primero

4. Coloque 2 o 3 columnas una al lado de la otra para crear un diseño horizontal

La estructura receptiva en Divi está orientada verticalmente. Esto significa que los módulos y las columnas aparecen uno debajo del otro. Esto, sin embargo, requiere un desplazamiento más vertical. Dependiendo del diseño en el que esté trabajando, crear un flujo más horizontal realmente puede marcar la diferencia.

móvil primero

5. Modifique las vistas de escritorio y tableta en el camino o después

Aunque esté diseñando para un propósito de dispositivos móviles primero, es importante mantener las otras vistas en orden también. Las opciones receptivas que se incluyen dentro de cada elemento de diseño lo ayudarán a lograrlo. Puede optar por modificar estos valores posteriormente o durante todo el proceso de diseño.

¡Comencemos a recrear el ejemplo!

Agregar nueva sección

Abra una nueva página, cambie a la vista móvil y agregue una nueva sección para comenzar.

móvil primero

Agregar fila n. ° 1

Estructura de columna

Continúe agregando una nueva fila a su sección usando la siguiente estructura de columnas:

móvil primero

Agregar módulo de texto a la fila

Agregar contenido H2

Agregue un módulo de texto a la columna de su fila e ingrese algún contenido de título H2.

móvil primero

Configuración de texto H2

Luego, vaya a la configuración del texto del encabezado y cambie la apariencia del título.

  • Fuente del encabezado 2: Didact Gothic
  • Alineación del texto del título 2: centro
  • Color del texto del encabezado 2: # 333333
  • Encabezado 2 Tamaño del texto: 5.5vw (teléfono), 5vw (tableta), 2vw (escritorio)

móvil primero

Agregar módulo divisor a la fila

Visibilidad

Justo debajo del módulo de texto que ha agregado, continúe y agregue un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: Sí

móvil primero

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor.

  • Color: # 333333

móvil primero

Dimensionamiento

Modifique también la configuración de tamaño.

  • Ancho: 48%
  • Alineación del módulo: centro

móvil primero

Agregar fila n. ° 2

Estructura de columna

Continúe agregando otra fila a la sección usando la siguiente estructura de columnas:

móvil primero

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo a la fila.

  • Color de fondo: # ffe69e

móvil primero

Color de fondo de la columna 2

Agrega también un color de fondo a la segunda columna de la fila.

  • Color de fondo de la columna 2: # ffd65b

móvil primero

Alineación

Luego, cambie la alineación de las filas.

  • Alineación de filas: izquierda

móvil primero

Dimensionamiento

A continuación, abra la configuración de tamaño. Aquí, queremos eliminar todo el espacio predeterminado entre columnas. También usamos un ancho personalizado para la columna para que se vea bien en el escritorio.

  • Usar ancho personalizado: Sí
  • Unidad: PX
  • Ancho personalizado: 700px
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1
  • Ecualizar alturas de columna: Sí

móvil primero

Espaciado

Continúe yendo a la configuración de espaciado y agregue algunos valores de margen y relleno personalizados manualmente.

  • Margen superior: 5vw
  • Margen inferior: 5vw
  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Acolchado superior de la columna 1: 10vw (teléfono), 8vw (tableta), 4vw (escritorio)
  • Acolchado inferior de la columna 1: 10vw (teléfono), 8vw (tableta), 4vw (escritorio)

móvil primero

Frontera

Agrega también algunas esquinas redondeadas a la fila.

  • Arriba a la derecha: 10px
  • Abajo a la derecha: 10px

móvil primero

Sombra de la caja

Y dale una sombra de caja sutil también.

  • Fuerza de desenfoque de sombra de caja: 50px
  • Color de sombra: rgba (0,0,0,0.16)

móvil primero

CSS personalizado

Por último, pero no menos importante, colocaremos las columnas una al lado de la otra en tamaños de pantalla más pequeños para asegurarnos de aprovechar al máximo el espacio horizontal que tenemos. Vaya a la pestaña avanzada y agregue una sola línea de código CSS al elemento principal.

display: flex;

móvil primero

Agregar módulo de texto a la columna 1

Agregar contenido H3

¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto de título a la primera columna e ingrese algo de contenido H3.

móvil primero

Configuración de texto H3

Luego, vaya a la pestaña de diseño y modifique la configuración del texto del encabezado.

  • Fuente del título 3: Didact Gothic
  • Peso de fuente del encabezado 3: Negrita
  • Alineación del texto del título 3: centro
  • Color del texto del encabezado 3: # ee6f49
  • Encabezado 3 Tamaño del texto: 4vw (teléfono), 3vw (tableta), 1.5vw (escritorio)

móvil primero

Agregar módulo divisor a la columna 1

Visibilidad

A continuación, agregue un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: Sí

móvil primero

Color

Luego, cambia el color del divisor.

  • Color: #ffffff

móvil primero

Dimensionamiento

Junto con la configuración de tamaño.

  • Peso del divisor: 4px
  • Ancho: 30%
  • Alineación del módulo: centro

móvil primero

Espaciado

Agregue un margen superior personalizado al módulo también.

  • Margen superior: 4vw (teléfono), 2vw (tableta), 1.5vw (teléfono)

móvil primero

Agregar módulo de botones a la columna 1

Agregar copia

El siguiente y último módulo necesario en la primera columna es un módulo de botones. Ingrese alguna copia.

móvil primero

Alineación

Luego vaya a la pestaña de diseño y cambie la alineación del botón.

  • Alineación de botones: centro

móvil primero

Configuración de botones

Modifique también la apariencia del botón en la configuración del botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 3vw (teléfono), 2vw (tableta), 1.5vw (escritorio)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # ee6f49
  • Ancho del borde del botón: 0px
  • Fuente del botón: Didact Gothic
  • Peso de fuente: negrita

móvil primero

móvil primero

Agregar módulo de imagen a la columna 2

Cargar icono

El único módulo que necesitaremos en la columna 2 es un módulo de imagen. Puede usar cualquier imagen de su elección, pero si desea usar exactamente los mismos iconos que se usaron en este ejemplo, puede ir a la Paquete de diseño de tienda de muebles y descárgalos al final de la publicación.

móvil primero

Alineación

Luego, vaya a la pestaña de diseño y cambie la alineación de la imagen.

  • Alineación de imagen: centro

móvil primero

Clonar fila n. ° 2

Una vez que haya terminado de modificar la fila, puede continuar y clonarla.

móvil primero

Cambiar el color de fondo de la fila

Tendremos que hacer algunos cambios en este duplicado, comenzando con el color de fondo de la fila.

  • Color de fondo: # 8ee5cf

móvil primero

Eliminar el color de fondo de la columna 2

Continúe eliminando el color de fondo de la columna 2.

móvil primero

Agregar color de fondo de la columna 1

En su lugar, estamos agregando un color de fondo a la primera columna.

  • Color de fondo de la columna 1: # 47e5bd

móvil primero

Cambiar módulos en columnas

También estamos cambiando de columna para los módulos.

móvil primero

Cambiar icono en el módulo de imagen

Luego, cambie el icono en el Módulo de imagen.

móvil primero

Agregar filtro al módulo de imagen

Y haga que coincida con los nuevos colores de fondo de filas y columnas cambiando el tono en la configuración de los filtros.

  • Tono: 65 grados

móvil primero

Cambiar alineación de filas

A continuación, cambie la alineación de las filas.

  • Alineación de filas: derecha

móvil primero

Cambiar borde de fila

Junto con las esquinas redondeadas.

  • Arriba a la izquierda: 10px
  • Abajo a la izquierda: 10px

móvil primero

Cambiar el color del texto del módulo de texto en la columna 2

También usamos otro color de texto para el módulo de texto en la columna 2.

  • Color del texto del encabezado 3: # 7b9710

móvil primero

Cambiar el color de fondo del botón

Y usamos ese mismo color para el fondo del botón.

  • Color de fondo del botón: # 7b9710

móvil primero

Clonar ambas filas

Ahora que tenemos ambos lados de la fila, podemos clonarlos tantas veces como necesitemos y colocarlos en orden.

móvil primero

Modificar duplicado n. ° 1

Cambiar el color de fondo de la fila

Comenzaremos cambiando el color de fondo de la fila del primer duplicado.

  • Color de fondo: # ffc9cf

móvil primero

Cambiar el color de la columna

Luego, también modificaremos el color de fondo de la columna 2.

  • Color de fondo de la columna 2: # ffadb6

móvil primero

Cambiar icono en el módulo de imagen

Cambie el icono del Módulo de imagen por otro de su elección.

móvil primero

Agregar filtro al módulo de imagen

Y cambie el tono en la configuración de los filtros para que coincida con los colores de fondo de la nueva fila y columna.

  • Tono: 309 grados

móvil primero

Cambiar el color del texto

También cambiaremos el color del texto.

  • Color del texto del encabezado 3: # f862b0

móvil primero

Cambiar el color de fondo del botón

Y usamos ese mismo color para el fondo del botón.

  • Color de fondo del botón: # f862b0

móvil primero

Modificar duplicado n. ° 2

Cambiar el color de fondo de la fila

¡Pasemos al siguiente y último duplicado! Cambia el color de fondo de la fila.

  • Color de fondo: # b2c4ff

móvil primero

Cambiar el color de la columna

Haga lo mismo con el color de fondo de la columna 1.

  • Color de fondo de la columna 1: # 9eb4ff

móvil primero

Cambiar icono en el módulo de imagen

Luego, cambie el icono que se está utilizando.

móvil primero

Agregar filtro al módulo de imagen

Junto con el tono en la configuración de filtros del Módulo de imagen.

  • Tono: 221 grados

móvil primero

Cambiar el color del texto

A continuación, modifique el color del texto del módulo de imagen.

  • Título 3 Color del texto: # 6287f9

móvil primero

Cambiar el color de fondo del botón

Y use ese mismo color para el fondo del botón.

  • Color de fondo del botón: # 6287f9

móvil primero

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado.

Móvil

móvil primero

Escritorio

móvil primero

Pensamientos finales

Si su principal fuente de visitantes proviene de dispositivos móviles, es importante optimizar todo para ese tamaño de pantalla en particular. Con Divi, todo se vuelve instantáneo. Pero el hecho de que algo sea receptivo no significa que también esté optimizado para ese tamaño de pantalla en particular. Otra forma de abordar el diseño para dispositivos móviles es comenzar el diseño desde una perspectiva de dispositivos móviles primero. En esta publicación, compartimos algunos consejos y trucos sobre cómo hacerlo. Posteriormente, hemos recreado un ejemplo que cumple con estas reglas y nos permite crear un resultado sorprendente. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!