Jak sprawić, by przezroczysty nagłówek był przyklejony podczas przewijania za pomocą Divi

Jeśli chodzi o skonfigurowanie globalnego nagłówka dla Twojej witryny, istnieje wiele sposobów na podejście do tego. Jednym z bardziej subtelnych podejść jest przezroczysty nagłówek. Przezroczyste nagłówki są umieszczane na górze sekcji bohaterów stron, co może prowadzić do pięknych projektów, które skupiają się na minimalistycznym, ale przejrzystym podejściu. Jeśli zdecydujesz się na przezroczysty nagłówek, ale potrzebujesz lepkiego nagłówka podczas przewijania, pokochasz ten samouczek. Korzystając z wbudowanych opcji przyklejania Divi, pokażemy Ci, jak przejść od przezroczystego nagłówka do inaczej stylizowanego nagłówka samoprzylepnego podczas przewijania. Przejście od przezroczystego do lepkiego jest łatwe! Będziesz mógł również bezpłatnie pobrać plik JSON.

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

Zacznij od przejścia do Divi Theme Builder. Tam zacznij budować nowy globalny lub niestandardowy nagłówek.

Sekcja #1 Ustawienia

Kolor tła

W edytorze szablonów zauważysz sekcję. Ta sekcja będzie poświęcona górnemu paskowi nagłówka, który możesz zauważyć w podglądzie tego posta. Otwórz ustawienia sekcji i dodaj czarny kolor tła.

• Kolor tła: #000000

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, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Dodaj moduł tekstowy do kolumny wiersza i wprowadź wybraną kopię.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Oswald
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #ffffff
• Rozmiar czcionki:
  • Pulpit: 19px
  • Tablet: 18px
  • Telefon: 16px
• Wyrównanie tekstu: do środka

Dodaj sekcję #2

Rozstaw

Tuż pod pierwszą sekcją dodaj kolejną zwykłą sekcję. Ta sekcja będzie poświęcona naszemu przejrzystemu menu, które zostanie przyklejone podczas przewijania. Otwórz ustawienia sekcji i usuń wszystkie domyślne górne i dolne wyściółki na karcie projektu.

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

Dodaj nowy wiersz

Struktura kolumny

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

Przezroczysty kolor tła

Otwórz ustawienia wiersza i zastosuj całkowicie przezroczysty kolor tła do wiersza.

• Kolor tła: rgba (255,255,255,0)

Rozmiary

Przejdź do karty projektu wiersza i zmodyfikuj ustawienia rozmiaru.

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

Rozstaw

Następnie dodaj niestandardowe wyściółki lewe i prawe.

• Lewa wyściółka: 10%
• Prawa wyściółka: 10%

Cień Pudełka

Następnie nałóż przezroczysty cień w kształcie pudełka. W dalszej części samouczka użyjemy tego cienia pudełkowego w stanie lepkim z innym kolorem cienia.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0)

Pozycja

Aby upewnić się, że wiersz pojawia się nad zawartością strony, z przezroczystym tłem, użyjemy dla naszego wiersza pozycji bezwzględnej na karcie Zaawansowane.

• Pozycja: bezwzględna
• Lokalizacja: górny lewy

Kolumna 2 Widoczność

Ukrywamy też drugą kolumnę naszego wiersza na tablecie i telefonie, aby mieć mniej skomplikowany projekt nagłówka na mniejszych ekranach.

Dodaj moduł menu do kolumny 1

Wybierz menu

Teraz, gdy nasze ustawienia wierszy są gotowe, nadszedł czas, aby dodać moduły, zaczynając od modułu menu w kolumnie 1. Wybierz wybrane menu.

Prześlij logo

Następnie prześlij logo.

Usuń kolor tła

Usuń też kolor tła modułu.

Ustawienia tekstu menu

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu menu:

• Czcionka menu: Oswald
• Grubość czcionki menu: pogrubiona
• Styl czcionki menu: wielkie litery
• Kolor tekstu menu: #efefef
• Rozmiar tekstu menu: 18px
• Wyrównanie tekstu: do prawej

Rozwijane ustawienia menu

Zmień także ustawienia menu rozwijanego.

• Kolor linii menu rozwijanego: rgba(0,0,0,0)
• Kolor tła menu mobilnego: rgba (0,0,0,0.95)

Ustawienia ikon

Następnie zmień kolory ikon w ustawieniach ikon.

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

Ustawienia logo

Zmieniamy również kolor naszego logo w ustawieniach logo, zmieniając filtr odwrócenia obrazu.

• Odwrócenie obrazu: 90%

Rozmiary

Następnie przypiszemy do naszego logo maksymalną wysokość.

• Maksymalna wysokość logo: 40px

Rozstaw

Następnie dodamy górną i dolną wyściółkę na mniejszych ekranach.

• Górna wyściółka:
  • Tablet i telefon: 10 pikseli
• Dolna wyściółka:
  • Tablet i telefon: 10 pikseli

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

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

Wyrównanie przycisków

Przejdź do zakładki projektu modułu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: w prawo

Ustawienia przycisków

Nadaj styl przyciskowi dalej.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #ed4441
• Kolor obramowania przycisku: #ed4441

• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 4px
• Czcionka przycisku: Oswald
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery
• Pokaż ikonę przycisku: Tak
• Kolor ikony przycisku: #1a1a1a

Rozstaw

I uzupełnij ustawienia modułu, dodając kilka niestandardowych wartości odstępów.

• Górny margines: -70px
• Górna wyściółka: 25px
• Dolna wyściółka: 25px

2. Zastosuj niestandardowe lepkie efekty

Obróć Sekcja #2 Przyklejony

Teraz, gdy ustaliliśmy podstawy naszego nagłówka, nadszedł czas na zastosowanie efektu lepkości! Aby to zrobić, zacznij od otwarcia ustawień drugiej sekcji i zastosuj następujące lepkie ustawienia do zakładki Zaawansowane:

• 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

Kolor tła lepkiego rzędu

Teraz, gdy opcja przyklejenia jest włączona, możemy wprowadzać przyklejone zmiany projektowe do wszystkich elementów wewnątrz sekcji. Zaczniemy od otwarcia wiersza zawierającego nasze menu i zastosowania białego lepkiego koloru tła.

• Kolor tła: #FFFFFF

Lepkie odstępy między wierszami

Następnie zmodyfikujemy wartości lepkich odstępów wierszy.

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

Przyklejony cień pola wiersza

Zmieniamy też kolor cienia pudełka w stanie lepkim.

• Kolor cienia: rgba (0,0,0,0,08)

Pozycjonowanie lepkiego rzędu

Następnie przywrócimy pozycjonowanie wiersza do względnego w stanie przyklejonym.

• Pozycja: Względny
• Początek przesunięcia: górny lewy

Ustawienia tekstu przyklejonego menu

Następnie zmienimy kolor tekstu przyklejonego menu.

• Kolor tekstu menu: #000000

Ustawienia rozwijanego menu przyklejonego

Wraz z kolorem tła menu mobilnego w ustawieniach menu rozwijanego.

• Kolor tła menu mobilnego: #ffffff

Przyklejone kolory ikon menu

Zmień kolory ikon również w stanie lepkim.

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

Filtr przyklejonego logo

Następnie usuń filtr odwracania obrazu logo w stanie lepkim.

• Odwrócenie obrazu: 0%

Odstępy przyklejonych przycisków

I ukończ samouczek, usuwając ujemny górny margines przycisku, gdy jest przyklejony.

• Górny margines: 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 połączyć Theme Builder Divi z nowymi opcjami przyklejonymi. Mówiąc dokładniej, pokazaliśmy, jak przejść od przezroczystego nagłówka do przyklejonego nagłówka o innym stylu podczas przewijania. Takie podejście umożliwia scalenie projektu strony z menu, przy jednoczesnym zachowaniu pięknego, lepkiego nagłówka podczas przewijania. Udało Ci się również pobrać plik JSON za darmo! 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.