Stopka to jeden z tych elementów, które prawie zawsze zostawia się na koniec. A potem okazuje się, że trzeba w niej zmieścić menu, dane firmy, kontakt, linki prawne i jeszcze zrobić to tak, żeby całość nie wyglądała jak przypadkowa dokładka.
W Divi 5 stopkę najlepiej zbudować tam, gdzie jej miejsce — w Theme Builderze. Dzięki temu pojawia się automatycznie na całej stronie, trzyma spójność i nie trzeba jej kopiować ręcznie między podstronami.
W tym artykule budujesz prosty, czytelny footer od zera. Bez wtyczek, bez własnego CSS i bez przekombinowanej struktury.
Zanim zaczniesz — przygotuj 3 rzeczy
Zanim wejdziesz do buildera, przygotuj sobie kilka elementów, które naprawdę oszczędzą czas:
1. Dane kontaktowe
Adres e-mail, numer telefonu, adres firmy, ewentualnie NIP jeśli chcesz go pokazać w stopce.
2. Linki, które mają się tam znaleźć
Najczęściej będą to:
-
Strona główna
-
Oferta / usługi
-
O nas
-
Blog
-
Kontakt
-
Polityka prywatności
3. Logo albo sama nazwa firmy
Nie każda stopka potrzebuje dużego logotypu. Czasem lepiej działa sama nazwa marki i krótki opis, może niewielki element graficzny w kolorach brandu.
Jeśli masz już ustawione kolory brandu w Design Variables i zrobiony nagłówek w Theme Builderze, to będzie jeszcze szybciej, bo stopka od razu będzie wizualnie spójna z resztą projektu.
Krok 1 — otwórz Theme Builder
W panelu WordPress przejdź do:
Divi → Theme Builder
Jeśli masz już szablon globalny, edytujesz go. Jeśli nie, dodajesz nowy template globalny.
W obszarze szablonu kliknij:
Add Global Footer
Potem wybierz:
Build Global Footer
Divi otworzy builder dokładnie tak samo, jak przy budowie strony albo nagłówka. Ta sama logika: sekcje, wiersze, kolumny, moduły.
Krok 2 — wybierz prostą strukturę, nie rozbudowaną
Na start nie kombinuj. W większości projektów wystarczy jeden footer z 3 albo 4 kolumnami.
Najbezpieczniejszy układ to:
-
kolumna 1: logo / nazwa firmy + krótki opis
-
kolumna 2: szybkie linki
-
kolumna 3: kontakt
-
kolumna 4: linki prawne albo social media
Dodaj nową sekcję, a w niej wiersz 4-column.
To dobry moment, żeby od razu ustawić:
-
kolor tła stopki
-
górny i dolny padding
-
szerokość wiersza
Jeśli footer ma być spokojny i czytelny, zwykle dobrze działa:
-
ciemniejsze tło
-
jasny tekst
-
trochę większy odstęp od góry i dołu niż w zwykłych sekcjach
Nie próbuj upchnąć wszystkiego w małej wysokości. Stopka ma domykać stronę, nie wyglądać jak pasek awaryjny.
Krok 3 — dodaj zawartość pierwszej kolumny
W pierwszej kolumnie najlepiej działa prosty zestaw:
-
obrazek z logo albo moduł tekstowy z nazwą firmy
-
1–2 zdania opisu
-
ewentualnie mały CTA typu „Napisz do nas”
Jeśli używasz logo, dodaj Image Module.
Jeśli wystarczy sama nazwa, szybciej będzie użyć Text Module z nagłówkiem i krótkim opisem pod spodem.
Przykład treści:
WEBFLUX.PL
Projektujemy i porządkujemy strony WordPress w sposób, który później da się normalnie rozwijać.
W stopce mniej znaczy więcej. To nie ma być druga sekcja hero.
Krok 4 — dodaj linki nawigacyjne
W drugiej kolumnie możesz pójść dwiema drogami:
Opcja 1: Menu Module
To dobry sposób, jeśli chcesz podpiąć istniejące menu WordPress.
Opcja 2: Text Module z ręcznie dodanymi linkami
Dobre, jeśli stopka ma mieć krótszy, bardziej kontrolowany zestaw linków niż główna nawigacja.
W praktyce w footerze często lepiej działa ręczna lista linków, bo:
-
masz pełną kontrolę nad kolejnością
-
nie musisz kopiować całego menu z headera
-
możesz zostawić tylko najważniejsze rzeczy
Przykład:
-
Strona główna
-
Usługi
-
O nas
-
Blog
-
Kontakt
Nadaj tej kolumnie prosty nagłówek, np. Na skróty.
Krok 5 — dodaj kontakt
W trzeciej kolumnie wrzuć moduł tekstowy i wpisz dane kontaktowe w prostym układzie:
Kontakt
hello@twojadomena.pl
+48 000 000 000
Miasto / adres
Nie przesadzaj z ozdobnikami. W footerze liczy się czytelność.
Jeśli chcesz, możesz dodać też godziny kontaktu albo krótką informację typu:
Odpowiadamy w dni robocze.
Jeżeli numer telefonu i e-mail mają być klikalne, ustaw odpowiednie linki:
-
mailto:
-
tel:
To mały detal, ale poprawia użyteczność, szczególnie na telefonie.
Krok 6 — dodaj linki prawne albo social media
W czwartej kolumnie najlepiej umieścić rzeczy drugiego poziomu:
-
Polityka prywatności
-
Cookies
-
Regulamin
-
LinkedIn / Facebook / Instagram
Jeśli masz tylko 1–2 linki prawne, możesz tę kolumnę uprościć albo połączyć ją z kontaktem.
Jeśli chcesz dodać social media, nie musisz od razu robić dużego bloku ikon. Czasem wystarczą zwykłe linki tekstowe.
Najważniejsze, żeby footer nie wyglądał jak śmietnik na rzeczy typu „bo jeszcze to trzeba gdzieś wrzucić”.
Krok 7 — ustaw odstępy i typografię
To jest moment, który decyduje, czy footer wygląda profesjonalnie, czy jak przypadkowy układ czterech boksów.
Sprawdź:
-
czy nagłówki kolumn mają ten sam styl
-
czy odstępy między linkami są równe
-
czy tekst nie jest za mały
-
czy kolumny nie są zbyt zbite
Dobre minimum:
-
wyraźny odstęp między nagłówkiem kolumny a treścią
-
spójny rozmiar tekstu
-
mniejsza szerokość treści niż pełny ekran
-
trochę większy line-height dla danych kontaktowych i linków
Jeśli masz ustawioną globalną typografię w projekcie, tu będzie dużo łatwiej. Footer od razu złapie wspólny rytm z resztą strony.
Krok 8 — dodaj dolny pasek copyright
Pod główną sekcją stopki możesz dodać jeszcze jedną, prostszą sekcję na sam dół.
Najczęściej wystarczy:
-
jedna kolumna
-
mały tekst
-
delikatnie inny odcień tła albo cienka linia u góry
Przykład:
© 2026 WEBFLUX.PL — wszystkie prawa zastrzeżone.
Możesz też dodać krótki zestaw linków obok:
-
Polityka prywatności
-
Kontakt
To już zależy od projektu, ale warto oddzielić tę warstwę od głównej treści stopki. Dzięki temu footer oddycha i jest bardziej uporządkowany.
Krok 9 — sprawdź footer na telefonie
To punkt, którego łatwo nie dopilnować.
Na desktopie cztery kolumny wyglądają dobrze. Na mobile potrafią zamienić się w długi, chaotyczny słup.
Sprawdź w widoku responsywnym:
-
kolejność kolumn
-
wielkość tekstu
-
odstępy między sekcjami
-
czy linki da się wygodnie kliknąć
-
czy logo nie jest za duże
Często najlepsze rozwiązanie na telefonie to:
-
jedna kolumna pod drugą
-
więcej pionowych odstępów
-
mniejsze logo
-
prostszy układ linków
Nie próbuj na siłę zachować desktopowej logiki. Stopka ma działać, nie tylko wyglądać.
Najczęstszy błąd przy budowie stopki w Divi 5
Najczęstszy błąd nie polega na złym module.
Polega na tym, że stopka dostaje za dużo ról naraz:
-
ma być mapą strony
-
ma być wizytówką firmy
-
ma być blokiem social media
-
ma być miejscem na SEO
-
ma jeszcze zmieścić pół regulaminu
I wtedy zamiast domknąć stronę, robi bałagan.
Lepsza stopka to taka, która odpowiada na 3 pytania:
-
gdzie jestem
-
jak się z Tobą skontaktować
-
gdzie kliknąć dalej
Reszta jest dodatkiem.
Gotowe — masz stopkę, która działa globalnie
Po zapisaniu zmian w Theme Builderze footer będzie wyświetlał się automatycznie tam, gdzie przypisany jest szablon.
To największa przewaga budowania stopki w ten sposób:
-
robisz ją raz
-
aktualizujesz w jednym miejscu
-
trzymasz spójność całego serwisu
I właśnie o to chodzi w Divi 5 — mniej ręcznego poprawiania, więcej elementów zbudowanych raz i sensownie.