Jak dodać dwa przyciski obok siebie do globalnego nagłówka Divi?

Posiadanie wyraźnych wezwań do działania na swoich stronach jest koniecznością w przypadku większości witryn. A czy jest lepszy sposób na zwrócenie uwagi na niektóre z najważniejszych CTA niż umieszczenie ich w nagłówku? W dzisiejszym samouczku pokażemy, jak dodać dwa przyciski obok siebie do globalnego nagłówka za pomocą kreatora motywów Divi. Jeden z przycisków jest podstawowy, drugi drugorzędny. Będziesz mógł również bezpłatnie pobrać plik JSON globalnego nagłówka!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnego nagłówka, 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

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.

POBIERANIE

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!

1. Przejdź do Divi Theme Builder i utwórz globalny nagłówek

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder i kliknij „Dodaj globalny nagłówek”.

Zbuduj globalny nagłówek

Kontynuuj, klikając „Buduj globalny nagłówek”.

2. Zbuduj globalny projekt nagłówka

Dodaj nową sekcję

Rozstaw

W edytorze szablonów zauważysz sekcję. Otwórz ustawienia sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

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

Indeks Z

Upewnij się, że zwiększyłeś również indeks z sekcji w ustawieniach widoczności. Zapewni to, że globalna treść nagłówka pojawi się na górze całej zawartości strony i posta.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Po skonfigurowaniu ustawień sekcji dodaj nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania żadnych modułów otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość kontenera sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Zmodyfikuj również wartości dopełnienia lewego i prawego wiersza.

• Lewa wyściółka: 2vw (komputer stacjonarny), 10vw (tablet i telefon)
• Prawa wyściółka: 2vw (komputer stacjonarny), 10vw (tablet i telefon)

Główny element

Aby wyśrodkować całą zawartość kolumny, dodamy te dwa wiersze kodu CSS do głównego elementu wiersza.

display: flex;
align-items: center;

Usuń właściwość wyświetlania pulpitu na tablecie i telefonie komórkowym.

display: block;

Kolumna 1

Granica

Kontynuuj, otwierając ustawienia kolumny 1 i dodając prawą ramkę tylko na pulpicie.

• Szerokość prawego obramowania: 1px (komputer), 0px (tablet i telefon)
• Kolor prawego obramowania: #d8d8d8

Indeks Z

Zwiększ również indeks z kolumny.

• Indeks Z: 11

Kolumna 2

Główny element

Następnie otwórz ustawienia kolumny 2 i dodaj następujące wiersze kodu CSS do głównego elementu kolumny, aby przekształcić go w dwie kolumny.

display: grid;
grid-template-columns: 50% 50%;

Dodaj moduł menu do kolumny 1

Wybierz menu

Czas zacząć dodawać moduły! Dodaj moduł menu do kolumny 1 i wybierz wybrane menu.

Prześlij logo

Następnie prześlij logo.

Układ

Przejdź do karty projektu modułu i upewnij się, że obowiązują następujące ustawienia układu:

• Styl: wyrównany do lewej
• Menu rozwijane Kierunek: w dół

Tekst menu

Następnie zmodyfikuj ustawienia tekstu menu.

• Kolor aktywnego łącza: #ef6f49
• Czcionka menu: Montserrat
• Grubość czcionki menu: pół pogrubiona
• Styl czcionki menu: wielkie litery
• Kolor tekstu menu: #333333 (domyślnie), #ef6f49 (najechanie)
• Rozmiar tekstu w menu: 0,7vw (komputer), 1,8vw (tablet), 2,5vw (telefon)
• Odstępy między literami menu: 1px

Tekst menu rozwijanego

Wprowadź również pewne zmiany w ustawieniach tekstu menu rozwijanego.

• Kolor tła menu rozwijanego: #ffffff
• Kolor linii menu rozwijanego: #ef6f49

Ikony

Następnie zmień kolor ikony menu hamburgera.

• Kolor ikony menu hamburgerów: #000000

Rozmiary

Dodaj również maksymalną szerokość logo do ustawień rozmiaru.

• Maksymalna szerokość logo: 9vw (komputer stacjonarny), 12vw (tablet), 15vw (telefon)

Menu Logo CSS

I uzupełnij ustawienia modułu, dodając jedną linię kodu CSS do logo menu w zakładce Zaawansowane.

margin-right: 10vw;

Dodaj moduł kodu do kolumny 1

Dodaj niestandardowy kod CSS do modułu

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł kodu. Dodaj następujące wiersze kodu CSS, aby dostosować odstępy między pozycjami menu:

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

Dodaj moduł przycisku nr 1 do kolumny 2

Dodaj kopię

Do następnego modułu! Dodaj pierwszy moduł przycisku i wprowadź wybraną kopię.

Dodaj link

Następnie dodaj łącze do modułu przycisku.

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: w prawo

Ustawienia przycisków

Stylizuj również przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,8vw (komputer), 1,7vw (tablet), 2,5vw (telefon)
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #edeef0 (domyślnie), #d6d7d8 (najechanie)
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: Montserrat
• Grubość czcionki przycisku: pół pogrubiona
• Styl czcionki przycisku: wielkie litery

Rozstaw

Uzupełnij ustawienia modułu, dodając kilka niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 2vw (komputer), 4vw (tablet), 6vw (telefon)
• Prawa wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)

Moduł przycisku klonowania

Po ukończeniu pierwszego modułu przycisku sklonuj go.

Zmień łącze

Otwórz zduplikowany moduł przycisku i zmień adres URL.

Zmień wyrównanie

Zmień również wyrównanie modułu.

• Wyrównanie przycisków: w lewo

Zmień ustawienia przycisków

Wprowadź również pewne zmiany w ustawieniach przycisków.

• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #ef6f49 (domyślny), #e06945 (najechanie)

Skala przekształcenia najechania

Uzupełnij ustawienia przycisku, dodając efekt najechania na skalę transformacji.

• Prawo: 110%
• Dół: 110%

3. Zapisz zmiany i podgląd w kreatorze motywów

Po ukończeniu globalnego nagłówka zapisz wszystkie zmiany w kreatorze motywów i wyświetl wynik na swojej stronie!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak dodać dwa przyciski obok siebie do globalnego nagłówka za pomocą konstruktora motywów Divi. Jeden z dodanych przez nas przycisków jest głównym, drugi drugorzędnym. Dodanie przycisków do globalnego nagłówka pomaga wyróżnić niektóre z najważniejszych wezwań do działania w Twojej witrynie. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.