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!
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 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!