Strona główna to zazwyczaj pierwsza strona którą otwierasz w nowym projekcie. I zazwyczaj pierwsza którą przebudujesz od zera po tym jak zobaczysz jak wygląda w kontekście całego serwisu.
To nie jest przypadek. Strona główna jest najtrudniejsza do zaprojektowania nie dlatego że jest technicznie skomplikowana, ale dlatego że próbuje robić zbyt wiele rzeczy naraz. Przedstawić firmę, pokazać usługi, zbudować zaufanie, zachęcić do kontaktu. Wszystko jednocześnie, na jednej stronie.
Efekt jest często taki że strona główna rozrasta się w nieskończoność, każda sekcja walczy o uwagę i ostatecznie żadna nie wygrywa.
Zanim otworzysz builder, warto odpowiedzieć sobie na jedno pytanie.
Jedno pytanie które porządkuje całą stronę główną
Co ma zrobić osoba która pierwszy raz trafia na tę stronę?
Nie „dowiedzieć się wszystkiego o firmie”. Nie „zobaczyć pełną ofertę”. Jedno konkretne działanie — zadzwonić, wypełnić formularz, przejść na stronę usług, umówić konsultację.
Kiedy wiesz jaka jest ta jedna rzecz, strona główna zaczyna mieć logikę. Każda sekcja albo prowadzi do tego działania, albo buduje zaufanie potrzebne żeby je podjąć. Sekcje które nie robią ani jednego ani drugiego — można wyciąć.
To nie jest decyzja w Divi 5. To jest decyzja przed Divi 5. Ale jeśli jej nie podejmiesz, builder nie pomoże.
Struktura która działa w większości projektów
hero → zaufanie → oferta → case study → opinie → końcowe CTA
Nie ma jednej słusznej struktury strony głównej. Ale jest kilka układów które sprawdzają się w typowych projektach stronowych dla małych i średnich firm.
Klasyczny układ wygląda tak:
Hero — pierwsze co widzi użytkownik po wejściu na stronę. Nagłówek który mówi czym zajmuje się firma i dla kogo, krótki opis, jedno CTA. Nie miejsce na historię firmy ani listę wszystkich usług. Jedno zdanie, jeden przycisk.
Social proof lub wyróżniki — dlaczego warto. Liczby, certyfikaty, krótkie wyróżniki. Ta sekcja odpowiada na pytanie „czy mogę im zaufać” które pojawia się sekundę po przeczytaniu hero.
Usługi lub oferta — skrótowy przegląd tego co firma robi. Nie pełny opis — tylko tyle żeby użytkownik wiedział czy jest w dobrym miejscu i żeby zachęcić do przejścia na dedykowaną stronę usługi.
Case study lub realizacje — opcjonalnie, ale bardzo skuteczne. Konkretny przykład efektu pracy jest mocniejszy niż opis tego co firma potrafi zrobić.
Opinie klientów — testimoniale budują zaufanie. Warto je mieć, warto żeby były prawdziwe i konkretne.
CTA zamykające — sekcja na końcu strony z ponownym zaproszeniem do działania. Użytkownik który doczytał do końca jest zainteresowany — warto mu ułatwić następny krok.
Ta struktura to punkt startowy, nie szablon do ślepego kopiowania. Twój projekt może potrzebować innej kolejności albo innych sekcji. Ale jeśli nie wiesz od czego zacząć — zacznij od tego układu.
Jak budować stronę główną w Divi 5 mając gotowy system
Tu zaczyna procentować praca z Bloku 1.
Otwierasz nową stronę w builderze. Nagłówek i stopka są już gotowe — Theme Builder zadbał o to zanim zacząłeś. Kolory są w Design Variables. Typografia obowiązuje globalnie.
Zaczynasz od sekcji Hero. Dodajesz sekcję, wiersz, moduły — Heading, Text, Button. Button od razu korzysta z presetu Primary Button który zdefiniowałeś wcześniej. Kolor nagłówka bierze się z typografii globalnej. Tło sekcji korzysta ze zmiennej koloru.
Nie podejmujesz dziesiątek małych decyzji projektowych przy każdym elemencie. System je już podjął.
Kiedy sekcja Hero jest gotowa — zapisujesz ją do Divi Library jeśli planujesz podobny układ na innych stronach. Potem kolejna sekcja, i kolejna.
Gdzie najczęściej powstają problemy
Kilka miejsc gdzie strona główna w Divi 5 najczęściej się komplikuje:
Hero z za dużą ilością treści — nagłówek który jest akapitem, trzy przyciski CTA, lista punktów. Hero powinno być proste. Jeden nagłówek, jedno zdanie, jeden przycisk. Reszta jest niżej.
Sekcja usług która próbuje zastąpić strony usług — długie opisy każdej usługi na stronie głównej. To nie jest miejsce na pełną prezentację oferty. Krótki opis i link do dedykowanej strony.
Brak rytmu między sekcjami — każda sekcja ma inne tło, inne odstępy, inny układ. Strona wygląda jak zlepek osobnych elementów zamiast spójnego projektu. Option Group Presets dla spacingu sekcji i konsekwentna paleta tła pomagają to kontrolować.
Strona która nie ma końca — osiem, dziesięć, dwanaście sekcji. Użytkownik gubi się zanim dotrze do CTA. Wróć do pytania z początku: co ma zrobić osoba która trafia na tę stronę. I sprawdź czy każda sekcja faktycznie do tego prowadzi.
Responsywność na stronie głównej
Strona główna często ma najbardziej rozbudowany układ w całym projekcie — i przez to najczęściej wymaga uwagi przy responsywności.
Kilka elementów które warto sprawdzić przed uznaniem strony głównej za gotową:
Hero na telefonie — czy nagłówek nie jest za duży, czy CTA jest dobrze widoczne, czy tło obrazka nie ucina ważnych elementów.
Sekcja z usługami — trzy kolumny na desktopie często wymagają zmiany na jedną kolumnę na telefonie. Divi 5 ma wbudowane kontrolki responsywności dla układów Flexbox i CSS Grid.
Testimoniale — karuzele i suwaki wymagają sprawdzenia na każdym breakpoincie osobno.
Warto sprawdzić stronę główną na wszystkich wbudowanych breakpointach Divi 5 zanim przejdziesz do kolejnych podstron. Problemy responsywności wykryte na stronie głównej często powtarzają się na reszcie serwisu — lepiej je naprawić systemowo niż strona po stronie.
Strona główna nigdy nie jest ostateczna
Jedno zdanie które warto mieć z tyłu głowy przez cały czas budowania strony głównej: ona będzie zmieniana.
Klient zobaczy ją i będzie miał uwagi. Po miesiącu działania okaże się że użytkownicy klikają nie tam gdzie planowałeś. Za rok firma zmieni ofertę i część sekcji straci sens.
Dlatego warto budować stronę główną tak żeby była łatwa w aktualizacji — presety zamiast ręcznych ustawień, zmienne kolorów zamiast hexów, sekcje które można przestawiać bez rozsypywania całości.
Projekt zbudowany systemowo jest gotowy na zmiany. Projekt zbudowany na chybił trafił — każda zmiana to ryzyko że coś się posypie.