Jak dodać efekty filtrów tła CSS do lepkiego nagłówka w Divi?

Opublikowany: 2021-07-21

Dodanie efektów filtrowania tła CSS to zabawny i unikalny sposób na ulepszenie projektu lepkiego menu nagłówka. To, co sprawia, że ​​właściwość CSS backdrop-filter jest tak wyjątkowa, to fakt, że pozwala ona na zastosowanie efektów filtrów do obszaru za elementem. Jest to idealna opcja dla przyklejonych nagłówków, ponieważ projekt strony można magicznie zmienić za nagłówkiem podczas przewijania strony. Być może widziałeś ten efekt w popularnych witrynach, takich jak apple.com.

W tym samouczku pokażemy, jak dodać efekty filtrowania tła CSS do przyklejonego nagłówka w Divi. Najpierw wyjaśnimy prosty proces dodawania efektów filtra tła do istniejącego nagłówka, który obejmuje 3 proste kroki. Następnie opiszemy, jak zbudować cały nagłówek od zera.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Zwróć uwagę na efekty filtrów rozmycia i nasycenia zastosowane do elementów za nagłówkiem podczas przewijania.

Aby uzyskać proste demo na żywo tego efektu filtra tła dodanego do nagłówka, sprawdź ten koder.

Pobierz szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na projektach z tego samouczka, 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

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.

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!

Jak przesłać szablon

Przejdź do kreatora motywów Divi

Aby przesłać szablon, przejdź do Divi Theme Builder na zapleczu swojej witryny WordPress.

szablon nagłówka i stopki dla pakietu Divi's Bushcraft Layout Pack

Prześlij globalny domyślny szablon strony internetowej

Następnie w prawym górnym rogu zobaczysz ikonę z dwiema strzałkami. Kliknij ikonę.

szablon nagłówka i stopki dla pakietu Divi's Bushcraft Layout Pack

Przejdź do zakładki importu, prześlij plik JSON, który udało Ci się pobrać w tym poście, i kliknij „Importuj szablony Divi Theme Builder”.

szablon nagłówka i stopki dla pakietu Divi's Bushcraft Layout Pack

Zapisz zmiany w kreatorze motywów Divi

Po przesłaniu pliku zauważysz nowy globalny nagłówek i stopkę w domyślnym szablonie witryny. Zapisz zmiany Divi Theme Builder, gdy tylko chcesz, aby szablon został aktywowany.

szablon nagłówka i stopki dla pakietu Divi's Bushcraft Layout Pack

Przejdźmy do samouczka, dobrze?

Dodawanie efektów filtrów tła CSS do istniejącego nagłówka

Najprostszym sposobem zademonstrowania tego procesu jest dodanie efektów filtrowania tła CSS do istniejącego nagłówka w Divi. Tak naprawdę sprowadza się to do tych trzech prostych kroków:

  1. Dodaj półprzezroczysty kolor tła do sekcji nagłówka
  2. Dodaj niestandardowy CSS z filtrem tła do sekcji nagłówka
  3. Dodaj lepką pozycję do sekcji nagłówka

Oto jak to zrobić w Divi.

Edytuj nagłówek w Theme Builderze

Przejdź do Theme Buildera i kliknij, aby edytować istniejący szablon nagłówka.

Dodaj półprzezroczysty kolor tła do sekcji

Otwórz ustawienia w sekcji zawierającej elementy menu nagłówka. Następnie dodaj do sekcji półprzezroczysty kolor tła. W tym przykładzie nadajemy sekcji następujący kolor tła:

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

Dodaj niestandardowy CSS filtru tła

Następnie możemy dodać efekty backdrop-filter (za pomocą właściwości CSS backdrop-filter) z fragmentem niestandardowego CSS w elemencie głównym sekcji. W zakładce Zaawansowane wklej następujący kod CSS do elementu głównego: 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Te efekty filtrów są podobne do efektów filtrów wbudowanych we wszystkie elementy Divi. Główną różnicą jest to, że filtr tła dodaje efekt do elementu (elementów) za nim, podczas gdy wbudowane efekty filtrów Divi dodają efekt do samego elementu.

Tutaj używamy 2 efektów filtra (nasycenia i rozmycia), które zastosują efekt filtra do dowolnych elementów projektu za sekcją.

Zachęcamy do odkrywania dodawania innych wartości funkcji filtra (lub ich kombinacji), aby stworzyć swój własny, niepowtarzalny projekt. Najbardziej przydatne z nich to:

  • plama()
  • jasność()
  • kontrast()
  • skala szarości()
  • odcień-obróć()
  • odwracać()
  • sepia()
  • nasycić()

Dodaj lepką pozycję do nagłówka

Na koniec upewnij się, że sekcja nagłówka ma lepką pozycję.

Ostateczny wynik

Oto spojrzenie na końcowy wynik na aktywnej stronie. Zwróć uwagę na efekty filtrów rozmycia i nasycenia zastosowane do elementów za nagłówkiem podczas przewijania.

Tworzenie nagłówka z efektami filtrów tła CSS od podstaw

Jeśli chcesz zbudować cały nagłówek z efektami filtrowania tła CSS od podstaw, oto jak to zrobić.

Zbuduj globalny nagłówek w Theme Builderze

Przejdź do Theme Buildera i kliknij, aby zbudować nowy globalny nagłówek.

Tworzenie przyklejonej sekcji z efektami filtrów tła CSS

Zacznijmy od utworzenia lepkiej sekcji z efektami filtrów tła CSS, tak jak to zrobiliśmy w pierwszej części tego samouczka.

W Global Header Layout Editor dodaj do sekcji wiersz z jedną kolumną.

Otwórz ustawienia sekcji. Następnie dodaj następujący półprzezroczysty kolor tła do sekcji:

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

Zaktualizuj dopełnienie w następujący sposób:

  • Padding: 0px na górze, 0px na dole

Następnie możemy dodać efekty backdrop-filter (za pomocą właściwości CSS backdrop-filter) z fragmentem niestandardowego CSS w elemencie głównym sekcji. W zakładce Zaawansowane wklej następujący kod CSS do elementu głównego: 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Na koniec upewnij się, że sekcja nagłówka ma lepką pozycję.

  • Lepka pozycja: trzymaj się u góry

Edytuj ustawienia wiersza

Teraz, gdy sekcja jest zakończona, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

  • Szerokość rynny: 1
  • Szerokość: 95%
  • Padding: 20px góra, 20px dół

Dodaj obraz logo

Po zaktualizowaniu ustawień wiersza dodaj moduł obrazu do wiersza/kolumny, aby utworzyć logo.

Prześlij obraz logo do modułu obrazu.

Zaktualizuj ustawienia projektu obrazu w następujący sposób:

  • Szerokość: 50px
  • Margines: 0px w prawo

Utwórz menu

Następnie dodaj moduł menu pod modułem obrazu.

Na karcie treści wybierz menu i nadaj menu przezroczysty kolor tła.

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

Na karcie projekt zaktualizuj ustawienia projektu menu w następujący sposób:

  • Styl: wyrównany do lewej
  • Aktywny kolor linku: #fff
  • Czcionka menu: Montserrat
  • Grubość czcionki menu: pół pogrubiona
  • Kolor tekstu menu: #fff
  • Wyrównanie tekstu: do środka
  • Kolor tła menu rozwijanego: #333
  • Kolor linii menu rozwijanego: #fff
  • Kolor tekstu menu rozwijanego: #fff
  • Aktywny link do menu rozwijanego: #fff
  • Tło menu mobilnego: #333
  • Kolor tekstu w menu mobilnym: #fff
  • Kolor ikony koszyka na zakupy: #fff
  • Kolor ikony wyszukiwania: #fff
  • Kolor ikony menu Hamburger: #fff
  • Szerokość: 80% (komputer i tablet)

Utwórz przycisk z modułem tekstowym

Aby utworzyć mały przycisk nagłówka, użyjemy modułu tekstowego. Dodaj moduł tekstowy pod menu.

Zaktualizuj zawartość treści za pomocą pracy „Sklep”. Następnie nadaj modułowi tekstowemu biały kolor tła.

  • Tekst główny: „Sklep”
  • Kolor tła: #fff

Na karcie projekt zaktualizuj następujące elementy:

  • Czcionka tekstu: Montserrat
  • Grubość czcionki tekstu: pół pogrubiona
  • Kolor tekstu tekstu: #333
  • Wysokość linii tekstu: 2em
  • Wyrównanie tekstu: do środka
  • Szerokość: 50px
  • Zaokrąglone rogi: 5px

Tutaj moduł tekstowy ma taką samą szerokość jak obraz logo. Pomoże to w idealnym wyrównaniu elementów, gdy użyjemy właściwości flex w kolumnie z niestandardowym CSS.

Wyrównaj moduły w kolumnie za pomocą właściwości CSS Flex

Po dodaniu logo, menu i modułu tekstowego do kolumny otwórz ustawienia kolumny i wklej następujący niestandardowy kod CSS do głównego elementu: 

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

Zapisz układ i szablon nagłówka

Po zakończeniu zapisz układ i szablon.

Ostateczny wynik

Oto kolejne spojrzenie na ostateczny projekt. Zwróć uwagę na efekty filtrów rozmycia i nasycenia zastosowane do elementów za nagłówkiem podczas przewijania.

Obsługa przeglądarki

Niestety właściwość CSS backdrop-filter obecnie nie działa dobrze w IE i Firefox. Jednak alternatywą będzie półprzezroczysty kolor tła nadany sekcji, który nadal działa i świetnie wygląda.

Końcowe przemyślenia

Miejmy nadzieję, że Twój następny projekt skorzysta z nagłówka z ładnym efektem filtra tła. Naprawdę łatwo jest dodać do dowolnego nagłówka w Divi i zabawnie odkrywać wszystkie dostępne wartości funkcji filtrowania.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!