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
Escritorio
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.
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.
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.
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.
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.
Agregar fila n. ° 1
Estructura de 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.
- 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)
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, vaya a la pestaña de diseño y cambie el color del divisor.
- Color: # 333333
Dimensionamiento
Modifique también la configuración de tamaño.
- Ancho: 48%
- Alineación del módulo: centro
Agregar fila n. ° 2
Estructura de columna
Continúe agregando otra fila a la sección usando 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
Agrega también un color de fondo a la segunda columna de la fila.
- Color de fondo de la columna 2: # ffd65b
Alineación
Luego, cambie la alineación de las filas.
- Alineación de filas: izquierda
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í
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)
Frontera
Agrega también algunas esquinas redondeadas a la fila.
- Arriba a la derecha: 10px
- Abajo a la derecha: 10px
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)
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;
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.
- 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)
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í
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. Ingrese alguna copia.
Alineación
Luego vaya a la pestaña de diseño y cambie la alineación del botón.
- 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
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.
Alineación
Luego, vaya a la pestaña de diseño y cambie la alineación de la imagen.
- Alineación de imagen: centro
Clonar fila n. ° 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
Eliminar 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 de columna para los módulos.
Cambiar icono en el módulo de imagen
Luego, cambie el icono en el Módulo de imagen.
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
Cambiar alineación de filas
A continuación, cambie la alineación de las filas.
- 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 usamos otro color de texto para el módulo de texto en la columna 2.
- Color del texto del encabezado 3: # 7b9710
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
Clonar ambas filas
Ahora que tenemos ambos lados de la fila, podemos clonarlos tantas veces como necesitemos y colocarlos en orden.
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
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
Cambiar icono en el módulo de imagen
Cambie el icono del Módulo de imagen por 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 colores de fondo de la nueva fila y columna.
- Tono: 309 grados
Cambiar el color del texto
También cambiaremos el color del texto.
- Color del texto del encabezado 3: # f862b0
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
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
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
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
A continuación, modifique el color del texto del módulo de imagen.
- Título 3 Color del texto: # 6287f9
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
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado.
Móvil
Escritorio
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!