El bloque Miembro del Equipo te permite mostrar a los miembros de tu equipo en cualquier página de SeedProd con un diseño de perfil totalmente personalizable. Muestra la foto, el nombre, el cargo, la descripción y los enlaces a redes sociales de cada persona en una tarjeta pulida y profesional.
Este bloque es ideal para páginas “Acerca de”, páginas de destino y cualquier sección donde sea importante generar confianza y credibilidad. Tienes control total sobre la forma de la imagen, el estilo del separador, la apariencia de los iconos sociales y el estilo tipográfico de cada elemento de texto, lo que le da a la sección de tu equipo un aspecto que coincide con tu marca.
Añadir el bloque Miembro del Equipo a tus páginas
Sigue estos pasos para añadir un bloque Miembro del Equipo a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Miembro del Equipo en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Miembro del Equipo para abrir su configuración. En la pestaña Contenido, la configuración se organiza en cuatro secciones.
General:
- Imagen: Sube o selecciona la foto del miembro del equipo. Establece el ancho de la imagen (en px o %) y, opcionalmente, una altura fija. Introduce texto alternativo para describir la imagen para accesibilidad.
- Posición de la imagen: Elige dónde aparece la imagen en relación con el texto: Arriba, Izquierda o Derecha.
- Nombre: Introduce el nombre del miembro del equipo (por defecto: “John Doe”). Elige la etiqueta HTML utilizada para renderizarlo (H1–H6, div, span o p), establece la alineación del texto y ajusta el margen inferior.
- Mostrar cargo: Activa o desactiva el cargo (Sí/No). Cuando esté activado, introduce el texto del cargo, establece su alineación y ajusta el margen inferior.
- Mostrar descripción: Activa o desactiva la biografía o descripción (Sí/No). Cuando esté activado, introduce el texto de la descripción, establece su alineación y ajusta el margen inferior.
Área de imagen:
- Forma: Elige la forma que se aplica a la foto del miembro del equipo: Predeterminada, Redondeada, Círculo o Personalizada (que habilita controles de radio individuales para las esquinas).
- Margen inferior de la imagen: Establece el espaciado debajo de la imagen.
Separador:
- Separador: Activa o desactiva una línea decorativa (Sí/No).
- Posición: Elige dónde aparece la línea separadora: Debajo del nombre, Debajo del cargo o Debajo de la descripción.
- Ancho: Establece el ancho de la línea separadora.
- Estilo: Elige el estilo de la línea: Sólido, Punteado o Discontinuo.
- Grosor: Establece el grosor de la línea separadora en píxeles.
- Color: Elige el color de la línea separadora.
- Alineación del separador: Establece la alineación horizontal del separador: Izquierda, Centro o Derecha.
- Margen inferior del separador: Establece el espaciado debajo de la línea separadora.
Iconos sociales:
- Iconos sociales: Activa o desactiva los iconos de redes sociales (Sí/No).
- Elementos de icono: Añade, reordena y configura enlaces sociales individuales. Para cada elemento, elige un icono, introduce el título de visualización y la URL de destino. Usa Añadir nuevo elemento para añadir iconos adicionales o arrastra los elementos para reordenarlos.
- Ancho del icono: Establece el tamaño de los iconos sociales.
- Espaciado del icono: Establece el espaciado interior de cada botón de icono.
- Forma: Elige la forma de los contenedores de los iconos: Predeterminada, Redondeada, Círculo o Personalizada.
- Alineación de iconos sociales: Establece la alineación horizontal de la fila de iconos sociales: Izquierda, Centro o Derecha.
Paso 2a: Elegir un Estilo de Plantilla
En la pestaña Plantillas, puedes aplicar un diseño preestablecido a tu bloque de Miembro del equipo. Hay tres plantillas disponibles: Efecto Rayado, Separador y Fondo. Seleccionar una plantilla aplica instantáneamente su estilo, que luego puedes personalizar en las pestañas Contenido y Avanzado.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de Miembro del equipo.
Estilos:
- Tipografía del nombre: Establece la familia de fuentes, tamaño, grosor, estilo, altura de línea, espaciado entre letras y mayúsculas/minúsculas para el nombre del miembro del equipo.
- Tipografía de la designación: Establece las propiedades tipográficas para el texto del cargo.
- Tipografía de la descripción: Establece las propiedades tipográficas para el texto de la biografía o descripción.
- Color del nombre: Establece el color del nombre del miembro del equipo.
- Color de la designación: Establece el color del cargo.
- Color de la descripción: Establece el color del texto de la descripción.
- Sombra del texto: Aplica una sombra al texto usando tamaños preestablecidos (Ninguna, Mínima y preajustes más grandes).
Espaciado:
- Margen: Establece el espaciado exterior alrededor del bloque en los cuatro lados, con controles independientes para escritorio, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Borde:
- Estilo del borde: Elige entre Ninguno, Sólido, Punteado o Discontinuo.
- Ancho del borde: Establece anchos individuales para los bordes superior, derecho, inferior e izquierdo.
- Color del borde: Elige el color del borde.
- Radio del borde: Redondea las esquinas del bloque de forma independiente para cada esquina, o usa el interruptor de sincronización para aplicar un radio uniforme.
Fondo:
- Estilo de fondo: Elige color Sólido, Degradado (con tipo, ángulo, posición y dos puntos de color) o fondo de Imagen (con opciones de posición, repetición, tamaño y adjunto).
- Atenuación del fondo: Añade una superposición con opacidad ajustable sobre una imagen de fondo para mejorar la legibilidad del texto.
Atributos:
- Clase personalizada: Añade una o más clases CSS personalizadas al contenedor del bloque para una estilización específica.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puedes usarlo para referenciar el bloque en CSS o JavaScript personalizado.
- Atributos personalizados: Añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato clave|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Activa para ocultar el bloque cuando se ve en pantallas de escritorio.
- Ocultar en tableta: Activa para ocultar el bloque cuando se ve en pantallas de tableta.
- Ocultar en móvil: Activa para ocultar el bloque cuando se ve en pantallas móviles.
Efectos de Animación:
- Efecto de desplazamiento: Aplica una animación activada por desplazamiento al bloque, incluyendo opciones de Desplazamiento Vertical y Desplazamiento Horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto del ratón: Aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Miembro del equipo y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Miembro del equipo a tu página! Una sección de equipo bien diseñada genera credibilidad y ayuda a los visitantes a conectar con las personas detrás de tu marca. Experimenta con las formas de las imágenes, los estilos de los separadores y las opciones de fondo para crear una presentación de equipo que resulte pulida y acorde con la marca.