Acht originele lay-outs voor een teampagina, van fotorasters tot gegroepeerde afdelingen, met bewerkbare HTML en CSS en een rasterbuilder voor kolommen, fotovorm en tussenruimte.
Een teampagina geeft uw bedrijf namen, gezichten en functies, zodat bezoekers weten met wie ze te maken krijgen. De lay-outs hieronder lopen van een eenvoudig fotoraster tot gegroepeerde afdelingen en één oprichtersverhaal. Elke lay-out is originele, bewerkbare HTML en CSS, en de rasterbuilder stelt kolommen, fotovorm en tussenruimte voor u in.
Een lay-out kiezen op basis van teamgrootte
Mensen kopen van mensen, vooral bij diensten zoals klinieken, bureaus, vakmensen en restaurants. Een teampagina laat zien wie er achter het bedrijf zit en maakt de eerste e-mail of het eerste bezoek minder een sprong in het diepe. De voorbeelden hier gebruiken initialen in plaats van foto's, zodat u uw eigen foto's kunt invoegen zonder de lay-out te veranderen.
Minimaal de naam, functie en een foto van iedere persoon. Voeg een zin toe over wat ze voor klanten doen, en een contactlink waar dat helpt. Een korte inleiding bovenaan legt uit hoe het team samenwerkt.
Noem de persoon bij naam, en voeg de functie toe als die niet naast de foto staat, bijvoorbeeld alt="Ana Ruiz, physiotherapist". Staat de naam al in een bijschrift direct naast de afbeelding, dan voorkomt een korte alt of alleen de naam dat lange tekst herhaald wordt.
Geef de afbeelding een vaste beeldverhouding met aspect-ratio en gebruik object-fit: cover. De foto vult haar vak en wat overblijft wordt bijgesneden, in plaats van dat het gezicht wordt platgedrukt.
Kleine bedrijven zetten het team vaak op de over-ons-pagina. Zodra u meer dan ongeveer acht mensen hebt, of teams die klanten rechtstreeks benaderen, houdt een aparte pagina de over-ons-pagina gericht op uw verhaal.
Ja. Initialen, illustraties of één groepsfoto werken als mensen liever niet op de foto gaan. Houd namen en functies zichtbaar, zodat de pagina haar werk nog steeds doet.
Gekleurde initialen staan in voor foto's. Vervang elk .av-blok door een img met dezelfde class.
Ronde foto's, naam en functie gecentreerd. Het werkt voor bijna elk team van vier tot twaalf mensen.
Een korte regel over wat iedere persoon voor klanten doet, maakt van een muur met portretten iets nuttigs.
Voor een bedrijf van één of twee mensen hebben één foto en een paar eerlijke zinnen meer gewicht dan een raster.
Kopjes per team helpen bezoekers de juiste persoon te vinden in een groter bedrijf.
Grotere kaarten voor de mensen die beslissingen nemen, een compacte strook voor alle anderen.
Rijen met naam, functie en team zijn makkelijk te scannen en te doorzoeken met de zoekfunctie van de browser.
Iedere persoon krijgt een maillink, zodat klanten meteen bij het juiste loket terechtkomen.
Als mensen liever geen eigen portretfoto hebben, verbinden één gedeelde foto en een bijschrift nog steeds namen aan het bedrijf.
Builder voor teamrasters
Kies de kolommen, fotovorm en tussenruimte. Start-CSS:
Kolommen op brede schermen: {n}
Fotovorm
Cirkel
Afgerond
Vierkant
Tussenruimte: {n}px
Voorbeeld van het teamraster
CSS kopiëren
Gratis beginnen · Geen creditcard nodig