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

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

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Fondo degradado

Cree una nueva página y agréguele una sección normal. 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 gradiente: Radial
• Dirección radial: Izquierda
• Posición inicial: 20%
• Posición final: 20%

Añadir Fila #1

Estructura de la columna

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

Añadir Módulo de Texto #1

Agregar contenido

El primer módulo que necesitaremos es un módulo de texto. Agregue algo de 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 del texto: Poppins
• Peso de fuente de texto: Pesado
• Color del texto: #ffffff
• Tamaño del texto: 20vw
• Altura de línea de texto: 1em

• Fuerza de desenfoque de sombra de texto: 0.95em
• Color de sombra de texto: rgba(0,0,0,0.13)
• Orientación del texto: Centro

Añadir Módulo de Texto #2

Agregar contenido H2

Agregue otro módulo de texto justo debajo del anterior. Ingrese algún contenido de 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.

• Título 2 Fuente: Poppins
• Encabezado 2 Peso de fuente: Negrita
• Encabezado 2 Alineación de texto: Centro
• Título 2 Color del texto: #000000
• Título 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)

Añadir Fila #2

Estructura de la 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 la fila y agregue un fondo degradado.

• 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%

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ón: 1

Espaciado

Agregue algunos valores de espaciado también. Estos valores asegurarán que todo se vea bien en todos los tamaños de pantalla.

• Relleno 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.

Agregar módulo de texto a la columna 1

Agregar H3 y vincular contenido

¡Ahora podemos comenzar a agregar módulos! Agregue un módulo de texto a la primera columna con algo de 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

Ajustes de texto de enlace

Modifique también la configuración del texto del enlace.

• Fuente del enlace: Poppins
• Peso de la fuente Linke: Negrita
• Estilo de fuente del enlace: Subrayado
• Color de 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.

• Título 3 Fuente: Poppins
• Encabezado 3 Peso de fuente: ultraligero
• Título 3 Color del texto: #000000
• Título 3 Tamaño del texto: 4vw (teléfono), 3vw (tableta), 2vw (escritorio)
• Encabezado 3 Altura de la línea de texto: 1,9 em para una forma circular o 3 em para una forma ovalada

Espaciado

Para crear una forma a partir de este módulo, agregaremos algunos márgenes personalizados y valores de relleno en la configuración de espaciado.

• Margen izquierdo: 5vw
• Margen derecho: -5vw
• Relleno superior: 17vw (teléfono), 20vw (tableta), 15vw (escritorio)
• Acolchado inferior: 17vw (teléfono), 20vw (tableta), 15vw (escritorio)

Borde

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 sutil sombra de cuadro.

• Fuerza de desenfoque de sombra de cuadro: 100px
• Color de sombra: rgba (0,0,0,0.12)

Clonar módulo de texto 4 veces

Ahora que hemos terminado de modificar el primer módulo de texto, podemos continuar y clonarlo cuatro veces. Coloque dos de los duplicados en la segunda columna.

Modificar Duplicado #1

Espaciado

Continúe modificando la configuración de espaciado del primer duplicado.

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

Modificar Duplicado #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 #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

Modifique la configuración de espaciado a continuación.

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

Modificar Duplicado #4

Espaciado

Abra también el último duplicado y agregue un margen superior negativo para finalizar el diseño.

• Margen superior: -5vw

Comencemos a recrear el ejemplo n.º 2

Agregar nueva sección

¡Vamos al segundo ejemplo! Añade una nueva sección a tu página.

Añadir Fila #1

Estructura de la 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 de 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.

• Título 2 Fuente: Poppins
• Encabezado 2 Alineación de texto: Centro
• Título 2 Color del texto: #333333
• Título 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, ve a la pestaña de diseño y modifica 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

Añadir Fila #2

Estructura de la columna

Continúe agregando una nueva 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 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ón: 1

Espaciado

Agregue algunos márgenes personalizados y valores de relleno al lado 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)
• Relleno izquierdo: 2vw (teléfono y tableta), 20vw (escritorio)
• Relleno derecho: 2vw (teléfono y tableta), 20vw (escritorio)

Sombra de la caja

También estamos usando una sombra de caja sutil.

• Fuerza de desenfoque de sombra de cuadro: 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 sola línea de código CSS al elemento principal en la pestaña avanzada.

Agregue el módulo Blurb a la columna 1

Seleccionar icono

¡Ya podemos empezar a añadir módulos! El único módulo que necesitamos en la columna 1 es un módulo de 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

Modifique la configuración del icono a continuación.

• Color del icono: #ffffff
• Ubicación del icono: superior
• Usar tamaño de fuente de 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 márgenes personalizados y valores de relleno 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)

Borde

Luego, convierta el módulo en un círculo agregando ‘100vw’ en 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 del cuadro: 5px
• Color de sombra: rgba (2,185,252,0.35)

Agregue el Módulo de Texto #1 a la Columna 2

Agregar contenido H3

¡A por la segunda columna! El primer módulo que necesitamos allí es un módulo de texto de título. Agregue algo de contenido H3.

Configuración de texto H3

Luego, vaya a la pestaña de diseño y modifique la configuración de texto H3.

• Título 3 Fuente: Poppins
• Título 3 Tamaño del texto: 4vw (teléfono), 3vw (tableta), 2vw (escritorio)

Espaciado

Agregue algunos valores de espaciado personalizados a continuación.

• 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)
• Relleno izquierdo: 5vw (teléfono y tableta), 2vw (escritorio)

Borde

Junto con un borde izquierdo.

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

Agregue el 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, ve a la pestaña de diseño y cambia el color del divisor.

• Color: #f4f4f4

Estilos

Cambie el estilo del divisor en la configuración de estilos a continuación.

• Estilo divisor: Doble

Dimensionamiento

Continúe modificando las diferentes opciones en la configuración de tallas.

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

Espaciado

Y juega con los valores de espaciado también.

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

Agregue el Módulo de Texto #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 de cuerpo 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 de texto: 2vw (teléfono), 1.7vw (tableta), 0.8vw (escritorio)
• Orientación del texto: Izquierda

Espaciado

Juega con los valores de espaciado también.

• Margen superior: 0vw
• Margen izquierdo: -20vw (teléfono y tableta), 0vw (escritorio)
• Margen derecho: 0vw
• Acolchado superior: 3vw (teléfono y tableta), 2vw (escritorio)
• Relleno izquierdo: 5vw (teléfono y tableta), 2vw (escritorio)

Borde

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. Agrega algo de 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: 1px
• Color del borde del botón: #4f77e8

• Radio del borde del botón: 1px
• 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 terminamos 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

Modifique 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

Descarga las Secciones de Servicios Móviles GRATIS

Para poner sus manos en las secciones de servicios móviles gratuitos, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» 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 mostrar servicios en dispositivos móviles usando Divi y sus opciones integradas únicamente. Esperamos que este enfoque de dar prioridad a los dispositivos móviles también lo inspire a ser creativo. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!