---
title: "Sekcja hero: co to jest? Słownik pojęć"
description: "Sekcja hero to pierwszy, zwykle duży blok na górze strony, widoczny zaraz po jej otwarciu. Zawiera główny nagłówek, obraz lub wideo i najczęściej przycisk…"
url: https://fluostudio.pl/baza-wiedzy/slownik/sekcja-hero/
---

[Strony www](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=www)

# Sekcja hero

Inaczej hero, hero section, hero banner

Sekcja hero to pierwszy, zwykle duży blok na górze strony, widoczny zaraz po jej otwarciu. Zawiera główny nagłówek, obraz lub wideo i najczęściej przycisk prowadzący do najważniejszego działania.

## W skrócie

-   Główny nagłówek strony (H1) zwykle stoi w hero
-   Duży obraz w hero to często element LCP z Core Web Vitals, więc nie ładuje się go z opóźnieniem (lazy loading)
-   Na telefon przygotowuje się osobny kadr zdjęcia

## Usługi

-   [Strona firmowa](https://fluostudio.pl/uslugi/strony-www/strona-firmowa/)
-   [Landing page](https://fluostudio.pl/uslugi/strony-www/landing-page/)

Na własnej stronie widzieliśmy w danych prostą zależność. Gdy strona projektu zaczynała się od ściany tekstu, ludzie wychodzili. Dlatego strony projektów zaczynają się u nas od obrazu albo wideo, a opis jest niżej.

Hero to pierwsze sekundy na stronie. W tym czasie odwiedzający ocenia trzy rzeczy: czy dobrze trafił, czym jest firma albo produkt i co może zrobić dalej. Jeśli hero tego nie powie, część ludzi nie dotrze do reszty strony, choćby była najlepsza.

## Co działa w hero

-   **Nagłówek, który mówi, co firma robi.** „Nowa jakość w Twojej branży” nie mówi nic. „Okna aluminiowe na wymiar dla deweloperów” od razu mówi, czego się spodziewać.
-   **Obraz, który pokazuje produkt albo efekt.** Zdjęcie ze stocku z uściśniętymi dłońmi nie pokazuje niczego. Dobrze sprawdza się [key visual](https://fluostudio.pl/baza-wiedzy/slownik/key-visual/) marki albo krótkie wideo produktu.
-   **Jedno główne [CTA](https://fluostudio.pl/baza-wiedzy/slownik/cta/).** Najwyżej drugie, wyraźnie słabsze.
-   **Lekkość.** Wideo, które ładuje się kilka sekund, zabiera to, co hero miało dać, czyli szybkie pierwsze wrażenie. Wolne hero widać w wynikach [Core Web Vitals](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/).

## Slider i pierwszy ekran

Slider z pięcioma slajdami bywa kompromisem, bo każdy dział chciał być na górze. Wielu odwiedzających zobaczy tylko pierwszy slajd. To on musi wystarczyć.

Obszar widoczny bez przewijania, po angielsku above the fold, to nie to samo co hero. Zależy od ekranu: na laptopie mieści się w nim hero i początek kolejnej sekcji, na telefonie czasem tylko nagłówek i zdjęcie. Na telefon hero projektuje się osobno, z innym kadrem i krótszym tekstem.

## W naszych projektach

-   ### [Vee](https://fluostudio.pl/projekty/vee/)

    Na banerze głównym vee.ai zamiast długiego opisu sztucznej inteligencji jest przycisk w heksagonie i nagranie rozmowy z Vee.

-   ### [Zippy Tail](https://fluostudio.pl/projekty/zippy-tail/)

    W projekcie sklepu zippytail.com hero ma dwie wersje: kafelki z karuzelą na co dzień i jeden duży baner na czas promocji.

## Zobacz też

-   [Strony www CTA CTA (call to action) to wezwanie do działania: przycisk albo link, który mówi odwiedzającemu, co ma zrobić dalej, np. „Umów wizytę”, „Pobierz katalog” albo „Zapytaj o ofertę”.](https://fluostudio.pl/baza-wiedzy/slownik/cta/)
-   [Strony www Landing page Landing page to pojedyncza strona przygotowana pod jedną kampanię i jeden cel, np. zapis na webinar, pobranie katalogu albo zapytanie o ofertę. Trafia na nią ruch z reklam, mailingu czy kodu QR.](https://fluostudio.pl/baza-wiedzy/slownik/landing-page/)
-   [Strony www Strona firmowa Strona firmowa to główna strona internetowa firmy pod jej własną domeną. Przedstawia ofertę, firmę i kontakt dla klientów, partnerów i kandydatów do pracy.](https://fluostudio.pl/baza-wiedzy/slownik/strona-firmowa/)
-   [Identyfikacja wizualna Key visual Key visual to główny obraz kampanii, wydarzenia albo produktu, z którego wyprowadza się pozostałe materiały: plakaty, banery, posty i ekrany. Zwykle łączy grafikę, hasło i układ w jeden rozpoznawalny motyw.](https://fluostudio.pl/baza-wiedzy/slownik/key-visual/)
-   [Strony www Core Web Vitals Core Web Vitals to trzy wskaźniki Google, które mierzą, jak strona działa u prawdziwych użytkowników. Sprawdzają, jak szybko pokazuje główną treść (LCP), jak szybko reaguje (INP) i czy układ nie skacze (CLS).](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/)
-   [Strony www Mobile first Mobile first to podejście do projektowania stron, w którym zaczyna się od wersji na telefon, a dopiero potem rozbudowuje układ na tablet i komputer. Wymusza wybór tego, co najważniejsze.](https://fluostudio.pl/baza-wiedzy/slownik/mobile-first/)
-   [Strony www UX writing UX writing to pisanie tekstów w interfejsie: etykiet przycisków, nazw w menu, podpowiedzi w formularzach, komunikatów o błędach i potwierdzeń. Mają poprowadzić człowieka przez zadanie bez zastanawiania się.](https://fluostudio.pl/baza-wiedzy/slownik/ux-writing/)

Hasło pojawia się też w: [Konwersja](https://fluostudio.pl/baza-wiedzy/slownik/konwersja/)

## Strona ma sprzedawać, działać szybko i dawać się łatwo edytować. Porozmawiajmy o Twojej.

Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań.

[Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)