Jak sprawić, by Twoje logo przechodziło przez podstawowe i drugorzędne paski menu w nagłówku Divi?

Jeśli chodzi o budowanie nagłówka, możliwości są nieograniczone. Możesz dołączyć wszystko, co możesz sobie wyobrazić, w nagłówku Divi, jeśli używasz Divi Theme Builder. Dzisiaj dodajemy do Twojej listy zasobów kolejny samouczek dotyczący projektowania nagłówków. Pokażemy Ci, jak umieścić logo na głównym i dodatkowym pasku menu w nagłówku. 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. Utwórz nowy szablon globalnego nagłówka

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder na zapleczu swojej witryny WordPress. Tam kliknij „Dodaj globalny nagłówek”.

Dodaj nowy globalny nagłówek

Pojawi się menu rozwijane. Aby rozpocząć budowanie od zera, kontynuuj, wybierając „Buduj globalny nagłówek”.

2. Zbuduj projekt nagłówka

Dodaj sekcję specjalistyczną

Aby zbudować ten projekt, użyjemy sekcji specjalistycznej.

Struktura kolumny

Oto struktura kolumn, której używamy w naszej sekcji specjalistycznej:

Kolor tła kolumny 1

Po dodaniu sekcji specjalistycznej otwórz jej ustawienia i zastosuj kolor tła kolumny 1.

• Kolor tła kolumny 1: rgba (255,191,0,0.27)

Rozmiary

Przejdź do zakładki projektu i zmień ustawienia rozmiaru w następujący sposób:

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

Rozstaw

Zmodyfikuj również ustawienia odstępów.

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

Identyfikatory CSS kolumn

Następnie przejdź do zakładki Zaawansowane i zastosuj niestandardowy identyfikator CSS do obu kolumn.

• Identyfikator CSS kolumny 1: header-first-column
• Kolumna 2 identyfikator CSS: nagłówek-druga kolumna

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas dodać moduły, zaczynając od modułu obrazu w kolumnie 1. Prześlij swoje logo.

Wyrównanie

Następnie przejdź do zakładki projektu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

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

• Maksymalna szerokość: 100px

Widoczność

I ukryj moduł na mniejszych ekranach.

Dodaj wiersz nr 1 do kolumny 2

Struktura kolumny

W kolumnie 2 naszej sekcji specjalistycznej dodamy pierwszy wiersz, korzystając z następującej struktury kolumn:

Kolor tła

Otwórz ustawienia wiersza i użyj następującego koloru tła:

• Kolor tła: #a163ff

Rozstaw

Przejdź do karty projektu wiersza i zmień ustawienia odstępów w następujący sposób:

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

Granica

Następnie zastosuj następujące ustawienia obramowania:

• Szerokość dolnego obramowania: 3px
• Szerokość lewej krawędzi:
  • Pulpit: 3px
  • Tablet i telefon: 0px
• Kolor obramowania: #6c2eb9

Główny element CSS

I użyj następujących wierszy kodu CSS w głównym elemencie wiersza:

display: flex;
justify-content: center;
align-items: center;

Ukryj kolumny 1 i 2 na mniejszych rozmiarach ekranu

Aby uprościć projekt na mniejszych ekranach, otworzymy ustawienia kolumn 1 i 2 i ukryjemy je na tablecie i telefonie.

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

Dodaj sieci społecznościowe

Czas dodać moduły, zaczynając od modułu Social Media Follow w kolumnie 1. Dodaj wybrane przez siebie sieci społecznościowe.

Indywidualny kolor tła sieci społecznościowej

Zmodyfikuj kolor tła każdej sieci społecznościowej indywidualnie.

• Kolor tła: #ffeeba

Ustawienia ikon

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

• Kolor ikony: #6c2eb9

Granica

Dodaj też zaokrąglone rogi do ustawień obramowania.

• Wszystkie rogi: 100px

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Następnie dodaj moduł tekstowy do kolumny 2 z wybraną przez siebie zawartością.

Ustawienia tekstu

Zmień ustawienia modułu w następujący sposób:

• Czcionka tekstu: Poppins
• Wyrównanie tekstu: do środka

Dodaj moduł przycisku do kolumny 3

Dodaj kopię

W kolumnie 3 jedynym modułem, którego potrzebujemy, jest moduł przycisku. Dodaj wybraną kopię.

Wyrównanie przycisków

Przejdź do zakładki projektu modułu i zmień wyrównanie przycisków na różnych rozmiarach ekranu.

• Wyrównanie przycisków:
  • Pulpit: prawy
  • Tablet i telefon: centrum

Ustawienia przycisków

Nadaj styl przyciskowi dalej.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 14px
• Kolor tekstu przycisku: #6c2eb9
• Kolor tła przycisku: #ffeeba
• Czcionka przycisku: Poppins
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery

• Pokaż ikonę przycisku: Tak
• Umieszczenie ikony przycisku: w lewo

Rozstaw

I zastosuj następujące wartości dopełnienia:

• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 30px

Dodaj wiersz nr 2 do kolumny 2

Struktura kolumny

Następny i ostatni wiersz, którego potrzebujemy w drugiej kolumnie naszej sekcji, wykorzystuje następującą strukturę kolumn:

Kolor tła

Otwórz ustawienia wiersza i użyj następującego koloru tła:

• Kolor tła: rgba (161,99,255,0.1)

Rozstaw

Następnie zmodyfikuj ustawienia odstępów między wierszami.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Granica

Następnie zastosuj następujące ustawienia obramowania:

• Szerokość lewej krawędzi:
  • Pulpit: 3px
  • Tablet i telefon: 0px
• Kolor lewej krawędzi: #6c2eb9

Dodaj moduł menu do kolumny

Wybierz menu

Wtedy jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł menu. Wybierz wybrane menu.

Prześlij logo na tablet i telefon

Następnie prześlij logo tylko na tablet i telefon.

Usuń kolor tła

Następnie usuń kolor tła modułu.

Ustawienia tekstu menu

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

• Czcionka menu: Poppins
• Kolor tekstu menu: #6c2eb9
• Rozmiar tekstu menu: 16px

Rozwijane ustawienia menu

Następnie zastosuj następujący kolor linii menu rozwijanego:

• Kolor linii menu rozwijanego: rgba(0,0,0,0)

Ustawienia ikon

Następnie zmień ustawienia ikony.

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

Rozmiary

Zastosuj maksymalną szerokość logo na tablecie i telefonie.

• Maksymalna szerokość logo:
  • Tablet: 70px
  • Telefon: 50px

Dodaj moduł kodu do kolumny 1

Aby zmienić proporcje naszego projektu nagłówka, wprowadzimy niewielkie modyfikacje CSS. Aby dołączyć kod, dodaj moduł kodu poniżej modułu obrazu w kolumnie 1.

Dodaj tagi stylu

Umieść kilka tagów stylu w polu kodu.

Wstaw kod CSS między tagami stylu

I umieść następujące wiersze kodu CSS pomiędzy tagami stylu:

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}

#header-second-column {
width: 90% !important;
}
}

@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

4. Zapisz zmiany w kreatorze motywów Divi

Teraz, gdy wszystko jest na swoim miejscu, jedyną rzeczą do zrobienia jest zapisanie wszystkich zmian Divi Theme Builder i wyświetlenie wyniku!

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 wykazać się kreatywnością dzięki nagłówkowi Divi. Mówiąc dokładniej, pokazaliśmy, jak umieścić logo na głównym i dodatkowym pasku menu w nagłówku. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, 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.