Elementor strona główna – Hero Section

Kolejny materiał z serii przewodników na temat tworzenia stron www. Tym razem Elementor strona główna i projektowanie hero section.
mężczyzna w okularach i obok napis hero secction

Spis treści

żółty kwadrat

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.

Poniżej prezentuję kilka  odnalezionych przeze mnie przykładów, które mogłyby stanowić inspirację dla stworzenia własnego Hero Section. Oczywiście tutaj wybrałem w sposób losowy, ale warto się inspirować projektami branżowymi. I najważniejsze: to zawsze są tylko inspiracje. Stwórz własny niepowtarzalny hero section bazując na własnej wyobraźni i miksowaniu koncepcji róznych projektów.

 

żółty kwadrat

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.

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ć.

żółty kwadrat

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:)
rysunkowe chmurki jako symbol rozmowy

Potrzebujesz strony www?

Przeczytaj więcej...