5 formas de ser creativo con el módulo Persona de Divi

Todas las nuevas actualizaciones de funciones de Divi que se han producido en los últimos meses han ampliado sin lugar a dudas la gama de posibilidades que tiene al diseñar sitios web. Para este tutorial, hemos creado 5 formas diferentes de ser creativo con el módulo Divi Person sin usar ningún código CSS adicional. El objetivo principal de esta publicación es inspirarte antes de comenzar tu próximo proyecto Divi. El módulo de persona se utiliza a menudo para compartir más información sobre los miembros del equipo o compartir testimonios. Con estos 5 ejemplos diferentes, está listo para darle un impulso de diseño a sus páginas.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Suscríbete a nuestro canal de Youtube

Recrear el ejemplo n. ° 1

Agregar nueva sección

¡Comencemos a crear el primer ejemplo! Abra una página nueva o existente y agregue una sección regular.

Agregar nueva fila

Estructura de la columna

Sin modificar la configuración de la sección, agregue una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y realice algunos cambios en la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

A continuación, abra la configuración de espaciado y agregue algunos valores de relleno personalizados.

• Relleno superior: 100 px (escritorio), 80 px (tableta y teléfono)
• Acolchado inferior: 100 px (escritorio), 80 px (tableta y teléfono)
• Relleno izquierdo: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)
• Relleno derecho: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)

Agregar módulo de imagen a la columna 1

Cargar imagen

¡Es hora de comenzar a agregar módulos! Agregue un módulo de imagen a la primera columna y cargue una imagen cuadrada de su elección.

Sombra de la caja

Continúe yendo a la pestaña de diseño y aplicando una sombra de cuadro sutil.

Filtros

También puede jugar con la configuración de los filtros para agregar un efecto a su imagen.

• Saturación: 40%
• Contraste: 130%

Agregue el módulo de persona n. ° 1 a la columna 2

Agregar contenido

El siguiente módulo que necesitaremos es un módulo de persona. Continúe y agregue uno a la segunda columna y complete los campos de nombre y posición.

Fondo degradado

Agregue un fondo degradado a este módulo.

• Color 1: rgba (11,15,229,0.41)
• Color 2: rgba (45,237,255,0.87)
• Dirección del gradiente: 150 grados

Configuración del texto del título

Luego, cambie la configuración del texto del título en la pestaña de diseño.

• Fuente del título: Baloo
• Color del texto del título: #ffffff
• Tamaño del texto del título: 20px

Configuración del texto del cuerpo

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

• Peso de la fuente del cuerpo: Ligero
• Color del texto del cuerpo: #ffffff

Espaciado

Y agregue algunos valores personalizados de margen y relleno en la configuración de espaciado.

• Margen izquierdo: -4vw (escritorio y tableta), 0vw (teléfono)
• Margen derecho: 8vw (escritorio y tableta), 0vw (teléfono)
• Acolchado superior: 25px
• Acolchado inferior: 25px
• Relleno izquierdo: 20px

Frontera

También estamos agregando un borde izquierdo sutil al módulo.

• Ancho del borde izquierdo: 3px
• Color del borde izquierdo: #ffffff

Sombra de la caja

Junto con una sombra de cuadro que te ayudará a crear profundidad en la página.

• Fuerza de desenfoque de sombra de caja: 80px

Agregue el módulo de persona n. ° 2 a la columna 2

Agregar contenido

Agregue otro módulo de persona justo debajo del anterior. Estamos usando este módulo para mostrar los perfiles de redes sociales y la descripción.

Configuración de iconos

Vaya a la pestaña de diseño y cambie el color del icono en la configuración del icono.

• Color del icono: # 50e8fe

Espaciado

Por último, pero no menos importante, abra la configuración de espaciado y agregue algunos valores de relleno personalizados.

• Acolchado superior: 30px
• Relleno izquierdo: 30 px (escritorio y tableta), 0 px (teléfono)

Recrear el ejemplo n. ° 2

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila a esta sección usando la siguiente estructura de columnas.

Color de fondo de la columna 2

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo de la columna 2.

• Color de fondo de la columna 2: # f4f4f4

Dimensionamiento

Luego, vaya a la pestaña de diseño y realice algunos cambios en la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Agregue también algunos valores de relleno personalizados en la configuración de espaciado.

• Relleno superior: 100 px (escritorio), 80 px (tableta y teléfono)
• Acolchado inferior: 100 px (escritorio), 80 px (tableta y teléfono)
• Relleno izquierdo: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)
• Relleno derecho: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)

Agregar módulo de imagen a la columna 1

Cargar imagen

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitaremos es un módulo de imagen en la columna 1. Cargue una imagen de su elección.

Sombra de la caja

Luego, agregue una sombra de cuadro a la imagen.

• Fuerza de desenfoque de sombra de caja: 160px

Filtros

También puedes jugar con la configuración de los filtros.

• Saturación: 40%
• Contraste: 130%

Agregue el módulo de persona n. ° 1 a la columna 2

Agregar contenido

En la segunda columna, el primer módulo que necesitaremos es un módulo de persona. Complete los campos de nombre y cargo.

Color de fondo

Vaya a la configuración de fondo y agregue un color de fondo transparente.

• Color de fondo: rgba (255,255,255,0.7)

Configuración de texto

Luego, cambie la orientación del texto en la configuración del texto.

• Orientación del texto: centro

Configuración del texto del título

Cambie también la configuración del texto del título.

• Fuente del título: Abril Fatface
• Color del texto del título: # 000000
• Tamaño del texto del título: 40px

Configuración del texto del cuerpo

Junto con la configuración del texto del cuerpo.

• Peso de la fuente del cuerpo: Ligero
• Color del texto del cuerpo: # 000000
• Tamaño del texto del cuerpo: 15px

Espaciado

Estamos creando una superposición usando un margen izquierdo negativo en la configuración de espaciado.

• Margen izquierdo: -21.64vw (escritorio), -46.1vw (tableta), 0vw (teléfono)
• Acolchado superior: 30px
• Acolchado inferior: 30px

Sombra de la caja

Y también estamos aplicando una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 80px

Agregue el módulo de persona n. ° 2 a la columna 2

Agregar contenido

El segundo módulo que necesitamos en la columna 2 es otro módulo de persona. Aquí, agregamos los enlaces y la descripción de las redes sociales.

Configuración de iconos

Continúe yendo a la pestaña de diseño y cambiando el color del icono en la configuración del icono.

• Color del icono: # 000000

Espaciado

Agregue también algunos valores de margen y relleno personalizados.

• Margen superior: 3vw
• Acolchado superior: 30px
• Acolchado inferior: 30px
• Relleno izquierdo: 30px
• Relleno derecho: 30px

Recrear el ejemplo n. ° 3

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

Luego, agregue una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y cambie la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Agregue también algunos valores de relleno personalizados.

• Relleno superior: 100 px (escritorio), 80 px (tableta y teléfono)
• Acolchado inferior: 100 px (escritorio), 80 px (tableta y teléfono)
• Relleno izquierdo: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)
• Relleno derecho: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)

Agregue el módulo de persona n. ° 1 a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue el primer módulo de persona a la columna 1 y complete los campos de nombre y cargo.

Color de fondo

Luego, agregue un color de fondo al módulo.

• Color de fondo: #ffffff

Configuración del texto del título

Modifique también la configuración del texto del título.

• Peso de la fuente del título: Ultra Bold
• Color del texto del título: # 000000
• Tamaño del texto del título: 40px
• Espaciado de letras de título: -4px

Configuración del texto del cuerpo

Haga lo mismo con la configuración del texto del cuerpo.

• Peso de la fuente del cuerpo: Ligero
• Color del texto del cuerpo: # 000000
• Tamaño del texto del cuerpo: 15px

Espaciado

Continúe yendo a la configuración de espaciado y agregue algunos valores de margen y relleno personalizados.

• Margen superior: 40 px (escritorio), 0 px (tableta y teléfono)
• Acolchado superior: 30px
• Acolchado inferior: 30px
• Relleno izquierdo: 30px
• Relleno derecho: 30px

Frontera

Agregue '20px' a la esquina superior izquierda en la configuración del borde también.

Sombra de la caja

Y dale al módulo una sombra de caja colorida.

• Fuerza de desenfoque de sombra de caja: 140px
• Color de sombra: rgba (31,15,255,0.66)

Agregue el módulo de persona n. ° 2 a la columna 1

Agregar contenido

¡Pasemos al módulo de segunda persona en la columna 1! Utilice este módulo para mostrar los enlaces y la descripción de las redes sociales.

Color de fondo

Luego, vaya a la configuración de fondo y agregue un color de fondo blanco.

• Color de fondo: #ffffff

Configuración de iconos

Cambie también el color del icono.

• Color del icono: # 000000

Espaciado

Continúe agregando algunos valores de espaciado personalizados en la configuración de espaciado.

Frontera

Y agregue '20px' en la esquina inferior izquierda.

Sombra de la caja

Por último, pero no menos importante, agregue la sombra del cuadro.

• Posición vertical de la sombra del cuadro: 50px
• Fuerza de desenfoque de sombra de caja: 140px
• Fuerza de propagación de la sombra de caja: -10px
• Color de sombra: rgba (2,219,219,0.26)

Agregar módulo de imagen a la columna 2

Cargar imagen

El siguiente módulo que necesitaremos es un módulo de imagen. Continúe y agregue uno a la segunda columna y cargue una imagen de su elección.

Frontera

Dale a este módulo '20px' de esquinas redondeadas en la configuración del borde.

Sombra de la caja

Y agregue una sombra de caja sutil.

Filtros

Nuevamente, siéntase libre de jugar con la configuración de los filtros para cambiar la apariencia de la imagen.

Recrear el ejemplo n. ° 4

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Cambie también la configuración de espaciado.

• Relleno superior: 100 px (escritorio), 80 px (tableta y teléfono)
• Acolchado inferior: 100 px (escritorio), 80 px (tableta y teléfono)
• Relleno izquierdo: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)
• Relleno derecho: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)

Agregar módulo de persona a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de persona a la columna 1 y complete todos los campos.

Configuración de iconos

Luego, vaya a la configuración del icono y cambie el color del icono.

• Color del icono: # 000000

Configuración de texto

Cambie también la orientación del texto en la configuración del texto.

• Orientación del texto: centro

Configuración del texto del título

Luego, abra la configuración del texto del título y realice algunos cambios.

• Peso de la fuente del título: Ultra Bold
• Color del texto del título: # 000000
• Tamaño del texto del título: 40px
• Espaciado de letras de título: -4px

Configuración del texto del cuerpo

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

• Peso de la fuente del cuerpo: Ligero
• Color del texto del cuerpo: # 000000
• Tamaño del texto del cuerpo: 15px
• Altura de la línea del cuerpo: 2em

Espaciado

Y cree una forma utilizando valores de relleno personalizados en la configuración de espaciado.

• Relleno superior: 280 px (escritorio), 200 px (tableta), 50 px (teléfono)
• Acolchado inferior: 280 px (escritorio), 200 px (tableta), 50 px (teléfono)
• Relleno izquierdo: 200 px (escritorio), 150 px (tableta), 20 px (teléfono)
• Relleno derecho: 200 px (escritorio), 150 px (tableta), 20 px (teléfono)

Frontera

Cree un círculo agregando '700px' a cada una de las esquinas en la configuración del borde y agregue también un borde sutil.

• Ancho del borde: 1 px
• Color del borde: # 333333

Agregar módulo de imagen a la columna 2

Cargar imagen

Continúe agregando un módulo de imagen a la segunda columna y cargue una imagen cuadrada de su elección.

Espaciado

Modifique la configuración de espaciado de este módulo.

• Margen superior: 7vw (escritorio), -15vw (tableta), -5vw (teléfono)
• Margen izquierdo: -5vw (escritorio), 0vw (tableta y teléfono)

Frontera

Cree una forma de círculo a partir de esta imagen agregando '1000px' a cada una de las esquinas del módulo.

Sombra de la caja

Agrega también una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 160px
• Fuerza de propagación de la sombra de caja: -10px

Filtros

Y termine el diseño jugando con la configuración de filtros de la imagen.

• Saturación: 0%
• Contraste: 130%

Recrear el ejemplo n. ° 5

Agregar nueva sección

¡Pasemos al siguiente y último ejemplo! Agrega una nueva sección a tu página.

Agregar nueva fila

Estructura de la columna

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

Columna 1 Fondo degradado

Abra la configuración de la fila y agregue un fondo degradado de la columna 1.

• Color 1: #dddddd
• Color 2: #ffffff
• Columna 1 Dirección de gradiente: 90 grados
• Posición inicial de la columna 1: 40%
• Posición final de la columna 1: 40%

Dimensionamiento

Luego, vaya a la configuración de tamaño y realice algunos cambios.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Agregue también algunos valores de relleno personalizados a la fila.

• Relleno superior: 100 px (escritorio), 80 px (tableta y teléfono)
• Acolchado inferior: 100 px (escritorio), 80 px (tableta y teléfono)
• Relleno izquierdo: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)
• Relleno derecho: 100 px (escritorio), 30 px (tableta), 25 px (teléfono)

Agregar módulo de persona a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de persona a la columna 1 y complete todos los campos.

Configuración de iconos

Luego, cambie el color del icono en la configuración del icono.

• Color del icono: # 000000

Configuración de texto

Cambie también la orientación del texto en la configuración del texto.

• Orientación del texto: Derecha

Configuración del texto del título

A continuación, realice algunos cambios en la configuración del texto del título.

• Fuente del título: Chenla
• Color del texto del título: # 000000
• Tamaño del texto del título: 50px
• Espaciado de letras de título: -1px

Configuración del texto del cuerpo

Haga lo mismo con la configuración del texto del cuerpo.

• Peso de la fuente del cuerpo: Ligero
• Color del texto del cuerpo: # 000000
• Tamaño del texto del cuerpo: 15px
• Altura de la línea del cuerpo: 2em

Espaciado

Continúe agregando algunos valores de relleno personalizados a la configuración de espaciado del módulo.

• Relleno superior: 200 px (escritorio), 100 px (tableta y teléfono)
• Acolchado inferior: 200 px (escritorio), 100 px (tableta y teléfono)
• Relleno izquierdo: 500 px (escritorio), 250 px (tableta), 50 px (teléfono)
• Relleno derecho: 200 px (escritorio), 100 px (tableta), 50 px (teléfono)

Frontera

Por último, agregue un borde al módulo.

Agregar módulo de imagen a la columna 2

Cargar imagen

El siguiente módulo que necesitaremos es un Módulo de imagen en la columna 2. Continúe y cargue una imagen cuadrada de su elección.

Espaciado

Luego, realice algunos cambios en la configuración de espaciado de este módulo.

• Margen superior: 7vw (escritorio), -2vw (tableta y teléfono)
• Margen izquierdo: -10vw (escritorio), 0vw (tableta y teléfono)

Sombra de la caja

Dale también una sombra de cuadro al módulo de imagen.

• Fuerza de desenfoque de sombra de caja: 160px
• Fuerza de propagación de la sombra de caja: -10px

Filtros

Y para colmo, juega con la configuración de los filtros.

• Saturación: 50%
• Contraste: 130%

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos 5 formas diferentes de ser creativo con el módulo Divi Person. Puede utilizar estos ejemplos para cualquier sitio web que esté creando y crear sus propias versiones alternativas ajustando la configuración de cada elemento de diseño. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!