Divi: Jak zrównoważyć główne i dodatkowe przyciski modułu nagłówka o pełnej szerokości?

Czy chcesz dostosować moduł nagłówka o pełnej szerokości Divi, równoważąc przyciski główny i dodatkowy?

Moduł Divi Nagłówek o pełnej szerokości ułatwia dodawanie pięknych sekcji Hero do Twojego Witryna internetowa. Moduł jest wyposażony w dwa przyciski, tekst tytułu, tekst napisów, tekst główny, logo i obraz, co sprawia, że ​​opcje dostosowywania są nieograniczone.

W dzisiejszym artykule pokażemy, jak odtworzyć sekcje bohaterów za pomocą Nagłówek Divi o pełnej szerokości. Rozpoczniemy nasz projekt od 3 gotowych pakietów układów i zaprojektujemy nasze sekcje, koncentrując się na balansie głównego i dodatkowego przycisku. 

Chcemy, aby główny przycisk wyróżniał się, ponieważ jest to nasze główne wezwanie do działania, a drugi przycisk jest widoczny i dostępny bez wyprzedzania głównego przycisku.

Zasady projektowania przycisków głównych i dodatkowych

Przyciski główne i pomocnicze pomagają w prowadzeniu odwiedzający swój Witryna internetowa do niektórych zapasów. Przyciski podstawowe są zwykle najczęściej wykonywaną lub pożądaną akcją, a przyciski drugorzędne są mniej popularną czynnością. To pomaga kierować odwiedzający dokąd chcą iść.

Aby to zrobić, przyciski podstawowe powinny wyróżniać się wizualnie, a przyciski pomocnicze nie powinny się tak bardzo wyróżniać. Oznacza to, że główne przyciski powinny być bardziej charakterystyczne i mieć większą wagę wizualną, aby przyciągać więcej uwagi.

Teraz, gdy rozumiemy, jak działają przyciski główne i dodatkowe, przejdźmy do samouczka!

badanie

Oto spojrzenie na trzy nagłówki o pełnej szerokości, które będziemy dzisiaj projektować.

Zacznijmy od stworzenia nowej strony za pomocą Divi Builder

Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.

Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder

Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Czytaj także: Divi: Jak używać masek i wzorów tła w sekcji bohaterów

Projekt pierwszego przykładu

Teraz, gdy nasza strona jest skonfigurowana, zacznijmy od nagłówka o pełnej szerokości strony docelowej UX.

Konfiguracja naszej strony

Zanim zaczniemy dostosowywać, będziemy musieli załadować predefiniowany pakiet układu UX z biblioteki Divi. Gdy aktywujesz Visual Builder, pojawią się trzy opcje, wybierz Przeglądaj układy.

Załaduj pakiet układu

Aby załadować pakiet układu UX na swoją stronę:

1. W zakładce „Gotowe układy”, użyj funkcji wyszukiwania, aby znaleźć pakiet układu UX.
2. Gdy go znajdziesz, kliknij go. Spowoduje to wyświetlenie szczegółów układu i dostępnych stron.
3. Kliknij Lądowanie, a następnie kliknij przycisk „Użyj tego układu”.

Odtworzymy górną część układu jako moduł Nagłówek o pełnej szerokości.

Usuń pierwszą sekcję

Ponieważ zamierzamy odtworzyć pierwszą sekcję za pomocą modułu nagłówka o pełnej szerokości, będziemy musieli usunąć tę sekcję. Najedź kursorem na sekcję i kliknij ikonę kosza.

Dodaj sekcję o pełnej szerokości

Zanim będziemy mogli dodać nagłówek o pełnej szerokości, musimy dodać sekcję o pełnej szerokości.

Kliknij strzałkę „+” aby wyświetlić sekcje Divi, a następnie kliknij "Pełna szerokość". Spowoduje to automatyczne wyświetlenie biblioteki Divi Fullwidth Module.

Dodaj nagłówek o pełnej szerokości

W bibliotece modułu Divi Fullwidth kliknij „ Nagłówek o pełnej szerokości”.

Dodaj treść

Zanim zaczniemy dostosowywać moduł, dodajmy go treść wymagane dla tego modułu.

Dodaj treść tekstową

Na karcie Tekst dodaj plik treść suivant:

1. Tytuł: Popraw swoją wiedzę na temat projektowania UX
2. Podtytuł: Kurs projektowania UX
3. Przycisk nr 1: Przegląd kursu
4. Przycisk #2: Dowiedz się więcej
5. Ciało: domyślnie

Dodaj zdjęcia

Teraz, gdy mamy swoje treść tekst na miejscu, musimy dodać dwa obrazy do naszego projektu.

1. W zakładce Obrazy, dodaj obraz logo (gwiazdki) i obraz nagłówka (zdjęcie osoby trzymającej telefon).

Zmień kolor tła

W zakładce Tło, skonfiguruj ten parametr:

1. Kolor tła: #131517

Dostosuj nagłówek o pełnej szerokości

Teraz, gdy nasza zawartość jest już skonfigurowana, dodajmy do niej trochę stylu za pomocą Wnętrze.

Przewiń w dół ikona

Dodajmy ikonę przewijania w dół, strzałkę w dół.

1. Pokaż przycisk przewijania w dół: TAK.
2. Wybierz ikonę strzałki w dół.
3. Kolor ikony przewijania w dół: #000

Obraz

Dodajmy krzywe do naszych obrazów, zaokrąglając rogi.

W zakładce Obraz, skonfiguruj następujące ustawienia:

1. Zaokrąglone rogi obrazu : Kliknij przycisk łańcucha, aby odłączyć rogi, a następnie wpisz 1000px w lewym dolnym i prawym dolnym polu wprowadzania. To zaokrągli lewy dolny i prawy dolny róg naszych obrazów.

Tekst tytułu

Tutaj dostosujmy tekst tytułu tego modułu. W zakładce Tekst tytułu, skonfiguruj te ustawienia:

• Tytuł:
  • Czcionka: PT Sans
  • Waga czcionki: pogrubiona
  • Rozmiar tekstu: 5 rem
  • Wysokość linii: 1,2 em

Ciało tekstu

W tym miejscu dostosowujemy tekst podstawowy dla tego modułu. w zakładce tekst-treść, skonfiguruj te ustawienia:

1. Czcionka ciała: Mukta
2. Rozmiar tekstu ciała: 18px

Tekst napisów

Tutaj dostosowujemy tekst podpisu dla tego modułu. W zakładce Tekst napisów, skonfiguruj te ustawienia:

• Podtytuł:
  • Czcionka: Mukta
  • Waga czcionki: pogrubiona
  • Styl: wielkie litery
  • Kolor tekstu: #13d678
  • Odstępy między literami: 3px

przycisk pierwszy

Tutaj możemy zdefiniować niestandardowe style dla przycisku pierwszego: główny przycisk. W zakładce Przycisk Jeden, skonfiguruj te ustawienia:

• Użyj niestandardowego stylu dla przycisku pierwszego: TAK
• Przycisk pierwszy:
  • Kolor tekstu: #ffffff
  • Kolor tła: #13d678
  • Szerokość obramowania: 0 pikseli
  • Promień obramowania: 100px
  • Czcionka: Mukta
  • Waga czcionki: pogrubiona
• Pokaż ikonę przycisku jednej: TAK
• Ikona: Strzałka w prawo
• Pokaż tylko ikonę po najechaniu na przycisk pierwszy: Nie

Przycisk drugi

Teraz dostosujmy drugi: drugi przycisk. W zakładce Przycisk dwa, skonfiguruj te ustawienia:

• Użyj niestandardowego stylu dla przycisku: TAK
  • Przycisk dwa
  • Kolor tekstu: #ffffff
  • Kolor tła: #303030
  • Szerokość obramowania: 0 pikseli
  • Promień obramowania: 100 pikseli
  • Czcionka: Mukta
  • Waga czcionki: pogrubiona
• Pokaż ikonę przycisku dwie: tak
• Ikona drugiego przycisku: Strzałka w prawo
• Pokaż tylko ikonę na drugim przycisku najechania: TAK

Dodaj linki do przycisków

Nie zapomnij dodać linków do swoich przycisków! W zakładce Połączyć, skonfiguruj następujące ustawienia:

1. Przycisk nr 1 Link URL: Wklej tutaj adres URL przycisku 1.
2. Przycisk nr 1 Link URL: Wklej tutaj adres URL przycisku 2.

Zapisz swoją pracę

Teraz, gdy mamy już w pełni zaprojektowany nagłówek o pełnej szerokości, pamiętaj o zapisaniu swojego projektu!

• Kliknij zieloną strzałkę w prawym dolnym rogu okna modułu.
• Zapisz
• Zamknij VisualBuilder.

Czytaj także: Divi: Jak stworzyć sekcję Fluid Hero

Baw się eksperymentując

Sposoby dostosowania modułu nagłówka Divi Fullwidth Header są nieograniczone. Korzystanie z przycisku głównego i przycisku dodatkowego może pomóc w kierowaniu odwiedzający do strony, którą chcesz, aby wyświetlił, lub do podjęcia działania (np. przesłania prośby), które chcesz, aby wykonał.

Przyjrzyjmy się dwóm kolejnym przykładom nagłówków o pełnej szerokości, które mają wyróżniający się przycisk podstawowy.

Nagłówek o pełnej szerokości z pakietu „Centrum emerytalne”

Style przycisków

Przyjrzyjmy się unikalnym stylom przycisków podstawowych i dodatkowych.

przycisk pierwszy

Na karcie Przycisk pierwszy skonfiguruj następujące ustawienia:

• Użyj niestandardowych stylów dla przycisku pierwszego: TAK
• Przycisk pierwszy:
  • Rozmiar tekstu: 14px
  • Kolor tekstu: #ffffff
  • Kolor tła: #0a0a0a
  • Szerokość obramowania: 0 pikseli
  • Promień graniczny: 10px
  • Odstępy między literami: 3px
  • Waga czcionki: pogrubiona
  • Styl czcionki: TT
• Pokaż tylko ikonę po najechaniu na Buttpn One: TAK
• Wypełnienie jednego przycisku: 15 pikseli (góra i dół), 25 pikseli (lewy i prawy)

Przycisk drugi

W zakładce Przycisk dwa, skonfiguruj następujące ustawienia:

• Użyj niestandardowego stylu dla przycisku: TAK
  • Przycisk drugi:
  • Rozmiar tekstu: 14px
  • Kolor tekstu: #ffffff
  • Kolor tła: #0a0a0a
  • Szerokość obramowania: 0 pikseli
  • Promień graniczny: 10px
  • Waga czcionki: pogrubiona
  • Styl czcionki: TT
• Przycisk Dwa Padding: 10px (dół), 10px (lewy i prawy)

I proszę bardzo! Dwa unikalne przyciski, jeden, który się wyróżnia, a drugi zajmuje drugie miejsce.

Pełnowymiarowy nagłówek pakietu „Planowanie finansowe”.

Style przycisków

Przyjrzyjmy się unikalnym stylom przycisków podstawowych i dodatkowych.

przycisk pierwszy

W zakładce Przycisk pierwszy, skonfiguruj następujące ustawienia:

• Użyj niestandardowego stylu dla przycisku pierwszego: TAK
• Przycisk pierwszy:
  • Rozmiar tekstu: 18px
  • Kolor tekstu: #ffffff
  • Kolor tła: #1b4ffe
  • Padding: 15px (góra i dół); 25px (lewy i prawy)

Przycisk drugi

W zakładce Przycisk dwa, skonfiguruj następujące ustawienia:

• Użyj niestandardowego stylu dla przycisku drugiego: TAK
• Przycisk drugi:
  • Kolor tekstu: #1b4ffe
  • Kolor tła: przezroczysty
  • Kolor ikony: #1b4ffe

Pobierz DIVI teraz !!!

Wnioski

Moduł nagłówka Fullwidth firmy Divi ułatwia tworzenie wspaniałych sekcji Hero na Twoim komputerze Witryna internetowa. 

Strategiczne użycie przycisków podstawowych i dodatkowych poprawi wygodę użytkownika i pomoże odwiedzającym witrynę podjąć działania, które chcą podjąć. 

Opcje dostosowywania są nieograniczone dzięki nagłówkowi o pełnej szerokości, więc baw się dobrze, eksperymentując!

Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.

Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...