Cómo crear modelos móviles por primera vez con Div

Muchos sitios web reciben toneladas de visitantes de dispositivos móviles. Esto lleva a la pregunta de si sus proyectos están optimizados o no para dimensiones de pantalla más pequeñas. Con Div, un diseño diseñado para una experiencia de escritorio se vuelve instantáneamente receptivo. Pero el hecho de que algo sea receptivo no significa que esté optimizado. Si su móvil es su principal fuente de visitantes, realmente puede ayudarlo a comenzar a diseñar y construir desde una perspectiva móvil en lugar de un escritorio. En esta publicación, le mostraremos exactamente cómo hacer esto. Después de haber pasado por algunos consejos y trucos que debe considerar, también recrearemos un ejemplo desde cero, que tiene en cuenta estos consejos.
¡Vamos a eso! Vista previa Como se mencionó anteriormente, comenzaremos pasando algunos consejos y trucos. Más tarde, recrearemos un ejemplo desde cero que use estos consejos. Echemos un vistazo al resultado. Móvil

Escritorio

Enfoque suscribirse a nuestro canal de YouTube 1. Vaya a su vista móvil inmediatamente después de agregar una nueva página. Lo primero que debe hacer, después de agregar una nueva página, es la transición inmediata a la visualización móvil. Esto le permitirá crear un diseño móvil y preciso.

2. Active las opciones de respuesta para cada elemento de diseño y primero cambie los valores móviles Una vez que comience a diseñar cualquier diseño que desee, querrá activar las opciones receptivas para los elementos de diseño. Esto incluye, pero no se limita al tamaño del texto, el relleno y el borde. Los primeros valores que agregará serán valores móviles (en lugar de escritorio) para asegurarse de que el diseño sea el primero para móviles. Elimine el espacio predeterminado entre las columnas y agregue manualmente el revestimiento si es necesario para crear más espacio horizontal, también se recomienda eliminar todos los socios personalizados predeterminados entre las columnas. Si es necesario, siempre puede agregar el revestimiento manualmente a cada columna o elemento de diseño y puede elegir tanto como desee.

4. Coloque 2 o 3 columnas una al lado de la otra para crear un diseño horizontal. La estructura receptiva de la división está orientada verticalmente. Esto significa que los módulos y columnas aparecen una vez más uno por el otro. Esto, sin embargo, requiere un desfile más vertical. Dependiendo del diseño en el que esté trabajando, crear un flujo más horizontal realmente puede marcar la diferencia.

5. Cambie las vistas para el escritorio y la tableta en el camino o después de eso, incluso si diseña para un propósito móvil, es importante mantener las otras vistas en orden. Las opciones receptivas que se incluyen en cada elemento de diseño lo ayudarán a lograr esto. Puede elegir cambiar estos valores más adelante o en todo el proceso de diseño. ¡Empecemos a recrear el ejemplo! Agregue una nueva sección Abra una nueva página, cambie a la visualización móvil y agregue una nueva sección para comenzar. Pague la estructura de la columna # 1 Continuar agregando una nueva línea a su sección utilizando la siguiente estructura de columna:

Agregue un módulo de texto en una fila Agregar contenido H2 Agregue un módulo de texto en su columna de línea e ingrese un contenido de título H2.

Configuración de texto H2 Luego acceda a la configuración del texto del encabezado y cambie el aspecto del título.

2 Sección de fuentes: Didact Gothic

Título 2 Alineación de texto: Centro
Rúbrica 2 Color de texto: # 333333
2 Tamaño de texto: 5.5VW (teléfono), 5VW (tableta), 2VW (escritorio)
Agregue el modo divisor en una fila de visibilidad justo debajo del módulo de texto que ha agregado, continúe y agregue un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

Colorear luego acceda a la pestaña de diseño y cambie el color del separador.
Color: # 333333

Dimensión Modifique la configuración de tamaño.
Ancho: 48%

Alineación del módulo: centro
Agregue la estructura de la columna de la fila # 2 Continuar agregando otra fila a la sección utilizando la siguiente estructura de columnas:
Color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo.

Color de fondo: # FFE69EColana 2 Color de fondo y un color de fondo a la segunda columna de la fila.

Columna 2 Color de fondo: # FFD65B
Alineación entonces, cambie la alineación de las filas.

Alineación de filas: a la izquierda
Dimensión Abra la configuración de tamaño adicional. Aquí, querremos eliminar todo el espacio predeterminado entre las columnas. También usamos el ancho de la columna personalizado para que se vea bien en el escritorio.

Use ancho personalizado: sí
Unidad: PX

Ancho personalizado: 700 PX
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
El espacio continúa accediendo a la configuración de separación y agregue manualmente algunos valores de margen personalizado y llenado.
Margen superior: 5VW
Margen inferior: 5VW

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Columna 1 Con revestimiento más alto: 10 VW (teléfono), 8VW (tableta), 4VW (escritorio)
Columna 1 Con revestimiento inferior: 10 VW (teléfono), 8VW (tableta), 4VW (escritorio)
Border agregue algunas esquinas redondeadas seguidas.
A la esquina superior derecha: 10 px
Abajo a la derecha: 10 PX

Box Shadow y darle una sombra sutil de caja.
Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0,16)

Por último, pero no menos importante, CSS no es último, colocaremos las columnas una al lado de la otra en dimensiones de pantalla más pequeñas 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.
Pantalla: Flex;
Agregue un módulo de texto en la columna 1 Agregar contenido H3 ¡Es hora de comenzar a agregar módulos! Agregue un título de texto del módulo a la primera columna e ingrese el contenido H3.

Configuración de texto H3 Luego acceda a la pestaña de diseño y cambie la configuración del texto del encabezado. Rúbrica 3 Fuente: Didact Gothic
Título 3 Fuente de peso: Bold

Título 3 Alineación de texto: Centro

Rúbrica 3 Color de texto: # EE6F49
Texto 3 Sección: 4VW (teléfono), 3VW (tableta), 1.5VW (escritorio)
Agregue un módulo divisor a la visibilidad de la columna 1 Agregue un módulo divisor adicional. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
Color luego cambie el color del separador.
Color: #ffffff

Dimensión con configuración de dimensionamiento.
Peso del divisor: 4 PX

Ancho: 30%
Alineación del módulo: centro


Espacio agregue algunos bordes superiores personalizados al modo.
Margen superior: 4VW (teléfono), 2VW (tableta), 1.5VW (teléfono)
Agregue el módulo de botón a la columna 1 Agregue una copia y el último módulo requerido en la primera columna hay un módulo de botón. Ingrese una copia.
Alineación luego acceda a la pestaña de diseño y cambie la alineación del botón.

Alineación de botones: centro
Configuración Modificar el botón y la apariencia del botón en la configuración del botón.

Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 3VW (teléfono), 2VW (tableta), 1.5VW (escritorio)
El color del texto del botón: #ffffff

El color de fondo del botón: # EE6F49
El ancho del nudo del botón: 0 PX
Botón de fuente: Didact Gothic
Peso de fuente: en negrita
Agregue el módulo de imagen al icono de carga de la columna 2 El único modo 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 han utilizado en este ejemplo, puede ir a la disposición de la tienda de muebles y puede descargarlos al final de la publicación. Alineación de imágenes.
Alineación de imágenes: centro
Clone Row # 2 Después de haber terminado de cambiar la fila, puede continuar el clon.
Cambie el color de fondo de la fila tendrá que hacer algunos cambios en este duplicado, comenzando con el color de fondo.


Color de fondo: # 8EE5CF

Elimine el color 2 del color del fondo Continuar eliminando el color de fondo de la columna 2.
Agregue el color de fondo de la columna 1 en su lugar, agregue un color de fondo a la primera columna.

Columna 1 Color de fondo: # 47E5BD

Cambie los módulos de columnas también, cambiamos columnas para módulos.
Cambie el icono al módulo de imagen y luego cambie el icono en el módulo de imagen.

Agregue un filtro al módulo de imagen y haga que coincida con los colores de fondo de la nueva fila y columna, cambiando el tono de la configuración del filtro.

Sombra: 65 grados
Cambiar la alineación de las filas Cambie la alineación de la línea.

Alineación de filas: correcto

Cambie el borde de la fila junto con las esquinas redondeadas.

A la parte superior izquierda: 10 PX
En la parte inferior izquierda: 10 px

Cambie 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.
Rúbrica 3 Color de texto: # 7b9710

Cambie el color de fondo del botón y use el mismo color para el fondo de fondo.
Clon en ambas líneas Ahora que tenemos ambos lados de la fila, podemos clonar ambos cuando lo necesitemos y podemos ordenarlos.
Cambie el duplicado # 1 Cambie el color de fondo de la fila Comenzaremos cambiando el color de fondo de la primera fila duplicada.

Color de fondo: # FFC9CF
Cambie el color de la columna entonces, también cambiaremos el color de fondo de la columna 2.

Columna 2 Color de fondo: # FFADB6
Cambie el icono al módulo de imagen Cambie el icono en el módulo de imagen con otro para elegir.

Agregue un filtro al módulo de imagen y cambie el tono de la configuración de los filtros para que coincida con los nuevos colores y columnas de fondo.

Sombra: 309 grados
Cambie el color del texto que cambiamos el color del texto.

Rúbrica 3 Color de texto: # F862B0
Cambie el color de fondo del botón y use el mismo color para el fondo de fondo.

El color de fondo del botón: # F862B0

¡Cambie el duplicado # 2 Cambie el color de fondo de la fila a la siguiente y última duplicado! Cambie el color de fondo de la fila.
Color de fondo: # B2C4FF

Cambiar el color de la columna Haga lo mismo para el color de fondo de la columna 1.
Columna 1 Color de fondo: # 9eb4ff

Cambie el icono al módulo de imagen y luego cambie el icono utilizado.
Agregue un filtro al módulo de imagen junto con el tono de la configuración del filtro en el módulo de imagen.

Sombra: 221 grados
Cambie el color del texto y luego cambie el color del texto del módulo de texto.

Rúbrica 3 Color de texto: # 6287F9
Cambie el color de fondo del botón y use el mismo color para el fondo de fondo.

Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado. Móvil

Escritorio
Pensamientos finales Si la principal fuente de visitantes proviene de dispositivos móviles, es importante optimizar todo para ese tamaño de pantalla. Con div, todo se vuelve instantáneamente receptivo. Pero el hecho de que algo sea receptivo no significa que esté optimizado para ese tamaño de pantalla. Otra forma de abordar el diseño para teléfonos móviles es comenzar su diseño desde una perspectiva móvil. En esta publicación, compartí algunos consejos y trucos sobre cómo hacer esto. Más tarde, recreamos un ejemplo que respeta 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.