Posiadanie wyraźnych wezwań do działania na stronach jest koniecznością w przypadku większości witryn internetowych. A czy jest lepszy sposób na zwrócenie uwagi na niektóre z najważniejszych wezwań do działania niż umieszczenie ich w nagłówku?
W dzisiejszym samouczku pokażemy, jak dodać dwa przyciski obok siebie do globalnego nagłówka za pomocą narzędzia Button Builder. motywy z Divi. Jeden z przycisków jest główny, drugi pomocniczy. Będziesz także mógł pobrać globalny plik nagłówkowy JSON za darmo!
badanie
Zanim przejdziemy do samouczka, rzućmy okiem na wynik na różnych rozmiarach ekranu.
Biuro
1. Uzyskaj dostęp do Divi Theme Builder i utwórz globalny nagłówek
Idź do Divi Theme Builder
Zacznij od przejścia do Kreatora motywów Divi i kliknij „Dodaj nagłówek globalny”.
Utwórz globalny nagłówek
Kontynuuj, klikając „Utwórz globalny nagłówek”.
2. Zbuduj ogólny projekt nagłówka
Dodaj nową sekcję
rozstaw
Po wejściu do edytora szablonów zauważysz sekcję. Otwórz ustawienia sekcji i usuń wszystkie domyślne wypełnienia górne i dolne.
- Górna wyściółka: 0px
- Dolne wypełnienie: 0px
Indeks Z
Pamiętaj także o zwiększeniu indeksu Z sekcji w ustawieniach widoczności. Zapewni to, że treść nagłówek globalny pojawi się na górze całej strony i opublikuje plik treść.
- Indeks Z: 99999
Dodaj nową linię
Struktura kolumny
Po zakończeniu ustawień sekcji dodaj nowy wiersz do sekcji, korzystając z następującej struktury kolumn:
zaklejania
Bez dodawania modułów otwórz parametry linii i pozwól linii zajmować 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
Zmień także wartości wypełnienia po lewej i prawej stronie linii.
- Lewa wyściółka: 2vw (biurko), 10vw (tablet i telefon)
- Prawa wyściółka: 2vw (biurko), 10vw (tablet i telefon)
Główny element
Aby wyśrodkować wszystko treść kolumn, dodamy te dwie linie kodu CSS do głównego elementu wiersza.
display: flex;align-items: center;
Usuń właściwość wyświetlania na komputerach na tabletach i urządzeniach mobilnych.
display: block;
Kolumna 1
granica
Kontynuuj, otwierając ustawienia w kolumnie 1 i dodając prawą ramkę tylko na pulpicie.
- Szerokość prawej ramki: 1px (biurko), 0px (tablet i telefon)
- Kolor prawej ramki: # d8d8d8
Indeks Z
Zwiększ także 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 elementu kolumny głównej, 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 żądane menu.
Pobierz logo
Następnie prześlij logo.
Usposobienie
Przejdź do zakładki projektowania modułu i upewnij się, że mają zastosowanie następujące ustawienia układu:
- Styl: wyrównany do lewej
- Kierunek menu rozwijanego: w dół
Tekst menu
Następnie zmień ustawienia tekstu menu.
- Kolor aktywnego linku: # ef6f49
- Czcionka menu: Montserrat
- Waga czcionki menu: częściowo pogrubiona
- Styl czcionki menu: wielkie litery
- Kolor tekstu menu: # 333333 (domyślnie), # ef6f49 (najechanie kursorem)
- Rozmiar tekstu menu: 0.7vw (komputer stacjonarny), 1.8vw (tablet), 2.5vw (telefon)
- Odstępy między literami w menu: 1px
Tekst menu rozwijanego
Wprowadź także zmiany w ustawieniach tekstu w menu rozwijanym.
- Kolor tła menu rozwijanego: #ffffff
- Kolor linii w menu rozwijanym: # ef6f49
ikony
Następnie zmień kolor ikony menu hamburgera.
- Kolor ikony menu hamburgera: # 000000
zaklejania
Dodaj także maksymalną szerokość logo do parametrów rozmiaru.
- Maksymalna szerokość logo: 9vw (biurko), 12vw (tablet), 15vw (telefon)
Menu z logo CSS
Uzupełnij ustawienia modułu, dodając wiersz 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
Kolejny i ostatni moduł, którego potrzebujemy w kolumnie 1, to moduł kodu. Dodaj następujące wiersze kodu CSS, aby dostosować odstępy między elementami menu:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Dodaj moduł pierwszego przycisku do kolumny 2
Dodaj kopię
Przejdźmy do następnego modułu! Dodaj pierwszy moduł przycisków i wprowadź wybraną kopię.
Dodaj link
Następnie dodaj link do modułu przycisku.
wyrównanie
Przejdź do zakładki projektowania modułu i zmień wyrównanie przycisków.
- Wyrównanie przycisków: w prawo
Ustawienia przycisków
Styl też przycisk.
- Użyj niestandardowych stylów przycisku: Tak
- Rozmiar tekstu przycisku: 0.8vw (komputer stacjonarny), 1.7vw (tablet), 2.5vw (telefon)
- Kolor tekstu przycisku: # 000000
- Kolor tła przycisku: # edeef0 (domyślny), # d6d7d8 (najechanie kursorem)
- Szerokość obramowania przycisku: 0px
- Promień obramowania przycisku: 0px
- Odstępy między literami przycisków: 2px
- Czcionka przycisku: Montserrat
- Waga czcionki przycisku: pogrubiona
- Styl czcionki przycisku: wielkie litery
rozstaw
Uzupełnij ustawienia modułu, dodając niestandardowe wartości wypełnienia na ekranach o różnych rozmiarach.
- Górna wyściółka: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Wyściółka u dołu: 1vw (biurko), 2vw (tablet), 3vw (telefon)
- Lewe wypełnienie: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
- Prawa wyściółka: 2vw (biurko), 4vw (tablet), 6vw (telefon)
Moduł przycisku klonowania
Po ukończeniu pierwszego modułu przycisku sklonuj go.
Edytuj link
Otwórz moduł zduplikowanych przycisków i zmień adres URL.
Zmień wyrównanie
Zmień także wyrównanie modułu.
- Wyrównanie przycisków: w lewo
Zmień ustawienia przycisków
Wprowadź także zmiany w ustawieniach przycisków.
- Kolor tekstu przycisku: #ffffff
- Kolor tła przycisku: # ef6f49 (domyślny), # e06945 (po najechaniu)
Najedź skalą transformacji
Uzupełnij ustawienia przycisku, dodając efekt po najechaniu na skalę transformacji.
- Prawo: 110%
- Niski: 110%
3. Zapisz zmiany w generatorze motywów i wyniku podglądu
Po ukończeniu globalnego nagłówka zapisz wszystkie zmiany wprowadzone w kreatorze motywów i wyświetl wynik na swoim Witryna internetowa!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
końcowe przemyślenia
W tym samouczku pokazaliśmy, jak dodać dwa przyciski obok siebie do ogólnego nagłówka za pomocą narzędzia do tworzenia motywów Divi.
Jeden z dodanych przez nas przycisków jest podstawowy, a drugi drugorzędny. Dodanie przycisków do ogólnego nagłówka pomaga wyróżnić niektóre z najważniejszych CTA w Twoim Witryna internetowa. Udało Ci się również bezpłatnie pobrać plik JSON! Jeśli masz jakieś pytania, możesz zostawić komentarz w sekcji komentarzy poniżej.
