Przegląd i przegląd pakietu układu nagłówka autorstwa Divi Life

Pakiet Header Layout od Divi Life to zestaw nagłówków dla Divi Theme Builder, które można dopasować do dowolnej witryny Divi. Nagłówki wyróżniają się z tłumu dzięki nowej stylizacji dodanej wraz z kodem. Pakiet układu zawiera sześć projektów nagłówków z trzema stylami dla każdego. W tym artykule przyjrzymy się pakietowi układu nagłówków, który pomoże Ci zdecydować, czy odpowiada Twoim potrzebom.

Importowanie pakietu układu nagłówka Divi Life

Przed użyciem układów w Divi Theme Builder musisz je zaimportować do swojej biblioteki Divi. Na szczęście jest to prosty i bezpośredni proces:

1. Pobierz i rozpakuj układy do folderu na komputerze.
2. Przejdź do Divi > Biblioteka Divi w menu pulpitu WordPress.
3. Wybierz opcję Importuj i eksportuj u góry ekranu.
4. Wybierz Importuj w wyskakującym okienku, wybierz Wybierz plik i przejdź do układu, który chcesz przesłać (wybierz WSZYSTKIE-Divi-Life-Szablony nagłówka, jeśli chcesz przesłać je wszystkie jednocześnie.
5. Kliknij Importuj układy Divi Builder i poczekaj na zakończenie przesyłania.

Układy będą teraz dostępne w Twojej bibliotece. W powyższym przykładzie wybrałem przesłanie wszystkich szablonów. Theme Builder ma teraz dostęp do wszystkich układów. Będziesz musiał jedynie wprowadzić zmiany w kodzie i menu w nagłówku 1. Reszta działa bez zmian.

Tworzenie globalnego nagłówka w Divi Theme Builder

Otwórz Divi Theme Builder i kliknij, aby dodać globalny nagłówek. Wybierz Dodaj z biblioteki .

Wybierz kartę o nazwie Twoje zapisane układy i wybierz żądany układ. Poczekaj, aż się zaimportuje.

Kliknij ikonę edycji, aby dostosować układ.

Wybrałem nagłówek-1-a. Pokazuje układ w widoku szkieletowym. Zawiera moduł kodu z niestandardowym CSS i JS. Wiele modułów zawiera identyfikatory klasy dla niestandardowego CSS. Część kodu może nie działać w podglądzie konstruktora motywów. Polecam przeglądanie nagłówka na froncie.

Jeśli chcesz wprowadzić zmiany i nie chcesz, aby nagłówek był wyświetlany do czasu wprowadzenia zmian, możesz rozważyć utworzenie strony testowej i przypisanie nagłówka do tej strony przed uczynieniem z niej nagłówka globalnego.

Zmiana treści i stylu

Następnie wystarczy wybrać menu, dodać logo i dostosować kolory do swojej witryny. Nagłówek używa standardowych modułów, więc działa jak każdy nagłówek. W powyższym przykładzie wybrałem moje menu.

Przycisk używa już niestandardowych stylów. Po prostu dodaj zaprojektowane kolory i czcionki. Kliknij, aby zapisać zmiany.

Pamiętaj też, aby zapisać zmiany na ekranie głównym. Dodałem wersję nagłówka do konkretnego posta, abym mógł przetestować nagłówek przed wrzuceniem go do domyślnego szablonu witryny i uczynieniem go globalnym.

Przykłady nagłówków

Oto spojrzenie na wygląd szablonów w mojej witrynie testowej. 6 układów ma wstępnie stylizowaną wersję jasną, ciemną i jasną. Ułatwia to wybór nagłówka, który pasuje do Twojego projektu, a następnie dostosowanie go do własnych potrzeb. Mają również przyciski, które zmieniają kolor po najechaniu.

Przyjrzymy się ich mieszance z różnymi kolorami tła i rozmiarami ekranu. Używam układów strony głównej i strony docelowej z pakietu układów Pizzeria.

Układ nagłówka 1

Nagłówek 1 zawiera moduł kodu, menu, wyszukiwanie i przycisk do tworzenia CTA.

Proces importowania nie zachowuje prawidłowo wartości, więc trzy wiersze w CSS będą musiały zostać zmienione.

Ponadto należy zmienić nazwę menu i dodać do menu klasę CSS. Na szczęście wszystkie te dostosowania są łatwe do wykonania. Instrukcje znajdują się w dokumentacji. To jedyny moment, w którym potrzebowałem dokumentacji podczas tego przeglądu.

Rezultatem jest eleganckie menu z liniami podziału na trzy główne pozycje menu umieszczone po lewej stronie, reszta menu po prawej stronie, pole wyszukiwania z ikoną wewnątrz pola wyszukiwania oraz duży przycisk CTA. Oto jak to wygląda na jasnym tle. Cień oddziela nagłówek od strony.

Oto ciemne tło. Najeżdżam na CTA, żeby pokazać, że zmienia kolor.

Wysokość nagłówka zmniejsza się podczas przewijania. Elementy pozostają w tym samym rozmiarze.

Oto widok tabletu. Pozycje menu znajdują się w rozwijanym menu. Trzy elementy z klasą CSS zawierają stylizację, która wyróżnia je na tle innych.

Widok telefonu umieszcza CTA pod logo, a także zachowuje stylizację elementów z klasą CSS.

Układ nagłówka 2

Nagłówek 2 wykorzystuje moduł kodu z CSS i JS, notka, obraz, tekst, media społecznościowe, menu i moduły przycisków.

To jest nagłówek 2A. Oto jak to wygląda na ciemnej stronie. Nagłówek nie obejmuje całej szerokości witryny. Górne menu jest przejrzyste i zawiera przyciski społecznościowe. Na dole znajduje się CTA i informacje kontaktowe. Numer telefonu można kliknąć.

Oto projekt na jasnej stronie. Podoba mi się, jak to CTA się wyróżnia.

Po przewinięciu górne menu przewija się wraz ze stroną, a dolne menu przykleja się do góry.

Oto widok tabletu. Górne menu przewija się wraz ze stroną, podczas gdy dolne menu przykleja się.

Oto widok telefonu. CTA jest ułożone pod menu. Nagłówek przewija się wraz ze stroną.

Układ nagłówka 3

Moduły dla nagłówka 3 obejmują kod, śledzenie w mediach społecznościowych, menu i przycisk.

Oto nagłówek 3B z jasnym tłem. Górna sekcja zawiera przyciski społecznościowe i wyszukiwanie, a dolna dodaje CTA.

Oto jak wygląda na ciemnym tle.

Górne menu przewija się wraz ze stroną, podczas gdy dolne menu przykleja się do górnej części ekranu.

Oto widok tabletu.

Oto jak widok telefonu układa elementy.

Układ nagłówka 4

Nagłówek 3 zawiera kod, kilka notek, przycisk, menu i moduły śledzenia mediów społecznościowych.

Oto nagłówek 3C na jasnym tle. Na górze znajdują się informacje kontaktowe i wezwanie do działania, a na dole przyciski społecznościowe.

Oto jak to wygląda na ciemnym tle. Oryginalne kolory świetnie prezentują się na tym tle. W tym przykładzie najeżdżam kursorem na CTA.

Oto jak ten wygląda po przewijaniu. Górna sekcja przewija się wraz z witryną, a dolna sekcja przykleja się.

To jest widok tabletu.

Widok telefonu układa elementy.

Układ nagłówka 5

Nagłówek 5 zawiera moduł kodu, kilka notek, obserwację w mediach społecznościowych i moduły menu.

Oto nagłówek 5C na ciemnym tle. Na górze znajduje się klikalny numer telefonu, przyciski społecznościowe i link do formularza kontaktowego. Czerwień i ciemnoszary ładnie się wyróżniają.

Ładnie wygląda również na jasnym tle. Cień pudełka jest bardziej zauważalny.

Górna połowa menu nadal przewija się, gdy dolna połowa przykleja się do górnej części ekranu.

Oto widok tabletu.

To jest widok telefonu. Podoba mi się sposób, w jaki zawartość górnej części się układa.

Układ nagłówka 6

Nagłówek 6 zawiera moduł kodu, 4 notki, moduł śledzenia w mediach społecznościowych i moduł menu.

To jest nagłówek 6B na ciemnym tle. Ta ma trzy sekcje: górna zawiera przyciski społecznościowe, środkowa zawiera informacje kontaktowe, a dolna zawiera linki do menu.

Oto nagłówek na jasnym tle.

Dwie górne sekcje nagłówka przewijają się, a dolna sekcja jest lepka. Dodaje cień do dolnego menu, gdy przykleja się do górnej części ekranu.

Oto widok tabletu. Przenosi numer telefonu na górę.

Oto projekt w widoku telefonu.

Zakup

Pakiet Header Layout Pack jest dostępny w Divi Life za 49 USD (w sprzedaży za 5 USD przez resztę roku). To do użytku w nieograniczonej liczbie witryn dla Ciebie i Twoich klientów i obejmuje dostęp do wszystkich przyszłych aktualizacji. Obejmuje również wsparcie i dokumentację.

Końcowe myśli

Pakiet Header Layout Pack dla Divi Theme Builder to interesujący zestaw układów. CSS i JavaScript dodają style, które zwykle nie są dostępne w nagłówku. Dzięki temu nagłówek będzie wyglądał znacznie inaczej niż standardowe nagłówki. Ponieważ każdy projekt ma wiele wstępnie przygotowanych opcji, łatwo jest znaleźć coś, co będzie pasować do Twojej witryny bez konieczności wprowadzania wielu modyfikacji. Stylizacja już pasuje do darmowych układów Divi od ET.

Nagłówki wyglądają na profesjonalnie zaprojektowane i uważam, że są łatwe w użyciu. Obejrzałem tylko kilka z nich. Praca z nagłówkiem 1 to jedyny układ, który wymaga skomplikowanych kroków. Nie jest to takie trudne, jeśli przeczytasz instrukcję (zgadnij skąd wiem). Pamiętaj tylko, że wymaga to więcej kroków niż inne.

Jeśli interesują Cię profesjonalnie zaprojektowane nagłówki do Divi Theme Builder, warto zapoznać się z pakietem Header Layout Pack od Divi Life.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś pakiet Header Layout Pack od Divi Life? Daj nam znać, co o tym myślisz w komentarzach.

Polecane zdjęcie za pośrednictwem PureSolution / shutterstock.com