El Módulo Persona es la mejor manera de crear un perfil personal para alguien en tu sitio web Divi.

Resaltar a los miembros del equipo, vendedores destacados, liderazgo de la empresa, personal y más es fácil. Este es un gran módulo para páginas de “Sobre mí” o “Miembros del equipo”. Combina texto, imágenes y enlaces a redes sociales en un módulo cohesivo.

Ejemplo del Módulo Persona de Divi

Ver una demo en vivo de este módulo

---

Cómo agregar el Módulo Persona de Divi a tu página

• Agrega una página nueva o edita una página existente.

• Por defecto, el Editor estándar Gutenberg se carga cuando se añade una nueva publicación o página en WordPress.

• Haz clic en el botón morado debajo del título de la página. Usa The Divi Builder.

• Añade una página y carga el Visual Builder.

Al recargar la página, verás tres opciones:

• Construir desde cero Esta opción carga el Divi Builder con un diseño de página en blanco. Elige esta opción si quieres empezar el diseño de tu página desde cero.

• Elegir un diseño prediseñado  Esta opción te permite elegir de nuestra gran biblioteca de diseños Divi prediseñados. Puedes elegir entre diseños prediseñados por Divi, diseños que hayas guardado en tu biblioteca Divi, o páginas existentes en tu sitio que puedes clonar.

• Construir con IA
  Esta opción te permite crear un diseño completo de página usando Divi IA. Utilizando tu texto y la información de tu sitio, puedes crear el esquema perfecto de página, luego construirlo y llenarlo con contenido e imágenes en poco tiempo.

Añadir el Módulo Persona de Divi

• Haz clic en el ícono verde + para insertar una fila.

• Haz clic en el ícono gris + dentro de la fila para abrir la Biblioteca de Módulos Divi, que contiene todos los módulos incluidos con el tema Divi.

• Busca el módulo Persona y haz clic para cargarlo.
  La biblioteca de módulos también es buscable. Escribe el nombre del módulo que quieres en la barra de búsqueda en la parte superior.

Todas las opciones del Módulo Persona de Divi explicadas

Una vez que hayas añadido el Módulo Persona, las configuraciones del módulo aparecerán automáticamente. Aquí es donde se configura el contenido y los estilos de diseño del módulo. Estas configuraciones están organizadas en tres pestañas en la parte superior del módulo: Contenido, Diseño y Avanzado.

Pestaña Contenido

Dentro de esta pestaña encontrarás las opciones de contenido disponibles para el Módulo Persona de Divi.

Texto

Aquí puedes editar el contenido de texto del módulo.

• Nombre – Escribe el nombre de la persona aquí.

• Posición – Escribe el puesto o cargo de la persona aquí.

• URL de perfil de Facebook – Copia y pega la URL de Facebook de la persona aquí. Si queda vacío, el icono no aparecerá.

• URL de perfil de Twitter – Copia y pega la URL de Twitter de la persona aquí. Si queda vacío, el icono no aparecerá.

• URL de perfil de Google+ – Copia y pega la URL de Google+ de la persona aquí. Si queda vacío, el icono no aparecerá.

• URL de perfil de LinkedIn – Copia y pega la URL de LinkedIn de la persona aquí. Si queda vacío, el icono no aparecerá.

• Cuerpo – Escribe la biografía de la persona aquí. Si queda vacío, no aparecerá.

Imagen

Sube la imagen de la persona aquí.

• Haz clic en la imagen de marcador de posición para abrir la biblioteca de medios de WordPress.

• Selecciona una foto de tus archivos o sube una nueva.

• Puedes aplicar estilos a esta imagen en la sección Imagen dentro de la pestaña Diseño.

Enlace

Si deseas aplicar un enlace clickeable a todo el módulo, puedes hacerlo aquí.

• URL del enlace del módulo – Pega la URL del enlace que quieres aplicar a este módulo aquí. Esto hace que todo el módulo sea clickeable y, al hacer clic, dirigirá a los visitantes a la URL indicada.

• Destino del enlace del módulo – Define si el enlace, al hacer clic, se abre en una pestaña nueva o en la misma ventana.

  • En la misma ventana – para abrir el enlace en la misma ventana.

  • En una pestaña nueva – para abrir el enlace en una nueva pestaña.

Fondo

En el grupo de opciones de fondo, se pueden configurar:

• Color de fondo

• Gradiente de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Cómo agregar un color de fondo:

1. Haz clic en la primera pestaña, el ícono de cubo de pintura.
   
2. Haz clic en Agregar color de fondo y elige un color de la paleta de colores de tu sitio o usa el cuentagotas para seleccionar un color nuevo.
   

Cómo agregar un gradiente de fondo:

1. Haz clic en la segunda pestaña, el ícono de gradiente.
   
2. Haz clic en Agregar gradiente de fondo.
   Para cambiar los colores del gradiente, haz clic en los puntos de parada y selecciona un color de la paleta o usa el cuentagotas para elegir uno nuevo. Los puntos de parada permiten agregar más colores al gradiente; haz clic en cualquier parte del control deslizante para agregar un nuevo punto.

Opciones de gradiente de fondo:

• Tipo de gradiente – Cambia el tipo desde el menú desplegable.

• Dirección del gradiente – Cambia la dirección arrastrando el control o escribiendo un valor numérico.

• Repetir gradiente – Activa esta opción si quieres que el gradiente se repita.

• Unidad del gradiente – Cambia cómo se calculan los puntos de parada.

• Colocar gradiente sobre la imagen de fondo – Activa esta opción para poner el gradiente sobre la imagen de fondo si hay una aplicada.

Cómo agregar una imagen de fondo:

1. Haz clic en la tercera pestaña, el ícono de imagen.
   
2. Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar una foto ya subida o subir una nueva.
   

Opciones de imagen de fondo:

• Usar efecto parallax – Activa para aplicar un efecto parallax (donde la imagen se mueve más rápido que el contenido de primer plano, dando ilusión 3D). Por defecto está desactivado.

• Tamaño de la imagen de fondo – Selecciona el tamaño desde el menú desplegable.

• Posición de la imagen de fondo – Elige la posición desde el menú.

• Repetición de la imagen de fondo – Elige si y cómo se repite la imagen.

• Mezcla de imagen de fondo – Selecciona cómo se mezcla la imagen con otras capas del módulo.

Cómo agregar un video de fondo:

1. Haz clic en la cuarta pestaña, el ícono de video.
   
2. Haz clic en el ícono gris + para abrir la biblioteca de medios y seleccionar o subir un video.
   

Opciones de video de fondo:

• Mp4 vs WebM – Se recomienda subir ambas versiones para compatibilidad con todos los navegadores.

• Ancho del video de fondo – Define el ancho en valor numérico.

• Alto del video de fondo – Define el alto en valor numérico.

• Pausar video cuando otro video esté reproduciéndose – Activa esta opción para que el video de fondo se pause si otro video está en reproducción. Por defecto, el video se pausa si no está visible. Si quieres que continúe, desactiva esta opción.

Cómo agregar un patrón de fondo:

1. Haz clic en la quinta pestaña, el ícono de patrón.
   
2. Haz clic en Agregar patrón de fondo.
   Elige el tipo de patrón desde el menú desplegable.

Opciones de patrón de fondo:

• Color del patrón – Selecciona el color de la paleta o usa el cuentagotas.

• Transformación del patrón – Transforma el patrón horizontal o verticalmente, rota o invierte.

• Tamaño del patrón – Elige tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado (con opciones de ancho y alto).

• Origen de repetición del patrón – Selecciona el origen desde donde se repite.

• Desplazamiento horizontal y vertical del patrón – Ajusta desplazamientos.

• Repetición del patrón – Elige cómo se repite (horizontal, vertical, etc.).

• Modo de mezcla del patrón – Define cómo interactúa con capas inferiores, selecciona entre 16 modos disponibles.

Cómo agregar una máscara de fondo:

1. Haz clic en la sexta pestaña, el ícono de máscara.
   
2. Haz clic en Agregar máscara de fondo.
   Selecciona el tipo de máscara desde el menú.

Opciones de máscara de fondo:

• Color de la máscara – Selecciona color de la paleta o usa el cuentagotas.

• Transformación de la máscara – Transforma horizontal o vertical, rota o invierte.

• Relación de aspecto de la máscara – Relación entre ancho y alto.

• Tamaño de la máscara – Igual que el patrón, elige tamaño real, cubrir, ajustar, estirar o tamaño personalizado (con opciones de ancho y alto).

• Modo de mezcla de la máscara – Cómo interactúa con capas inferiores, elige entre 16 modos.

Etiqueta de administrador

La etiqueta de administrador es donde puedes dar un nombre al módulo, visible solo para ti, para mantener organizado y fácil de entender el backend. Por defecto, será el nombre del módulo, pero puedes cambiarlo.

Pestaña Diseño

Aquí encontrarás todos los estilos y configuraciones de diseño para el Módulo Persona de Divi.

Icono

Aquí puedes configurar el color y tamaño de los íconos de redes sociales.

• Color del icono – Selecciona un color de la paleta de tu sitio o usa el cuentagotas para un color nuevo.

• Tamaño del icono – Por defecto, el tamaño será igual al texto del módulo. Puedes seleccionar un tamaño personalizado activando la opción y eligiendo el tamaño con el control deslizante o ingresando un valor numérico.

Imagen

Aquí puedes darle estilo a la imagen del perfil.

• Esquinas redondeadas de la imagen – Ingresa un valor numérico para redondear las esquinas. Mientras más alto, más redondeadas. Los valores están enlazados por defecto (ícono de cadena azul). Para desvincular y establecer valores diferentes para cada esquina, haz clic en la cadena.

• Estilos del borde de la imagen – Agrega borde a todos o lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del borde de la imagen – Define el grosor del borde (mínimo 1px para que se muestre).

• Color del borde de la imagen – Elige un color de la paleta o usa el cuentagotas.

• Estilo del borde de la imagen – Selecciona estilo: sólido, punteado, rayado, doble, surco, relieve, incrustado, saliente o ninguno.

• Sombra de la caja de la imagen – Elige el estilo de sombra. Por defecto no hay sombra.

• Posición horizontal de la sombra – Controla la posición horizontal de la sombra.

• Posición vertical de la sombra – Controla la posición vertical de la sombra.

• Fuerza de desenfoque de la sombra – Controla el nivel de desenfoque.

• Fuerza de expansión de la sombra – Controla el tamaño de expansión de la sombra.

• Color de la sombra – Elige el color de la sombra.

• Posición de la sombra – Elige si la sombra es interna o externa.

• Matiz de la imagen – Ajusta el tono (matiz) de la imagen.

• Saturación de la imagen – Ajusta la saturación.

• Brillo de la imagen – Ajusta el brillo.

• Contraste de la imagen – Ajusta el contraste.

• Invertir imagen – Invierte los colores de la imagen.

• Sepia de la imagen – Controla el nivel de tono sepia aplicado.

• Opacidad de la imagen – Controla la transparencia de la imagen.

• Desenfoque de la imagen – Controla el nivel de desenfoque.

• Modo de mezcla de la imagen – Define cómo se mezcla la imagen con las capas debajo. Por defecto está en normal.
  

Texto

Esto establece los estilos generales del texto para este módulo; sin embargo, puedes configurar estilos específicos para textos específicos en otras secciones como Texto del Título, Texto del Cuerpo y Texto de la Posición.

• Alineación del Texto - Elige la alineación del texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto - Selecciona la paleta de colores de texto predeterminada para este módulo: claro u oscuro. Las paletas de colores claro y oscuro predeterminadas pueden configurarse en las Opciones del Tema Divi.

• Sombra del Texto - Aplica una sombra paralela a todo el texto dentro de este módulo. Cuando se selecciona un tipo de sombra, se aplicará a todo el contenido, tanto al número como al texto del título.

---

---

Texto del Título

Estas son las configuraciones para el estilo y la configuración específica del Texto del Título únicamente, que muestra el nombre de la persona.

• Nivel de Encabezado del Texto - Elige el nivel de encabezado asignado al texto del título: h1, h2, h3, h4, h5 o h6.

• Fuente del Título - Elige la fuente que deseas usar para el texto del título. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir otra fuente o subir una fuente personalizada haciendo clic en el desplegable.

• Peso de la Fuente del Título - Haz clic en el desplegable para seleccionar el grosor de la fuente del texto del título.

• Estilo de la Fuente del Título - Elige el estilo de la fuente del texto del título:

  • Cursiva

  • Capitalizado

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del Texto del Título - Elige la alineación específicamente para el texto del título:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto del Título - Elige un color específico para el texto del título. Selecciona desde la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para encontrar un nuevo color.

• Tamaño del Texto del Título - Elige el tamaño de la fuente del texto del título arrastrando el control deslizante o escribiendo un valor numérico.

• Espaciado entre Letras del Título - Elige el espaciado entre letras del texto del título arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. A mayor número, más espacio.

• Altura de Línea del Título - Elige la altura de línea del texto del título arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. A mayor número, más espacio.

• Sombra del Texto del Título - Añade una sombra paralela al texto del título. Una vez que se selecciona un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

---

Texto del Cuerpo

Estas son las configuraciones para el estilo y la configuración específica del Texto del Cuerpo únicamente, que muestra la biografía de la persona.

• Fuente del Cuerpo - Elige la fuente que deseas para el texto del cuerpo. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir otra fuente o subir una fuente personalizada haciendo clic en el desplegable.

• Peso de la Fuente del Cuerpo - Haz clic en el desplegable para seleccionar el grosor de la fuente del texto del cuerpo.

• Estilo de la Fuente del Cuerpo - Elige el estilo de la fuente del texto del cuerpo:

  • Cursiva

  • Capitalizado

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del Texto del Cuerpo - Elige la alineación específicamente para el texto del cuerpo:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto del Cuerpo - Elige un color específico para el texto del cuerpo. Selecciona desde la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para encontrar un nuevo color.

• Tamaño del Texto del Cuerpo - Elige el tamaño de la fuente del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico.

• Espaciado entre Letras del Cuerpo - Elige el espaciado entre letras del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico.

• Altura de Línea del Cuerpo - Elige la altura de línea del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico.

• Sombra del Texto del Cuerpo - Añade una sombra paralela al texto del cuerpo. Configura dirección, intensidad del desenfoque y color.

---

Texto de la Posición

Estas son las configuraciones para el estilo y la configuración específica del Texto de la Posición únicamente, que muestra el puesto o cargo de la persona.

• Fuente de la Posición - Elige la fuente que deseas para el texto de la posición.

• Peso de la Fuente de la Posición - Selecciona el grosor de la fuente del texto de la posición.

• Estilo de la Fuente de la Posición - Elige el estilo del texto de la posición:

  • Cursiva

  • Capitalizado

  • Versales pequeñas

  • Subrayado

  • Tachado

• Alineación del Texto de la Posición - Elige la alineación específica para el texto de la posición:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del Texto de la Posición - Elige un color específico para el texto de la posición.

• Tamaño del Texto de la Posición - Elige el tamaño de la fuente del texto de la posición.

• Espaciado entre Letras de la Posición - Ajusta el espaciado entre letras del texto de la posición.

• Altura de Línea de la Posición - Ajusta la altura de línea del texto de la posición.

• Sombra del Texto de la Posición - Añade y configura sombra para el texto de la posición.

---

Tamaño

• Ancho - Define el ancho del módulo. Para más información, consulta la documentación oficial.

• Ancho Máximo - Define el ancho máximo del módulo.

• Alineación del Módulo - Si se establece un ancho o ancho máximo, puedes alinear el módulo:

  • Alineado a la izquierda

  • Centrado

  • Alineado a la derecha

• Altura Mínima - Define la altura mínima del módulo.

• Altura - Define la altura del módulo.

• Altura Máxima - Define la altura máxima del módulo.

---

Espaciado

Puedes agregar márgenes o relleno al módulo escribiendo valores numéricos.

• El margen añade espacio fuera del módulo y el relleno añade espacio dentro del módulo.

• Para mantener proporciones iguales, haz clic en el icono de cadena para enlazar valores (por ejemplo, arriba y abajo).

• Valores predeterminados de margen y relleno para el módulo son 0.

---

Borde

Añade un borde al módulo, completo o solo en un lado. Ajusta el ancho con el deslizador y elige un color y estilo.

• Esquinas Redondeadas - Escribe un valor numérico para redondear las esquinas. Los valores están enlazados por defecto, pero puedes desvincularlos para configurar cada esquina por separado.

• Estilos de Borde - Elige un estilo: sólido, discontinuo, punteado, doble, ranura, relieve, interno, externo o ninguno.

• Ancho del Borde - Ajusta el grosor del borde (mínimo 1px para que se vea).

• Color del Borde - Elige el color del borde desde la paleta o con el cuentagotas.

---

Sombra de Caja

Añade sombra a todo el módulo y configura:

• Posición horizontal y vertical

• Fuerza del desenfoque

• Fuerza de propagación

• Color

• Posición de la sombra (interna o externa)

---

Filtros

Ajusta filtros del módulo:

• Matiz

• Saturación

• Brillo

• Contraste

• Invertir

• Sepia

• Opacidad

• Desenfoque

El Modo de Mezcla define cómo se mezcla el módulo con las capas inferiores. Por defecto es normal.

---

Transformar

Opciones para:

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Puedes bloquear valores para que sean idénticos con el icono de cadena.

---

Animación

Aplica animaciones al módulo y configura:

• Duración

• Retraso

• Opacidad inicial

• Curva de velocidad

• Repetición (loop)

---

Pestaña Avanzada

Opciones para usuarios avanzados, como CSS personalizado.

• Aplica CSS personalizado, clases e IDs para personalizar estilos con código avanzado.

---

ID y Clases CSS

Asigna un ID o clase CSS específico para usar en hojas de estilo de temas hijo.

---

CSS Personalizado

• CSS libre: escribe código CSS para este módulo, por ejemplo:
  selector h1 {color: red;}

• Elementos del módulo: añade CSS personalizado para secciones individuales.

---

Condiciones

Las Condiciones de Visualización permiten elegir cuándo mostrar el módulo según condiciones como si el usuario ha comprado antes, navegador, sistema operativo, y más.

Puedes añadir una o múltiples condiciones.

Visibilidad

Deshabilitar en - Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo de la vista) cuando la ventana de visualización sea un Teléfono, Tableta o Escritorio, haciendo clic en la casilla correspondiente.

Desbordamiento horizontal - Define qué se muestra cuando el contenido se desborda por los bordes izquierdo y derecho de un elemento a nivel bloque. Puede ser:

• Visible - El contenido se mostrará si el contenido del módulo se desborda en su altura.

• Scroll - Si el contenido del módulo se desborda en su altura, se usará una barra de desplazamiento vertical para navegar por su contenido.

• Oculto - Si el contenido del módulo se desborda en su altura, la parte que se desborda quedará oculta.

• Auto - El navegador decidirá si se muestra una barra de desplazamiento.

Desbordamiento vertical - Define qué se muestra cuando el contenido se desborda por los bordes superior e inferior de un elemento a nivel bloque. Puede ser:

• Visible - El contenido se mostrará si el contenido del módulo se desborda en su altura.

• Scroll - Si el contenido del módulo se desborda en su altura, se usará una barra de desplazamiento vertical para navegar por su contenido.

• Oculto - Si el contenido del módulo se desborda en su altura, la parte que se desborda quedará oculta.

• Auto - El navegador decidirá si se muestra una barra de desplazamiento.

---

Transiciones

Esto controla la duración, el retraso y la curva de velocidad de la animación hover (al pasar el cursor).

• Duración de la transición - Define la duración (en milisegundos) de la transición de la animación hover.

• Retraso de la transición - Define el retraso de la transición de la animación hover (en milisegundos).

• Curva de velocidad de la transición - Define la curva de velocidad de la transición de la animación hover.

---

Posición

Posición - Esto define la posición del módulo:

• Relativa (valor predeterminado) - El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento son relativos a sí mismo basados en los valores de Desplazamiento Vertical y Desplazamiento Horizontal. El desplazamiento no afecta la posición de otros elementos; por lo tanto, el espacio reservado para el módulo en el diseño es el mismo que si la posición fuera estática.

• Absoluta - El módulo se elimina del flujo normal del documento y no se crea espacio para él en el diseño. Se posiciona en relación con su ancestro posicionado más cercano (si lo hay) o el bloque contenedor inicial. Las opciones de ubicación determinan su posición final.

• Fija - El elemento se elimina del flujo normal del documento y no se crea espacio para él. Se posiciona en base a las opciones de ubicación en relación con la ventana del navegador. Esto puede usarse para crear un módulo fijo (sticky).

• Desplazamiento Vertical - Define la posición vertical del módulo.

• Desplazamiento Horizontal - Define la posición horizontal del módulo.

• Índice Z (Z-index) - Define el orden del módulo en el diseño de la página. Los módulos con un número de índice Z más alto se superponen a módulos con un índice Z más bajo.

---

Efectos de Desplazamiento

Esta sección define el comportamiento del módulo cuando el usuario desplaza la página. Puedes hacer que el módulo quede fijo en la parte superior, inferior, o en ambas y decidir si el módulo debe transformarse mientras el usuario se desplaza.

Además, puedes habilitar el movimiento vertical en este módulo, lo que permite ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos circundantes.

La función Efecto de Activación de Movimiento te permite elegir cuándo se activa el efecto de desplazamiento aplicado. Puedes activar el efecto cuando la parte superior, el medio o la parte inferior del elemento esté en vista.

---

Guardar tu Diseño

Una vez que hayas terminado de estilizar y configurar el módulo contador numérico, haz clic en la flecha verde en la parte inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, perderás tu trabajo.

---

Luego, guarda el diseño de la página

Para guardar el diseño de la página, puedes presionar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra inferior de Divi para guardar haciendo clic en el ícono circular morado con tres puntos … para expandir la barra y luego hacer clic en el botón verde de Guardar en la parte inferior derecha.

---

Salir del Constructor Visual

Ahora que todos tus cambios están guardados, haz clic en “Salir del Constructor Visual” en la barra de administración superior para salir del Constructor Visual.

---

---

Continuar aprendiendo

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

• Descarga un carrusel GRATIS de miembros del equipo que se desplaza automáticamente, hecho con los Efectos de Desplazamiento de Divi

• Cómo añadir íconos sociales con hover a las imágenes de miembros del equipo con Divi