Jak ukryć nagłówek przed przewijaniem za pomocą lepkich opcji Divi

Sekcja bohatera przyciąga wzrok w Twojej witrynie. Zwykle nadaje ton reszcie witryny i pokazuje odwiedzającym, czego mogą się spodziewać. Dlatego pomocne może być skupienie się na kilku elementach, które udostępniasz w sekcji bohaterów, takich jak kopia i wezwanie do działania. Ale tylko dlatego, że chcesz wyróżnić sekcję bohatera, nie oznacza to, że nie potrzebujesz też paska nawigacyjnego. Jeśli szukasz przyjaznego dla użytkownika sposobu na ujawnienie nagłówka, gdy ludzie zaczną przewijać, pokochasz ten post. Dzisiaj pokazujemy, jak ukryć nagłówek przed przewijaniem za pomocą wbudowanych opcji przyklejonych Divi. Osiągany przez nas efekt jest w pełni responsywny i świetnie wygląda na wszystkich rozmiarach ekranu. Będziesz mógł również bezpłatnie pobrać szablonowy 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 nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym szablonie 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!

Podczas przesyłania szablonu do Divi Theme Builder i wprowadzania szablonu zauważysz, że sekcja nie jest widoczna. To dlatego, że efekt jest już na nim zastosowany. Aby zmodyfikować różne elementy, możesz albo przełączyć się na tryb szkieletowy i uzyskać dostęp do znajdujących się tam elementów, albo tymczasowo usunąć ustawienia sekcji transformacji, tłumaczenia i głównego elementu i umieścić je z powrotem, gdy skończysz modyfikować projekt nagłówka.

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.

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #001b34

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:

Kolor tła

Bez dodawania modułów otwórz ustawienia wiersza i zastosuj wybrany kolor tła.

• Kolor tła: #001b34

Rozmiary

Przejdź do karty projektu wiersza i odpowiednio zmień ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Kontynuuj, odpowiednio zmieniając wartości dopełnienia:

• Górna wyściółka: 0px
• Dolna wyściółka: 0
• Lewa wyściółka:
  • Pulpit: /
  • Tablet i telefon: 5%
• Prawa wyściółka:
  • Pulpit: /
  • Tablet i telefon: 5%

Ustawienia kolumny 1

Kolor tła

Gdy skończysz z ogólnymi ustawieniami wiersza, otwórz ustawienia kolumny 1 i zastosuj kolor tła.

• Kolor tła: #f4d5b8

Dodaj moduł menu do kolumny 1

Wybierz menu

Czas dodać moduły, zaczynając od modułu menu w kolumnie 1. Wybierz żądane menu.

Prześlij logo

Następnie prześlij logo.

Kolor tła

Następnie zmień kolor tła.

• Kolor tła: #063765

Zdjęcie w tle

I prześlij wybrany przez siebie ilustracyjny obraz tła. Możesz znaleźć i wykorzystać ten poniżej, pobierając freebie na początku tego postu.

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: środek

Ustawienia tekstu menu

Przejdź do zakładki projektu modułu i zmień rozmiar tekstu menu.

• Rozmiar tekstu menu: 18px

Rozwijane ustawienia menu

Następnie zmień odpowiednio ustawienia menu rozwijanego:

• Kolor linii menu rozwijanego: rgba(0,0,0,0)
• Kolor tła menu mobilnego: #ddc1a7
• Kolor tekstu menu mobilnego: #063765

Ustawienia ikon

Zmień również kolory ikon w ustawieniach ikon na biały.

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

Rozmiary

Następnie zmodyfikuj maksymalną szerokość logo w ustawieniach rozmiaru.

• Maksymalna szerokość logo: 70px

Rozstaw

Następnie zastosuj niestandardowe wartości dopełnienia.

• Górna wyściółka: 1%
• Dolna wyściółka: 1%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Cień Pudełka

Wraz z niestandardowym cieniem.

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

Przekształć Tłumacz

I uzupełnij ustawienia modułu, modyfikując ustawienia tłumaczenia transformacji w następujący sposób:

• Dobrze:
  • Pulpit: 20px
  • Tablet i telefon: 0px

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 i zmień wyrównanie przycisków.

• Wyrównanie przycisków: w prawo

Ustawienia przycisków

Następnie dostosuj odpowiednio styl przycisku:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku: #2a2a2a
• Kolor tła przycisku: #ffffff
• Szerokość obramowania przycisku: 0px
• Kolor obramowania przycisku: rgba (0,0,0,0)

• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery

Rozstaw

Nadaj kształt swojemu przyciskowi również za pomocą niestandardowego dopełnienia.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 40px
• Prawe wypełnienie: 40px

Cień Pudełka

Następnie nałóż cień pudełkowy.

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

Przekształć Tłumacz

I uzupełnij ustawienia modułu, modyfikując odpowiednio wartości translacji transformacji:

• Dobrze:
  • Pulpit: 50px
  • Tablet i telefon: 0px

2. Zastosuj niestandardowe lepkie efekty, aby osiągnąć ukrycie przed efektem przewijania

Ustaw wiersz bezwzględnie pozycjonowany

Teraz, gdy ustaliliśmy podstawy naszego nagłówka, możemy zastosować ukryj nagłówek przed efektem przewijania. Możesz zastosować ten efekt do dowolnego tworzonego nagłówka, o ile wykonasz poniższe czynności. Pierwszym krokiem jest otwarcie ustawień wiersza i ustawienie absolutnego wiersza. Pomoże nam to zapobiec zajmowaniu miejsca przez nagłówek u góry naszej strony.

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

Uczyń sekcję lepką

Następnie otworzymy ustawienia sekcji i pozwolimy im trzymać się u góry.

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

Animacja sekcji

Dodamy też animację do naszej sekcji. Ta animacja pomoże zapobiec wyświetlaniu nagłówka podczas wczytywania strony.

• Styl animacji: zanikanie

Czas trwania przejścia sekcji

Możesz sam zdecydować, jak wolno lub szybko nagłówek przesuwa się w dół po rozpoczęciu przewijania, modyfikując czas trwania przejścia na karcie Zaawansowane sekcji. Im dłuższy czas trwania, tym wolniej nagłówek przesuwa się w dół.

• Czas trwania przejścia: 800ms

Przekształcenie sekcji Tłumacz

Teraz, w stanie domyślnym, nie chcemy, aby nagłówek był widoczny. Pierwszym krokiem do osiągnięcia tego jest przejście do ustawień transformacji sekcji i użycie ujemnej wartości dla osi Y.

• Po prawej: -300px

Przywrócimy tę wartość z powrotem do zera w stanie lepkim. Oznacza to, że jak tylko zaczniesz przewijać, nagłówek znów będzie widoczny.

• Przyklejony w prawo: 0px

Właściwość CSS widoczności sekcji

Kolejny i ostatni krok tego samouczka nie jest teoretycznie potrzebny do uzyskania efektu, ale dobrą praktyką jest ukrywanie elementów, które nie są używane. Dlatego przejdziemy do zakładki zaawansowanej sekcji i dodamy następujący wiersz kodu CSS w polu głównego elementu:

• Główny element:

  visibility: hidden

Zmienimy naszą zawartość z powrotem na widoczną w stanie przyklejonym. Otóż ​​to!

• Przyklejony główny element:

  visibility: visible;

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 Ci, jak upewnić się, że sekcja bohaterów jest w centrum uwagi Twojej strony, gdy tylko ludzie wejdą na Twoją stronę. Dokładniej, pokazaliśmy, jak ukryć nagłówek przed przewijaniem. Dzięki temu odwiedzający mogą najpierw przetworzyć informacje o sekcji bohaterów, zanim otrzymają możliwość nawigacji. 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.