potrzeba stworzyć przejrzyste, pływające menu w Divi ?
Szukasz sposobu na umieszczenie ogólnego nagłówka nad głównymi sekcjami stron? W samouczku Divi Dzisiaj pokażemy dokładnie, jak to zrobić.
Stworzymy oszałamiający globalny nagłówek od podstaw (używając konstruktora motywy de Divi) i zastosujemy efekt pływający do paska menu.
Chodźmy.
badanie
Zanim zagłębimy się w ten samouczek, rzućmy okiem na rezultat, jaki chcemy osiągnąć.
Przejdź do kreatora motywów Divi i dodaj nowy szablon
allez w Divi > Kreator motywów.
Utwórz globalny nagłówek z Divi Theme Builder
Kliknij „Dodaj globalny nagłówek” i kontynuuj, wybierając „Zbuduj globalny nagłówek”.
Ustawienia sekcji
Kolor tła
W edytorze szablonów zauważysz sekcję na stronie. Otwórz tę sekcję i zmień kolor tła na całkowicie przezroczysty. Pozwoli to na pokazanie wszystkiego poniżej sekcji.
- Tło: rgba(0,0,0,0)
zaklejania
Następnie przejdź do zakładki Styl przekroju i zmień maksymalną szerokość.
- Maksymalna szerokość (patrz zrzut ekranu): 100%
rozstaw
Usuń również wszystkie domyślne marginesy wewnętrzne górny i dolny.
- Wierzchołek marginesu wewnętrznego: 0px
- Dolny margines wewnętrzny: 0px
Indeks Z
I żeby mieć pewność, że sekcja będzie na wierzchu treść W sekcji bohatera będziemy musieli zwiększyć indeks Z w ustawieniach widoczności.
- Indeks Z: 99999
Dodaj nową linię
Struktura kolumny
Po zakończeniu ustawień sekcji możesz dodać nowy wiersz, korzystając z następującej struktury kolumn:
zaklejania
Bez dodawania żadnych modułów otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:
- Zharmonizuj wysokości kolumn: Tak
- Maksymalna szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Następnie dodaj niestandardowe marginesy wewnętrzne (górny i dolny).
- Szczytowy margines wewnętrzny: 2vw
- Dolny margines wewnętrzny: 0vw
Główny element
Następnie przejdź do zakładki Zaawansowane i upewnij się, że kolumny pozostają obok siebie na mniejszych ekranach, dodając pojedynczą linię kodu CSS do głównego elementu wiersza.
display: flex;
Kolumna 2
Kolor tła
Kontynuuj, otwierając ustawienia kolumny 2 i zmieniając kolor tła na półprzezroczysty.
- Kolor tła: rgba (255,255,255,0.71)
Granica
Dodaj również dolną granicę do kolumny.
- Szerokość dolnego obramowania: 2px
- Kolor przycisku i dolnej krawędzi: #f4583f
Pole cienia
I stwórz unoszący się efekt, dodając subtelny cień pudełkowy.
- Pudełko Cienia: [Zobacz Przechwytywanie]
- Pozycja wyjściowa: 20px
- Siła rozmycia łuku cienia: 50px
- Siła rozprzestrzeniania się cieni w pudełku: -20px
- Kolor czcionki napisów: rgba(0,0,0,0.23)
Dodaj moduł obrazu do kolumny 1
Pobierz logo
Po zakończeniu ustawiania wierszy i kolumn nadszedł czas, aby dodać moduły, zaczynając od modułu obrazu w kolumnie 1. Prześlij logo z przezroczystym tłem.
wyrównanie
Przejdź do karty Styl modułu i zmień wyrównanie.
- Wyrównanie obrazu: wyśrodkowane
zaklejania
Zmień również szerokość modułu w ustawieniach rozmiaru.
- Maksymalna szerokość: 8 vw (komputer), 14 vw (tablet), 21 vw (telefon)
Dodaj moduł menu do kolumny 2
Wybierz menu
Przejdźmy do następnej kolumny. Tam jedynym modułem, którego potrzebujemy, jest moduł Menu. Wybierz wybrane menu.
Usuń kolor tła
Następnie przejdź do ustawień tła i usuń kolor tła.
Usposobienie
Przejdź do karty Styl modułu i edytuj układ.
- Styl: wyśrodkowany
- Rozwijane menu: w dół
Tekst menu
Stylizuj także ustawienia tekstu menu.
- Czcionka menu: Mulish
- Kolor tekstu menu: #6f6666
- Menu rozmiaru tekstu: 1vw (komputer), 2vw (tablet), 3vw (telefon)
Rozwijane menu
Następnie zmień ustawienia z menu rozwijanego.
- Kolor wiersza rozwijanego: #f4583f
ikony
Użyj tego samego koloru dla koloru ikony menu hamburgera w ustawieniach ikony.
- Kolor ikony menu hamburgerów: #f4583f
rozstaw
Uzupełnij ustawienia modułu, dodając dopełnienie górne i dolne w ustawieniach odstępów.
- Szczytowy margines wewnętrzny: 1,5 vw
- Dolny margines wewnętrzny: 1,5 vw
Dodaj moduł przycisku do kolumny 3
Dodaj tekst do przycisku
Przejdźmy do następnej i ostatniej kolumny. Dodaj moduł przycisku z wybranym tekstem.
wyrównanie
Następnie zmień wyrównanie modułu.
- Wyrównanie przycisków: wyśrodkowane
Ustawienia przycisków
Kontynuuj, odpowiednio dostosowując przycisk:
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 0,9 vw (komputer), 1,5 vw (tablet), 2,5 vw (telefon)
- Kolor tekstu przycisku: #ffffff
- Przycisk tła: #f4583f
- Szerokość obramowania przycisku: 0 pikseli
- Kolor obramowania przycisku: #f4583f
- Przycisk promienia obramowania: 0 pikseli
- Czcionka przycisku: Mulish
- Przycisk przyciemniania światła: pogrubiony tekst
rozstaw
Uzupełnij ustawienia modułu, dodając niestandardowe wypełnienie na różnych rozmiarach ekranu.
- Górny i dolny margines wewnętrzny: 1vw (komputer), 2vw (tablet), 3vw (telefon)
- Margines wewnętrzny lewy i prawy: 2vw (komputer stacjonarny), 3vw (tablet), 4vw (telefon)
Dodatkowe parametry sekcji
Domyślny główny element
Po zakończeniu ogólnego dostosowywania pozostaje jeszcze jedna rzecz do zrobienia; umieść sekcję powyżej treść Twojej strony. W tym celu będziemy musieli dodać dwie linie kodu CSS do głównego elementu sekcji.
position: absolute;
top: 0;
Główny element po najechaniu
Pamiętaj, aby dodać te same wiersze kodu CSS do opcji najechania elementu głównego. Zapobiegnie to migotaniu sekcji po najechaniu na nią.
position: absolute;
top: 0;
Zapisz zmiany konstruktora i zobacz wynik
Po zakończeniu sekcji możesz zapisać globalny nagłówek i wyświetlić wynik na swojej stronie!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni wynikowi.
Pobierz DIVI teraz !!!
Wnioski
Więc ! To tyle w tym artykule. Pokazaliśmy, jak stworzyć pływający i przejrzysty pasek menu za pomocą Theme Buildera Divi. Nagłówek jest umieszczony nad pierwszą sekcją strony lub posta.
Aby zapoznać się z Divi's Theme Builder, możesz również przeczytać nasz artykuł na Jak utworzyć globalny nagłówek za pomocą kreatora motywów Divi
Możesz również skonsultować 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 w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
