Hero Section – co to jest?
Hero Section to górna część głównej strony internetowej (strony Home). Jest to pierwszy element, który widzi użytkownik internetu po wybraniu adresu strony www. Ta nazwa funcjonuje w obiegu, chociaż moglibyśmy pokusić się o jej tłumaczenie, jak sekcja powitalna czy sekcja główna.
Czy pierwsze wrażenie ma znaczenie?
Taki truizm, ale oczywiście, że pierwsze wrażenie ma kolosalne znaczenie. I nie dotyczy się to tylko poznawania drugiego człowieka. Dotyczy to także poznawania nowej strony internetowej. W zamyśle hero section to część strony, która powinna skłonić odwiedzającą osobę do zapoznania się z resztą witryny. W tym celu zwykle stosuje się duże zdjęcia. Natomiast tak, jak widzisz też na mojej stronie internetowej, mogą być inne techniki próbujące skupić uwagę odwiedzającego, np. fragmenty opinii, oceny gwiazdkowe. Sklepy internetowe często w tym miejscu stosują informacje o promocjach.
Nie wiemy, w jaką stronę potoczy się marketing online w ciągu kilku lat, ale wiemy, że obecnie główna strona przeciętej witryny jest coraz rzadziej odwiedzana. Klienci trafiają na podstrony po wyszukiwaniach w internecie – rzadko wpisują ręcznie adres strony www. Niemniej warto zadbać, aby strona główna była reprezentacyjna.
Przykłady Hero Section
Inspiracji na stworzenie hero section poszukaj w internecie:
- na stronach konkurencji,
- na stronach firm z Twojej branży, ale w innych krajach
- na stronach z szablonami stron www, np. themeforest.net,
- na Pintrest.
Elementor strona główna – pierwszy krok [FILM]
Budowa hero section stanowi pierwszy krok. Jeżeli wykonasz ten krok w sposób przemyślany, to projektowanie strony internetowej będzie dużo łatwiejsze w dalszych etapach. Ten krok będzie rzutował na wygląd reszty strony internetowej. W poniższym filmie prezentuję przykład stworzenia hero section z użyciem Elementora.https://youtu.be/PYG7F0rLq2Y
Szerokość kontenera
Prawie zawsze szerokość kontenera hero section powinna równać się szerokości nagłówka. Chodzi o to, aby tekst pojawiający się przykładowo po lewej stronie, był równy z pierwszym elementem nagłówka po lewej stronie. Podobna sytuacja będzie miała miejsce w kolejnych sekcjach strony internetowej. Stosuje się jednak celowe zabiegi łamiące ten schemat. Pozostając jednak przy naszej głównej sekcji – tutaj razdko stosuje się złamanie tego schematu, aczkolwiek jest też możliwe.
Zdjęcie dobrej jakości
Jeżeli budujesz swoją markę osobistą, to dobrze jeśli na stronie znajdzie się Twoje zdjęcie. Może ono właśnie pojawić się na poziomie hero section. Dotyczy to wszelkich zawodów, gdzie ludzie rozpoznają Cię po nazwisku, zatem lekarze, psychologowie, konsultanci, nauczyciele, itp. Wychodzę z założenia, że w marce osobistej lepiej dodać na stronie własne zdjęcie może w troszeczkę gorszej jakości wykonane smartfonem, niż dodać zdjęcie stockowe. Idealne rozwiązanie to oczywiście dobrej jakości zdjęcie osobiste zrobione przez fotografa.
Podział na 2 kolumny
Jest to najczęściej stosowany podział i jego powtarzalność świadczy o skuteczności. Zwykle w jednej kolumnie stusuje się nagłówek, krótki tekst oraz przycisk z wezwaniem do działania, a w drugiej kolumnie zdjęcie. Jest to też względnie proste rozwiązanie, więc warto z niego skorzystać.
Projektowanie w Elementorze
Cała stronę główną można zaprojektować w zewnętrznych narzędziach typu Canva czy Figma. Jednak osobno projekt graficzny i osobno przenoszenie go na stronę www – stanowi trudne zadanie dla początkujących adeptów tworzenia stron www. Zatem dla osób, które tworzą pierwsze strony zalecam tworzenie od razu z użyciem Elementora bez uprzedniego projektu graficznego. Ja osobiście mam na koncie setki projektów i dalej najczęściej tworzę gotowe strony w Elementorze bez uprzednich projektów graficznych. Spróbuj! Powodzenia:)
