El módulo Divi Person es la mejor manera de crear un bloque de perfil personal. Este es un gran complemento para usar en las páginas Acerca de mí o en aquellas que presentan miembros del equipo donde desea crear una biografía de personas individuales. Este módulo combinó texto, imágenes y enlaces de redes sociales en un módulo coherente.

Cómo configurar el módulo Divi Person

Antes de que pueda agregar un módulo Divi Person a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su Sitio web, notarás un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando navegas por tu Sitio web en primer plano si ha iniciado sesión en su panel de WordPress.

Una vez que haya ingresado a Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero. Tenemos excelentes tutoriales sobre el uso de los elementos de líneas y (secciones) por Divi.

Busque el módulo de persona en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "persona" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo Persona. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

Ejemplo de caso de uso: Agregar una sección "Nuestro equipo" a una página Acerca de nosotros

La página sobre nosotros es un buen lugar para presentar a los miembros de su equipo mediante el módulo Persona. Agrega un toque personal y puede ayudar a generar confianza con nuevos clientes.

Para este ejemplo, le mostraré cómo usar el módulo Persona para agregar una sección "Nuestro equipo" a una página sobre una pequeña empresa. Voy a utilizar un diseño de tres personas y tres columnas que mantiene la sección más compacta y coincide con el diseño general de la página.

Usando Visual Builder, inserte una nueva sección estándar con una fila de tres columnas (1/3 1/3 1/3). Luego agregue un módulo Persona a la primera columna.

Actualice la configuración del módulo Persona de la siguiente manera:

Opciones de contenido

Nombre: [Ingrese el nombre de la persona]
Posición: [Ingrese la extensión de la persona]
Ingrese URL para perfiles de redes sociales
Descripción: [Ingrese una breve biografía]
Imagen: [Capturar una imagen de 600 x 600]

Opciones de diseño

Icono de color: # fcbf00
Color del icono de desplazamiento: # e0a831
Fuente de encabezado: Roboto, negrita, apalancamiento
Tamaño de fuente del encabezado: 30px
Color del texto del encabezado: # 505050
Espaciado de encabezado de letra: 1px
Altura de la fila del encabezado: 1.5em
Tamaño de fuente del cuerpo: 18px
Tamaño de la línea del cuerpo: 1.4em
Relleno personalizado: 15px arriba, 15px derecha, 15px abajo, 15px izquierda

Opciones avanzadas (CSS personalizado)

Elemento principal:
-webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);
box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);

Guardar configuración

Ahora duplique el módulo Persona que acaba de crear dos veces y arrastre los módulos duplicados a la segunda y tercera columnas de la fila. Dado que el diseño se ha transferido para cada uno de los módulos de "Persona" duplicados, todo lo que necesita hacer es actualizar el contenido con la imagen, título, posición, URL de redes sociales y descripción. de la persona.

Es todo !

Opciones de contenido de la persona

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

Appelido

Este es el nombre de la persona a la que presentas. El nombre se muestra en la parte superior del módulo en texto más grande.

Puesto de trabajo

La posición se muestra debajo del nombre en texto más pequeño. Esto se usa a menudo para referirse al puesto profesional de una persona dentro de un equipo corporativo. Por ejemplo, Nick Roach, "Diseñador gráfico".

URL de perfil de Facebook

Ingrese la URL en su página de Facebook o déjela en blanco para deshabilitar el ícono de Facebook.

URL del perfil de Twitter

Ingrese la URL en su página de Twitter o déjela en blanco para desactivar el ícono de Twitter.

URL del perfil de Google+

Ingrese la URL en su página de Google+ o déjela en blanco para desactivar el ícono de Google+.

URL del perfil de LinkedIn

Ingrese la URL en su página de LinkedIn o déjela en blanco para desactivar el ícono de LinkedIn.

Descripción

Ingrese los contenidos del texto principal para su módulo aquí.

URL de la imagen

Aquí puede descargar una foto para usar en la biografía.

Color de fondo

Defina un color de fondo personalizado para su módulo o déjelo en blanco para usar el color predeterminado.

Imagen de fondo

Si se establece, esta imagen se utilizará como fondo para este módulo. Para eliminar una imagen de fondo, simplemente elimine la URL del campo de configuración. Las imágenes de fondo aparecerán encima de los colores de fondo, lo que significa que el color de fondo no será visible cuando se aplique una imagen de fondo.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulo de la interfaz Divi Builder.

Opciones de diseño para el módulo Persona

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para cambiar cualquier cosa.

Color del icono

Esta opción controla el color de los iconos de redes sociales que aparecen en el perfil de cada persona. De forma predeterminada, estos iconos son grises, pero puedes cambiar este color con esta configuración.

Color del icono al pasar el mouse

También puede cambiar el color de desplazamiento de los iconos de redes sociales. Seleccione el color deseado con el selector de color en esta configuración.

Color del texto

Aquí puede elegir el valor de su texto. Si está trabajando en un fondo oscuro, su texto debe estar encendido. Si está trabajando con un fondo claro, su texto debe ser oscuro.

Fuente de encabezado

Puede cambiar la fuente del texto del encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de fuente del encabezado

Aquí puede ajustar el tamaño del texto de su encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su encabezado, elija el color deseado en el selector de color usando esta opción.

Espaciado entre letras del encabezado

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del encabezado, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la fila del encabezado

La altura de la fila afecta el espacio entre cada fila del texto del encabezado. Si desea aumentar el espacio entre cada fila, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado deseado en el campo de entrada a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Fuente del cuerpo

Puede cambiar la fuente de su cuerpo seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño del texto del cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras corporales

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta el espacio entre cada línea de texto en su cuerpo Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Usa el borde

Habilitar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes parámetros condicionales.

Color del borde

Esta opción afecta el color de su borde. Seleccione un color personalizado del selector de color para aplicarlo a su borde.

Ancho del borde

De forma predeterminada, los bordes tienen 1 píxel de ancho. Puede aumentar este valor arrastrando el control deslizante de rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Se admiten unidades de medida personalizadas, lo que significa que puede cambiar la unidad predeterminada de "px" a algo más como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, surco, cresta, superpuesto e inicio. Seleccione el estilo que desee en el menú desplegable para aplicarlo a su borde.

Margen personalizado

El margen es el espacio que se agrega al exterior de su módulo, entre el módulo y el siguiente elemento arriba, abajo o a la izquierda y derecha de él. Puede agregar valores de margen personalizados a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. De forma predeterminada, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Relleno personalizado

El relleno es el espacio agregado dentro de su módulo, entre el borde del módulo y sus elementos internos. Puede agregar valores de relleno personalizados a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. De forma predeterminada, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Opciones avanzadas del módulo Persona

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

ID de CSS

Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.

Clase de CSS

Ingrese las clases CSS opcionales que se usarán en este módulo. Se puede utilizar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web. Sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente ingrese las reglas CSS separadas por punto y coma.

Animación

De forma predeterminada, las imágenes se animan a medida que se desplaza por la página. Aquí puede elegir la dirección de la animación o desactivarla.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio de forma individual. Esto es útil si desea usar diferentes mods en diferentes dispositivos, o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo agregar texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas Divi
• Cómo personalizar las cuadrículas de un blog con Divi
• Cómo utilizar la función de editor Divi en WordPress
• Cómo crear un control deslizante Divi a pantalla completa
• Cómo cambiar el color de los menús entre páginas Divi
• Características que probablemente no conozcas sobre Divi
• Cómo usar Divi Builder en WordPress
• Cómo usar el módulo de desplazamiento de video Divi
• Cómo usar el módulo Divi Builder Flip
• Cómo agregar un módulo testimonial en Divi Builder
• Cómo usar el módulo de texto Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario Divi
• Cómo usar el módulo de Divi Social Media
• Cómo usar el módulo de tienda en el tema WordPress Divi
• Cómo usar el módulo de la barra lateral Divi
• Cómo usar el Módulo Divi Price Table
• Cómo usar el módulo de título de las publicaciones de Divi
• Cómo agregar un módulo de video de Divi
• Cómo usar el módulo de navegación del artículo
• Cómo usar el módulo de búsqueda Divi
• Cómo usar el módulo Divi wallet
• Cómo usar el módulo de persona en Divi Builder
• Cómo usar el módulo de billetera con filtro Divi
• Cómo usar el módulo deslizante de ancho completo
• Cómo usar el Módulo de imagen Divi Builder
• Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
• Cómo usar el módulo de la galería de imágenes
• Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
• Cómo utilizar el módulo de cartera de ancho completo de Divi
• Cómo usar el módulo de encabezado de ancho completo Divi
• Cómo usar el módulo Divi Counter
• Cómo usar el control deslizante de artículos en Divi Builder
• Cómo usar el módulo Divi Email Optin