Jak utworzyć lepki nagłówek za pomocą lepkich opcji Divi

Sposób, w jaki używamy Divi Theme Builder podczas konfigurowania strony internetowej, przyspieszył nasz przepływ pracy i ułatwił wszystko. Chociaż byliśmy w stanie tworzyć niestandardowe nagłówki od pierwszego dnia, odkąd pojawił się Divi Theme Builder, ciągle prosiliśmy o jedną rzecz, a mianowicie możliwość tworzenia lepkiego nagłówka bez użycia dodatkowego kodu. Dzięki nowym opcjom przyklejania Divi tworzenie przyklejonych nagłówków stało się łatwiejsze niż kiedykolwiek. Przyklejone ustawienia, które zapewnia Divi, bez trudu pomogą Ci zmienić dowolny element projektu na przyklejony i przypisać niestandardowe style do stanu przyklejenia, co zapewnia nieskończone możliwości projektowania i doświadczenia użytkownika.

W tym samouczku pokażemy, jak utworzyć przyklejony nagłówek, który zawiera następujące elementy:

• Tworzony nagłówek ma górny pasek nagłówka + pasek menu
• Sprawiamy, że sekcja zawierająca pasek menu jest przyklejana, gdy przechodzisz obok niej, gdy tylko wrócisz na górę, pasek nagłówka pojawia się ponownie
• Zmieniamy styl projektowania sekcji przyklejonej (i jej elementów), gdy sekcja stanie się przyklejona

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnego nagłówka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Budowanie struktury elementu nagłówka w nowym szablonie nagłówka

Utwórz nowy szablon globalnego nagłówka

Przejdź do Divi Theme Builder i zacznij tworzyć nowy globalny lub niestandardowy nagłówek.

Sekcja #1 Ustawienia

Tło gradientowe

Po wejściu do edytora szablonów zaczniemy od zbudowania struktury elementów naszego nagłówka. W drugiej części tego samouczka skupimy się na zastosowaniu różnych ustawień lepkich, aby ukończyć nasz projekt lepkiego nagłówka. W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zastosuj tło gradientowe.

• Kolor 1: #ffba60
• Kolor 2: #ffd6a0
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Aby utworzyć nasz górny pasek nagłówka, dodamy nowy wiersz do naszej sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 95%
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 15px
• Dolna wyściółka: 15px

Główny element CSS

Aby upewnić się, że kolumny pozostaną obok siebie na mniejszych ekranach, dodamy jeden wiersz kodu CSS do głównego elementu wiersza na karcie Zaawansowane.

display: flex;

Dodaj moduł śledzenia mediów społecznościowych do kolumny 1

Dodaj wybrane sieci społecznościowe

Czas dodać moduły, zaczynając od modułu Social Media Follow w kolumnie 1. Dodaj wybrane sieci społecznościowe wraz z odpowiadającymi im linkami.

Usuń kolor tła każdej sieci społecznościowej

Kontynuuj, usuwając każdy kolor tła sieci społecznościowej z osobna.

Ustawienia ikon

Następnie wróć do ogólnych ustawień modułu i zmień kolor ikony w zakładce projekt.

• Kolor ikony: #26333a

Rozstaw

Dodaj też górny margines.

• Górny margines: 5px

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

W kolumnie 2 jedynym modułem, którego potrzebujemy, jest moduł przycisku. Dodaj wybraną kopię.

Dodaj link

Dodaj link dalej.

Wyrównanie przycisków

Następnie przejdź do zakładki projektu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: w prawo

Ustawienia przycisków

Stylizujemy też przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 14px
• Kolor tekstu przycisku: #26333a
• Szerokość obramowania przycisku: 2px
• Kolor obramowania przycisku: #26333a
• Promień obramowania przycisku: 0px

• Odstępy między przyciskami: 4px
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery
• Pokaż przycisk: Tak

Rozstaw

Dokończymy ustawienia modułu, dodając górne i dolne dopełnienie do ustawień odstępów.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px

Dodaj sekcję #2

Tło gradientowe

Dodaj kolejną regularną sekcję tuż pod poprzednią. Ta sekcja będzie poświęcona naszemu menu i zostanie przyklejona w drugiej części tego samouczka. Po dodaniu sekcji zastosuj tło gradientowe.

• Kolor 1: #ffffff
• Kolor 2: #f7f7f7
• Typ gradientu: liniowy
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 25%
• Pozycja końcowa: 25%

Rozstaw

Przejdź do zakładki projektu sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Przejdź do karty projektu wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px

Dodaj moduł menu do kolumny

Wybierz menu

Następnie dodaj moduł menu do kolumny wiersza i wybierz wybrane przez siebie dynamiczne menu.

Prześlij logo

Następnie prześlij logo.

Usuń kolor tła

Następnie usuń domyślny biały kolor tła modułu.

Ustawienia tekstu menu

Przejdź do karty projektu i dostosuj również ustawienia tekstu menu.

• Grubość czcionki menu: pogrubiona
• Kolor tekstu menu: #002d4c
• Rozmiar tekstu menu: 15px
• Odstępy między literami menu: 4px
• Wyrównanie tekstu: do prawej

Menu rozwijane Ustawienia tekstu

Następnie wprowadź zmiany w ustawieniach menu rozwijanego.

• Kolor tła menu rozwijanego: #ffffff
• Kolor linii menu rozwijanego: #002d4c

Ustawienia ikon

Wraz z ustawieniami ikon.

• Kolor ikony koszyka na zakupy: #002d4c
• Kolor ikony wyszukiwania: #002d4c
• Kolor ikony menu hamburgerów: #002d4c

Rozmiary

I uzupełnij ustawienia modułu, dodając maksymalną wysokość logo do ustawień rozmiaru.

• Maksymalna wysokość logo: 60px

2. Zastosuj niestandardowe lepkie efekty

Obróć Sekcja #2 Przyklejony

Teraz, gdy stworzyliśmy strukturę elementów naszego nagłówka, nadszedł czas, aby zmienić naszą drugą sekcję na przyklejoną i zmienić jej styl projektowania i jej elementy na przyklejony. Otwórz ustawienia drugiej sekcji i przejdź do zakładki Zaawansowane. Tam przejdź do ustawień efektów przewijania i zastosuj następujące opcje przyklejania:

• Lepka pozycja: trzymaj się u góry
• Lepkie przesunięcie górne: 0px
• Dolny limit lepkości: brak
• Przesunięcie od otaczających lepkich elementów: Tak
• Domyślne i trwałe style przejścia: Tak

Zmień tło gradientowe sekcji w stanie przyklejonym

Teraz, gdy nasza sekcja stała się lepka, w ustawieniach sekcji, wiersza i modułu pojawi się dodatkowa opcja; lepka opcja. Po kliknięciu tej ikony będziesz mógł utworzyć alternatywny styl dla wybranego elementu w stanie przyklejenia. Zamierzamy połączyć kilka z tych przyklejonych ustawień projektowych, aby dostosować wygląd i działanie naszego przyklejonego nagłówka podczas przewijania. Zacznij od przejścia do ustawień tła drugiej sekcji i zastosuj następujące lepkie tło gradientowe:

• Kolor 1: #26333a
• Kolor 2: #1e272f

Rozciągnij rząd w stanie lepkim

Następnie otworzymy wiersz zawierający moduł menu i zmodyfikujemy szerokość w stanie przyklejonym.

• Szerokość: 95%

Usuń dopełnienie wierszy w stanie lepkim

Usuwamy również lepką górną i dolną wyściółkę naszego rzędu.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Zmień kolor tekstu menu w stanie przyklejonym

Następnie zmienimy kolor tekstu menu w stanie lepkim.

• Kolor tekstu menu: #ffbd68

Zmień kolory ikon menu w stanie lepkim

Wraz z kolorami ikon.

• Kolor ikony koszyka na zakupy: #ffffff
• Kolor ikony wyszukiwania: #ffffff
• Kolor ikony menu Hamburger: #ffffff

Usuń wysokość logo w stanie przyklejonym

I wreszcie, w stanie przyklejenia zmienimy maksymalną wysokość logo na zero. Spowoduje to całkowite usunięcie logo z naszego nagłówka po włączeniu przyklejonych ustawień sekcji. Otóż ​​to! Upewnij się, że zapisałeś wszystkie zmiany Divi Theme Builder po ukończeniu projektu nagłówka i wyświetl jego podgląd w swojej witrynie.

• Maksymalna wysokość logo: 0px

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak utworzyć przyklejony nagłówek za pomocą Kreatora motywów Divi i opcji przyklejania. Gdy tylko sekcja zawierająca nasze menu stanie się przyklejona, zastosujemy również niestandardowe style. Te opcje są możliwe dzięki nowym lepkim opcjom Divi, które zapewniają niezliczone możliwości poprawy doświadczenia użytkownika i tworzonego projektu. Udało się również bezpłatnie pobrać globalny szablon nagłówka! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.