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

Todas las nuevas actualizaciones de las características de la división que han tenido lugar en los últimos meses, sin duda, han extendido el rango de posibilidades cuando diseña sitios web. Para este tutorial, hemos creado 5 formas diferentes de ser creativos con el módulo de persona divina sin usar ningún código CSS adicional. El objetivo principal de esta publicación es inspirarlo antes de comenzar su próximo proyecto DIV. El módulo de persona a menudo se usa para compartir más información sobre los miembros del equipo o para compartir testimonio. Con estos 5 ejemplos diferentes, está listo para darle a sus páginas un impulso de diseño.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Suscríbase a nuestro canal de YouTube recreos Ejemplo no. 1

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

Agregue una nueva fila La estructura de la columna sin cambiar la configuración de la sección, agregue una nueva línea utilizando la siguiente estructura de columnas:

Dimensión Abra la configuración de la fila y realice algunos cambios en la configuración del tamaño.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Extienda luego, abra la configuración de espaciado y agregue algunos valores de llenado personalizados.
Revestimiento superior: 100 PX (escritorio), 80 px (tableta y teléfono)
Bajo forro: 100 PX (escritorio), 80 PX (tableta y teléfono)
Revelaje izquierdo: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)
Revestimiento derecho: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)

Agregue el módulo de imagen a la columna 1 ¡Cargue la 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.

Los filtros también pueden reproducirse con la configuración del filtro para agregar un efecto a su imagen.

Saturación: 40%
Contraste: 130%
Agregue el módulo de persona no. 1 en la columna 2 agrega contenido La siguiente forma en que necesitamos 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 de gradiente Agregue un fondo de gradiente a este módulo.

Color 1: RGBA (11,15,229,0,41)
Color 2: RGBA (45,237.255.0.87)
Dirección de gradiente: 150 grados
Configuración de texto de título Entonces, cambie la configuración del texto del título en la pestaña Diseño.

Título de la fuente: Baloo
Color de texto del título: #ffffff
Título Tamaño del texto: 20 PX
Configuración de texto de CORP modificada y configuración para el texto del cuerpo.

Peso de la fuente del cuerpo: luz
Color del texto del cuerpo: #ffffff
Espacio y agregue algunos valores de margen personalizado y llenado en la configuración de espaciado.

Margen izquierdo: -4VW (escritorio y tableta), 0VW (teléfono)
Margen derecho: 8VW (escritorio y tableta), 0VW (teléfono)
Revestimiento superior: 25 px
Finamiento inferior: 25 PX
ENLIZACIÓN IZQUIERDA: 20 PX
El borde también agregue un borde izquierdo sutil al modo.

Ancho del borde izquierdo: 3 PX
Color del borde izquierdo: #ffffff
Box Shadow con una sombra de caja que lo ayudará a crear la profundidad de la página.

Poder de poco claro de la sombra de la caja: 80 px
Agregue el módulo de persona 2 a la columna 2 Agregar contenido Agregar otro módulo de persona justo debajo del anterior. Utilizamos este módulo para mostrar los perfiles sociales y la descripción. Access Configuración Vaya a la pestaña Diseño y cambie el color del icono desde la configuración del icono.

Icono de color: # 50e8fe

Espacio por último, pero no menos importante, abra la configuración de espaciado y agregue algunos valores de llenado personalizados.
Revestimiento superior: 30 px

ENLIZACIÓN IZQUIERDA: 30 PX (escritorio y tableta), 0 PX (teléfono)
Recrear el ejemplo no. 2
¡Agregue una nueva sección, vamos al siguiente ejemplo! Agregue una nueva sección a su página.

Agregue una nueva fila La estructura de la columna Agregue una nueva fila a esta sección utilizando la siguiente estructura de columna.

Columna 2 Color de fondo sin agregar módulos, abra la configuración de línea y agregue un color de fondo para la columna 2.

Columna 2 Color de fondo: # F4F4F4

Dimensión Luego, acceda a la pestaña de diseño y realice algunos cambios en la configuración de tamaño.
Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
El espacio agregue algunos valores de llenado personalizados y en la configuración de espaciado.
Revestimiento superior: 100 PX (escritorio), 80 px (tableta y teléfono)

Bajo forro: 100 PX (escritorio), 80 PX (tableta y teléfono)
Revelaje izquierdo: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)
Revestimiento derecho: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)
Agregue el módulo de imagen a la columna 1 ¡Cargue la imagen es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un módulo de imagen en la columna 1. Cargue una imagen de su elección.
Poder de poco claro de la sombra de la caja: 160 px

Los filtros también pueden jugar con la configuración del filtro.

Saturación: 40%
Contraste: 130%

Agregue el módulo de persona no. 1 En la columna 2 Agregar contenido a la segunda columna, el primer módulo que necesitamos es un módulo de persona. Complete los campos de nombre y posición.
El color del papel tapiz acceso 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 Entonces, cambie la orientación del texto en la configuración del texto.

Orientación de texto: centro
Configuración de texto de título Modificar y configuración para el texto del título.

Título de la fuente: Abril Fatface
Color de texto del título: # 000000

Título Tamaño del texto: 40 PX
Configuración de texto del cuerpo junto con la configuración de texto de su cuerpo.
Peso de la fuente del cuerpo: luz
El color del texto del cuerpo: # 000000

Tamaño del texto del cuerpo: 15 PX
Espacio creamos 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)
Revestimiento superior: 30 px

Finamiento inferior: 30 px
Box Shadow y también aplicamos un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px
Agregue el módulo de persona 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.

Continuar la configuración del icono accediendo a la pestaña de diseño y cambiando el color del icono desde la configuración del icono.
Icono de color: # 000000

Sparting Agregue algunos valores de margen y llenado personalizados.

Margen superior: 3VW
Revestimiento superior: 30 px

Finamiento inferior: 30 px
Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Recrear el ejemplo no. 3
¡Agregue una nueva sección, pasamos al tercer ejemplo! Agregue una nueva sección a su página.
Agregue una nueva fila a la estructura de la columna y luego, agregue una nueva fila a la sección utilizando la siguiente estructura de columnas:

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

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Sparto Agregue algunos valores de llenado personalizados.
Revestimiento superior: 100 PX (escritorio), 80 px (tableta y teléfono)
Bajo forro: 100 PX (escritorio), 80 PX (tableta y teléfono)

Revelaje izquierdo: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)
Revestimiento derecho: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)
Agregue el módulo de persona no. 1 en la columna 1 Agregar contenido es hora de comenzar a agregar módulos. Agregue el módulo de primera persona a la columna 1 y complete los campos de nombre y posición.
El color de fondo, agregue un color de fondo al modo.
Color de fondo: #ffffff

Configuración de texto de título Modificar y configuración para el texto del título.

Fuente de peso del título: Ultra Bold
Color de texto del título: # 000000

Título Tamaño del texto: 40 PX
Cartas de espacio Título: -4px
La configuración del texto del cuerpo hace lo mismo para la configuración del texto del cuerpo.
Peso de la fuente del cuerpo: luz
El color del texto del cuerpo: # 000000

Tamaño del texto del cuerpo: 15 PX
El espacio continúa accediendo a la configuración de separación y agregue algunos valores de margen y llenado personalizados. Margen superior: 40 PX (escritorio), 0 PX (tableta y teléfono)
Revestimiento superior: 30 px
Finamiento inferior: 30 px


Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX
Border agregue “20 PX” a la esquina superior izquierda y a la configuración del borde.
Sombra de caja y dale al módulo una sombra colorida de la caja.
Poder de poco claro de la sombra de la caja: 140 px
Color de la sombra: RGBA (31,15,255,0,66)

Agregue el módulo no. 2 persona en la columna 1 Agregue contenido Acceda al módulo para la segunda persona en la columna 1! Use este módulo para mostrar enlaces y descripción de redes sociales.

El color de fondo luego accede a la configuración de fondo y agregue un color de fondo blanco.
Color de fondo: #ffffff
Configuración de cambios en el icono y el color del icono.

Icono de color: # 000000

El espacio continúa agregando algunos valores de espaciado personalizados en la configuración de espaciado.
Borde y agregue “20 px” a la esquina inferior izquierda.

Box Shadow por último, pero no menos importante, agregue la sombra de la caja.
Box Shadow Posición vertical: 50 PX

Poder de poco claro de la sombra de la caja: 140 px

Poder de extender la sombra de la caja: -10px

Color de la sombra: RGBA (2,219.219.0.26)
Agregue el módulo de imagen a la columna 2 Cargue la imagen La siguiente forma en que necesitamos es un módulo de imagen. Continúe y agregue uno a la segunda columna y cargue una imagen de su elección.
El borde le da a este módulo “20 PX” de esquinas redondeadas en la configuración del borde.
Box Sombra y agregue una sombra de caja sutil.
Filtros nuevamente, no dude en jugar con la configuración de filtros para cambiar la apariencia de la imagen.

Recrear Ejemplo # 4

¡Agregue una nueva sección, pasamos al cuarto ejemplo! Agregue una nueva sección a su página Una nueva fila de la estructura de la columna Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y modifique la configuración de tamaño.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Igualar las alturas de la columna: sí

La espartación modifica y se establece la espacios.
Revestimiento superior: 100 PX (escritorio), 80 px (tableta y teléfono)
Bajo forro: 100 PX (escritorio), 80 PX (tableta y teléfono)
Revelaje izquierdo: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)
Revestimiento derecho: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)

Agregue el 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.
Icono de configuración Entonces, acceda a la configuración del icono y cambie el color del icono.
Icono de color: # 000000
Configuración de texto Cambie la orientación del texto del texto en la configuración del texto.
Orientación de texto: centro

Configuración de texto de título luego abra la configuración del texto del título y realice algunos cambios.

Fuente de peso del título: Ultra Bold
Color de texto del título: # 000000

Título Tamaño del texto: 40 PX
Cartas de espacio Título: -4px

Configuración de texto de CORP modificada y configuración para el texto del cuerpo.
Peso de la fuente del cuerpo: luz
El color del texto del cuerpo: # 000000
Tamaño del texto del cuerpo: 15 PX
La altura de la línea del cuerpo: 2em

Espacio y crea una forma utilizando valores de llenado personalizados en la configuración de espaciado.
Revelaje superior: 280 PX (escritorio), 200 px (tableta), 50 px (teléfono) forro inferior: 280 px (escritorio), 200 px (tableta), 50 px (teléfono)
Levante izquierdo: 200 PX (escritorio), 150 px (tableta), 20 px (teléfono)
Revestimiento derecho: 200 PX (escritorio), 150 px (tableta), 20 px (teléfono)
El borde crea un círculo agregando “700 PX” a cada una de las esquinas en la configuración del borde y agregue un borde sutil.

Ancho fronterizo: 1 PX
Color del borde: # 333333
Agregue el módulo de imagen a la columna 2 Cargue la imagen Continuar agregando un módulo de imagen a la segunda columna y cargue una imagen cuadrada de su elección.
Sparting Modifife Las configuraciones de la espaciación de este modo.
Margen superior: 7VW (escritorio), -15VW (tableta), -5VW (teléfono)

Margen izquierdo: -5VW (escritorio), 0VW (tableta y teléfono)
El borde crea una forma de círculo a partir de esta imagen agregando “1000px” a cada una de las esquinas del módulo.
Box Shadow también agregue una sombra de caja sutil.

Poder de poco claro de la sombra de la caja: 160 px

Poder de extender la sombra de la caja: -10px
Filtros y complete el diseño reproducido con la configuración de filtros de imagen.
Saturación: 0%

Contraste: 130%

Recrear el ejemplo no. 5
¡Agregue una nueva sección, vamos al siguiente y último ejemplo! Agregue una nueva sección a su página.
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Columna 1 Gradiente de fondo Abra la configuración de la fila y agregue un fondo de gradiente para la columna 1.
Color 1: #dddddd
Color 2: #ffffff

Columna 1 Dirección de gradiente: 90 grados

Columna 1 Posición de inicio: 40%

Columna 1 Posición final: 40%

Dimensión Entonces, acceda a la configuración del tamaño y realice algunos cambios. Haga este ancho completo: Sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio agregue algunos valores de llenado personalizados en una fila.
Revestimiento superior: 100 PX (escritorio), 80 px (tableta y teléfono)
Bajo forro: 100 PX (escritorio), 80 PX (tableta y teléfono)

Revelaje izquierdo: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)
Revestimiento derecho: 100 PX (escritorio), 30 px (tableta), 25 px (teléfono)
Agregue el 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.
Icono de configuración Entonces, cambie el color del icono desde la configuración del icono.

Icono de color: # 000000
Configuración de texto Cambie la orientación del texto del texto en la configuración del texto.
Orientación del texto: correcto
Configuración de texto de título luego realice algunos cambios en la configuración del texto del título.
Título de la fuente: Chenla

Color de texto del título: # 000000

Título Tamaño del texto: 50 PX
Cartas de título de espacio: -1 PX

La configuración del texto del cuerpo hace lo mismo para la configuración del texto del cuerpo.
Peso de la fuente del cuerpo: luz

El color del texto del cuerpo: # 000000
Tamaño del texto del cuerpo: 15 PX
La altura de la línea del cuerpo: 2em
El espacio continúa agregando algunos valores de llenado personalizados a la configuración de espaciado del módulo.
Revelaje superior: 200 PX (escritorio), 100 PX (tableta y teléfono)

Bajo forro: 200 PX (escritorio), 100 PX (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 500 PX (escritorio), 250 px (tableta), 50 px (teléfono)
Revestimiento derecho: 200 PX (escritorio), 100 PX (tableta), 50 PX (teléfono)
El borde finalmente agregue un borde al módulo. Agregue el módulo de imagen en la columna 2 Cargar la siguiente forma en que necesitamos es un módulo de imagen en la columna 2. Continúe y cargue una imagen cuadrada de su elección.
El espacio luego realiza 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)
Box Shadow también le da al módulo de imagen una sombra de la caja.
Poder de poco claro de la sombra de la caja: 160 px
Poder de extender la sombra de la caja: -10px

Filtros y para completar, juegue con la configuración del filtro.

Saturación: 50%

Contraste: 130%
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le mostré 5 formas diferentes de ser creativo con el módulo de la persona divina. Puede usar estos ejemplos para cualquier sitio web que cree y puede crear sus propias versiones alternativas cambiando 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.