Przykłady stron Zespół: 8 układów z HTML i CSS | We.Inc
Osiem oryginalnych układów strony Poznaj nasz zespół, od siatek zdjęć po pogrupowane działy, z edytowalnym HTML i CSS oraz generatorem siatki dla kolumn, kształtu zdjęć i odstępów.
Przykłady stron Zespół
Strona Zespół nadaje Twojej firmie imiona, twarze i role, dzięki czemu odwiedzający wiedzą, z kim będą mieć do czynienia. Układy poniżej obejmują wszystko od prostej siatki zdjęć po pogrupowane działy i pojedynczą historię założyciela. Każdy to oryginalny, edytowalny HTML i CSS, a generator siatki ustawi za Ciebie kolumny, kształt zdjęć i odstępy.
Wybór układu według wielkości zespołu
Wielkość zespołu
Układ, który się sprawdza
Co pokazać przy każdej osobie
1 do 2
Historia założyciela z jednym dużym zdjęciem
Imię i nazwisko, rola, kilka zdań, link kontaktowy
3 do 8
Siatka kart z krótkimi notkami
Zdjęcie, imię i nazwisko, rola, jedno zdanie o osobie
9 do 30
Zwarta siatka zdjęć pogrupowana według zespołów
Zdjęcie, imię i nazwisko, rola
30 i więcej
Kierownictwo na górze, a pod nim lista z wyszukiwaniem
Imię i nazwisko, rola, zespół; zdjęcia opcjonalnie
Ludzie kupują od ludzi, zwłaszcza w usługach, takich jak gabinety, agencje, rzemiosło czy restauracje. Strona Zespół odpowiada na pytanie, kto stoi za firmą, i sprawia, że pierwszy e-mail lub wizyta mniej przypomina skok w nieznane. Przykłady tutaj używają inicjałów zamiast zdjęć, więc możesz wstawić własne fotografie bez zmian w układzie.
Skorzystaj z tabeli wielkości, aby wybrać rodzaj układu pasujący do liczby osób.
Ustaw kolumny, kształt zdjęć i odstęp w generatorze siatki i skopiuj wygenerowany CSS.
Przejrzyj osiem układów poniżej, edytuj dowolny z nich na miejscu i skopiuj HTML oraz CSS, który Ci odpowiada.
Zamień inicjały na prawdziwe zdjęcia z ustawioną szerokością i wysokością i napisz tekst alternatywny z imieniem i nazwiskiem osoby.
Używaj zdjęć zrobionych w tym samym świetle i kadrze. Niedopasowane fotki sprawiają, że nawet mocny zespół wygląda na zebrany przypadkiem.
Opisuj role prostymi słowami, które klienci rozumieją. Kierownik obsługi klienta mówi więcej niż Chief Happiness Officer.
Nadaj każdemu obrazowi atrybuty width i height, aby siatka nie skakała podczas ładowania zdjęć.
Umieść na stronie sposoby kontaktu. Bezpośredni e-mail lub link do rezerwacji przy właściwej osobie oszczędza krążenia przez ogólną skrzynkę.
Zapytaj o zgodę przed opublikowaniem czyjegoś zdjęcia lub danych i szybko usuwaj osoby, które odchodzą.
Najczęściej zadawane pytania
Co powinna zawierać strona Zespół?
Co najmniej imię i nazwisko, rolę i zdjęcie każdej osoby. Dodaj zdanie o tym, w czym pomaga klientom, i link kontaktowy tam, gdzie to przydatne. Krótki wstęp na górze wyjaśnia, jak zespół ze sobą współpracuje.
Jak napisać tekst alternatywny do zdjęć zespołu?
Podaj imię i nazwisko osoby oraz rolę, jeśli nie jest napisana obok zdjęcia, na przykład alt="Ana Ruiz, physiotherapist". Jeśli imię jest już w podpisie tuż obok obrazu, krótki alt lub samo imię pozwala uniknąć powtarzania długiego tekstu.
Jak sprawić, by zdjęcia w siatce się nie rozciągały?
Nadaj obrazowi stałe proporcje przez aspect-ratio i użyj object-fit: cover. Zdjęcie wypełnia swoje pole, a nadmiar jest przycinany, zamiast spłaszczać twarz.
Czy strona Zespół powinna być oddzielona od strony O nas?
Małe firmy często mieszczą zespół na stronie O nas. Gdy masz więcej niż około osiem osób albo zespoły, z którymi klienci kontaktują się bezpośrednio, osobna strona pozwala skupić stronę O nas na Twojej historii.
Czy można pokazać zespół bez zdjęć?
Tak. Inicjały, ilustracje lub jedno wspólne zdjęcie grupowe sprawdzają się, gdy ludzie wolą nie być fotografowani. Zachowaj widoczne imiona i role, aby strona nadal spełniała swoje zadanie.
Siatka, która przetrwa prawdziwe zdjęcia
Zdjęcia przychodzą w każdym rozmiarze. Ustawienie aspect-ratio na polu obrazu i object-fit: cover na elemencie img daje każdej twarzy tę samą ramkę. Dodaj object-position, jeśli głowy są ucinane u góry.
Siatka z repeat(auto-fill, minmax(160px, 1fr)) dopasowuje się od telefonu po desktop bez breakpointów. Jeśli wolisz stałą liczbę kolumn, użyj generatora poniżej i dodaj media query dla małych ekranów.
Pisz notki, które ludzie czytają
Jedno lub dwa zdania na osobę wystarczą: w czym pomaga klientom i jeden ludzki szczegół. Długie notki w stylu CV są pomijane. Jeśli rola wymaga więcej szczegółów, dodaj link do osobnej strony profilu.
Osiem układów strony Zespół
Kolorowe inicjały zastępują zdjęcia. Zamień każdy blok .av na img z tą samą klasą.
1. Klasyczna siatka z okręgami
Okrągłe zdjęcia, imię i rola wyśrodkowane. Sprawdza się w prawie każdym zespole od czterech do dwunastu osób.
2. Karty z jednozdaniową notką
Krótkie zdanie o tym, co każda osoba robi dla klientów, zamienia ścianę portretów w coś przydatnego.
3. Historia założyciela
W firmie jedno- lub dwuosobowej jedno zdjęcie i kilka szczerych zdań mają większą wagę niż siatka.
4. Podział na działy
Nagłówki dla każdego zespołu pomagają odwiedzającym znaleźć właściwą osobę w większej firmie.
5. Rząd kierownictwa nad zespołem
Większe karty dla osób podejmujących decyzje, zwarty pasek dla wszystkich pozostałych.
6. Zwarta lista dla dużych zespołów
Wiersze z imieniem, rolą i zespołem łatwo przeglądać i przeszukiwać funkcją wyszukiwania w przeglądarce.
7. Karty zespołu z bezpośrednim kontaktem
Każda osoba ma link do e-maila, więc klienci od razu trafiają do właściwego biurka.
8. Jedno zdjęcie grupowe z imionami pod spodem
Gdy ludzie wolą nie mieć indywidualnych portretów, jedno wspólne zdjęcie i podpis nadal łączą firmę z konkretnymi osobami.
AR|Ana Ruiz|Fizjoterapeutka
JO|James Osei|Terapeuta sportowy
LK|Lena Kim|Recepcja
MB|Marco Bell|Kierownik przychodni
SP|Sara Patel|Instruktorka pilatesu
TW|Tess Wu|Masażystka
Generator siatki zespołu
Wybierz kolumny, kształt zdjęć i odstęp. Początkowy CSS: