Saltar al contenido principal

Tutorial Divi: Cómo usar el módulo Divi Builder Person

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

El módulo Divi Person es la mejor manera de crear un bloque de perfil personal. Este es un excelente módulo para usar en las páginas Acerca de mí o en los miembros del equipo donde desea crear una biografía de individuos. Este módulo combina 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 saltar a Divi Builder. Una vez que el tema Divi esté instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor cada vez que crea una nueva página. 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 puedes hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

constructor divi

Una vez que haya ingresado en 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 líneas. Si comienza una nueva página, no olvide agregar primero una línea a su página. Tenemos excelentes tutoriales sobre el uso de los elementos de líneas y de secciones de Divi.

módulo persona divi.png

Localice el módulo de persona en la lista de módulos y haga clic en él para agregarlo a su página. Se puede buscar en la lista de módulos, lo que significa que también puede escribir la palabra "persona", luego hacer clic en Intro para buscar y agregar automáticamente el módulo Persona. Una vez que se agrega el módulo, la lista de opciones lo recibirá. Estas opciones se separan 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 Acerca de nosotros es un buen lugar para presentar a los miembros de su equipo utilizando el módulo Persona. Esto agrega un toque personal y puede ayudar a generar confianza con los 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. Usaré un diseño de tres personas, tres columnas que mantienen la sección más compacta y se ajusta al diseño general de la página.

página sobre nosotros.jpg

Con 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.

módulo persona wordpress divi.png

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

Opciones de contenido

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

Opciones de diseño

Icono de color: # fcbf00
Color del icono de desplazamiento: # e0a831
Fuente del encabezado: Roboto, negrita, aprovecha
Tamaño de fuente del encabezado: 30px
Color del texto del encabezado: # 505050
Letra de encabezado de espaciado: 1px
Altura de la línea del encabezado: 1.5em
Tamaño de letra 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);

cambiar perfil persona divi.png

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 columna de la fila. Dado que el diseño se ha pospuesto para cada uno de los módulos duplicados de "Persona", todo lo que necesita hacer es actualizar el contenido con la imagen, el título, la ubicación, las URL de las redes sociales y la descripción. de la persona

Es todo !

módulo de resultados persona divi.jpg

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

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.

opción de contenido divi.png

Nombre

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

Posición

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

URL de perfil de Facebook

Ingrese la URL en su página de Facebook o déjelo 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 deshabilitar el icono de Twitter.

URL del perfil de Google+

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

URL del perfil de LinkedIn

Ingrese la URL en su página de LinkedIn o déjela en blanco para deshabilitar el icono 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

Establezca 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 sobre 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ódulos 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 parámetros de diseño que puede usar para cambiar cualquier cosa.

parametre design module divi.png

Color del ícono

Esta opción controla el color de los iconos de redes sociales que aparecen en el perfil de cada persona. Por defecto, estos íconos son grises, puede comprar este color usando esta configuración.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Color de icono en paso elevado

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

Color del texto

Aquí puedes elegir el valor de tu texto. Si está trabajando en un fondo oscuro, su texto debe estar activado. Si trabaja con un fondo claro, su texto debe estar 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 grandes con tecnología de Google Fonts. Por defecto, 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 en negrita, cursiva, mayúscula y subrayada.

Tamaño de la fuente del encabezado

Aquí puede ajustar el tamaño del texto del encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto del encabezado, elija el color deseado en el selector de color con esta opción.

Espaciado de membretes

El espaciado de las 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del encabezado

La altura de la línea afecta el espacio entre cada línea del texto del encabezado. 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 espacio deseado en la línea. 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" dependiendo del 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 del menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, 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 en negrita, cursiva, mayúscula y subrayada.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño del texto de su cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente 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" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color con esta opción.

Espaciado de letras corporales

El espaciado de las 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" dependiendo del 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 espacio 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" dependiendo del 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 en el selector de color para aplicarlo a su borde.

Ancho del borde

Por defecto, los bordes tienen un ancho de píxel 1. 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 otra, como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, ranura, cresta, incrustación y comienzo. Seleccione su estilo deseado en el menú desplegable para aplicarlo a su borde.

Margen personalizado

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

Relleno personalizado

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 uno de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, 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 Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados CSS y HTML. Aquí puede aplicar CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

módulo de diseño de opciones divi.png

ID de CSS

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

Clase de CSS

Ingrese las clases de CSS opcionales que se utilizarán para este módulo. Se puede usar una clase CSS para crear un estilo CSS personalizado. 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 agrega a su página o sitio web mediante las opciones de tema Divi o la configuración de la página Divi Builder.

CSS personalizado

El CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en estos parámetros ya están envueltas en las etiquetas de estilo. Tan solo ingrese las reglas CSS separadas por punto y coma.

Animación

Por defecto, las imágenes se animan cuando se desplaza hacia abajo en la página. Aquí puede elegir la dirección de la animación o deshabilitarla.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio de forma individual. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño móvil al eliminar ciertos elementos de la página.

Otros tutoriales de Divi

Este artículo contiene los comentarios 2
  1. Salut!
    Cuando creo un proyecto o publicación y uso el módulo Persona, ¿por qué desaparece el campo Posición cuando veo proyectos o publicaciones usando el blog o el módulo de blog filtrable?

    ¿Cómo hacer visible el campo Posición de persona en una vista de cuadrícula de blog?

    Gracias!

    1. Buenas tardes y gracias por esperar.
      En general, los módulos de búsqueda no ejecutan códigos cortos. Por lo tanto, el módulo Persona (como cualquier otro módulo) genera un código corto que solo se puede representar al obtener una vista previa del artículo o página y no desde un módulo que proporciona una vista previa del artículo o página.

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
19 acciones
cuota10
Tweet3
Siguiente 6