Divi: Jak stworzyć lepki globalny nagłówek

Czy chcesz utworzyć przyklejony nagłówek za pomocą Divi ?

Tworzenie lepkich nagłówków przebiega bezproblemowo od czasu pojawienia się motywy, ale okazuje się, że wiele osób nie wie, jak je utworzyć bez użycia dodatkowego kodu. Jednak jest to również dość łatwe 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ć bardzo spersonalizowany przyklejony nagłówek przy użyciu parametrów Divi.

badanie

Zanim zagłębimy się w ten samouczek, przyjrzyjmy się wynikowi, który chcemy osiągnąć.

Zbuduj strukturę elementów nagłówka

Utwórz nowy globalny szablon nagłówka

Uzyskaj dostęp do Divi Theme Builder i zacznij tworzyć nowy globalny lub niestandardowy nagłówek.

Sekcja 1 Parametry

Tło gradientowe

W edytorze szablonów zaczniemy od zbudowania struktury naszych elementów nagłówka. W drugiej części tego samouczka skupimy się na zastosowaniu różnych ustawień lepkich, aby ukończyć projekt lepkiego nagłówka.

Czytaj także: Jak stworzyć przesuwane i przesuwane menu w DIVI

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zastosuj gradientowe tło.

Kolor 1: #ffba60
Kolor 2: #ffd6a0
Kierunek gradientu: 90 stopni
Pozycja wyjściowa: 50%
Pozycja końcowa: 50%

rozstaw

Następnie domyślnie usuń wszystkie wewnętrzne marginesy (Górny i Dolny).

Wierzchołek marginesu wewnętrznego: 0px
Dolny margines wewnętrzny: 0px

Dodaj nową linię

Struktura kolumny

Aby utworzyć nasz górny pasek nagłówka, dodamy nowy wiersz do naszej sekcji, korzystając z następującej struktury kolumn:

zaklejania

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

Użyj niestandardowej szerokości rynny: Tak
Rozstaw kolumn: 1
Maksymalna szerokość: 95%
Maksymalna szerokość: 2 pikseli

rozstaw

Dodaj również niestandardowe marginesy wewnętrzne (górny i dolny).

Wierzchołek marginesu wewnętrznego: 15px
Dolny margines wewnętrzny: 15px

Główny element CSS

Aby upewnić się, że kolumny pozostają obok siebie na mniejszych ekranach, dodamy wiersz kodu CSS do głównego elementu wiersza na karcie Zaawansowane.

display: flex;

Dodaj moduł „Obserwuj nas w mediach społecznościowych” do kolumny 1

Dodaj wybrane sieci społecznościowe

Czas dodać moduły, zaczynając od modułu „Obserwuj nas w mediach społecznościowych” w kolumnie 1. Dodaj wybrane sieci społecznościowe wraz z odpowiadającymi im linkami.

Usuń kolor tła z każdej sieci społecznościowej

Kontynuuj, usuwając każdy kolor tła z sieci społecznościowej indywidualnie.

Ustawienia ikon

Następnie wróć do ogólnych ustawień modułu i zmień kolor ikony w zakładce projekt.

Kolor ikony: #26333a

rozstaw

Dodaj także górny margines.

Górny margines: 5 pikseli

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.

Dodaj link

Następnie dodaj link.

Wyrównanie przycisków

Następnie przejdź do zakładki Styl i zmień wyrównanie przycisków.

Wyrównanie przycisków: w prawo

Ustawienia przycisków

Dostosowujemy również przycisk.

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: 0 pikseli

Przyciski odstępów między literami: 4px
Przycisk miękkiego światła: pogrubiony tekst
Przycisk kopiowania stylu: wielkie litery
Pokaż przycisk: tak

rozstaw

I uzupełnimy ustawienia modułu, dodając wewnętrzne marginesy (Górny i Dolny) do ustawień odstępów.

Wierzchołek marginesu wewnętrznego: 10px
Dolny margines wewnętrzny: 10px