Uzyskaj natychmiastowy hosting z elementem ELEMENTORem i ELEMENTOR PRO

Z CDN, SSL i kopią zapasami.

Zacznij dzisiaj

Jak zaprojektować pasek menu przecinający logo wewnątrz nagłówka Divi

Rifat Divi Tutorials Oct 15, 2021

Divi daje nam ogromną możliwość dekorowania naszych stron internetowych na różne sposoby, a wewnątrz Divi dostępnych jest wiele opcji, które naprawdę mogą tworzyć oszałamiające projekty. Czy kiedykolwiek myślałeś o stworzeniu nagłówka, w którym Twoje logo będzie widoczne na głównym i dodatkowym pasku menu? Cóż, tego się dzisiaj nauczymy. To innowacyjny sposób wyświetlania nagłówka. Więc nie traćmy więcej czasu i zobaczmy, jak to zrobić!

Zapowiedź

To jest projekt nagłówka, który dzisiaj stworzymy.

Sekcja pierwsza: Szablon globalnego nagłówka

Przede wszystkim musimy stworzyć globalny szablon nagłówka. Aby to zrobić, przejdźmy do „Divi

Kliknij opcję „Dodaj globalny nagłówek”, a zobaczysz rozwijane menu. Wybierz „Buduj globalny nagłówek” i przejdź dalej.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Sekcja druga: Projektowanie nagłówków

Dodawanie: Sekcja Specjalistyczna

Do wykonania tego projektu wybierzemy sekcję Specjalizacje .

Struktura kolumny

Proszę wybrać zaznaczoną strukturę kolumn dla sekcji.

Kolor tła: kolumna 1

Teraz otwórz ustawienie kolumny 1 nowo utworzonej sekcji Specjalność i zmień kolor tła.

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

Rozmiary

Zmień następujące wartości na karcie Projekt.

  • 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

Teraz przejdź do ustawienia Odstępy z tej samej karty Projekt.

  • 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

Na karcie Zaawansowane zastosujmy niestandardowy identyfikator CSS do obu kolumn.

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

Dodawanie: Moduł obrazu do kolumny 1

Przesyłanie obrazu

Teraz dodaj moduł obrazu do kolumny 1 i wstaw swoje logo.

Wyrównanie

Teraz przejdź do zakładki projektu i wprowadź zmiany w wyrównaniu obrazu.

  • Wyrównanie obrazu: Środek

Rozmiary

W sekcji rozmiaru zmień wartość maksymalnej szerokości.

Widoczność

Teraz ukryj ten konkretny moduł przed mniejszymi urządzeniami, wyłączymy widoczność telefonu komórkowego i tabletu.

Dodawanie: wiersz 1 do kolumny 2

Struktura kolumny

Dodamy zaznaczoną strukturę kolumn w kolumnie 2 Sekcje specjalistyczne. Będzie to działać jako nasz pierwszy wiersz.

Kolor tła

Zastosuj kolor tła z ustawień wiersza.

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

Rozstaw

Na karcie Projekt 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

Teraz wprowadź zmiany w ustawieniach obramowania.

  • Szerokość dolnego obramowania: 3px
  • Szerokość lewego obramowania: Pulpit: 3 piks., tablet i telefon: 0 piks.
  • Kolor obramowania: #6c2eb9

Główny element CSS

Teraz zapisz kod CSS w bloku „Main Element” na karcie Zaawansowane.

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

Widoczność: Ukryj kolumnę 1 i 2

Ukryjemy widoczność kolumn 1 i 2 dla mniejszych urządzeń w celu uproszczenia projektowania. Dzięki temu nasz projekt będzie czystszy.

Dodawanie: moduł mediów społecznościowych do kolumny 1

Dodatek do sieci społecznościowej

Dodajmy moduł śledzący w mediach społecznościowych do kolumny pierwszej. Wybierz żądaną platformę mediów społecznościowych i dodaj tutaj.

Zmień kolor tła i ikony

Wprowadzimy kilka poprawek kolorystycznych w module Social Media Follow.

  • Kolor tła: #DBDD54
  • Kolor ikony: rgba (123,15,255,0.46)

Granica

Teraz w ustawieniach obramowania zaokrąglij nasze ikony społecznościowe.

  • Wszystkie rogi: 100px

Dodawanie: moduł tekstowy do kolumny 2

Moduł i treść

Dodaj moduł tekstowy do kolumny 2 i dodaj slogan lub cokolwiek według własnego wyboru.

Ustawienia tekstu

Zmień styl tekstu.

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

Dodawanie: Moduł przycisku do kolumny 3

Moduł i treść

W kolumnie 3 dodaj moduł przycisku i wybraną treść.

Wyrównanie przycisków

Na karcie projektu zmień wyrównanie przycisku, aby można go było idealnie umieścić na urządzeniach o różnych rozmiarach ekranu.

  • Wyrównanie przycisków: Pulpit: prawo, tablet i telefon: środek

Ustawienia przycisków

Teraz dostosuj przycisk, aby był bardziej atrakcyjny.

  • Użyj niestandardowych stylów dla przycisku: Tak
  • Rozmiar tekstu przycisku: 14px
  • Kolor tekstu przycisku: #DBDD54
  • Kolor tła przycisku: #158DD8
  • Czcionka przycisku: Poppins
  • Waga czcionki przycisku: pogrubiona
  • Styl czcionki przycisku: wielkie litery
  • Pokaż ikonę przycisku: Tak
  • Umieszczenie ikony przycisku: w lewo

Rozstaw

Teraz wprowadź następujące zmiany w wartościach dopełnienia.

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

Dodawanie: wiersz 2 do kolumny 2

Struktura kolumny

Teraz dodamy ostatni wiersz do tego modułu kolumny.

Kolor tła

Zastosuj następujący kolor jako tło.

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

Rozstaw

Dostosuj 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ść lewego obramowania: Pulpit: 3 piks., tablet i telefon: 0 piks.
  • Kolor lewej krawędzi: #6c2eb9

Dodawanie: moduł menu do kolumny 2

Teraz wybierz menu swoich potrzeb i ustaw je.

Prześlij logo na tablet i telefon

Dodaj logo dla urządzeń o mniejszym ekranie.

Ustawienia tekstu menu

Teraz dokonaj pewnych zmian w tekście menu, aby wyglądał bardziej uporządkowany.

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

Menu rozwijane Ustawienia tekstu

Teraz dodaj kolor linii do naszego menu rozwijanego.

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

Ustawienia ikon

Teraz 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: 70 pikseli i telefon: 50 pikseli

Dodawanie: Moduł kodu do kolumny 1

Aby wprowadzić zmiany w naszym projekcie nagłówka, wprowadzimy drobne poprawki w CSS. W tym celu dodaj moduł kodu w kolumnie 1. Teraz skopiuj poniższy kod i wklej go do tego modułu. Upewnij się, że umieszczasz je między kodem 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;
}
}

Część trzecia: Zapisz projekt

Skończyliśmy z projektowaniem. Wszystko jest idealnie ułożone, a teraz zapiszmy projekt i zobaczmy efekt. Kliknij ikonę krzyża w prawym górnym rogu. Spowoduje to przejście do pulpitu nawigacyjnego i kliknij Zapisz projekt.

Ostateczny wygląd

Tak wygląda nasz ostateczny projekt.

Wniosek

Wspomnieliśmy wcześniej, że dzięki Divi możesz wnieść coraz więcej kreatywności do swojego projektu. Istnieje wiele sposobów na prezentację swojej witryny, a Divi może zapewnić całe to wsparcie. Mam nadzieję, że dzisiejszy samouczek pomoże Ci zbudować unikalny nagłówek dla Twojej witryny. Zapraszam do dzielenia się swoimi przemyśleniami, a jeśli podoba Ci się ten samouczek, przyjazna akcja sprawi, że będziesz NIESAMOWITY!