Cómo presentar bellamente los servicios en dispositivos móviles con div (¡descarga gratuita!)

Si te enfocas en el diseño móvil, esta publicación puede ayudarte. Hemos creado dos hermosos ejemplos de ventanas de servicio que se ven muy bien en las dimensiones de pantalla más pequeñas. Además, estaban especialmente diseñados para verse mejor en el móvil, mientras mantienen un buen diseño en el escritorio. En esta publicación, le mostraremos paso a paso cómo recrearlos desde cero. Esperamos que este tutorial lo inspire a desatar su creatividad al diseñar secciones de servicio para cualquier sitio web que cree. Al final del tutorial, podrá descargar los archivos JSON de ambas secciones.
¡Vamos a eso! Vista previa antes de lanzar la cabeza en el tutorial, para echar un vistazo rápido a los dos ejemplos móviles que recrearemos. Ejemplo no. 1

Ejemplo no. 2

Comencemos a recrear el ejemplo # 1 suscribirnos a nuestro canal de YouTube

Agregue una nueva sección de fondo de gradiente Cree una nueva página y agregue una sección normal. Abra la configuración de la sección y agregue un fondo de gradiente.
Color 1: # FF0F83
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: izquierda
Posición inicial: 20%
Posición final: 20%

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Agregue el módulo de texto no. 1 Agregar contenido El primer módulo que necesitamos es un módulo de texto. Agregue contenido al cuadro de contenido.

Configuración de texto Entonces, acceda a la pestaña de diseño y cambie la configuración de texto.
Texto de fuente: Poppins
Texto de la fuente de peso: duro
Color de texto: #ffffff
Tamaño del texto: 20VW
La altura de la línea de texto: 1em

Fuerza de pelea de sombras de texto: 0.95em
Texto del color de la sombra: RGBA (0.0,0,0.13) Orientación del texto: Centro
Agregue el módulo de texto no. 2 Agregar contenido H2 Agregue otro módulo de texto justo debajo del anterior. Ingrese un contenido H2 de su elección.

Configuración de texto H2 Luego acceda a la pestaña de diseño y cambie la configuración de texto H2.

2 Sección de fuentes: Poppins
Título 2 Fuente de peso: Bold
Título 2 Alineación de texto: Centro
Rúbrica 2 Color de texto: # 000000
2 Tamaño de texto: 10 VW (teléfono y tableta), 10 VW (escritorio)
El espacio crea una superposición entre ambos módulos de texto utilizando un margen superior negativo.

Margen superior: -12VW (teléfono), -10VW (tableta), -8VW (escritorio)
Agregue la estructura de la columna de la fila # 2 Continuar agregando otra fila utilizando la siguiente estructura de columna:

El fondo de gradiente sin agregar módulos, abra la configuración de línea y agregue un fondo de gradiente.

Color 1: # 3239ff
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: derecha
Posición inicial: 30%
Posición final: 30%
Dimensión Vaya a la siguiente configuración de tamaño y permita que la fila ocupe todo el ancho de la pantalla.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Sparto agregue algunos valores de espaciado. Estos valores asegurarán que todo se vea bien en todo el tamaño de la pantalla.

ENLACIÓN IZQUIERDA: 0VW (teléfono y tableta), 15VW (escritorio)
Revelaje derecho: 0VW (teléfono y tableta), 15VW (escritorio)
CSS personalizado también, colocamos las dos columnas de lado a lado agregando una línea de código CSS a la pestaña avanzada. Pantalla: Flex;

Agregue un módulo de texto a la columna 1 Agregue el contenido y enlace H3 ¡Ahora podemos comenzar a agregar módulos! Agregue un módulo de texto a la primera columna con una copia H3 y un enlace. Luego vaya a la configuración de fondo del módulo y agregue un color de fondo.

Color de fondo: RGBA (255.255.255.0.95)

Configuración de texto Continúe cambiando la orientación del texto en la configuración de texto del módulo.
Orientación de texto: centro

Configuración del enlace de texto Modificar y configuración para el texto del enlace.
Fuente de enlace: Poppins

Linke Font Peso: Bold
Estilo de enlace de fuente: subrayado
Enlace subrayado de color: # 000000
Color de texto de enlace: # 000000
Tamaño del enlace de texto: 3VW (teléfono), 2VW (tableta), 1VW (escritorio)
Configuración de texto H3 junto con la configuración de texto H3.
3 Fuentes: Poppins

Fuente de peso de la rúbrica 3: ultra luz
Rúbrica 3 Color de texto: # 000000
Texto 3 Sección: 4VW (teléfono), 3VW (tableta), 2VW (escritorio)
Título 3 La altura de la línea de texto: 1.9em para una forma de círculo o 3EM para un ovalado
Espacio para crear una forma a partir de este módulo, agregaremos algunos márgenes personalizados y valores de llenado a la configuración de espaciado.
Margen izquierdo: 5VW

Margen derecho: -5VW
Revelaje superior: 17 VW (teléfono), 20VW (tableta), 15VW (escritorio)
Bajo forro: 17 VW (teléfono), 20VW (tableta), 15VW (escritorio)
Border convertimos el cuadrado en un círculo usando esquinas redondeadas que agregan “100VW” a cada esquina.
Box Shadow y para crear una cierta profundidad, agregaremos una sombra de una caja sutil.

Poder de poco claro de la sombra de la caja: 100 px

Shadow Color: RGBA (0.0,0,0.12)
Clone El módulo de texto 4 veces ahora, después de haber terminado de cambiar el primer módulo de texto, podemos ir más allá y clonarlo cuatro veces. Coloque dos de los duplicados en la segunda columna. Modifique el espaciado duplicado # 1 Continuar cambiando la configuración de espacio del primer duplicado.
Margen superior: 20 VW

Margen izquierdo: -5VW

Margen derecho: 5VW
Cambie el color de fondo duplicado # 2 Abra el segundo duplicado y cambie el color de fondo.
Color de fondo: RGBA (255,248.209.0.92)
La espartación modifica y se establece la espacios.

Margen superior: -5VW
Modificar duplicado no. 3 Color de fondo luego abra el tercer duplicado y cambie el color de fondo.

Color de fondo: RGBA (219.255.223.0.95)
Extienda y luego cambie la configuración de espaciado.

Margen superior: -5VW
Margen izquierdo: -5VW

Margen derecho: 5VW
Cambie el espacio duplicado # 4 abierto y el último duplicado y agregue un margen superior negativo para terminar el diseño.
Margen superior: -5VW
Empecemos a recrear el ejemplo # 2

¡Agregue una nueva sección, vamos al segundo ejemplo! Agregue una nueva sección a su página.
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Agregue un módulo de texto Agregar contenido H2 El primer módulo que necesitamos es un módulo de texto. Ingrese un contenido H2 de su elección.

Configuración de texto H2 Luego acceda a la pestaña de diseño y cambie la configuración de texto H2.

2 Sección de fuentes: Poppins

Título 2 Alineación de texto: Centro

Rúbrica 2 Color de texto: # 333333
2 Tamaño de texto: 7VW (teléfono y tableta), 4VW (escritorio)
Agregue un módulo de divisor de visibilidad Agregue un módulo divisor directamente debajo del módulo de texto. Asegúrese de que se active la opción “Muestra el divisor”. Cales, acceda a la pestaña de diseño y cambie el color del separador.
Color: # 333333
La dimensión está jugando con la configuración del dimensionamiento.

Peso del divisor: 5 PX

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

Agregue la estructura de la columna de la fila # 2 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:
El color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo blanco.
Color de fondo: #ffffff
Dimensión Vaya a la siguiente configuración de tamaño y permita que la fila ocupe todo el ancho de la pantalla.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Espaciado Agregue algunos valores de margen y llenado personalizados para optimizar el diseño para todos los tamaños de pantalla.
Margen superior: 2VW
Margen inferior: 2 VW
Revelaje superior: 10 VW (teléfono y tableta), 5VW (escritorio)

Bajo forro: 10 VW (teléfono y tableta), 5VW (escritorio)
ENLIZACIÓN IZQUIERDA: 2VW (teléfono y tableta), 20VW (escritorio)
Revelaje derecho: 2VW (teléfono y tableta), 20VW (escritorio)
Box Shadow también usamos un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,07)
CSS personalizado por último, pero no menos importante, coloque ambas columnas una al lado de la otra agregando una sola línea de código CSS al elemento principal en la pestaña avanzada. Pantalla: Flex;


Agregue los módulos de blurb a la columna 1 Seleccione el icono ¡Ahora podemos comenzar a agregar módulos! La única forma en que necesitamos en la columna 1 es un módulo de propaganda. Seleccione un icono de su elección. Figura de gradiente y luego, agregue un fondo de gradiente.
Color 1: # 7b28ef
Color 2: # 29B6E5

Dirección de gradiente: 142 grados

Configuración Configuración de icono modificado a continuación.

Icono de color: #ffffff
Colocando iconos: arriba
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 5VW (teléfono y tableta), 4VW (escritorio)

Dimensión y cambiar la configuración de tamaño.
Ancho: 48% (teléfono y tableta), 78% (escritorio)
El espacio también agregue algunos valores de margen y llenado personalizados para optimizar el diseño en todo el tamaño de la pantalla.
Margen superior: 2VW (teléfono)
Revelaje superior: 8.5VW (teléfono), 9VW (tableta), 6VW (escritorio)

Bajo forro: 3VW (teléfono), 5VW (tableta), 4VW (escritorio)
El borde convierte el módulo en un siguiente círculo agregando “100VW” a cada esquina de la configuración del borde.

Box Shadow Agregar un tono de caja.
Box Shadow Posición vertical: 10 PX
Poder de extender la sombra de la caja: 5 PX
Color de la sombra: RGBA (2,185.252.0.35)

Agregue el módulo de texto no. 1 en la columna 2 Agregar contenido H3 ¡Pasamos a la segunda columna! El primer módulo que necesitamos es un modo de texto. Agregar contenido H3.

Configuración de texto H3 Luego acceda a la pestaña de diseño y cambie la configuración de texto H3.
3 Fuentes: Poppins
Texto 3 Sección: 4VW (teléfono), 3VW (tableta), 2VW (escritorio)
El espacio agregue algunos valores de espaciado personalizados.

Margen superior: 0VW (teléfono), 3VW (tableta y escritorio)

Margen izquierdo: -20VW (teléfono y tableta), 0VW (escritorio) Margen recto: 0VW
Bajo forro: 2VW (teléfono y tableta), 1VW (escritorio)
ENLIZACIÓN IZQUIERDA: 5VW (teléfono y tableta), 2VW (escritorio)

Borde junto con un borde izquierdo.
Ancho del borde izquierdo: 5 PX
Color del borde izquierdo: # F4F4F4
Estilo de borde izquierdo: doble
Agregue el módulo divisor en la columna 2 muestra el divisor El segundo módulo que necesitamos es 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: # F4F4F4
Los estilos cambian el estilo del divisor a la siguiente configuración de estilos.
Estilo divisor: doble

La dimensión continúa cambiando las diferentes opciones en la configuración del tamaño.
Peso del divisor: 5 PX

Altura: 0px
Espacio y jugar con los valores de espaciado.

Margen izquierdo: -20VW (teléfono y tableta), 0VW (escritorio)
Agregue el módulo de texto no. 2 en la columna 2 agrega contenido La siguiente forma que necesitamos en la segunda columna es otro módulo de texto. Agregue un contenido de cuerpo a su elección.

Configuración de texto Entonces, acceda a la pestaña de diseño y cambie la configuración de texto.
Tamaño de texto: 2VW (teléfono), 1.7VW (tableta), 0.8VW (escritorio)
Orientación de texto: izquierda

Espacio de juego con los valores de espaciado.
Margen superior: 0VW

Margen izquierdo: -20VW (teléfono y tableta), 0VW (escritorio)

Margen derecho: 0 VW
Revelaje superior: 3VW (teléfono y tableta), 2VW (escritorio)
ENLIZACIÓN IZQUIERDA: 5VW (teléfono y tableta), 2VW (escritorio)

Borde y agregue un borde izquierdo.
Ancho del borde izquierdo: 5 PX
Color del borde izquierdo: # F4F4F4
Estilo de borde izquierdo: doble
Agregue un módulo de botón a la columna 2 Agregue una copia a continuación y el último módulo que necesitamos en la segunda columna es un módulo de botón. Agregue una copia. Botón luego, acceda a la pestaña de diseño y modifique la configuración del botón.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 2.5VW (teléfono), 2VW (tableta), 1VW (escritorio)
El color de texto del botón: # 4F77E8
El ancho del nudo del botón: 1 PX
El color del marco del botón: # 4F77E8

Botón Raza: 1 PX

Botón de fuente: Poppins
Difundir el cambio y los valores de espaciado.
Margen superior: 4VW (teléfono y tableta), 2VW (escritorio)
Margen izquierdo: -20VW (teléfono y tableta), 0VW (escritorio)
Clone Row dos veces, después de haber terminado de cambiar el giro y todos sus módulos, podemos clonarlo dos veces.
Cambie los íconos Asegúrese de cambiar los iconos para ambos módulos de propaganda.

Cambie los fondos de gradiente y cambie los fondos de gradiente.
Color 1: # FF2885

Color 2: # D6AC24
Color 1: # 70ff1e
Color 2: # 2699ff

Cambie los colores de las sombras coincidan con el color de la sombra de la caja con el nuevo fondo degradado.

Color de la sombra: RGBA (255,208,2,0.37)

Color de la sombra: RGBA (42.255.0.0.37)
Cambie el borde del botón y los colores del texto y complete el diseño cambiando el borde del botón y los colores del texto.
El color del texto del botón: # E96C54

El color del marco del botón: # E96C54
El color del texto del botón: # 4DCB93

El color del marco del botón: # 4DCB93
Descargue secciones de servicio móvil gratuitas para obtener su mano en las secciones de servicio móvil gratuitos, primero deberá descargarlas usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Vista previa ahora, que hemos seguido todos los pasos, para echar un vistazo final al resultado móvil de ambos ejemplos. Ejemplo no. 1
Ejemplo no. 2

Pensamientos finales En esta publicación, le mostré dos formas creativas sobre cómo presentar los servicios en dispositivos móviles utilizando solo las opciones incorporadas de Div. Esperamos que este enfoque móvil primero lo inspire a ser creativo y. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.