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 lo suficientemente optimizados para tamaños de pantalla más pequeños. Con Divi , un diseño creado para una experiencia de escritorio también responde instantáneamente. 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 repasar algunos consejos y trucos que debes tener en cuenta, también recrearemos un ejemplo desde cero que tiene 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

Escritorio

Acercarse

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.

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

Una vez que comience a diseñar cualquier diseño que esté buscando, querrá habilitar las opciones receptivas para los elementos de diseño. Esto incluye, entre otros, el tamaño del texto, el relleno y el margen. Los primeros valores que agregará serán los valores móviles (en lugar de los de escritorio) para asegurarse de que el diseño esté optimizado para dispositivos móviles 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 las 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.

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 más desplazamiento vertical. Dependiendo del diseño en el que esté trabajando, crear un flujo más horizontal realmente puede marcar la diferencia.

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

A pesar de que está diseñando para un primer propósito móvil, 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 después o durante 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.

Añadir Fila #1

Estructura de la columna

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

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.

Configuración de texto H2

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

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

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í

Color

Luego, ve a la pestaña de diseño y cambia el color del divisor.

  • Color: #333333

Dimensionamiento

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

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

Añadir Fila #2

Estructura de la columna

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

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

Color de fondo de la columna 2

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

  • Color de fondo de la columna 2: #ffd65b

Alineación

Luego, cambie la alineación de la fila.

  • Alineación de filas: Izquierda

Dimensionamiento

Abra la configuración de tamaño a continuación. Aquí, querremos eliminar todo el espacio predeterminado entre columnas. También estamos usando 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ón: 1
  • Igualar alturas de columna: Sí

Espaciado

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

  • Margen superior: 5vw
  • Margen inferior: 5vw
  • Relleno superior: 0px
  • Relleno 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)

Borde

Agregue algunas esquinas redondeadas a la fila también.

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

Sombra de la caja

Y dale una sutil sombra de caja también.

  • Fuerza de desenfoque de sombra de cuadro: 50px
  • Color de sombra: rgba (0,0,0,0,16)

CSS personalizado

Por último, pero no menos importante, vamos a colocar 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.

01
display: flex;

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.

Configuración de texto H3

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

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

Agregue el módulo divisor a la columna 1

Visibilidad

Agregue un módulo divisor a continuación. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

  • Mostrar divisor: Sí

Color

Luego, cambia el color del divisor.

  • Color: #ffffff

Dimensionamiento

Junto con la configuración de tamaño.

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

Espaciado

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

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

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. Introduzca alguna copia.

Alineación

Luego ve a la pestaña de diseño y cambia la alineación de los botones.

  • Alineación de botones: Centro

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

Agregar módulo de imagen a la columna 2

Subir 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 íconos que se usaron en este ejemplo, puede ir al Paquete de diseño de la tienda de muebles  y descargarlos al final de la publicación.

Alineación

Luego, ve a la pestaña de diseño y cambia la alineación de la imagen.

  • Alineación de imagen: Centro

Clonar Fila #2

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

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

Quitar el color de fondo de la columna 2

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

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

Cambiar módulos en columnas

También estamos cambiando columnas para los módulos.

Cambiar icono en el módulo de imagen

Luego, cambie el ícono en el Módulo de imagen.

Agregar filtro al módulo de imagen

Y haz que coincida con los nuevos colores de fondo de fila y columna cambiando el tono en la configuración de filtros.

  • Tono: 65 grados

Cambiar alineación de fila

Cambie la alineación de la fila a continuación.

  • Alineación de filas: Derecha

Cambiar borde de fila

Junto con las esquinas redondeadas.

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

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

También estamos usando otro color de texto para el Módulo de texto en la columna 2.

  • Título 3 Color del texto: #7b9710

Cambiar el color de fondo del botón

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

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

Clonar ambas filas

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

Modificar Duplicado #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

Cambiar color de columna

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

  • Color de fondo de la columna 2: #ffadb6

Cambiar icono en el módulo de imagen

Cambie el ícono en el Módulo de Imagen a otro de su elección.

Agregar filtro al módulo de imagen

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

  • Tono: 309 grados

Cambiar el color del texto

También estamos cambiando el color del texto.

  • Título 3 Color del texto: #f862b0

Cambiar el color de fondo del botón

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

  • Color de fondo del botón: #f862b0

Modificar Duplicado #2

Cambiar el color de fondo de la fila

¡Al próximo y último duplicado! Cambia el color de fondo de la fila.

  • Color de fondo: #b2c4ff

Cambiar color de columna

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

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

Cambiar icono en el módulo de imagen

Luego, cambie el icono que se está utilizando.

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

Cambiar el color del texto

Modifique el color del texto del Módulo de imagen a continuación.

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

Cambiar el color de fondo del botón

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

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

Avance

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

Móvil

Escritorio

Pensamientos finales

Si su fuente principal de visitantes proviene de dispositivos móviles, es importante optimizar todo para ese tamaño de pantalla en particular. Con Divi, todo responde instantáneamente. Pero el hecho de que algo responda 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 su diseño desde una perspectiva móvil primero. En esta publicación, hemos compartido 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!