Wyprzedaż urodzinowa Elementora

Enjoy 60% Off on new purchases, renewal and upgrades.

00 Dni
:
00 godziny
:
00 Minuty
:
00 sekundy

Kup Teraz

Jak utworzyć przyklejony nagłówek za pomocą opcji Divi

Franklin Poradniki WordPress Oct 31, 2021

Większość osób korzystających z kreatora motywów Divi potwierdza jego działanie, niezależnie od tego, czy chodzi o funkcjonalność utworzonej strony internetowej, czy o możliwości dostosowywania, które są prawie nieograniczone. Tworzenie lepkich nagłówków przebiega bezproblemowo od czasu pojawienia się kreatora motywów, ale okazuje się, że wiele osób nie wie, jak je tworzyć bez użycia dodatkowego kodu. Jednak jest to dość łatwe również dzięki lepkim opcjom Divi . W rzeczywistości nie tylko jest to łatwiejsze, ale ta metoda daje więcej możliwości dostosowania projektu.

Dlatego w tym samouczku poświęcimy trochę czasu, aby pokazać, jak utworzyć ultra spersonalizowany przyklejony nagłówek za pomocą ustawień Divi. Spersonalizujemy ten nagłówek w następujący sposób:

  • Będziemy mieli górny pasek nagłówka + pasek menu
  • Sekcja zawierająca przyklejony pasek menu jest skonfigurowana w taki sposób, że po powrocie na górę pasek nagłówka pojawia się ponownie
  • Style projektowania sekcji przyklejonej (i jej elementów) zmienią się, gdy sekcja stanie się przyklejona

Wszystko to zostanie omówione wokół dwóch głównych części: pierwszej poświęconej tworzeniu struktury elementów nagłówka w nowym szablonie nagłówka , a drugiej zastosowaniu niestandardowych efektów przyklejonych .

1. Budowanie struktury elementu nagłówka w nowym szablonie nagłówka

Utwórz nowy szablon globalnego nagłówka

Pierwszym krokiem jest pobranie szablonu globalnego nagłówka i pobranie go w motywie konstruktora Divi. W Divi utworzysz nowy globalny lub niestandardowy nagłówek.

Niesamowite oferty

Elementor 6 urodziny z do 60% zniżki

Zacząć teraz

Ustaw sekcję #1

W edytorze szablonów zauważysz sekcję. W tym miejscu zaczniemy tworzyć strukturę elementów naszego nagłówka. Więc otwórz go i zacznijmy konfigurację.

Tło gradientowe

Najpierw zastosujemy tło gradientowe w następujący sposób:

  • Kolor 1: #ffba60
  • Kolor 2: #ffd6a0
  • Kierunek gradientu: 90 stopni
  • Pozycja startowa: 50%
  • Pozycja końcowa: 50%

Rozstaw

Następnie musisz usunąć wszystkie domyślne górne i dolne wyściółki.

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

Dodaj nowy wiersz

Aby utworzyć nasz górny pasek nagłówka, dodamy nowy wiersz do naszej sekcji.

Struktura kolumny

Nowy wiersz należy zdefiniować przy użyciu następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

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

Rozstaw

Na tym poziomie dodasz niestandardową górną i dolną wyściółkę.

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

Główny element CSS

Teraz dodasz jeden wiersz kodu CSS do głównego elementu wiersza na karcie Zaawansowane. Celem jest upewnienie się, że kolumny pozostają obok siebie na mniejszych ekranach.

01display: flex;

Dodaj moduł śledzenia mediów społecznościowych do kolumny 1

Możemy teraz dodawać moduły. Zacznijmy w kolumnie 1 od modułu Social Media Follow.

Dodaj wybrane sieci społecznościowe

Dodasz wybrane sieci społecznościowe wraz z odpowiadającymi im linkami.

Następnie musisz usunąć kolor tła każdej sieci społecznościowej.

Ustawienia ikon

Wróć do ogólnych ustawień modułu i zmień kolor ikony w zakładce projekt.

  • Kolor ikony: #26333a

Rozstaw

Dodaj górny margines.

  • Górny margines: 5px

Dodaj moduł przycisku do kolumny 2

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

Następnie dodajesz link .

Następnie musisz przejść do karty projektu i zmienić wyrównanie przycisku.

  • Wyrównanie przycisków: w prawo

Skonfigurujmy kilka elementów stylu dla przycisku:

  • Użyj niestandardowych stylów dla przycisku: Tak
  • Rozmiar tekstu przycisku: 14px
  • Kolor tekstu przycisku: #26333a
  • Szerokość obramowania przycisku: 2px
  • Kolor obramowania przycisku: #26333a
  • Promień obramowania przycisku: 0px
  • Odstępy między przyciskami: 4px
  • Waga czcionki przycisku: pogrubiona
  • Styl czcionki przycisku: wielkie litery
  • Pokaż przycisk: Tak

A my uzupełnimy ustawienia modułu, dodając trochę górnego i dolnego wypełnienia do ustawień odstępów.

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

Konfiguracja sekcji 1 jest teraz zakończona. Teraz dodamy do menu drugą dedykowaną sekcję, która zostanie przyklejona w drugiej części tego samouczka.

Dodaj sekcję #2

Sekcja 2 poświęcona menu zostanie dodana tuż pod poprzednią. Podobnie jak w sekcji 1, najpierw skonfigurujemy tło gradientowe .

  • Kolor 1: #ffffff
  • Kolor 2: #f7f7f7
  • Typ gradientu: liniowy
  • Kierunek gradientu: 90 stopni
  • Pozycja startowa: 25%
  • Pozycja końcowa: 25%

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

Będziemy musieli użyć następującej struktury kolumn:

Następnie przejdź do karty projektu wiersza i zmień ustawienia rozmiaru w następujący sposób:

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Maksymalna szerokość: 2580 pikseli

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Dodaj moduł menu do kolumny

Musisz dodać moduł menu do kolumny wiersza i wybrać wybrane dynamiczne menu.

Następnie prześlij logo.

Następnie możesz usunąć domyślny biały kolor tła modułu.

Przejdź do karty projektu i dostosuj również ustawienia tekstu menu.

  • Grubość czcionki menu: pogrubiona
  • Kolor tekstu menu: #002d4c
  • Rozmiar tekstu menu: 15px
  • Odstępy między literami menu: 4px
  • Wyrównanie tekstu: do prawej

Teraz wprowadź zmiany w ustawieniach menu rozwijanego.

  • Kolor tła menu rozwijanego: #ffffff
  • Kolor linii menu rozwijanego: #002d4c

Wraz z ustawieniami ikon.

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

I uzupełnij ustawienia modułu, dodając maksymalną wysokość logo do ustawień rozmiaru.

  • Maksymalna wysokość logo: 60px

A oto struktura elementów nagłówka zaprojektowana w całości w nowym szablonie nagłówka. Pozostało tylko zastosować niestandardowe efekty przyklejone.

2. Zastosowanie niestandardowych lepkich efektów

Nadszedł czas, aby zmienić naszą drugą sekcję na przyklejoną i zmienić jej styl projektowania i jej elementy na przyklejony.

Spraw, aby sekcja 2 była lepka

W tym celu musisz otworzyć ustawienia drugiej sekcji i przejść do zakładki Zaawansowane. Tam przejdź do ustawień efektów przewijania i zastosuj następujące opcje przyklejania:

  • 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

Gdy sekcja stanie się przyklejona, w naszych ustawieniach sekcji, wiersza i modułu pojawi się dodatkowa opcja: Opcja przyklejona
Klikając tę opcję, zostanie utworzony nowy alternatywny styl dla wszystkich elementów, które chcesz przykleić.

Modyfikuj tło gradientowe sekcji w stanie przyklejonym

Przejdź do ustawień tła drugiej sekcji i zastosuj następujące lepkie tło gradientowe:

  • Kolor 1: #26333a
  • Kolor 2: #1e272f

Rozciągnij rząd w stanie lepkim

Następnie otwórz wiersz zawierający moduł menu i zmodyfikuj szerokość w stanie przyklejonym.

  • Szerokość: 95%

Zmień kolor tekstu menu w stanie przyklejonym

Wystarczy skonfigurować następujące menu kolorów tekstu:

  • Kolor tekstu menu: #ffbd68

Zmień kolory ikon menu w stanie lepkim

Wraz z kolorami ikon.

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

Usuń wysokość logo w stanie przyklejonym

Musisz usunąć logo, zmniejszając jego maksymalny rozmiar do 0. Tak więc po włączeniu przyklejonych ustawień sekcji logo zostanie usunięte z naszego nagłówka.

  • Maksymalna wysokość logo: 0px

To wszystko! Upewnij się, że zapisałeś wszystkie zmiany Divi Theme Builder po ukończeniu projektu nagłówka i wyświetl jego podgląd na swojej stronie internetowej.

Zapowiedź

Teraz zobaczymy efekt naszej pracy na różnych rozmiarach ekranów.

Pulpit

mobilny

Końcowe przemyślenia

Mamy nadzieję, że ten artykuł pomoże Ci łatwo utworzyć lepki nagłówek za pomocą Divi i jego opcji. Przyklejone opcje Divi zapewniają niezliczone możliwości poprawy komfortu użytkowania i tworzonego projektu. Powinieneś być w stanie poradzić sobie ze wszystkim bez problemu.

Jeśli interesuje Cię więcej treści, zalecamy śledzenie nas na Facebooku i Twitterze .