Jak zaoszczędzić miejsce w nagłówku za pomocą ikon przełączania w Divi

Sposób, w jaki projektujesz nagłówek, nadaje ton reszcie Twojej witryny. Dlatego ważne jest, aby pomyśleć o sposobie dodawania elementów i interakcji. Oczywiście będziesz chciał uwzględnić podstawowe elementy, takie jak logo i elementy menu, ale istnieje duże prawdopodobieństwo, że będziesz chciał również dodać inne wezwania do działania. Jednak im więcej elementów dodasz do nagłówka, tym bardziej przytłaczający może stać się nagłówek. Jeśli szukasz przejrzystego i interaktywnego sposobu prezentowania różnych wezwań do działania w nagłówku, pokochasz ten samouczek. Dzisiaj pokazujemy, jak zaoszczędzić miejsce w nagłówku za pomocą ikon przełączania. Będziesz mógł również pobrać plik JSON za darmo!

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. Zbuduj strukturę nagłówka

Utwórz nowy szablon globalnego nagłówka

Zacznij od przejścia do Divi Theme Builder i zacznij budować nowy globalny lub niestandardowy nagłówek.

Dodaj sekcję #1

Tło gradientowe

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

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

Rozstaw

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

Cień Pudełka

Dodaj również cień do pudełka.

• Kolor cienia: rgba (0,0,0,0,06)

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

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

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

Rozstaw

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

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

Główny element CSS

Następnie przejdź do zakładki Zaawansowane i zastosuj kilka niestandardowych linii kodu CSS głównego elementu na różnych rozmiarach ekranu. Ten kod pomoże nam pionowo wyśrodkować elementy na pulpicie.

Pulpit:

display: flex;
place-items: center;

Tablet i telefon:

display: block;

Ustawienia kolumny 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i zastosuj dopełnienie z lewej i prawej strony.

• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Główny element

Zmieniamy rozmiar naszej kolumny na komputerze i przywracamy ją do „100%” na tablecie i telefonie, stosując niestandardowy kod CSS do głównego elementu kolumny.

Pulpit:

width: 88% !important

Tablet i telefon:

width: 100% !important;

Ustawienia kolumny 2

Kolor tła

Następnie otworzymy ustawienia kolumny 2 i zmienimy kolor tła na biały.

• Kolor tła: #FFFFFF

Rozstaw

Dodamy również kilka responsywnych wartości dopełnienia do ustawień odstępów w tej kolumnie.

• Górna wyściółka:
  • Pulpit: 50px
  • Tablet i telefon: 20 pikseli
• Dolna wyściółka
  • Pulpit: 50px
  • Tablet i telefon: 20 pikseli
• Lewa wyściółka: 1%
• Prawa wyściółka: 1%

Główny element CSS

Zmodyfikujemy również rozmiar drugiej kolumny na pulpicie. Przywracamy to do „100%” na mniejszych ekranach.

Pulpit:

display: flex;
place-items: center;
width: 12% !important;

Tablet i telefon:

width: 100% !important;

Dodaj moduł menu do kolumny 1

Wybierz menu

Czas dodać moduły, zaczynając od modułu menu w kolumnie 1. Wybierz żądane menu.

Prześlij logo

Następnie prześlij logo.

Usuń kolor tła

Następnie usuń domyślny kolor tła.

Ustawienia tekstu menu

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu menu:

• Czcionka menu: wyświetlacz Playfair
• Czcionka tekstu menu: Wyświetlacz Playfair
• Kolor tekstu menu: #000000
• Rozmiar tekstu menu: 19px
• Wysokość linii menu: 1.4em
• Wyrównanie tekstu: do prawej

Rozwijane ustawienia menu

Następnie zmień kolor linii menu rozwijanego.

• Kolor linii menu rozwijanego: #ffffff

Ustawienia ikon

Zmień kolory ikon w ustawieniach ikon.

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

Rozmiary

I uzupełnij ustawienia modułu, zmieniając ustawienia rozmiaru w następujący sposób:

• Maksymalna szerokość logo: 200px
• Szerokość: 100%
• Wyrównanie modułu: Środek

Dodaj Blurb Module #1 do kolumny 2

Pozostaw puste pole zawartości

Do drugiej kolumny. Aby utworzyć ikony przełączania, użyjemy modułów Blurb bez tytułu i treści. Zaczniemy od utworzenia pierwszej ikony przełączania, a następnie ponownie użyjemy modułu, aby dodać pozostałe dwie ikony przełączania. Po dodaniu modułu Blurb upewnij się, że tytuł i pole treści są puste.

Wybierz ikonę

Następnie wybierz wybraną ikonę.

Ustawienia ikon

Przejdź do zakładki projektowania modułu i zmień ustawienia ikon w następujący sposób:

• Kolor ikony
  • Domyślnie: #dbdbdb
  • Najedź: #000000
• Umieszczenie ikon: góra
• Wyrównanie ikon: środek
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 200%

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Szerokość treści: 100%
• Szerokość: 32%

Główny element i obraz rozmycia CSS

I uzupełnij ustawienia modułu, dodając dwie linie kodu CSS do niestandardowych opcji CSS w zakładce Zaawansowane modułu Blurb.

Główny element:

display: inline-block;

Obraz rozmycia:

margin-bottom: 0px !important

Dwukrotne klonowanie modułu Blurb

Po ukończeniu pierwszego przełączenia modułu Blurb można go dwukrotnie sklonować.

Zmień ikonę

Upewnij się, że zmieniłeś ikonę w każdym duplikacie.

2. Dodaj elementy przełączania

Dodaj sekcję #2

Rozmiary

Teraz, gdy ustaliliśmy już podstawę naszego nagłówka, nadal musimy uwzględnić elementy przełączania. Aby to zrobić, dodamy nową sekcję tuż pod poprzednią. Otwórz ustawienia sekcji i upewnij się, że wysokość tej sekcji to „0px”. Pomoże nam to zapobiec zajmowaniu przez sekcję miejsca w naszym projekcie nagłówka. Jedynym powodem, dla którego potrzebujemy tej sekcji, jest pokazanie naszych elementów przełączania.

• Wysokość: 0px

Rozstaw

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

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z 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
• Wyrównaj wysokości kolumn
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

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

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

Pozycja

I zmień położenie całego rzędu. Ustawienie tego rzędu bezwzględnie pomoże nam zapobiec zajmowaniu przez rząd miejsca w projekcie.

• Pozycja: bezwzględna
• Lokalizacja: prawy górny róg

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj numer telefonu do pola zawartości

Czas dodać elementy przełączania! Najpierw dodamy numer telefonu. Dodaj nowy moduł tekstowy do kolumny 2 i wstaw numer telefonu w polu treści.

Kolor tła

Następnie dodaj czarny kolor tła.

• Kolor tła: #000000

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: wyświetlacz Playfair
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 27px
• Wyrównanie tekstu: do środka

Rozmiary

Upewnij się, że szerokość też wynosi 100%.

• Szerokość: 100%

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia do ustawień odstępów.

• Górna wyściółka: 10%
• Dolna wyściółka: 10%
• Lewa wyściółka: 2%
• Prawa wyściółka: 2%

Klonuj moduł tekstowy

Po zakończeniu pierwszego przełączenia modułu tekstowego, sklonuj go raz.

Zmień treść na adres e-mail

Zmień zawartość w polu treści.

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

Dodaj wybrane sieci społecznościowe

Następnie dodaj moduł śledzący w mediach społecznościowych do kolumny 2. Dodaj tyle sieci społecznościowych, ile chcesz.

Zmień kolor tła każdej sieci społecznościowej na biały

Następnie zmień kolor tła na biały dla każdej sieci społecznościowej indywidualnie.

• Kolor tła: #FFFFFF

Kolor tła

Następnie wróć do ogólnych ustawień modułu i użyj czarnego koloru tła.

• Kolor tła: #000000

Wyrównanie

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

• Wyrównanie modułu: Środek

Ustawienia ikon

Zmień kolor ikony w ustawieniach ikon.

• Kolor ikony: #000000

Rozmiary

Następnie zastosuj szerokość „100%” do ustawień rozmiaru.

• Szerokość: 100%

Rozstaw

Zastosuj również niestandardową górną i dolną wyściółkę.

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

Granica

I uzupełnij ustawienia modułu, dodając zaokrąglone rogi do ustawień obramowania.

• Wszystkie rogi: 100px

3. Dodaj funkcjonalność

Dodaj kolejne identyfikatory CSS do pierwszej sekcji modułów Blurb

Teraz, gdy wszystkie elementy są na swoim miejscu, możemy zacząć dodawać efekt przełączania. Pierwszą rzeczą, którą musisz zrobić, to otworzyć każdy moduł Blurb osobno i dodać kolejny identyfikator CSS.

• Blurb 1: nagłówek-cta-1
• Blurb 2: nagłówek-cta-2
• Blurb 3: nagłówek-cta-3

Dodaj kolejne identyfikatory CSS, aby przełączać elementy

Zrób to samo z modułami przełączania przedmiotów. Liczba na końcu identyfikatora CSS powinna być zgodna z identyfikatorem CSS użytym dla ikon w poprzednim kroku.

• Moduł tekstowy 1: nagłówek-pozycja-1
• Moduł tekstowy 2: nagłówek-pozycja-2
• Moduł śledzenia w mediach społecznościowych: header-item-3

Dodaj pozycję bezwzględną do wszystkich elementów przełączania

I zmień każdy z elementów przełączania bezwzględnie jeden po drugim. W tym celu zalecamy przejście do trybu szkieletowego.

• Pozycja: bezwzględna
• Lokalizacja: u góry po prawej

Dodaj moduł kodu do pierwszej kolumny sekcji #1

Teraz, gdy wszystkie identyfikatory CSS są na swoim miejscu, możemy dodać kod, aby funkcja kliknięcia działała. Dodaj nowy moduł kodu tuż pod modułem menu w kolumnie 1.

Wstaw kod CSS

Dodaj następujące wiersze kodu CSS między tagami stylu, jak możesz zauważyć na poniższym zrzucie ekranu :

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

Wstaw kod JQuery

Dodajemy też trochę niestandardowego kodu JQuery. Dodaj kod pomiędzy tagami skryptu, jak widać na poniższym zrzucie ekranu .

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. Ustaw nagłówek + Przełącz elementy przyklejone

Spraw, aby sekcja 1 była lepka

Last but not least, możesz także obrócić nagłówek i przełączyć elementy przyklejone. Aby uzyskać pożądany efekt, musisz upewnić się, że obie sekcje są lepkie, a opcja „Odsuń od otaczających lepkich elementów” jest włączona. Spraw, aby pierwsza sekcja była lepka.

• Lepka pozycja: trzymaj się u góry
• Dolny limit lepkości: brak
• Przesunięcie od otaczających lepkich elementów: Tak
• Domyślne i trwałe style przejścia: Tak

Spraw, aby sekcja 2 była lepka

Zrób to samo dla sekcji 2. To wszystko!

• Lepka pozycja: trzymaj się u góry
• Dolny limit lepkości: brak
• Przesunięcie od otaczających lepkich elementów: Tak
• Domyślne i trwałe style przejścia: Tak

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 poście pokazaliśmy, jak używać ikon przełączania w nagłówku. Gdy tylko ktoś kliknie ikonę, pojawi się element przełączania, który pomoże Ci zaoszczędzić dużo miejsca w projekcie nagłówka. Takie podejście koncentruje się na zachowaniu użytkownika i pomaga uniknąć konieczności projektowania przytłaczającego projektu nagłówka. 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.