Cómo exhibir maravillosamente servicios en dispositivos móviles con Divi (¡Descarga gratuita!)


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

servicios móviles

Ejemplo # 2

servicios móviles

Comencemos a recrear el ejemplo n. ° 1

(incrustar) https://www.youtube.com/watch?v=xx0E0SnKTos (/ incrustar)

Suscríbete a nuestro canal de Youtube

servicios móviles

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%

servicios móviles

Agregar fila n. ° 1

Estructura de columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

servicios móviles

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.

servicios móviles

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

servicios móviles

  • 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

servicios móviles

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.

servicios móviles

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)

servicios móviles

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)

servicios móviles

Agregar fila n. ° 2

Estructura de columna

Continúe agregando otra fila usando la siguiente estructura de columnas:

servicios móviles

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%

servicios móviles

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

servicios móviles

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)

servicios móviles

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;

servicios móviles

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.

servicios móviles

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)

servicios móviles

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

servicios móviles

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)

servicios móviles

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

servicios móviles

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)

servicios móviles

Frontera

Estamos convirtiendo el cuadrado en un círculo usando esquinas redondeadas agregando "100vw" a cada una de las esquinas.

servicios móviles

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)

servicios móviles

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.

servicios móviles

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

servicios móviles

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)

servicios móviles

Espaciado

Modifique también la configuración de espaciado.

  • Margen superior: -5vw

servicios móviles

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)

servicios móviles

Espaciado

A continuación, modifique la configuración de espaciado.

  • Margen superior: -5vw
  • Margen izquierdo: -5vw
  • Margen derecho: 5vw

servicios móviles

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

servicios móviles

Comencemos a recrear el ejemplo n. ° 2

servicios móviles

Agregar nueva sección

¡Pasemos al segundo ejemplo! Agrega una nueva sección a tu página.

servicios móviles

Agregar fila n. ° 1

Estructura de columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

servicios móviles

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.

servicios móviles

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)

servicios móviles

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.

servicios móviles

Color

Luego, vaya a la pestaña de diseño y modifique el color del divisor.

  • Color: # 333333

servicios móviles

Dimensionamiento

Juega con la configuración de tamaño también.

  • Peso del divisor: 5px
  • Ancho: 12%
  • Alineación del módulo: centro

servicios móviles

Agregar fila n. ° 2

Estructura de columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

servicios móviles

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

servicios móviles

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

servicios móviles

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)

servicios móviles

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)

servicios móviles

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;

servicios móviles

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.

servicios móviles

Fondo degradado

Luego, agregue un fondo degradado.

  • Color 1: # 7b28ef
  • Color 2: # 29b6e5
  • Dirección del gradiente: 142 grados

servicios móviles

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)

servicios móviles

Dimensionamiento

Y cambie la configuración de tamaño.

  • Ancho: 48% (teléfono y tableta), 78% (escritorio)

servicios móviles

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)

servicios móviles

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.

servicios móviles

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)

servicios móviles

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.

servicios móviles

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)

servicios móviles

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)

servicios móviles

Frontera

Junto con un borde izquierdo.

  • Ancho del borde izquierdo: 5px
  • Color del borde izquierdo: # f4f4f4
  • Estilo de borde izquierdo: Doble

servicios móviles

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í

servicios móviles

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor.

  • Color: # f4f4f4

servicios móviles

Estilos

A continuación, cambie el estilo del divisor en la configuración de estilos.

  • Estilo divisor: doble

servicios móviles

Dimensionamiento

Continúe modificando las diferentes opciones en la configuración de tamaño.

  • Peso del divisor: 5px
  • Alto: 0px

servicios móviles

Espaciado

Y juegue con los valores de espaciado también.

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

servicios móviles

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.

servicios móviles

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

servicios móviles

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)

servicios móviles

Frontera

Y agregue un borde izquierdo.

  • Ancho del borde izquierdo: 5px
  • Color del borde izquierdo: # f4f4f4
  • Estilo de borde izquierdo: Doble

servicios móviles

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.

servicios móviles

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

servicios móviles

  • Radio del borde del botón: 1 px
  • Fuente del botón: Poppins

servicios móviles

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)

servicios móviles

Clonar fila dos veces

Ahora que hemos terminado de modificar la fila y todos sus módulos, podemos clonarlo dos veces.

servicios móviles

Cambiar iconos

Asegúrese de cambiar los iconos de ambos módulos de Blurb.

servicios móviles

Cambiar fondos degradados

Modifica también los fondos degradados.

  • Color 1: # ff2885
  • Color 2: # d6ac24

servicios móviles

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

servicios móviles

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)

servicios móviles

  • Color de sombra: rgba (42,255,0,0.37)

servicios móviles

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

servicios móviles

  • Color del texto del botón: # 4dcb93
  • Color del borde del botón: # 4dcb93

servicios móviles

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

servicios móviles

Ejemplo # 2

servicios móviles

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!