Czy chciałbyś stworzyć ładny przezroczysty i lepki nagłówek za pomocą Divi?
Jeśli chodzi o konfigurowanie globalnego nagłówka dla twojego Witryna internetowa, istnieje wiele sposobów podejścia do tego. Jednym z bardziej subtelnych podejść jest przezroczysty nagłówek.
Jeśli zdecydujesz się na przezroczysty nagłówek, ale chcesz, aby był lepki podczas przewijania, pokochasz ten samouczek. Przejście od przezroczystego do lepkiego jest łatwe!
Chodźmy.
badanie
Zanim zagłębimy się w samouczek, rzućmy okiem na wynik.
Utwórz nowy globalny szablon nagłówka
Przejdź do Divi > Kreator motywów.
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 artykułu. Otwórz ustawienia sekcji i dodaj czarny kolor tła.
- Tło: #000000
rozstaw
Przejdź do karty Styl przekroju i domyślnie usuń wszystkie marginesy wewnętrzne (górny i dolny).
- Wierzchołek marginesu wewnętrznego: 0px
- Dolny margines wewnętrzny: 0px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:
Dodaj moduł tekstowy do kolumny
Dodaj moduł Tekst do kolumny wiersza i wprowadź wybraną wiadomość.
Ustawienia tekstu
Przejdź do zakładki Styl modułu i odpowiednio zmień ustawienia tekstu:
- Czcionka tekstu: Oswald
- Styl kopiowania tekstu: TT
- Kolor tekstu Tekst: #ffffff
- Tekst Rozmiar tekstu:
- Pulpit: 19px
- Tablet: 18px
- Telefon: 16px
- Wyrównanie tekstu: wyśrodkowane
Dodaj sekcję # 2
rozstaw
Tuż pod pierwszą sekcją dodaj kolejną zwykłą sekcję. Ta sekcja będzie poświęcona naszemu przejrzystemu menu, które będzie się przyklejać podczas przewijania.
Otwórz ustawienia sekcji i domyślnie usuń wszystkie wewnętrzne marginesy (Górny i Dolny) na karcie Styl.
- Wierzchołek marginesu wewnętrznego: 0px
- Dolny margines wewnętrzny: 0px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:
Przezroczysty kolor tła
Otwórz ustawienia linii i zastosuj całkowicie przezroczysty kolor tła do linii.
- Tło: rgba (255,255,255,0)
zaklejania
Przejdź do zakładki Styl linii i zmień ustawienia rozmiaru.
- Użyj niestandardowej szerokości rynny: Tak
- Rozstaw kolumn: 1
- Maksymalna szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Następnie dodaj niestandardowe marginesy wewnętrzne (lewy i prawy).
- Lewy margines wewnętrzny: 10%
- Margines wewnętrzny Prawy: 10%
Pole cienia
Następnie nałóż przezroczysty cień do 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 czcionki napisów: rgba (0,0,0,0)
Pozycja
Aby mieć pewność, że linia pojawi się na górze pliku treść strony, z przezroczystym tłem, zastosujemy pozycję bezwzględną dla naszego wiersza w zakładce zaawansowane.
- Pozycja: bezwzględna
- Lokalizacja: u góry po lewej
Kolumna 2 Widoczność
Ukrywamy również 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.
Pobierz logo
Następnie prześlij logo.
Usuń kolor tła
Usuń również kolor tła z modułu.
Ustawienia tekstu menu
Przejdź do zakładki Styl modułu i odpowiednio zmień ustawienia tekstu menu:
- Menu czcionek: Oswald
- Menu miękkiego światła: pogrubienie
- Menu stylu kopiowania: TT
- Kolor tekstu menu: #efefef
- Rozmiar tekstu menu: 18px
- Wyrównanie tekstu: do prawej
Ustawienia menu rozwijanego
Zmień także ustawienia menu rozwijanego.
- Kolor wiersza rozwijanego: rgba(0,0,0,0)
- Menu mobilne Kolor tła: rgba (0,0,0,0,95)
Ustawienia ikon
Następnie zmień kolory ikon w ustawieniach ikon.
- Kolor ikony koszyka: #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%
zaklejania
Następnie do naszego logo przypiszemy maksymalną wysokość.
- Logo Maksymalna szerokość: 40 pikseli
rozstaw
Następnie dodamy wyściółkę górną i dolną na małych ekranach.
- Szczytowy margines wewnętrzny:
- Tablet i telefon: 10px
- Dolny margines wewnętrzny:
- Tablet i telefon: 10px
Dodaj moduł przycisku do kolumny 2
Dodaj tekst do przycisku
W kolumnie 2 jedynym modułem, którego potrzebujemy, jest moduł Button. Dodaj wybrany przez siebie tekst.
Wyrównanie przycisków
Przejdź do zakładki Module Style i zmień wyrównanie przycisków.
- Wyrównanie przycisków: w prawo
Ustawienia przycisków
Dostosuj przycisk dalej.
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 16px
- Kolor tekstu przycisku: #ffffff
- Przycisk tła: #ed4441
- Kolor obramowania przycisku: #ed4441
- Przycisk promienia obramowania: 0 pikseli
- Odstępy między przyciskami: 4px
- Czcionka przycisku: Oswald
- Przycisk miękkiego światła: pogrubiony tekst
- Przycisk kopiowania stylu: TT
- Pokaż ikonę przycisku: Tak
- Kolor ikony przycisku: #1a1a1a
rozstaw
I uzupełnij parametry modułu, dodając niestandardowe wartości odstępów.
- Górny margines: -70px
- Margines wewnętrzny górny i dolny: 25 px
Zastosuj niestandardowe efekty przyklejania
Spraw, aby sekcja 2 była przyklejona
Teraz, gdy położyliśmy już podwaliny pod nasz nagłówek, nadszedł czas na zastosowanie efektu lepkiego! Aby to zrobić, zacznij od otwarcia ustawień w drugiej sekcji i zastosuj następujące lepkie ustawienia do zakładki Zaawansowane:
- Lepka pozycja: trzymaj się u góry
- Górne przesunięcie drążka: 0px
- Mimit przyklejony na dole: Brak
- Przesunięcie od otaczających lepkich elementów: TAK
- Domyślne i trwałe style przejścia: TAK
Przyklej kolor tła linii
Teraz, gdy opcja przyklejania jest włączona, możemy wprowadzić zmiany opcji przyklejania do wszystkich elementów w sekcji. Zaczniemy od otwarcia wiersza zawierającego nasze menu i zastosowania białego koloru tła do opcji przyklejania.
- Kolor tła: #FFFFFF
Lepkie odstępy między wierszami
Następnie zmodyfikujemy wartości odstępów funkcji lepkości linii.
- Wierzchołek marginesu wewnętrznego: 0px
- Dolny margines wewnętrzny: 0px
Pudełko z lepkim wierszem
Zmieniamy również kolor cienia pudełka w stanie lepkim.
- Kolor czcionki napisów: rgba (0,0,0,0.08)
Pozycjonowanie lepkiej linii
Następnie przywrócimy pozycjonowanie wiersza do względnego w stanie przyklejonym.
- Pozycja: Względny
- Początek przesunięcia: górny lewy
Ustawienia tekstu w menu stanu przyklejonego
Następnie zmienimy kolor tekstu menu na stan przyklejony.
- Kolor tekstu menu: #000000
Ustawienia menu rozwijanego w stanie przyklejonym
Z kolorem tła menu mobilnego w ustawieniach menu rozwijanego.
- Menu mobilne, kolor tła: #ffffff
Kolory ikon menu w stanie lepkim
Zmieniaj również kolory ikon w stanie lepkim.
- Kolor ikony koszyka: #000000
- Kolor ikony wyszukiwania: #000000
- Kolor ikony menu hamburgerów: #000000
Filtr logo w stanie lepkim
Następnie usuń filtr odwrócony z obrazu logo w stanie lepkim.
- Odwrócenie obrazu: 0%
Rozstaw przycisków w stanie lepkim
I ukończ samouczek, usuwając ujemny górny margines z przycisku, gdy jest on w stanie przyklejenia.
- Górny margines: 0px
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni efektowi końcowemu.
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak połączyć konstruktora motywy Divi z nowymi opcjami lepkimi. W szczególności pokazaliśmy, jak przełączyć się z przezroczystego nagłówka na lepki nagłówek innego stylu podczas przewijania.
Takie podejście pozwala na scalenie projektu strony z menu, przy jednoczesnym zachowaniu ładnego, lepkiego nagłówka podczas przewijania.
Jeśli chcesz dowiedzieć się więcej o Divi, nie wahaj się zajrzeć do naszego katalogu Samouczki Divi. Możesz również skonsultować Jak stworzyć stronę Blog z modułem Divi Blog
Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale tymczasem, udostępnij ten artykuł w różnych sieciach społecznościowych.
...
