Hero sekcija: kako napraviti prvi ekran koji zadržava posetioce

Hero sekcija je prvi veliki blok na vrhu stranice – naslov, kratak podnaslov, dugme i obično slika ili video. To je ono što posetilac vidi pre nego što skroluje, pa od nje u velikoj meri zavisi da li će ostati. Istovremeno, hero sekcija je često najsporiji deo stranice, jer se u nju stavljaju velike fotografije, slajderi i video pozadine. U ovom tekstu objašnjavamo kako da napravite hero sekciju koja je jasna, radi na telefonu i ne usporava sajt.

Naslov: šta radite i za koga

Glavni naslov (obično jedini h1 na stranici) treba da odgovori na pitanje „šta ova firma radi“. Dobar naslov je konkretan i razumljiv bez dodatnog konteksta. Uporedite:

• Opšte: „Vaš partner za budućnost“;
• Konkretno: „Ugradnja PVC i ALU stolarije u Novom Sadu i okolini“;
• Opšte: „Kvalitet koji se vidi“;
• Konkretno: „Knjigovodstvo za preduzetnike i male firme, sa fiksnom mesečnom cenom“.

Konkretan naslov pomaže i posetiocu i pretraživačima, jer sadrži reči koje ljudi zaista kucaju. Ne mora da bude duhovit ni kreativan – mora da bude jasan. Više o pisanju ovakvih tekstova u vodiču kako napisati tekstove za sajt koji prodaju.

Podnaslov i poziv na akciju

Podnaslov dopunjuje naslov jednom ili dve rečenice: glavnu korist, područje rada, rok ili ono po čemu se razlikujete. Ne ponavljajte naslov drugim rečima i ne pišite pasus – na telefonu tri reda teksta već zauzimaju pola ekrana.

Ispod podnaslova ide glavno dugme. Nekoliko pravila koja se isplate:

• jedno glavno dugme, upadljivo, sa konkretnim tekstom („Zatražite ponudu“, „Zakažite termin“);
• najviše jedno sporedno, vizuelno slabije („Pogledajte radove“);
• uz dugme može stajati kratka napomena koja uklanja sumnju, na primer „odgovor u roku od jednog radnog dana“ – ali samo ako je istina;
• na telefonu dugme treba da bude dovoljno veliko za palac i vidljivo bez skrolovanja.

Primere dobrih formulacija dugmadi naći ćete u tekstu poziv na akciju (CTA).

Slika, video ili ništa

Vizuelni deo hero sekcije treba da podrži poruku, a ne da bude ukras. Svaka opcija ima prednosti i cenu:

Video u pozadini izgleda atraktivno na računaru, ali na telefonu često troši mobilne podatke, a na nekim uređajima se i ne pokreće automatski. Ako vam je video važan, bolje je prikazati fotografiju sa dugmetom „Pogledajte video“ koje ga učitava tek na klik. Detaljnije o tome u tekstu video na sajtu: YouTube i brzina.

Ako je tekst preko fotografije, obezbedite dovoljan kontrast – tamni sloj preko slike ili tekst pored slike, a ne preko njenog najsvetlijeg dela.

Hero sekcija na telefonu

Na računaru hero često ima tekst levo i sliku desno. Na telefonu se to slaže vertikalno, i tu nastaju problemi: velika slika gura naslov i dugme ispod prvog ekrana, pa posetilac vidi samo fotografiju. Nekoliko pravila za mobilnu verziju:

• naslov i glavno dugme moraju da budu vidljivi bez skrolovanja;
• smanjite visinu slike ili je stavite ispod teksta;
• izbegavajte visinu „100% ekrana“ – na telefonima adresna traka menja visinu i sadržaj ume da skače;
• veličina fonta naslova neka bude velika, ali ne toliko da se jedna reč lomi u dva reda;
• za tekst preko fotografije koristite posebno isečenu, uspravniju verziju slike.

Brzina: hero i LCP

Najveći element u prvom ekranu – najčešće hero slika ili naslov – Google meri kroz pokazatelj LCP (Largest Contentful Paint), jedan od Core Web Vitals. Preporuka je da se taj element prikaže za manje od 2,5 sekunde. Hero sekcija zato direktno utiče na utisak brzine. Šta pomaže:

• moderni formati – WebP ili AVIF, sa dimenzijama prilagođenim ekranu (srcset);
• bez lazy load-a za hero sliku – ona se mora učitati odmah, a fetchpriority="high" joj daje prednost;
• bez slajdera koji učitava više velikih slika i JavaScript biblioteku;
• fontovi – ograničite broj varijanti i koristite font-display: swap;
• bez animacija koje sakrivaju naslov dok se skripta ne učita.

Kako se čita LCP i ostali pokazatelji objasnili smo u tekstu Core Web Vitals objašnjeno jednostavno, a pripremu slika u vodiču optimizacija slika: WebP i lazy load.

Najčešće greške u hero sekciji

• slajder sa više poruka umesto jedne jasne;
• naslov koji je slogan, a ne opis delatnosti;
• tri ili četiri dugmeta iste važnosti;
• beli tekst preko svetle fotografije;
• ogromna slika od nekoliko megabajta, ista za telefon i računar;
• hero koji na telefonu zauzima ceo ekran bez ijednog dugmeta.

Kako testirati hero sekciju

Pokažite stranicu nekome ko ne poznaje vašu firmu i sklonite je posle pet sekundi. Ako ne ume da kaže čime se bavite i šta bi kliknuo, poruku treba pojednostaviti. Zatim otvorite stranicu na telefonu preko mobilnog interneta, ne samo preko kućnog Wi-Fi-ja, i pogledajte koliko se čeka dok se naslov i slika ne pojave. Na kraju proverite PageSpeed Insights i koji element alat navodi kao LCP – to je obično upravo hero.

Dobra hero sekcija je jednostavna: jedna poruka, jedno dugme, jedan brz vizuelni element. Ako želite da proverimo kako vaša izgleda i koliko usporava sajt, pošaljite nam upit za besplatnu analizu i ponudu.