El bloque «Miembros 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 las redes sociales de cada persona en una tarjeta elegante y profesional.
Este bloque es ideal para páginas «Acerca de», páginas de destino y cualquier sección en la que sea importante generar confianza y credibilidad. Tienes control total sobre la forma de las imágenes, el estilo de los separadores, 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 se adapta a 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 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 está organizada en cuatro secciones.
General:
- Imagen: Sube o selecciona la foto del miembro del equipo. Establece el ancho de la imagen (en píxeles o %) y, si lo deseas, establece una altura fija. Introduce un texto alternativo para describir la imagen y facilitar su accesibilidad.
- Posición de la imagen: elige dónde aparecerá la imagen en relación con el texto: arriba, a la izquierda o a la derecha.
- Nombre: Introduzca el nombre del miembro del equipo (por defecto: «John Doe»). Elija la etiqueta HTML utilizada para representarlo (H1–H6, div, span o p), establezca la alineación del texto y ajuste el margen inferior.
- Mostrar designación: Activa o desactiva el título del puesto (Sí/No). Cuando esté activado, introduce el texto de la designación, establece su alineación y ajusta el margen inferior.
- Mostrar descripción: Activa o desactiva la biografía o la descripción (Sí/No). Cuando esté activada, 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 aplicará a la foto del miembro del equipo: predeterminada, redondeada, circular o personalizada (que permite controlar individualmente el radio de las esquinas).
- Margen inferior de la imagen: Establece el espacio debajo de la imagen.
Separador:
- Separador: Activa o desactiva una línea decorativa (Sí/No).
- Posición: Elija dónde aparecerá la línea separadora: debajo del nombre, debajo de la designación o debajo de la descripción.
- Ancho: Establece el ancho de la línea separadora.
- Estilo: Elija el estilo de línea: sólida, punteada o discontinua.
- Grosor: Establece el grosor de la línea separadora en píxeles.
- Color: Elija el color de la línea separadora.
- Alineación del separador: Establezca la alineación horizontal del separador: izquierda, centro o derecha.
- Margen inferior del separador: Establece el espacio debajo de la línea separadora.
Iconos sociales:
- Iconos sociales: Activar o desactivar los iconos de redes sociales (Sí/No).
- Elementos de icono: Añada, reordene y configure enlaces sociales individuales. Para cada elemento, elija un icono, introduzca el título que se mostrará y la URL de destino. Utilice Añadir nuevo elemento para añadir iconos adicionales o arrastre los elementos para reordenarlos.
- Ancho del icono: Establece el tamaño de los iconos sociales.
- Relleno del icono: Establece el espaciado dentro de cada botón de icono.
- Forma: Elige la forma de los contenedores de iconos: predeterminada, redondeada, circular o personalizada.
- Alineación de iconos sociales: establece la alineación horizontal de la fila de iconos sociales: izquierda, centro o derecha.
Paso 2a: Elija un estilo de plantilla
En la pestaña Plantillas, puedes aplicar un diseño preestablecido al bloque Miembro del equipo. Hay tres plantillas disponibles: Efecto rayado, Divisor y Fondo. Al seleccionar una plantilla, se aplica instantáneamente su estilo, que luego puedes personalizar aún más en las pestañas Contenido y Avanzado.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el aspecto visual de tu bloque Miembro del equipo.
Estilos:
- Tipografía del nombre: Establezca la familia tipográfica, el tamaño, el grosor, el estilo, la altura de línea, el espaciado entre letras y el uso de mayúsculas y minúsculas para el nombre del miembro del equipo.
- Tipografía de designación: Establezca las propiedades tipográficas para el texto del título del puesto.
- Descripción Tipografía: Establece las propiedades tipográficas del texto biográfico o descriptivo.
- Color del nombre: Establece el color del nombre del miembro del equipo.
- Color de designación: Establezca el color para el título del puesto.
- Color de la descripción: Establece el color del texto de la descripción.
- Sombra del texto: aplica una sombra al texto utilizando tamaños preestablecidos (Ninguno, Línea fina y preajustes más grandes).
Espaciado:
- Margen: establece el espacio exterior alrededor del bloque en los cuatro lados, con controles independientes para ordenador, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Frontera:
- Estilo del borde: Elija entre Ninguno, Sólido, Punteado o Discontinuo.
- Ancho del borde: Establece anchos individuales para los bordes superior, derecho, inferior e izquierdo.
- Color del borde: Elija el color del borde.
- Radio del borde: redondea las esquinas del bloque de forma independiente para cada esquina, o utiliza el botón de sincronización para aplicar un radio uniforme.
Antecedentes:
- Estilo de fondo: Elija Color sólido, Degradado (con tipo, ángulo, posición y dos paradas de color) o Fondo de imagen (con opciones de posición, repetición, tamaño y adjuntar).
- 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 aplicar un estilo específico.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puede utilizarlo para hacer referencia al bloque en CSS o JavaScript personalizados.
- Atributos personalizados: añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato clave|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Activa esta opción para ocultar el bloque cuando se vea en pantallas de escritorio.
- Ocultar en tableta: Activa esta opción para ocultar el bloque cuando se vea en pantallas de tableta.
- Ocultar en dispositivos móviles: Activa esta opción para ocultar el bloque cuando se vea en pantallas de dispositivos móviles.
Efectos de animación:
- Efecto de desplazamiento: aplica una animación activada por desplazamiento al bloque, incluyendo opciones de desplazamiento vertical y horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto ratón: aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Miembro del equipo y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque Miembros 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 que hay detrás de tu marca. Experimenta con formas de imágenes, estilos de separadores y opciones de fondo para crear una presentación del equipo que resulte elegante y acorde con la marca.