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

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 utilizando 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 del canalón: 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)
• Relleno 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 cuerpo del texto: #ffffff

Espaciado

Y agregue algunos márgenes personalizados y valores de relleno en la configuración de espaciado.

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

Borde

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 cuadro: 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.

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

Recrear el Ejemplo #2

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila a esta sección utilizando 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 fila y agregue un color de fondo de 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 del canalón: 1
• Igualar 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)
• Relleno 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 cuadro: 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. Rellene 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 de 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 cuerpo del texto: #000000
• Tamaño del cuerpo del texto: 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)
• Relleno superior: 30px
• Relleno inferior: 30px

Sombra de la caja

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

• Fuerza de desenfoque de sombra de cuadro: 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í, estamos agregando los enlaces de redes sociales y la descripción.

Configuración de iconos

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

• Color del icono: #000000

Espaciado

Agregue también algunos márgenes personalizados y valores de relleno.

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

Recrear el Ejemplo #3

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

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

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Igualar alturas de columna: Sí

Espaciado

Agregue también algunos valores de relleno personalizados.

• Relleno superior: 100 px (escritorio), 80 px (tableta y teléfono)
• Relleno 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 negrita
• Color del texto del título: #000000
• Tamaño del texto del título: 40px
• Espaciado entre letras del título: -4px

Configuración del texto del cuerpo

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

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

Espaciado

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

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

Borde

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 cuadro: 140px
• Color de sombra: rgba(31,15,255,0.66)

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

Agregar contenido

¡Pasamos al módulo de la segunda persona en la columna 1! Use 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

Cambia el color del icono también.

• Color del icono: #000000

Espaciado

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

Borde

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 cuadro: 140px
• Fuerza de propagación de la sombra del cuadro: -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.

Borde

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

Sombra de la caja

Y agrega 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 #4

Agregar nueva sección

¡Vamos al cuarto ejemplo! Añade 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 utilizando 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 del canalón: 1
• Igualar alturas de columna: Sí

Espaciado

Cambie también la configuración de espaciado.

• Relleno superior: 100 px (escritorio), 80 px (tableta y teléfono)
• Relleno 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 de 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 negrita
• Color del texto del título: #000000
• Tamaño del texto del título: 40px
• Espaciado entre letras del 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 cuerpo del texto: #000000
• Tamaño del cuerpo del texto: 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)
• Relleno 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)

Borde

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: 1px
• 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)

Borde

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

Agregue una sombra de caja sutil también.

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

filtros

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

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

Recree el Ejemplo #5

Agregar nueva sección

¡Vamos al siguiente y último ejemplo! Añade 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:

Fondo degradado de la columna 1

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

• Color 1: #dddddd
• Color 2: #ffffff
• Dirección del gradiente de la columna 1: 90 grados
• Columna 1 Posición inicial: 40%
• Columna 1 Posición final: 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 del canalón: 1

Espaciado

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

• Relleno superior: 100 px (escritorio), 80 px (tableta y teléfono)
• Relleno 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 ícono en la configuración del ícono.

• Color del icono: #000000

 

Configuración de texto

Cambie también la orientación del texto en la configuración de 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 entre letras del título: -1px

Configuración del texto del cuerpo

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

• Peso de la fuente del cuerpo: ligero
• Color del cuerpo del texto: #000000
• Tamaño del cuerpo del texto: 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)
• Relleno 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)

Borde

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 al módulo de imagen una sombra de caja también.

• Fuerza de desenfoque de sombra de cuadro: 160px
• Fuerza de propagación de la sombra del cuadro: -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 usar estos ejemplos para cualquier sitio web que esté creando y crear sus propias versiones alternativas modificando 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!