El módulo Person de Divi es una excelente manera de exhibir a su personal. Incluye una ubicación para su nombre, posición, enlaces de redes sociales, descripción y una imagen. Es un módulo simple con toda la información de la persona almacenada dentro del propio módulo. ¿Qué sucede si desea agregar categorías y seleccionar qué miembros del equipo mostrar en función de esas categorías? ¿Qué pasaría si quisiera cambiar el diseño para cada miembro del equipo a la vez? ¿Qué pasa con las opciones de diseño o un filtro?
Un complemento de terceros para Divi llamado Divi Team Members hace exactamente eso. Agrega 6 módulos a Divi Builder con múltiples opciones de diseño y características de estilo y un área para crear los miembros de su equipo. Puede colocar tantos módulos como desee y seleccionar qué categorías mostrará cada módulo.
Echemos un vistazo a los miembros del equipo Divi y veamos qué puede hacer. Las imágenes de estos ejemplos provienen de los diseños de Elegant Themes. Estoy usando una combinación de imágenes cuadradas y circulares.
Una vez que cargue y active el complemento Divi Team Members, deberá activar la licencia. En el tablero, vaya a Configuración > Miembros del equipo Divi e ingrese su clave de API y correo electrónico.
Se agrega un nuevo menú al tablero llamado Miembros del equipo . Dentro de este menú encontrará la lista de miembros del equipo, el área para crear un nuevo miembro del equipo, las categorías de departamento y la configuración.
Agregar un miembro del equipo
Create Team Member incluye un editor TinyMCE, categorías de departamento, imagen de miembro del equipo e información del miembro del equipo. Aquí puede agregar contenido y crear categorías como con una publicación de WordPress. Cree el miembro del equipo y presione Publicar .
Miembros del equipo enumera cada uno de los miembros del equipo que ha creado. Puede buscar, realizar acciones masivas y ver por categoría.
Las categorías de departamento funcionan igual que las categorías normales de WordPress. Agregue el nombre, slug , padre, descripción, etc.
La configuración general le permite establecer la longitud de visualización del contenido, elegir la página de archivo, establecer el diseño de la página de archivo (cuadrícula o lista), elegir el número de miembros por página, mostrar el filtro, la paginación y el enlace de detalles.
Módulos de miembros del equipo Divi
El complemento Divi Team Members agrega 6 nuevos módulos a Divi Builder:
- Miembros del equipo
- Cuadrícula de miembros del equipo
- Vista horizontal de los miembros del equipo
- Lista de miembros del equipo
- Control deslizante de miembros del equipo
- Tabla de miembros del equipo
La mayoría de los módulos incluyen opciones iguales o similares, pero se muestran de manera diferente. Los módulos Team Members y Team Members Grid tienen 52 opciones de diseño. Otras características incluyen un filtro de categoría, categorías, ordenación, tipo de enlace (incluye opciones personalizadas), opciones de color, mostrar el enlace social, etc. El módulo Lista de miembros del equipo incluye 4 opciones de diseño. El botón de filtro tiene 20 estilos diferentes integrados.
La pestaña Diseño incluye el texto del nombre del equipo, el texto del nombre de la designación, el texto del nombre de la descripción, el borde, la sombra del cuadro y la animación. Algunos de los módulos incluyen personalizaciones para el texto del teléfono y el texto del sitio web. Tienen personalizaciones básicas para las fuentes.
La pestaña Avanzado incluye campos CSS personalizados para que pueda diseñar muchos de los elementos individualmente.
Con 52 estilos de diseño y 20 estilos de botones, claramente tiene suficientes opciones de diseño para crear prácticamente cualquier tipo de estilo que pueda desear. Cada uno de los elementos son personalizables. Puede ajustar los colores de fondo, los colores superpuestos, el texto, los iconos y los botones de filtro.
Ejemplos de miembros del equipo Divi
Aquí está el módulo Miembros del equipo usando la configuración predeterminada. En realidad, muestra a todos los miembros de mi equipo, pero solo a tres en una sola línea. Los miembros del equipo se muestran como tarjetas individuales. Hace zoom en la imagen y muestra los enlaces sociales al pasar el mouse. En este ejemplo, estoy desplazando el cursor sobre la tarjeta del medio. Este es el diseño Style1. Incluso la configuración predeterminada tiene un diseño lo suficientemente elegante como para usar tal cual.
Aquí está el diseño de Style2. Agrega una superposición con enlaces sociales al pasar el mouse.
Style3 agrega un enlace LEER MÁS al pasar el mouse.
Style4 agrega una superposición con íconos degradados y sociales al pasar el mouse.
Style6 agrega una superposición circular con todo el texto animado.
Style7 trae los íconos sociales y agrega una pestaña con estilo en la parte inferior.
Style8 trae los botones sociales a la derecha al pasar el mouse.
Style10 muestra el texto en una superposición al pasar el mouse y agrega los íconos sociales a la izquierda.
Aquí está el diseño de Style1 para el módulo de cuadrícula de miembros del equipo. Agrega un filtro para todas las categorías. Este es el estilo de filtro 1.
El módulo Vista horizontal de los miembros del equipo muestra toda la información dentro de una tarjeta. Este es el estilo de diseño1. También es filtrable. Este usa Style2 para el botón de filtro.
El módulo Lista de miembros del equipo mueve la imagen fuera de la tarjeta y agrega un extracto del contenido y un botón para ver más. También incluye el filtro. Este es el diseño Style1 con Syle3 para el botón de filtro. Esta era una imagen cuadrada que el módulo muestra como un óvalo.
El módulo Control deslizante de miembros del equipo incluye navegación. No incluye estilos de diseño y no se puede filtrar, pero todos los elementos se pueden personalizar.
El módulo Tabla de miembros del equipo muestra una tabla con toda la información en una línea. Cada otra línea es de un color diferente. Puede diseñar líneas pares e impares individualmente. Me muevo sobre el miembro inferior del equipo, que cambia de color y aumenta el tamaño de la imagen al pasar el mouse.
Aquí está el módulo del miembro del equipo que usa Style13 dentro de la página Acerca de del diseño de Pagos digitales de Elegant Themes. Esta es la configuración predeterminada.
Hice algunas modificaciones, incluidos los colores para el fondo, los íconos, el borde, la superposición y el texto del nombre. Lo configuré para mostrar 2 miembros del equipo. Las tarjetas siguen siendo del mismo tamaño que si mostrara 3. Sin embargo, el tamaño cambiará si las coloco dentro de una columna más pequeña. Si cambio de estilo, los colores permanecen con ese estilo, por lo que puedo establecer diferentes colores para cada estilo. Los iconos sociales siguen siendo los mismos en todos los estilos.
Esto es Estilo15. Mantiene los colores de los íconos sociales, pero mis colores personalizados para las superposiciones son los predeterminados, lo que me permite usar un color diferente para cada estilo.
Este es el módulo de cuadrícula de miembros del equipo que muestra 3 miembros del equipo usando Style16. Lo he colocado dentro de una columna más pequeña dentro de la sección.
Aquí está el mismo módulo usando Style17 y Random para la selección de miembros del equipo. Estoy sobre el miembro del equipo del medio, que muestra los íconos sociales en una superposición. Los colores son predeterminados.
Aquí está la Cuadrícula de miembros del equipo con estilo de diseño 19 y estilo de botón de filtro 5. Cambié los colores de los botones y agregué una sombra de fondo a las tarjetas para que coincidan. En este ejemplo, paso el cursor sobre Medios visuales en el filtro para mostrar la animación del botón.
Este usa el diseño de la agencia de diseño con el módulo Lista de miembros del equipo usando el diseño Style4.
Este módulo de lista de miembros del equipo utiliza Style3. He personalizado el color de fondo para que luche dentro del diseño del diseño. Lo configuré para mostrar solo un miembro del equipo.
Aquí está el módulo Tabla de miembros del equipo dentro de la sección Nuestro trabajo del diseño de la Agencia de diseño. He diseñado los colores para que se mezclen con el sitio, usando blanco para el texto y amarillo para todos los íconos.
Puede ajustar los colores de fuente de forma independiente. Agregué algunos miembros más del equipo, cambié los colores de las fuentes, aumenté el tamaño de fuente del nombre del miembro del equipo y lo cambié a Arimo (solo el nombre tiene esta opción, y solo este módulo), agregué un fondo para impar e incluso filas, y agregó un borde con sombra.
Uso de miembros del equipo Divi con extra
Divi Team Members funciona bien con Extra . Este es el módulo Lista de miembros del equipo que usa Style2.
Licencia y documentación de los miembros del equipo Divi
Hay tres licencias para elegir:
- 1 sitio – $35
- 5 sitios – $60
- Sitios ilimitados – $80
La documentación se proporciona como un archivo de descarga en el sitio web del desarrollador. Es un documento de 15 páginas con información detallada de cada módulo.
Puede ver más información y comprar el complemento Divi Team Members en el sitio web del desarrollador .
pensamientos finales
Divi Team Members es fácil de usar y se ve muy bien dentro de los diseños de Divi. Hay tantos estilos de diseño incorporados que no sentí la necesidad de personalizar mucho. Con 52 estilos de diseño y 20 estilos de botones en varios módulos, no tuve problemas para encontrar algo que funcionara dentro de mis diseños. La mayoría de las veces solo necesitaba diseñar los colores para que coincidieran con mi diseño.
Hubo algunas ocasiones en las que quise poner una fuente en negrita o hacer algún otro ajuste, pero no tenía una opción de estilo para ello. Todavía se están agregando características de estilo, por lo que estoy seguro de que esto se solucionará. Espero ver algunas opciones de estilo para las imágenes, como tamaños y formas, y más opciones de estilo de fuente. Sería bueno tener un estilo universal que pudiera seleccionar en lugar de tener que crear el mismo color de superposición cuando cambié los estilos de diseño.
Si está interesado en un módulo que sea simple y brinde muchas opciones de diseño para mostrar a los miembros de su equipo, Divi Team Members podría ser el complemento que necesita.
Queremos escuchar de ti. ¿Has probado Divi Team Members? Cuéntanos tu experiencia en los comentarios.
Imagen destacada a través de Sentavio / shutterstock.com