¿Cómo utilizar Equipo o colaboradores en el Editor de bloques de Waclis?

La sección Equipo o colaboradores del Editor de bloques de Waclis permite presentar a las personas que forman parte de una empresa, organización, proyecto o equipo de trabajo.

Puedes utilizarla para mostrar:

• directivos;

• fundadores;

• responsables de áreas;

• integrantes del equipo;

• profesionales;

• especialistas;

• asesores;

• colaboradores;

• referentes comerciales;

• personas de contacto;

• otros perfiles relevantes para el visitante.

Dentro del Editor de bloques encontrarás diferentes diseños en:

Secciones → Equipo o colaboradores

Según la composición seleccionada podrás personalizar elementos como:

• fotografías;

• nombres;

• cargos;

• descripciones;

• Links;

• iconos sociales;

• Cards;

• fondos;

• columnas;

• espacios;

• comportamiento responsive.

¿Qué es una sección Equipo o colaboradores?

Es una sección diseñada para presentar personas de manera organizada.

Por ejemplo:

NUESTRO EQUIPO

[ FOTO ]
María González
Dirección comercial

[ FOTO ]
Juan Pérez
Operaciones

[ FOTO ]
Lucía Fernández
Administración

También puede incluir una pequeña descripción:

[ FOTO ]

MARÍA GONZÁLEZ

Dirección comercial

Acompaña a los clientes durante el análisis y desarrollo de nuevos proyectos.

¿Cuál es el objetivo de esta sección?

Ayudar al visitante a comprender:

¿Quiénes forman parte de la empresa?

¿Quién está detrás del servicio?

¿Qué función cumple cada persona?

¿Con qué perfiles puede interactuar?

¿Quiénes son los principales referentes del proyecto?

No es obligatorio mostrar a todo el personal

Una empresa puede tener:

40 personas

pero eso no significa que necesite publicar 40 Cards.

Puedes seleccionar únicamente a quienes sean relevantes para el propósito de la Página web.

Por ejemplo

Una Página web corporativa podría mostrar:

Fundador

Dirección comercial

Dirección de operaciones

Responsable técnico

mientras que el resto del equipo puede no necesitar una ficha pública.

Equipo o colaboradores vs Quiénes somos

Estas dos secciones están relacionadas, pero cumplen funciones diferentes.

Quiénes somos

Presenta a la organización.

Por ejemplo:

Somos una empresa especializada en...

Equipo o colaboradores

Presenta a las personas.

Por ejemplo:

María González
Dirección comercial

Puedes utilizar ambas

Por ejemplo:

QUIÉNES SOMOS

[ presentación de la empresa ]

↓

NUESTRO EQUIPO

[ persona ][ persona ][ persona ]

No intentes convertir Quiénes somos en una lista de personas

Y tampoco conviertas Equipo en un gran texto sobre la historia de la empresa.

Cada sección tiene una función diferente.

Equipo vs Testimonios

Una Card de Equipo identifica a una persona que forma parte de la organización.

Un Testimonio presenta la experiencia de un cliente.

Equipo

ANA PÉREZ
Responsable de proyectos

Testimonio

“El equipo nos acompañó durante toda la implementación.”

— Cliente

No presentes a un cliente como si formara parte del equipo

si no corresponde.

Equipo vs Citas o frases

Una persona del equipo puede tener una frase.

Por ejemplo:

[ FOTO ]

MARÍA GONZÁLEZ
Directora comercial

“Cada proyecto comienza entendiendo qué necesita el cliente.”

Pero si el objetivo principal es destacar la frase, puede ser más apropiada la sección:

Citas o frases

¿Cuándo conviene mostrar el equipo?

Puede aportar especialmente en empresas donde la relación humana tiene importancia.

Por ejemplo:

• consultoría;

• servicios profesionales;

• arquitectura;

• diseño;

• tecnología;

• educación;

• salud institucional;

• agencias;

• estudios;

• empresas B2B;

• organizaciones;

• proyectos liderados por especialistas.

Puede ayudar a generar cercanía

Porque el visitante deja de ver solamente:

una marca

y empieza a identificar:

personas concretas

detrás de ella.

¿Cuándo puede no ser necesario?

No todas las Páginas web necesitan una sección Equipo.

Por ejemplo:

• sitios orientados principalmente a catálogo;

• proyectos donde las personas no son relevantes para la decisión;

• organizaciones que prefieren no publicar perfiles individuales;

• estructuras con alta rotación;

• equipos muy grandes.

No agregues esta sección solamente porque existe en la biblioteca

Pregunta:

¿Conocer a estas personas aporta confianza o contexto al visitante?

Si no, puede omitirse.

¿Cómo agregar Equipo o colaboradores?

Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.

Después abre:

Secciones

y selecciona:

Equipo o colaboradores

Paso 1: elige una composición

Waclis mostrará los diseños disponibles.

Puedes encontrar alternativas orientadas a:

• Cards;

• fotografías circulares;

• fotografías rectangulares;

• nombre + cargo;

• descripción;

• enlaces;

• diferentes columnas.

Elige principalmente según:

• cantidad de personas;

• calidad y proporción de fotografías;

• cantidad de información;

• estilo de la Página web.

No elijas solamente por las fotos de ejemplo

Piensa cómo funcionará con tus imágenes reales.

Por ejemplo, un diseño con:

fotografías cuadradas

puede ser ideal si todas las personas tienen retratos similares.

Pero podría ser difícil de mantener si tienes:

una foto vertical
una selfie
una imagen grupal
una foto horizontal

La consistencia del material es muy importante

Paso 2: agrega la sección

Selecciona la composición deseada.

Después podrás personalizar individualmente cada integrante.

Paso 3: utiliza Navigator

Una estructura conceptual puede ser:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Grid Row
        ├── Grid Column
        │   └── Team Card
        │       ├── Image
        │       ├── Heading
        │       ├── Paragraph
        │       └── Social Links
        │
        ├── Grid Column
        │   └── Team Card
        │
        └── Grid Column
            └── Team Card

La estructura exacta dependerá de la composición.

¿Por qué utilizar Navigator?

Porque una Card puede contener varios elementos.

Por ejemplo:

Card
├── Image
├── Name
├── Role
├── Description
└── Social Links

Si quieres:

• clonar;

• eliminar;

• mover;

una persona completa, debes seleccionar la unidad correspondiente.

No clones solamente la fotografía

si quieres crear otro integrante.

Paso 4: modifica el Heading general

Puedes utilizar:

Nuestro equipo

Conoce a nuestro equipo

Quiénes hacen posible cada proyecto

Nuestro equipo profesional

Conoce a nuestros especialistas

según el tipo de empresa.

“Nuestro equipo” suele ser suficiente

Es:

• claro;

• simple;

• reconocible.

Paso 5: agrega una introducción breve si aporta valor

Por ejemplo:

Un equipo interdisciplinario que acompaña cada proyecto desde el análisis inicial hasta su implementación.

Otro ejemplo

Conoce a algunos de los profesionales que forman parte de nuestra empresa.

No necesitas escribir una historia extensa

La sección está orientada principalmente a las personas.

Paso 6: reemplaza las fotografías

Selecciona:

Image

Después utiliza:

Contenido → Set Image

y carga la fotografía correspondiente.

La fotografía es uno de los elementos más importantes

Idealmente debería permitir reconocer a la persona con facilidad.

Recomendaciones para fotografías

Intenta mantener:

• encuadre similar;

• iluminación similar;

• fondo compatible;

• proporción consistente;

• calidad comparable.

Ejemplo coherente

[ retrato ] [ retrato ] [ retrato ]

misma proporción
encuadre similar

Ejemplo poco consistente

[ selfie ]

[ foto grupal ]

[ fotografía profesional ]

[ imagen recortada de un evento ]

puede hacer que la sección parezca improvisada.

No significa que todas las fotos deban ser idénticas

Pero deberían compartir un criterio visual.

Fotografías profesionales

Son una excelente opción cuando están disponibles.

Fotografías propias también pueden funcionar

si tienen:

• buena iluminación;

• resolución suficiente;

• encuadre adecuado.

Evita fotografías demasiado pequeñas

Una imagen con muy poca resolución puede verse borrosa.

Evita ampliar excesivamente una miniatura

No puedes recuperar detalle que no existe.

Paso 7: utiliza una proporción consistente

Puedes trabajar con:

1:1

para retratos cuadrados,

o:

4:5

para retratos verticales,

según la composición.

No es obligatorio utilizar estos formatos

Lo importante es mantener coherencia.

Fotografías circulares

Un diseño puede mostrar:

( FOTO )

mediante Border radius.

Comprueba el encuadre

El recorte circular puede eliminar:

• cabello;

• hombros;

• parte del rostro;

si la imagen no fue preparada correctamente.

Cover

Puede resultar apropiado para retratos.

Por ejemplo:

object-fit: cover;

cuando necesitas llenar un marco común.

Pero Cover puede recortar

Por eso debes comprobar cada fotografía.

El rostro debe seguir siendo el protagonista

Contain

Normalmente es menos habitual para un retrato porque puede dejar espacios.

Pero puede resultar adecuado si la imagen utilizada no debería recortarse.

No deformes la fotografía

Evita cambiar simultáneamente:

• Width;

• Height;

de manera que altere su proporción.

Paso 8: completa Alt

Cuando la fotografía identifica al integrante puedes utilizar un texto claro.

Por ejemplo:

María González, directora comercial

Juan Pérez, responsable de operaciones

Evita

foto1

persona

No necesitas sobrecargar Alt

con toda la biografía.

Paso 9: modifica el nombre

Utiliza el nombre real de la persona.

Por ejemplo:

María González

Mantén una convención

Por ejemplo:

Nombre + apellido

en todas las Cards.

Evita mezclar

María González

Juan

Ing. Fernández

sin una razón.

Títulos profesionales

Si deseas utilizar:

Dr.
Ing.
Arq.
Lic.

hazlo de forma consistente y solamente cuando sea relevante para el contexto.

No es obligatorio incluir títulos académicos

Muchas Páginas web funcionan mejor con:

Nombre Apellido
Cargo

Paso 10: configura el cargo o función

Por ejemplo:

Dirección comercial

Responsable de operaciones

Diseño

Desarrollo

Atención al cliente

Utiliza cargos comprensibles para el visitante

Una denominación interna como:

Responsable Unidad X3-B

puede no decir nada.

Puedes simplificar

Por ejemplo:

Responsable de proyectos

si describe correctamente la función.

No inventes cargos más importantes

para hacer que la Card parezca más profesional.

La información debe ser real

Cargo vs área

Puedes utilizar:

Directora comercial

o simplemente:

Comercial

según el estilo.

Mantén una convención común

Evita:

CEO

Ventas

Juan trabaja en sistemas

Directora Administrativa

con formatos completamente diferentes.

Paso 11: agrega una descripción breve

No todas las composiciones la necesitan.

Puede utilizarse para explicar:

• especialidad;

• función;

• experiencia relevante;

• participación dentro del proyecto.

Ejemplo

MARÍA GONZÁLEZ

Dirección comercial

Acompaña a los clientes durante el análisis y desarrollo de nuevos proyectos.

Otro ejemplo

JUAN PÉREZ

Operaciones

Coordina los procesos relacionados con implementación y seguimiento.

Mantén la descripción profesional

No necesitas publicar una biografía completa.

Evita

Le gusta viajar, cocinar, mirar series y tiene dos perros.

salvo que ese tipo de información forme parte conscientemente de la identidad editorial de la marca.

En una sección corporativa

prioriza información relevante para la relación profesional.

Longitud

Una o dos frases breves suelen ser suficientes.

Si necesitas una biografía extensa

puede ser mejor:

• página de perfil;

• modal específico;

• otro contenido dedicado.

No conviertas una Card en un currículum completo

Experiencia

Puedes mencionar:

Más de X años de experiencia en...

solo si el dato es correcto.

Formación

Puede tener sentido en sectores donde sea relevante.

Por ejemplo:

• profesionales;

• especialistas;

• consultores.

Pero no necesitas publicar toda la formación académica de cada integrante

Paso 12: decide qué personas mostrar

Puedes organizar por:

• liderazgo;

• área;

• contacto;

• especialización.

Ejemplo de dirección

Dirección general
Dirección comercial
Operaciones
Tecnología

Ejemplo profesional

Arquitectura
Diseño
Ingeniería
Dirección de obra

No necesitas publicar colaboradores ocasionales

si no aportan al objetivo.

Tampoco excluyas arbitrariamente personas relevantes solo para mantener una fila perfecta

La cantidad debe responder al contenido, no al diseño.

Si tienes cuatro personas y el diseño muestra tres

puedes adaptar la grilla.

No elimines una persona solamente porque:

4 no entra en 3

Paso 13: orden de las personas

Puedes ordenar según:

• estructura de la empresa;

• función;

• relevancia para el visitante;

• orden alfabético.

Ejemplo

Fundador
Dirección
Operaciones
Equipo

No existe una única regla

Pero evita un orden aparentemente aleatorio.

Paso 14: enlaces profesionales

Algunas composiciones pueden incluir Links.

Por ejemplo:

[ LinkedIn ]

También puedes utilizar Social icons

cuando corresponda.

Pero no todos los integrantes necesitan enlaces

Un Link debería tener una finalidad profesional clara

Por ejemplo:

LinkedIn

puede resultar apropiado.

Redes personales

Ten mayor precaución con:

Instagram personal
Facebook personal
TikTok personal

si no son parte de la función profesional o no existe una razón para publicarlos.

No publiques perfiles personales sin consentimiento

Link corporativo vs personal

Diferencia:

LinkedIn de la empresa

de:

LinkedIn de María

Dentro de una Card individual

normalmente el Link debería corresponder a esa persona si se presenta como perfil individual.

No reutilices accidentalmente el perfil de otra persona

Este es un riesgo frecuente al clonar Cards.

Ejemplo

Card original:

María
→ LinkedIn de María

Clonas para Juan y cambias:

foto
nombre
cargo

pero olvidas cambiar:

URL

Resultado:

Juan
→ LinkedIn de María

Por eso después de clonar revisa siempre

FOTO
NOMBRE
CARGO
DESCRIPCIÓN
LINKS
ID

Configurar un Link

Selecciona mediante Navigator:

Link

y revisa:

• Url;

• Target;

• Rel.

Cambiar Social Icon no cambia necesariamente la URL

Mismo principio que vimos en Redes sociales.

No necesitas agregar enlaces a todas las personas

Una Card puede funcionar simplemente con:

Foto
Nombre
Cargo

Email personal

Evalúa cuidadosamente si conviene publicar directamente una dirección individual.

En muchos casos puede ser mejor utilizar:

• formulario general;

• correo corporativo del área;

• canal de contacto central.

Publicar emails puede aumentar exposición a mensajes no deseados

Por eso no es obligatorio.

Teléfono personal

Tampoco debería publicarse por defecto.

Utiliza datos de contacto individuales únicamente cuando:

• exista una razón;

• la persona haya autorizado su publicación;

• sea realmente el canal adecuado.

No publiques datos personales innecesarios

Por ejemplo:

• domicilio personal;

• documento;

• fecha de nacimiento;

• teléfono privado;

• información familiar;

• otros datos sensibles.

La sección Equipo es profesional

No un directorio interno de Recursos Humanos.

Privacidad

Antes de publicar un perfil, asegúrate de que la persona esté de acuerdo con la información que aparecerá.

Especialmente:

• fotografía;

• nombre;

• cargo;

• descripción;

• enlaces;

• datos de contacto.

Personas que ya no forman parte de la empresa

Debes mantener la sección actualizada.

Si alguien deja el equipo

revisa:

• Card;

• fotografía;

• cargo;

• Links;

• otras secciones donde aparezca.

Una sección desactualizada puede generar

• consultas hacia personas incorrectas;

• información institucional errónea;

• Links que ya no corresponden.

No esperes años para revisar el equipo

Es una sección que requiere mantenimiento.

Fotografías y consentimiento

No utilices una fotografía obtenida de:

• redes personales;

• otro sitio;

• materiales privados;

sin asegurarte de que puede utilizarse en la Página web.

Utiliza preferentemente material autorizado

No generes una fotografía falsa de una persona real

para reemplazar una imagen que falta.

Si un integrante no tiene fotografía, puedes:

• utilizar otra composición;

• omitir temporalmente la imagen;

• realizar una fotografía adecuada.

Coherencia visual de fotografías

Supongamos:

Persona A → fondo blanco
Persona B → fondo de oficina
Persona C → fondo negro
Persona D → exterior

Puede funcionar si existe una intención.

Pero normalmente un estilo más uniforme transmite mayor orden.

Puedes preparar todas las fotografías

con:

• misma proporción;

• recorte similar;

• mismo tratamiento.

No necesitas modificar el rostro

La uniformidad se puede conseguir mediante:

• encuadre;

• fondo;

• tamaño;

• formato.

Fotografía grupal vs individual

Para una Card individual, utiliza preferentemente una imagen donde la persona pueda identificarse.

No utilices

foto de 10 personas

para representar a:

una sola

si no queda claro quién es.

Imagen grupal

Puede funcionar mejor en:

Quiénes somos

o:

Texto e imagen

para presentar al equipo en conjunto.

Equipo completo + perfiles destacados

Una buena combinación puede ser:

[ FOTO GRUPAL ]

SOMOS UN EQUIPO DE...

↓

REFERENTES

[ persona ][ persona ][ persona ]

Grid de Equipo

La sección suele depender de columnas.

Tres personas

Desktop:

[ A ] [ B ] [ C ]

Mobile:

[ A ]

[ B ]

[ C ]

Cuatro personas

Desktop:

[ A ] [ B ] [ C ] [ D ]

Tablet:

[ A ] [ B ]

[ C ] [ D ]

Mobile:

[ A ]

[ B ]

[ C ]

[ D ]

Utiliza Grid Row

para ajustar la distribución según dispositivo.

No mantengas cuatro Cards estrechas en celular

Las fotografías y nombres necesitan suficiente espacio.

Dos por fila en móvil

Puede funcionar en determinados diseños si:

• las Cards son simples;

• nombres son breves;

• fotografías tienen suficiente tamaño.

Pero revisa cuidadosamente

Una estructura:

[ foto ][ foto ]
[ nombre ][ nombre ]

puede resultar correcta,

mientras una Card con:

• foto;

• cargo;

• descripción;

• LinkedIn;

puede necesitar una sola columna.

No existe una cantidad universal

Decide según la información.

Grid Row y 12 unidades

Puedes utilizar la lógica de columnas para crear:

3 integrantes
→ columnas equivalentes

o:

4 integrantes
→ columnas equivalentes

según la configuración disponible.

No utilices Width manual en cada Card para simular una grilla

Utiliza Grid cuando corresponda.

Alineación de Cards

Mantén:

• foto;

• nombre;

• cargo;

en posiciones consistentes.

Ejemplo

[ FOTO ]   [ FOTO ]   [ FOTO ]

NOMBRE     NOMBRE     NOMBRE

CARGO      CARGO      CARGO

Evita

Card A centrada
Card B izquierda
Card C derecha

sin intención.

Altura de Cards

Las descripciones pueden generar diferentes alturas.

No uses Height fijo como primera solución

Por ejemplo:

.team-card {
    height: 520px;
}

puede fallar si:

• cambia el cargo;

• se agrega descripción;

• se modifica responsive.

Primera solución

Mantén contenido relativamente equilibrado.

Segunda solución

Utiliza una estructura flexible.

No agregues texto innecesario solo para llenar espacio

Nombres largos

Por ejemplo:

María de los Ángeles Rodríguez Fernández

pueden ocupar varias líneas.

La Card debe soportarlo.

No reduzcas únicamente ese nombre a un tamaño diminuto

Busca una Typography flexible.

Cargos largos

También pueden crecer.

Por ejemplo:

Responsable de Desarrollo de Negocios Internacionales

puede necesitar varias líneas.

Puedes simplificar

si existe una denominación profesional correcta más breve.

Por ejemplo:

Desarrollo de negocios

cuando represente correctamente la función.

Typography

Una jerarquía habitual:

NOMBRE       ← más importante

CARGO        ← secundario

DESCRIPCIÓN  ← cuerpo

No hagas el cargo más grande que el nombre

salvo una decisión visual muy específica.

Nombre

Puede utilizar:

• Font weight mayor;

• tamaño ligeramente superior.

Cargo

Puede utilizar:

• color secundario;

• peso menor.

Descripción

Debe ser cómoda de leer.

Social icons

Deben tener menor protagonismo que:

• fotografía;

• nombre.

Fondo de Cards

Puedes utilizar:

• transparente;

• blanco;

• gris;

• color suave.

Card con fondo

╭─────────────────────────╮
│                         │
│        [ FOTO ]         │
│                         │
│      MARÍA GONZÁLEZ     │
│      Comercial          │
│                         │
╰─────────────────────────╯

Otra alternativa

Fotografía sin Card:

[ FOTO ]

MARÍA GONZÁLEZ
Comercial

Ambas pueden funcionar

Depende del diseño general.

Border radius

Puedes aplicarlo a:

• foto;

• Card.

Fotografías circulares

pueden combinar con una Card sin borde.

Fotografías rectangulares

pueden funcionar con Cards completas.

Mantén coherencia con el resto de la Página web

Sombra

Puede utilizarse de forma moderada.

No es necesaria si ya utilizas:

• fondo;

• Border;

• separación.

Hover en Cards

Puede agregarse un efecto sutil.

Por ejemplo:

Card normal
↓
Hover
↓
elevación leve

Pero pregunta:

¿La Card es clicable?

Si no lo es, un Hover demasiado fuerte puede hacer pensar que existe una acción.

Hover sobre Social Links

Sí es apropiado porque son interactivos.

No ocultes información importante hasta Hover

Por ejemplo:

Nombre aparece solamente al pasar el cursor

puede ser problemático en móvil.

La identidad de la persona debe estar visible normalmente.

Overlay sobre fotografía

Algunas composiciones pueden mostrar:

[ FOTO ]

Hover
→ Nombre + cargo

Si utilizas este patrón

comprueba qué ocurre en celular.

La información no debería quedar inaccesible

por falta de Hover.

Puede ser mejor mostrar siempre

Nombre
Cargo

y utilizar Hover únicamente como complemento.

Fondo de Section

Puedes utilizar:

• blanco;

• gris;

• color institucional.

Una sección Equipo suele tener bastante información visual

Por eso un fondo simple puede funcionar muy bien.

Section Full vs Boxed

Boxed

puede mantener una grilla ordenada.

Full

puede utilizarse para el fondo, mientras las Cards permanecen dentro de un Container controlado.

Padding general

Debe existir espacio suficiente:

Heading

espacio

Cards

espacio

No pegues las Cards al contenido anterior o posterior

Separación entre Cards

Mantén suficiente espacio para que cada persona pueda identificarse.

No las separes tanto

que parezcan secciones independientes.

Clonar un integrante

Esta es una de las tareas más habituales.

Procedimiento recomendado

1. Abrir Navigator.
2. Seleccionar la Card completa.
3. Clonar elemento.
4. Reemplazar fotografía.
5. Modificar Alt.
6. Modificar nombre.
7. Modificar cargo.
8. Modificar descripción.
9. Modificar Links.
10. Revisar ID.
11. Revisar responsive.
12. Guardar.

No clones solamente Image

No clones solamente Name

Debes duplicar la unidad completa

Por ejemplo:

Team Card
├── Image
├── Name
├── Role
├── Description
└── Social Links

Después de clonar revisa toda la Card

No asumas que cambiar:

fotografía + nombre

es suficiente.

Error típico

Nueva persona:

Juan Pérez
Operaciones

pero la descripción sigue diciendo:

María coordina el área comercial...

Otro error

LinkedIn
→ perfil de la persona anterior

Revisión completa obligatoria

IDs personalizados

Si la Card original utiliza:

id="equipo-maria"

la copia debe utilizar:

id="equipo-juan"

u otro identificador único.

Eliminar una persona

Selecciona la unidad completa.

Recuerda:

Waclis no solicita confirmación.

Si eliminas algo incorrecto:

Deshacer

No elimines solamente la fotografía

si la persona ya no debe aparecer.

Podrías dejar:

Nombre
Cargo
Descripción

sin imagen.

Aunque una Card sin foto puede ser válida

debe ser una decisión intencional.

Eliminar fotografía sin eliminar persona

Puede funcionar si quieres utilizar un diseño:

Nombre
Cargo
Descripción

sin retratos.

En ese caso

reorganiza la Card para que no quede un área vacía.

Mover integrantes

Puedes modificar el orden.

Selecciona cada Card completa.

No muevas solamente la imagen

porque podrías terminar con:

foto de María
+
nombre de Juan

Utiliza Navigator

para comprobar siempre la unidad.

Actualizar el equipo

La sección debería revisarse periódicamente.

Comprueba:

• altas;

• bajas;

• cambios de cargo;

• cambios de fotografía;

• URLs;

• descripciones.

No mantengas una persona

como:

Directora comercial

si ya ocupa otra función.

Lo mismo con cargos temporales

Integrantes externos

Puedes utilizar la sección para colaboradores externos si queda claro.

Por ejemplo:

COLABORADORES

María González
Consultora externa

No presentes a una persona externa como empleado

si no corresponde.

Equipo interno vs colaboradores

Puedes separarlos:

NUESTRO EQUIPO

[ personas ]

↓

COLABORADORES

[ personas ]

Esto puede evitar interpretaciones incorrectas

Fundadores

Puede existir una sección:

FUNDADORES

[ persona ][ persona ]

dentro de una página institucional.

Dirección

También:

EQUIPO DIRECTIVO

No utilices “Nuestro equipo”

si en realidad mostrarás únicamente:

2 fundadores de una organización de 200 personas

sin que el contexto lo aclare.

Puedes utilizar:

Equipo directivo

o:

Fundadores

Personas de contacto

Una página puede mostrar:

¿CON QUIÉN HABLAR?

María González
Comercial

Juan Pérez
Soporte

En ese caso los perfiles cumplen también una función práctica.

No publiques teléfonos individuales automáticamente

Puedes enlazar a:

• contacto general;

• formulario;

• canal correspondiente.

Equipo en Home

Puede utilizarse cuando las personas son parte importante de la propuesta.

Por ejemplo:

QUIÉNES SOMOS
↓
EQUIPO
↓
TESTIMONIOS

Pero una Home no necesita mostrar diez perfiles

Puedes seleccionar:

3 o 4 referentes

y enlazar:

[ CONOCER AL EQUIPO ]

a una página completa.

Equipo en página Quiénes somos

Es una ubicación muy natural.

Ejemplo de página institucional

QUIÉNES SOMOS

↓

HISTORIA / TIMELINE

↓

EQUIPO

↓

VALORES

↓

CTA

Equipo en página de Servicios

Puede ser útil presentar:

ESPECIALISTAS A CARGO

[ persona ][ persona ]

si la relación entre servicio y profesional es importante.

No dupliques el mismo equipo en todas las páginas

sin una razón.

Puede generar mantenimiento innecesario.

Si cambia un cargo

tendrías que actualizar múltiples secciones.

Utiliza perfiles repetidos solo cuando realmente aporten contexto a cada página.

Responsive

Comprueba especialmente:

• fotografía;

• nombre;

• cargo;

• descripción;

• Social Links.

Mobile puede aumentar mucho la altura

Por ejemplo:

6 Cards

en una sola columna generan una sección extensa.

Esto no es necesariamente incorrecto

pero evalúa si todas las personas necesitan mostrarse en esa página.

Puedes utilizar dos columnas en determinados móviles

solo si la información sigue siendo cómoda.

No ocultes personas importantes únicamente para acortar la sección

Hide based on device screen width

No es recomendable utilizarlo como solución principal para:

“la grilla no entra”

Primero adapta Grid responsive.

Evita crear

Equipo desktop
+
Equipo mobile

duplicado,

salvo casos especiales.

Duplicar toda la sección genera

• más mantenimiento;

• potenciales IDs duplicados;

• información que puede quedar distinta entre versiones.

Intenta mantener una sola estructura responsive.

CSS personalizado

En personalizaciones avanzadas puedes utilizar Classes como:

equipo-section
equipo-grid
equipo-card
equipo-image
equipo-name
equipo-role
equipo-description
equipo-social

Card

.equipo-section .equipo-card {
    border-radius: 16px;
    overflow: hidden;
}

Imagen

.equipo-section .equipo-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

cuando la composición concreta lo requiera.

Recuerda

aspect-ratio y estas Classes son ejemplos de personalización, no nombres obligatorios del Editor de bloques.

Responsive

@media (max-width: 768px) {
    .equipo-section .equipo-name {
        font-size: 22px;
    }
}

si ese ajuste es necesario.

Utiliza primero las herramientas visuales

Antes de escribir CSS revisa:

• Grid Row;

• Width;

• Height;

• Border radius;

• Padding;

• Typography.

Evita CSS global

No utilices:

img {
    border-radius: 50%;
}

para redondear únicamente fotos del equipo.

Afectaría muchas imágenes.

Tampoco

h3 {
    font-size: 24px;
}

si solo quieres cambiar nombres.

Utiliza scope

Linked styles

Es especialmente útil en Equipo.

Todas las Cards suelen necesitar:

• mismo tamaño;

• misma Typography;

• mismos espacios.

Ejemplo

equipo-card

puede compartirse entre todos.

Si Waclis muestra Linked styles

puede ser el comportamiento correcto.

Excepciones

Si una persona necesita una presentación diferente:

class="equipo-card fundador"

puede conservar el estilo base y agregar una excepción.

No elimines la Class general automáticamente.

Hover

Puede utilizarse sobre Cards de forma moderada.

Social Links

sí pueden beneficiarse de Hover porque son interactivos.

No ocultes el cargo hasta Hover

si es información esencial.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre:

• Section;

• Grid Row;

• Cards.

Evita animar

• foto;

• nombre;

• cargo;

• iconos;

por separado en cada integrante.

Una animación por Card puede ser suficiente.

Delays

Si tienes seis integrantes:

no utilices delays tan largos que el último tarde varios segundos en aparecer.

Accesibilidad

La fotografía no debería ser el único elemento que identifica a la persona.

Utiliza también:

Nombre
Cargo

como texto.

Links sociales

deben ser reconocibles.

No dependas únicamente del color

para diferenciarlos.

Si utilizas únicamente un icono de LinkedIn

asegúrate de que sea reconocible y esté correctamente enlazado.

Información falsa o desactualizada

Es preferible una sección breve y correcta que una sección extensa con:

• personas que ya no trabajan allí;

• cargos antiguos;

• enlaces rotos.

Equipo y confianza

La sección puede aportar confianza especialmente cuando demuestra:

• experiencia;

• especialización;

• roles claros;

• presencia humana.

Pero evita fabricar autoridad mediante títulos excesivos

Por ejemplo:

Experto mundial
Gurú
Líder absoluto

si no existe una base adecuada.

Es mejor utilizar información concreta

Responsable de desarrollo

Arquitecta

Especialista en integración

cuando corresponda.

Equipo y antigüedad

Puedes incluir:

Forma parte del equipo desde...

si ese dato aporta valor.

No es necesario en todas las Cards.

Equipo multicultural o distribuido

Puedes indicar ubicación profesional cuando sea relevante.

Por ejemplo:

Buenos Aires

Santiago

si ayuda a explicar cobertura.

Pero no publiques domicilios personales.

Personas con múltiples funciones

Evita cargos interminables como:

Fundador, CEO, director comercial, responsable de marketing, operaciones y administración

si puede resumirse correctamente.

Puedes utilizar:

Fundador y Director General

si representa realmente el rol.

Equipo grande

Si tienes muchas personas, puedes dividir por áreas:

DIRECCIÓN

[ personas ]

COMERCIAL

[ personas ]

OPERACIONES

[ personas ]

No hagas una grilla de 30 personas sin ninguna organización.

Otra alternativa

mostrar:

equipo directivo

y una fotografía general del resto.

Personas sin fotografía

Si algunas tienen foto y otras no:

decide una estrategia coherente.

Evita

Foto
Foto
Icono genérico
Foto
Iniciales

sin un criterio.

Puedes:

• utilizar una composición sin fotografía;

• esperar a tener material;

• emplear una solución visual coherente para quienes no tengan imagen.

No uses fotografías de personas desconocidas para completar espacios

Card con iniciales

Puede ser una alternativa visual en determinados diseños:

MG

María González
Comercial

pero debe aplicarse conscientemente.

No es una funcionalidad específica obligatoria del editor

sino una posible composición personalizada.

Ejemplo práctico: tres integrantes

Queremos:

NUESTRO EQUIPO

[ FOTO ]
MARÍA GONZÁLEZ
Dirección comercial
Descripción...

[ LinkedIn ]


[ FOTO ]
JUAN PÉREZ
Operaciones
Descripción...

[ LinkedIn ]


[ FOTO ]
LUCÍA FERNÁNDEZ
Administración
Descripción...

Paso 1

Abre:

Secciones → Equipo o colaboradores

Paso 2

Selecciona una composición.

Paso 3

Utiliza Navigator para identificar cada Card.

Paso 4

Modifica el Heading general.

Paso 5

Reemplaza todas las fotografías.

Paso 6

Completa Alt.

Paso 7

Actualiza nombres.

Paso 8

Actualiza cargos.

Paso 9

Actualiza descripciones.

Paso 10

Configura Social Links únicamente cuando correspondan.

Paso 11

Comprueba cada URL.

Paso 12

Revisa proporción y Cover de las fotografías.

Paso 13

Personaliza:

• Typography;

• Padding;

• Border radius;

• fondo.

Paso 14

Revisa Linked styles.

Paso 15

Configura Grid responsive.

Paso 16

Revisa desktop.

Paso 17

Revisa tablet.

Paso 18

Revisa celular.

Paso 19

Guarda.

Paso 20

Utiliza:

Ver página

y prueba todos los Links.

Ejemplo práctico: equipo directivo

EQUIPO DIRECTIVO

[ FOTO ]
María González
Directora General

[ FOTO ]
Juan Pérez
Director de Operaciones

[ FOTO ]
Lucía Fernández
Directora Comercial

Ejemplo práctico: especialistas

NUESTROS ESPECIALISTAS

[ FOTO ]
Laura
Arquitectura

[ FOTO ]
Javier
Ingeniería

[ FOTO ]
Sofía
Diseño

Ejemplo práctico: colaboradores externos

COLABORADORES

[ FOTO ]
Nombre Apellido
Consultoría legal externa

[ FOTO ]
Nombre Apellido
Especialista en...

Utiliza denominaciones que no hagan parecer que forman parte de la estructura interna si no es así.

Ejemplo práctico: Home resumida

CONOCE A NUESTRO EQUIPO

[ 3 referentes ]

[ VER TODO EL EQUIPO ]

Página completa

DIRECCIÓN

[ personas ]

COMERCIAL

[ personas ]

OPERACIONES

[ personas ]

¿Qué hacer si las fotografías tienen tamaños diferentes?

Primero define una misma proporción.

Después utiliza:

• Cover;

• un marco común;

• recortes preparados.

No deformes las imágenes.

¿Qué hacer si Cover corta la cabeza?

Ajusta:

• fotografía;

• encuadre;

• altura;

• composición.

Puede ser mejor preparar una nueva imagen.

¿Qué hacer si una fotografía es demasiado vertical?

Puedes recortarla para la proporción del diseño.

Comprueba que el rostro quede dentro de una zona segura.

¿Qué hacer si tengo una foto grupal?

Utilízala preferentemente para presentar el equipo en conjunto, no como retrato individual.

¿Qué hacer si una persona no quiere mostrar fotografía?

Puedes elegir una composición sin imágenes o una solución coherente que respete esa decisión.

No publiques la fotografía sin autorización.

¿Qué hacer si no quiero mostrar cargos?

Puedes utilizar:

Nombre
Área

o solamente nombre, si tiene sentido.

Pero el visitante debería poder comprender por qué esa persona aparece.

¿Qué hacer si una persona tiene un cargo muy interno?

Traduce la función a una denominación comprensible sin cambiar su significado.

¿Qué hacer si el equipo cambia con frecuencia?

Considera mostrar únicamente:

• dirección;

• referentes;

• roles más estables.

Esto reduce mantenimiento.

¿Qué hacer si quiero mostrar todos?

Organiza por áreas y mantén un proceso de actualización.

¿Qué hacer si la descripción de una persona es mucho más larga?

Reduce el contenido o crea una página de perfil.

No hagas una Card cuatro veces más alta sin necesidad.

¿Qué hacer si las Cards quedan con diferentes alturas?

Revisa:

• nombres;

• cargos;

• descripciones.

Después utiliza una estructura flexible.

Evita Height fijo como primera solución.

¿Qué hacer si clono una Card y queda la misma foto?

Reemplaza Image.

¿Qué hacer si queda el mismo Alt?

Actualízalo.

¿Qué hacer si queda el mismo LinkedIn?

Actualiza Url.

¿Qué hacer si queda el mismo ID?

Actualízalo.

¿Qué hacer si eliminé una persona y queda una columna vacía?

Revisa:

• Grid Column;

• Card;

• wrapper.

Probablemente eliminaste solo elementos internos.

Si quieres eliminar el integrante completo

elimina la unidad correspondiente.

¿Qué hacer si tengo cuatro personas y ahora son tres?

Revisa Grid Row.

Puedes redistribuir:

[ A ] [ B ] [ C ]

con columnas más amplias.

¿Qué hacer si tengo tres y agrego una cuarta?

Clona una Card completa y adapta:

[ A ] [ B ] [ C ] [ D ]

en desktop,

y:

[ A ] [ B ]

[ C ] [ D ]

en tablet cuando resulte apropiado.

¿Qué hacer si los iconos sociales cambian todos juntos?

Comprueba:

Linked styles

Probablemente comparten una Class.

Esto puede ser correcto.

¿Qué hacer si quiero ocultar LinkedIn de una persona?

Elimina solamente la unidad Link + Icon correspondiente dentro de esa Card.

No elimines toda la sección social de otras personas por seleccionar un nivel demasiado alto.

Navigator es especialmente útil aquí.

¿Qué hacer si el icono es LinkedIn pero abre Instagram?

Selecciona el Link y actualiza:

Url

Icon y Link son elementos diferentes.

¿Qué hacer si no quiero publicar enlaces personales?

Elimínalos.

La Card no necesita Social Links para funcionar.

¿Qué hacer si quiero publicar un email de área?

Puede ser más apropiado:

comercial@empresa...

que una dirección personal, dependiendo de la estrategia de contacto.

¿Qué hacer si una persona se retira de la empresa?

Actualiza la Página web tan pronto como corresponda.

No mantengas:

• fotografía;

• cargo;

• datos;

si ya no representa a la organización.

¿Qué hacer si cambia solamente de cargo?

Actualiza:

• Role;

• descripción;

sin necesidad de reconstruir la Card.

¿Qué hacer si una persona tiene dos cargos?

Puedes utilizar una formulación breve.

Por ejemplo:

Fundador · Dirección Comercial

cuando sea correcto.

Evita una lista extensa de responsabilidades.

¿Qué hacer si quiero destacar al fundador?

Puedes utilizar una Card más grande o una sección separada.

Por ejemplo:

[ FOTO GRANDE ]

Nombre
Fundador

Descripción

seguida del resto del equipo.

No es necesario romper todas las Cards compartidas

si únicamente quieres una excepción visual.

Utiliza una Class adicional.

¿Qué hacer si la sección queda demasiado larga en móvil?

Evalúa:

• cantidad de perfiles;

• longitud de descripciones;

• necesidad de mostrar todos.

No ocultes personas importantes solo por altura.

Puedes resumir la Card.

¿Qué hacer si quiero dos Cards por fila en móvil?

Prueba realmente:

• fotografía;

• nombres;

• cargos;

• Links.

Si todo sigue siendo legible puede funcionar.

Si no:

una columna es preferible.

¿Qué hacer si aparece scroll horizontal?

Revisa:

• Grid;

• Width;

• fotografía;

• Social Links;

• Margin;

• Min Width.

No ocultes simplemente el overflow global.

¿Qué hacer si el Hover mueve demasiado la grilla?

Reduce:

• Transform;

• Scale.

El efecto debería ser sutil.

¿Qué hacer si el Overlay impide leer el nombre?

Ajusta:

• contraste;

• Overlay;

• color;

• posición.

¿Qué hacer si en móvil el Hover no existe?

La información esencial debe estar visible o accesible sin él.

Utilizar IA para redactar descripciones del equipo

ChatGPT, Claude o Gemini pueden ayudarte.

Por ejemplo:

Necesito redactar una descripción breve para una Card de Equipo.

Información real:

Nombre:
[nombre]

Cargo:
[cargo]

Funciones:
[funciones]

Experiencia relevante:
[datos]

Redacta una descripción profesional de máximo 28 palabras.

Utiliza español neutro.

No inventes estudios, experiencia, logros ni responsabilidades.

IA para uniformar cargos

Tengo estos cargos:

[lista]

Quiero mostrarlos en una sección Equipo.

Revisa si están expresados con criterios diferentes y propón una forma consistente de presentarlos.

Mantén el significado real de cada cargo.

No aumentes jerarquías ni inventes funciones.

IA para reducir biografías

Estas son las biografías actuales:

[pegar textos]

Redúcelas a un máximo de 30 palabras por persona.

Prioriza:
- función actual;
- área;
- experiencia relevante.

Elimina información personal que no aporte al contexto profesional.

No inventes datos.

IA para seleccionar quiénes mostrar

Nuestra empresa tiene estos integrantes:

[lista de roles]

La Home solamente debería mostrar 4 personas.

El objetivo es que el visitante comprenda:
- liderazgo;
- atención comercial;
- operaciones;
- capacidad técnica.

Propón qué perfiles mostrar basándote únicamente en los roles proporcionados.

No inventes personas.

IA para revisar privacidad

Puedes pedir:

Quiero publicar estas Cards de Equipo:

[pegar contenido]

Indica qué información parece profesionalmente relevante y qué datos personales podrían ser innecesarios para una Página web pública.

No inventes datos ni hagas suposiciones sobre las personas.

IA para CSS

Estoy personalizando una sección Equipo en Waclis.

La sección utiliza:
.equipo-section

Las Cards:
.equipo-card

Las fotografías:
.equipo-image

Los nombres:
.equipo-name

Los cargos:
.equipo-role

Necesito:
- 4 Cards por fila en desktop;
- 2 por fila en tablet;
- 1 por fila en celular;
- fotografías cuadradas;
- object-fit cover;
- Border radius de 16 px;
- Hover muy sutil;
- mantener todos los nombres visibles.

No modifiques otras Cards ni imágenes de la Página web.

No cambies HTML.

No agregues JavaScript.

Devuélveme solamente CSS limitado a .equipo-section.

IA para diagnosticar una Card clonada

Cloné una Card de Equipo en Waclis.

La nueva Card debería corresponder a:
[nombre nuevo]

Pero quiero comprobar que no queden datos de la persona anterior.

Este es el HTML únicamente de la Card:

[pegar estructura]

Indícame dónde aparecen:
- imagen;
- Alt;
- nombre;
- cargo;
- descripción;
- Links;
- IDs.

No cambies Classes estructurales.

IA para revisar fotografías

Si la herramienta admite imágenes:

Tengo estas fotografías para una sección Equipo.

Necesito mostrarlas en Cards cuadradas con object-fit cover.

Analiza si los rostros están ubicados en zonas seguras para el recorte y señala cuáles podrían necesitar un encuadre diferente.

No modifiques los rostros.

Buenas prácticas para Equipo o colaboradores

Recomendamos:

• mostrar personas relevantes para el visitante;

• diferenciar Equipo de Quiénes somos;

• utilizar fotografías autorizadas;

• mantener encuadres consistentes;

• completar Alt;

• utilizar nombres reales;

• mantener cargos actualizados;

• utilizar descripciones breves;

• no publicar datos personales innecesarios;

• obtener consentimiento para perfiles y Links cuando corresponda;

• utilizar Navigator;

• clonar Cards completas;

• revisar todos los datos después de clonar;

• mantener IDs únicos;

• utilizar Linked styles para mantener coherencia;

• adaptar Grid responsive;

• no depender del Hover para información esencial;

• mantener la sección actualizada.

Errores frecuentes

Mostrar a todo el personal por obligación

Selecciona según el objetivo.

Confundir Equipo con Quiénes somos

Uno presenta personas; el otro presenta la empresa.

Utilizar fotografías con estilos completamente diferentes

Mantén un criterio visual.

Utilizar fotos grupales para perfiles individuales

La persona debe poder identificarse.

Deformar retratos

Respeta proporciones.

Utilizar Cover sin revisar rostros

Comprueba el recorte.

Dejar fotografías de ejemplo

Reemplázalas.

Dejar nombres de ejemplo

Revisa toda la Section.

Inventar cargos

Utiliza información real.

Publicar cargos internos incomprensibles

Preséntalos de forma clara sin cambiar el significado.

Escribir biografías demasiado largas

Resume.

Publicar información personal innecesaria

Mantén el enfoque profesional.

Publicar teléfonos privados por defecto

Utiliza únicamente datos apropiados y autorizados.

Publicar perfiles sociales personales sin autorización

Evítalo.

Clonar una persona y dejar su fotografía anterior

Revisa Image.

Dejar Alt de otra persona

Actualízalo.

Dejar descripción de otra persona

Revisa todo el contenido.

Dejar LinkedIn de otra persona

Actualiza Url.

Duplicar IDs

Mantén identificadores únicos.

Clonar únicamente Image

Clona la Card completa.

Mover únicamente la fotografía

Mueve la unidad completa.

Eliminar solo Image y dejar una Card rota

Reorganiza la estructura.

Mantener cuatro Cards demasiado estrechas en móvil

Adapta Grid.

Utilizar Height fijo en Cards con textos variables

Utiliza una estructura flexible.

Ocultar nombres hasta Hover

La información debe ser accesible en móvil.

Aplicar CSS global a img

Limita el scope.

Aplicar CSS global a Heading

Puede afectar toda la Página web.

No actualizar la sección cuando cambia el equipo

Revísala periódicamente.

Mantener personas que ya no pertenecen a la organización

Actualiza el contenido.

No probar Links

Utiliza Ver página.

Flujo recomendado

1. DEFINIR QUÉ PERSONAS MOSTRAR
↓
2. CONFIRMAR INFORMACIÓN Y AUTORIZACIONES
↓
3. PREPARAR FOTOGRAFÍAS
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR EQUIPO O COLABORADORES
↓
6. REVISAR NAVIGATOR
↓
7. MODIFICAR HEADING
↓
8. REEMPLAZAR FOTOGRAFÍAS
↓
9. COMPLETAR ALT
↓
10. MODIFICAR NOMBRES
↓
11. MODIFICAR CARGOS
↓
12. MODIFICAR DESCRIPCIONES
↓
13. CONFIGURAR LINKS SI CORRESPONDE
↓
14. REVISAR COVER / PROPORCIÓN
↓
15. PERSONALIZAR CARDS
↓
16. REVISAR LINKED STYLES
↓
17. CONFIGURAR GRID RESPONSIVE
↓
18. GUARDAR CAMBIOS
↓
19. VER PÁGINA
↓
20. PROBAR TODOS LOS LINKS

Checklist antes de publicar Equipo o colaboradores

• Las personas mostradas son relevantes para el objetivo de la página.

• La sección está correctamente identificada como Equipo, colaboradores, dirección u otra denominación apropiada.

• La información publicada es real.

• Las personas conocen o autorizaron la publicación cuando corresponde.

• Las fotografías pueden utilizarse públicamente.

• No quedan fotografías de ejemplo.

• Las fotografías tienen calidad suficiente.

• Mantienen una proporción coherente.

• Revisé Cover.

• Los rostros no quedan mal recortados.

• Las imágenes no están deformadas.

• Completé Alt.

• Los nombres son correctos.

• Los cargos son correctos.

• Los cargos utilizan una convención consistente.

• Las descripciones son breves y profesionales.

• No publiqué información personal innecesaria.

• No publiqué teléfonos privados sin razón.

• No publiqué perfiles personales sin autorización.

• Los Links profesionales corresponden a la persona correcta.

• Probé todos los Links.

• Al clonar actualicé fotografía.

• Al clonar actualicé Alt.

• Al clonar actualicé nombre.

• Al clonar actualicé cargo.

• Al clonar actualicé descripción.

• Al clonar actualicé URLs.

• Los IDs personalizados son únicos.

• Utilicé Navigator.

• Linked styles tiene el alcance esperado.

• Las Cards mantienen un diseño coherente.

• Desktop se visualiza correctamente.

• Tablet se visualiza correctamente.

• Celular se visualiza correctamente.

• Grid se reorganiza correctamente.

• Las Cards mantienen suficiente ancho.

• Los nombres no se cortan.

• Los Social Links siguen siendo fáciles de utilizar.

• La información principal no depende únicamente del Hover.

• No existe scroll horizontal inesperado.

• El CSS personalizado está limitado a esta sección.

• Las animaciones son moderadas.

• La sección refleja el equipo actual.

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

En resumen

La sección Equipo o colaboradores permite presentar a las personas que forman parte de una empresa, organización o proyecto.

Su diferencia principal con:

Quiénes somos

es sencilla:

QUIÉNES SOMOS
→ presenta la empresa

EQUIPO
→ presenta personas

Una Card puede contener:

FOTOGRAFÍA

NOMBRE

CARGO

DESCRIPCIÓN

LINK PROFESIONAL

pero no necesitas utilizar todos estos elementos.

En muchos casos puede bastar:

[ FOTO ]

María González
Dirección comercial

Elige la cantidad de información según el objetivo.

Uno de los puntos más importantes es mantener las fotografías coherentes.

Utiliza:

• proporciones similares;

• encuadres comparables;

• calidad suficiente.

Cover puede ayudar a uniformar retratos, pero comprueba siempre que el rostro no quede mal recortado.

También recuerda que esta es una Página web pública.

No publiques automáticamente:

• teléfonos privados;

• domicilios;

• información personal;

• perfiles sociales personales;

si no son necesarios o apropiados.

Cuando clonas una persona, utiliza Navigator para duplicar la Card completa:

Card
├── Image
├── Name
├── Role
├── Description
└── Links

y después revisa:

FOTO
ALT
NOMBRE
CARGO
DESCRIPCIÓN
URL
ID

No cambies solamente el nombre.

En responsive:

Desktop

[ A ] [ B ] [ C ] [ D ]

puede convertirse en:

Tablet

[ A ] [ B ]

[ C ] [ D ]

y:

Mobile

[ A ]

[ B ]

[ C ]

[ D ]

según la cantidad de información de cada Card.

Utiliza Grid Row para realizar esta adaptación.

Y recuerda que la sección requiere mantenimiento.

Si una persona:

• cambia de cargo;

• deja la empresa;

• modifica su perfil profesional;

actualiza la información publicada.

Finalmente:

Guardar Cambios → Ver página → revisar fotografías → comprobar nombres y cargos → probar Links → revisar celular.

Una buena sección Equipo no debería funcionar como un organigrama interno.

Debería permitir que el visitante entienda, de una manera humana y profesional:

quiénes son algunas de las personas relevantes que están detrás de la empresa y qué función cumplen.