Nowe narzędzie pozwala na tworzenie rozbudowanych nagłówków strony internetowej z przydatnymi informacjami i funkcjami
Astra to jeden z najpopularniejszych motywów WordPressa znany z licznych zalet takich jak dobra szybkość ładowania strony, elastyczność i dobra współpraca z kreatorami stron. Jego wadą był jednak dotąd brak funkcji umożliwiającej tworzenie rozbudowanych headerów strony (górny panel z logo, menu itd).
Była to wada dosyć istotna ponieważ tworząc strony firmowe zwykle w górnym panelu obok standardowych elementów takich jak logo i menu – umieszcza się istotne informacje: dane teleadresowe, przycisk do formularza kontaktowego itp. Chodzi o to, aby potencjalny klient mógł znaleźć te informacje w wyeksponowanym miejscu. Poniżej przykład:
- Logo
- Dane teleadresowe
- Przycisk “Kontakt”
- Główne menu
- Social Media
- Wyszukiwanie
Tworzymy rozbudowany header
Wada Astry w postaci braku header-buildera to już jednak przeszłość. Funkcja ta została dodana w wersji 3+. Jak zatem korzystać z tego narzędzia?
Po zalogowaniu na zapleczu naszej strony klikamy “Wygląd”, “Dostosuj” a następnie “Header Builder”. Ukazuje się nam interface, w którym do dyspozycji mamy 3 rzędy, a każdy z nich ma 3 pola, które możemy wypełnić potrzebnymi elementami.
Zwykle korzysta się jednak tylko z 2 rzędów, aby uniknąć informacyjnej kakofonii.
Tworząc nasz rozbudowany header w pierwszej kolejności wprowadzimy ustawienia definiujące wyglądu poszczególnych rzędów (pięter). W tym celu klikamy w ikonę koła zębatego na początku rzędu. Wówczas z lewej strony wyświetli się interfejs, który umożliwi ustawienie takich parametrów jak wysokość i kolor tła.
W naszym przypadku dla “górnego piętra” wybraliśmy kolor biały, dla dolnego granatowy. Teraz możemy już dodawać poszczególne elementy. W tym celu klikamy w określone pole i z okna wyboru dodajemy potrzebny element. Do dyspozycji mamy:
- Logo
- Główne menu
- Dodatkowe menu
- Przycisk Własny HTML
- Wyszukiwanie
- Konto użytkownika
- Widżety
- Social Media
Ustawienia elementów headera
Po dodaniu określonego elementu w lewym panelu definiujemy ustawienia. Na przykład w przypadku menu kolor tekstu i font, a w przypadku przycisku kolor tła i zaokrąglenie rogów.
W trakcie projektowania możemy swobodnie przeciągać poszczególne elementy. Dla przykładu wprowadziliśmy zmiany do naszego pierwotnego projektu: Logo (górny rząd) i menu (dolny rząd) zostały przesunięte do środka, a dane teleadresowe na lewą stronę. Zmieniliśmy także kolory tła – biały i granatowy zostały zastąpione przejrzystym tłem z nakładką (overlay)
Gdy wszystkie elementy są już dodane i ostylowane w lewym górnym rogu klikamy “Publikuj”
Uwagi
Jeśli tworzymy nasz header na świeżo zainstalowanym motywie Astra 3+ header builder będzie dostępny z automatu. Natomiast jeśli strona została zbudowana na wcześniejszej wersji Astry, to po aktualizacji motywu do wersji 3 plus musimy wejść w opcje motywu i aktywować funkcję “Zastosuj nowy header builder”.