Jest jeden błąd który popełnia większość osób zaczynających nowy projekt w Divi 5. Budują stronę główną, dodają nagłówek z logo i menu, cieszą się efektem — i przechodzą do kolejnej podstrony. Tam znowu budują nagłówek. Albo kopiują sekcję z poprzedniej strony.
Po tygodniu mają pięć wersji nagłówka w projekcie. Każda trochę inna, bo każda była budowana w nieco innym momencie. Aktualizacja menu oznacza wejście na każdą stronę osobno. Zmiana logo to pół godziny pracy zamiast minuty.
Theme Builder istnieje po to, żeby tego problemu w ogóle nie było.
Czym jest Theme Builder
Theme Builder to narzędzie w Divi 5 które pozwala budować globalne szablony dla elementów powtarzających się na wielu stronach. Zamiast budować nagłówek na każdej stronie osobno — budujesz go raz w Theme Builderze i przypisujesz do wybranych stron lub całego serwisu.
To samo dotyczy stopki, szablonu pojedynczego wpisu blogowego, szablonu strony kategorii, strony wyników wyszukiwania i innych powtarzalnych typów treści.
Kiedy coś zmienisz w szablonie — zmiana pojawia się automatycznie wszędzie gdzie ten szablon jest używany.
Jeden nagłówek. Jeden punkt do edycji. Bez polowania po stronach.
Dlaczego zacząć od Theme Buildera, nie od stron
Odpowiedź jest prosta: bo nagłówek i stopka pojawiają się na każdej stronie.
Jeśli zaczniesz od budowania stron i wrócisz do nagłówka później, to albo masz nagłówek który „jakoś działa” od początku i go potem zastępujesz, albo budujesz każdą stronę bez kontekstu tego jak będzie wyglądał header. Efekt i tak wymaga poprawek.
Jeśli zaczniesz od Theme Buildera, to każda strona którą potem otwierasz ma już gotowy nagłówek i stopkę. Widzisz projekt w kontekście od pierwszego modułu na pierwszej stronie.
To robi dużą różnicę psychologiczną przy pracy — i praktyczną przy efekcie końcowym.
Jak działa Theme Builder w praktyce
Wchodzisz do Theme Buildera przez menu Divi w panelu WordPress. Widzisz listę szablonów — na początku pustą lub z domyślnym szablonem Divi.
Tworzysz nowy szablon. Decydujesz do których stron ma się stosować — wszystkich, konkretnych typów, konkretnych podstron. Wewnątrz szablonu masz do dyspozycji kilka obszarów:
- Header — nagłówek strony, to tu ląduje logo i nawigacja,
- Footer — stopka z informacjami kontaktowymi, linkami, prawami autorskimi,
- Body — opcjonalnie, dla specjalnych typów stron,
- Template Areas — w Divi 5 możesz też edytować obszary szablonu bezpośrednio w builderze przez Editable Theme Builder Areas, co pozwala zmieniać nagłówek i stopkę bez wychodzenia z edycji strony.
Każdy z tych obszarów edytujesz w pełnym builderze Divi 5 — dokładnie tak samo jak budujesz stronę. Masz dostęp do wszystkich modułów, ustawień responsywności i Design Variables które ustawiłeś wcześniej.
Budowanie nagłówka — co warto mieć
Nagłówek w typowym projekcie to kilka stałych elementów:
Logo — moduł Image lub Text z nazwą firmy, z linkiem do strony głównej. Jeśli logo ma wersję jasną i ciemną, warto to uwzględnić od razu przy budowaniu.
Nawigacja — w Divi 5 masz do dyspozycji klasyczny moduł Menu, ale też nowe moduły Link i Dropdown które pozwalają budować nawigację z pełną kontrolą nad wyglądem. Dla prostych projektów klasyczny Menu module wystarczy. Dla bardziej zaawansowanych — warto poznać nowe podejście.
Wersja mobilna — każdy nagłówek wymaga odpowiedzi na pytanie jak wygląda na telefonie. Hamburger menu, zwinięta nawigacja, zmieniony układ. Divi 5 ma wbudowane narzędzia responsywne i breakpointy — warto sprawdzić widok mobilny zanim uznasz nagłówek za gotowy.
Sticky header — czy nagłówek ma być przyklejony do góry ekranu podczas scrollowania. To decyzja projektowa którą warto podjąć na tym etapie, bo wpływa na to jak budujesz resztę layoutu — szczególnie wysokość pierwszej sekcji na stronie.
Stopka — prosta ale ważna
Stopka jest często traktowana po macoszemu, a jest jednym z najczęściej odwiedzanych elementów strony przez osoby szukające informacji kontaktowych.
Minimalna stopka dla typowego projektu zawiera: dane kontaktowe lub link do strony kontakt, podstawową nawigację lub linki do najważniejszych podstron, informację o prawach autorskich, ewentualnie linki do mediów społecznościowych i politykę prywatności.
W Theme Builderze stopkę budujesz raz — i aktualizacja numeru telefonu czy dodanie nowego linku zajmuje minutę, a zmiana pojawia się natychmiast na całym serwisie.
Szablony wpisów i innych typów treści
Poza nagłówkiem i stopką, Theme Builder służy też do budowania szablonów dla powtarzalnych typów treści.
Szablon wpisu blogowego — jak wygląda pojedynczy artykuł. Tytuł, featured image, meta informacje, treść, autor, powiązane artykuły. Zamiast zostawiać domyślny wygląd WordPressa lub Divi, budujesz własny szablon raz i każdy wpis blogowy automatycznie go używa.
Szablon archiwum — strona z listą wpisów w kategorii lub tagiem. Jak są ułożone poszczególne wpisy, co jest pokazywane — tytuł, miniatura, zajawka, data.
Strona 404 — co widzi użytkownik który trafi na nieistniejący adres. Warto mieć własną zamiast domyślnej.
Nie musisz budować wszystkich szablonów przed rozpoczęciem pracy nad stronami. Nagłówek i stopka są priorytetem — resztę możesz uzupełniać w trakcie projektu kiedy dojdziesz do tych typów treści.
Theme Builder i Design Variables — gdzie system działa razem
Tu widać jak poprzednie kroki zaczynają się łączyć.
Nagłówek który budujesz w Theme Builderze korzysta z kolorów zdefiniowanych w Global Colors. Typografia w stopce korzysta z globalnych ustawień fontów. Przycisk CTA w nagłówku używa presetu który ma przypisaną zmienną koloru głównego.
Kiedy klient zmienia kolor główny — zmiana pojawia się automatycznie w nagłówku, stopce i wszystkich stronach. Nie dlatego że jesteś szybki w klikaniu, ale dlatego że system jest dobrze zbudowany.
To jest moment w projekcie gdzie wysiłek włożony w poprzednie kroki zaczyna procentować.
Kiedy masz gotowy Theme Builder
Po skonfigurowaniu Theme Buildera Twój projekt ma już:
- kolory brandu zdefiniowane globalnie,
- typografię ustawioną na poziomie całego serwisu,
- nagłówek i stopkę gotowe i działające na każdej stronie.
Możesz teraz otworzyć builder na pierwszej właściwej stronie i zobaczyć projekt w kontekście. Nie puste płótno — stronę z nagłówkiem, stopką i systemem designu który już działa w tle.
Następny krok to Design System — Variables, Presets i Option Groups, czyli warstwa która sprawia że budowanie kolejnych stron jest coraz szybsze zamiast coraz wolniejsze.