Si se está enfocando en diseños para dispositivos móviles, esta publicación podría ayudarlo. Creamos dos hermosos ejemplos de exhibiciones de servicios que se ven geniales en tamaños de pantalla más pequeños. Más aún, fueron diseñados específicamente para lucir lo mejor posible en dispositivos móviles sin dejar de mantener 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 dar rienda suelta a su creatividad al diseñar secciones de servicios para cualquier sitio web que cree. Al final del tutorial, también podrá descargar los archivos JSON de ambas secciones.
¡Hagámoslo!
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los dos ejemplos móviles que recrearemos.
Ejemplo 1
Ejemplo # 2
Comencemos a recrear el ejemplo n. ° 1
(incrustar) https://www.youtube.com/watch?v=xx0E0SnKTos (/ incrustar)
Suscríbete a nuestro canal de Youtube
Agregar nueva sección
Fondo degradado
Crea una nueva página y agrégale una sección regular. Abra la configuración de la sección y agregue un fondo degradado.
- Color 1: # ff0f83
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: izquierda
- Posición inicial: 20%
- Posición final: 20%
Agregar fila n. ° 1
Estructura de columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Agregar módulo de texto n. ° 1
Agregar contenido
El primer módulo que necesitaremos es un módulo de texto. Agregue contenido al cuadro de contenido.
Configuración de texto
Luego, vaya a la pestaña de diseño y modifique la configuración del texto.
- Fuente de texto: Poppins
- Peso de la fuente del texto: Pesado
- Color del texto: #ffffff
- Tamaño del texto: 20vw
- Altura de la línea de texto: 1em
- Intensidad del desenfoque de la sombra del texto: 0.95em
- Color de la sombra del texto: rgba (0,0,0,0.13)
- Orientación del texto: centro
Agregar módulo de texto n. ° 2
Agregar contenido H2
Agregue otro módulo de texto justo debajo del anterior. Ingrese algún contenido H2 de su elección.
Configuración de texto H2
Luego, vaya a la pestaña de diseño y modifique la configuración del texto H2.
- Fuente del título 2: Poppins
- Peso de fuente del encabezado 2: Negrita
- Alineación del texto del título 2: centro
- Color del texto del encabezado 2: # 000000
- Encabezado 2 Tamaño del texto: 10vw (teléfono y tableta), 10vw (escritorio)
Espaciado
Cree una superposición entre ambos módulos de texto utilizando un margen superior negativo.
- Margen superior: -12vw (teléfono), -10vw (tableta), -8vw (escritorio)
Agregar fila n. ° 2
Estructura de columna
Continúe agregando otra fila usando la siguiente estructura de columnas:
Fondo degradado
Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un fondo degradado.
- Color 1: # 3239ff
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: derecha
- Posición inicial: 30%
- Posición final: 30%
Dimensionamiento
Vaya a la configuración de tamaño a continuación y permita que la fila ocupe todo el ancho de la pantalla.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canal: 1
Espaciado
Agregue también algunos valores de espaciado. Estos valores asegurarán que todo se vea bien en todos los tamaños de pantalla.
- Acolchado izquierdo: 0vw (teléfono y tableta), 15vw (escritorio)
- Relleno derecho: 0vw (teléfono y tableta), 15vw (escritorio)
CSS personalizado
También colocamos las dos columnas una al lado de la otra agregando una línea de código CSS en la pestaña avanzada.
display: flex;
Agregar módulo de texto a la columna 1
Agregar contenido de enlace y 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.
Color de fondo
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 del texto: centro
Configuración del texto del enlace
Modifique también la configuración del texto del enlace.
- Fuente de enlace: Poppins
- Peso de fuente Linke: Negrita
- Estilo de fuente de enlace: subrayado
- Color del subrayado del enlace: # 000000
- Color del texto del enlace: # 000000
- Tamaño del texto del enlace: 3vw (teléfono), 2vw (tableta), 1vw (escritorio)
Configuración de texto H3
Junto con la configuración de texto H3.
- Fuente del título 3: Poppins
- Peso de fuente del encabezado 3: ultraligero
- Título 3 Color del texto: # 000000
- Encabezado 3 Tamaño del texto: 4vw (teléfono), 3vw (tableta), 2vw (escritorio)
- Altura de la línea de texto del encabezado 3: 1.9em para una forma circular o 3em para una forma ovalada
Espaciado
Para crear una forma a partir de este módulo, agregaremos algunos valores de margen y relleno personalizados en la configuración de espaciado.
- Margen izquierdo: 5vw
- Margen derecho: -5vw
- Acolchado superior: 17vw (teléfono), 20vw (tableta), 15vw (escritorio)
- Acolchado inferior: 17vw (teléfono), 20vw (tableta), 15vw (escritorio)
Frontera
Estamos convirtiendo el cuadrado en un círculo usando esquinas redondeadas agregando "100vw" a cada una de las esquinas.
Sombra de la caja
Y para crear algo de profundidad, agregaremos una sombra de cuadro sutil.
- Fuerza de desenfoque de sombra de caja: 100px
- Color de sombra: rgba (0,0,0,0.12)
Clonar el módulo de texto 4 veces
Ahora que hemos terminado de modificar el primer módulo de texto, podemos seguir adelante y clonarlo cuatro veces. Coloque dos de los duplicados en la segunda columna.
Modificar duplicado n. ° 1
Espaciado
Continúe modificando la configuración de espaciado del primer duplicado.
- Margen superior: 20vw
- Margen izquierdo: -5vw
- Margen derecho: 5vw
Modificar duplicado n. ° 2
Color de fondo
Abra el segundo duplicado a continuación y cambie el color de fondo.
- Color de fondo: rgba (255,248,209,0.92)
Espaciado
Modifique también la configuración de espaciado.
- Margen superior: -5vw
Modificar duplicado n. ° 3
Color de fondo
Luego, abra el tercer duplicado y cambie el color de fondo.
- Color de fondo: rgba (219,255,223,0.95)
Espaciado
A continuación, modifique la configuración de espaciado.
- Margen superior: -5vw
- Margen izquierdo: -5vw
- Margen derecho: 5vw
Modificar duplicado n. ° 4
Espaciado
Abra también el último duplicado y agregue un margen superior negativo para terminar el diseño.
- Margen superior: -5vw
Comencemos a recrear el ejemplo n. ° 2
Agregar nueva sección
¡Pasemos al segundo ejemplo! Agrega una nueva sección a tu página.
Agregar fila n. ° 1
Estructura de columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Agregar módulo de texto
Agregar contenido H2
El primer módulo que necesitaremos es un módulo de texto. Ingrese algún contenido H2 de su elección.
Configuración de texto H2
Luego, vaya a la pestaña de diseño y modifique la configuración del texto H2.
- Fuente del título 2: Poppins
- Alineación del texto del título 2: centro
- Color del texto del encabezado 2: # 333333
- Encabezado 2 Tamaño del texto: 7vw (teléfono y tableta), 4vw (escritorio)
Agregar módulo divisor
Visibilidad
Agregue un módulo divisor justo debajo del módulo de texto. Asegúrese de que la opción "Mostrar divisor" esté habilitada.
Color
Luego, vaya a la pestaña de diseño y modifique el color del divisor.
- Color: # 333333
Dimensionamiento
Juega con la configuración de tamaño también.
- Peso del divisor: 5px
- Ancho: 12%
- Alineación del módulo: centro
Agregar fila n. ° 2
Estructura de columna
Continúe agregando una nueva 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 fila y agregue un color de fondo blanco.
- Color de fondo: #ffffff
Dimensionamiento
Vaya a la configuración de tamaño a continuación y permita que la fila ocupe todo el ancho de la pantalla.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canal: 1
Espaciado
Agregue algunos valores personalizados de margen y relleno a continuación para optimizar el diseño para todos los tamaños de pantalla.
- Margen superior: 2vw
- Margen inferior: 2vw
- Acolchado superior: 10vw (teléfono y tableta), 5vw (escritorio)
- Acolchado inferior: 10vw (teléfono y tableta), 5vw (escritorio)
- Acolchado izquierdo: 2vw (teléfono y tableta), 20vw (escritorio)
- Relleno derecho: 2vw (teléfono y tableta), 20vw (escritorio)
Sombra de la caja
También usamos una sombra de caja sutil.
- Fuerza de desenfoque de sombra de caja: 50px
- Color de sombra: rgba (0,0,0,0.07)
CSS personalizado
Por último, pero no menos importante, coloque ambas columnas una al lado de la otra agregando una única línea de código CSS al elemento principal en la pestaña avanzada.
display: flex;
Agregar módulo Blurb a la columna 1
Seleccionar icono
¡Ahora podemos comenzar a agregar módulos! El único módulo que necesitamos en la columna 1 es un módulo Blurb. Seleccione un icono de su elección.
Fondo degradado
Luego, agregue un fondo degradado.
- Color 1: # 7b28ef
- Color 2: # 29b6e5
- Dirección del gradiente: 142 grados
Configuración de iconos
A continuación, modifique la configuración del icono.
- Color del icono: #ffffff
- Ubicación del icono: Arriba
- Usar tamaño de fuente del icono: Sí
- Tamaño de fuente del icono: 5vw (teléfono y tableta), 4vw (escritorio)
Dimensionamiento
Y cambie la configuración de tamaño.
- Ancho: 48% (teléfono y tableta), 78% (escritorio)
Espaciado
También estamos agregando algunos valores de margen y relleno personalizados para optimizar el diseño en todos los tamaños de pantalla.
- Margen superior: 2vw (teléfono)
- Acolchado superior: 8.5vw (teléfono), 9vw (tableta), 6vw (escritorio)
- Acolchado inferior: 3vw (teléfono), 5vw (tableta), 4vw (escritorio)
Frontera
A continuación, convierta el módulo en un círculo agregando "100vw" a cada una de las esquinas en la configuración del borde.
Sombra de la caja
También estamos agregando una sombra de cuadro.
- Posición vertical de la sombra del cuadro: 10px
- Fuerza de propagación de la sombra de caja: 5px
- Color de sombra: rgba (2,185,252,0.35)
Agregue el módulo de texto n. ° 1 a la columna 2
Agregar contenido H3
¡A la segunda columna! El primer módulo que necesitamos es un título Módulo de texto. Agregue 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 H3.
- Fuente del título 3: Poppins
- Encabezado 3 Tamaño del texto: 4vw (teléfono), 3vw (tableta), 2vw (escritorio)
Espaciado
A continuación, 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 derecho: 0vw
- Acolchado inferior: 2vw (teléfono y tableta), 1vw (escritorio)
- Acolchado izquierdo: 5vw (teléfono y tableta), 2vw (escritorio)
Frontera
Junto con un borde izquierdo.
- Ancho del borde izquierdo: 5px
- Color del borde izquierdo: # f4f4f4
- Estilo de borde izquierdo: Doble
Agregar módulo divisor a la columna 2
Mostrar divisor
El segundo módulo que necesitamos es 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: # f4f4f4
Estilos
A continuación, cambie el estilo del divisor en la configuración de estilos.
- Estilo divisor: doble
Dimensionamiento
Continúe modificando las diferentes opciones en la configuración de tamaño.
- Peso del divisor: 5px
- Alto: 0px
Espaciado
Y juegue con los valores de espaciado también.
- Margen izquierdo: -20vw (teléfono y tableta), 0vw (escritorio)
Agregue el módulo de texto n. ° 2 a la columna 2
Agregar contenido
El siguiente módulo que necesitamos en la segunda columna es otro módulo de texto. Agregue algo de contenido corporal de su elección.
Configuración de texto
Luego, vaya a la pestaña de diseño y modifique la configuración del texto.
- Tamaño del texto: 2vw (teléfono), 1.7vw (tableta), 0.8vw (escritorio)
- Orientación del texto: izquierda
Espaciado
Juega también con los valores de espaciado.
- Margen superior: 0vw
- Margen izquierdo: -20vw (teléfono y tableta), 0vw (escritorio)
- Margen derecho: 0vw
- Acolchado superior: 3vw (teléfono y tableta), 2vw (escritorio)
- Acolchado izquierdo: 5vw (teléfono y tableta), 2vw (escritorio)
Frontera
Y agregue un borde izquierdo.
- Ancho del borde izquierdo: 5px
- Color del borde izquierdo: # f4f4f4
- Estilo de borde izquierdo: Doble
Agregar módulo de botones a la columna 2
Agregar copia
El siguiente y último módulo que necesitamos en la segunda columna es un módulo de botones. Agregue una copia.
Configuración de botones
Luego, vaya a la pestaña de diseño y cambie la configuración del botón.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 2.5vw (teléfono), 2vw (tableta), 1vw (escritorio)
- Color del texto del botón: # 4f77e8
- Ancho del borde del botón: 1 px
- Color del borde del botón: # 4f77e8
- Radio del borde del botón: 1 px
- Fuente del botón: Poppins
Espaciado
Modifique también los valores de espaciado.
- Margen superior: 4vw (teléfono y tableta), 2vw (escritorio)
- Margen izquierdo: -20vw (teléfono y tableta), 0vw (escritorio)
Clonar fila dos veces
Ahora que hemos terminado de modificar la fila y todos sus módulos, podemos clonarlo dos veces.
Cambiar iconos
Asegúrese de cambiar los iconos de ambos módulos de Blurb.
Cambiar fondos degradados
Modifica también los fondos degradados.
- Color 1: # ff2885
- Color 2: # d6ac24
- Color 1: # 70ff1e
- Color 2: # 2699ff
Cambiar colores de sombra de caja
Haga coincidir el color de la sombra del cuadro con el nuevo fondo degradado.
- Color de sombra: rgba (255,208,2,0.37)
- Color de sombra: rgba (42,255,0,0.37)
Cambiar 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.
- Color del texto del botón: # e96c54
- Color del borde del botón: # e96c54
- Color del texto del botón: # 4dcb93
- Color del borde del botón: # 4dcb93
Descargue las secciones de servicios móviles GRATIS
Para poner sus manos en las secciones de servicios móviles gratuitos, primero deberá descargarlas usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado móvil de ambos ejemplos.
Ejemplo 1
Ejemplo # 2
Pensamientos finales
En esta publicación, le mostramos dos formas creativas de cómo mostrar servicios en dispositivos móviles utilizando solo las opciones integradas de Divi. Esperamos que este enfoque basado en dispositivos móviles lo inspire a ser creativo también. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!