Divi: Jak dołączyć przycisk przewijania w dół w module nagłówka o pełnej szerokości?

Czy chcesz dodać do swojego modułu nagłówka o pełnej szerokości z Divi przycisk przewijania w dół?

Moduł nagłówka o pełnej szerokości z Divi zawiera przycisk informujący użytkownika, że ​​może przewijać w dół. Po kliknięciu są automatycznie przekierowywani do następnej sekcji. Jest to prosty przycisk z wieloma ikonami do wyboru, a jego kolor i rozmiar można w pełni dostosować. 

W tym artykule zobaczymy, jak go dostosować, i zobaczymy cztery przyciski przewijania w dół, które można uwzględnić w module nagłówka o pełnej szerokości. Zobaczymy również, jak dostosować go za pomocą CSS, aby uzyskać jeszcze więcej opcji projektowych.

Zacznijmy!

Przegląd przycisków przewijania w dół

Najpierw spójrzmy na projekty, które będziemy tworzyć w tym artykule.

Przykład 1

Przykład 2

Pobierz DIVI teraz !!!

Przykład 3

Przykład 4

Pobierz DIVI teraz !!!

Przyciski przewijania w dół Konstrukcja nagłówka o pełnej szerokości

Najpierw utworzymy projekt nagłówka o pełnej szerokości. Buduję go od podstaw, korzystając z projektów z darmowy pakiet układu terapii dostępny w Divi . Utwórz nową stronę i dodaj moduł nagłówka o pełnej szerokości do nowej sekcji o pełnej szerokości.

Zobacz też: Divi: Jak stworzyć schemat organizacyjny za pomocą modułu Blurb

Dzielnik sekcji o pełnej szerokości

Do tego nagłówka o pełnej szerokości dodamy dzielnik. Otwórz ustawienia sekcja o pełnej szerokości .

Następnie przewiń w dół do dzielnik . Kliknij na zakładkę Dolny i wybierz ósmy styl separatora. Ustaw kolor na #e8e5f8 i wpisz 0vw jako wysokość. Zamknij ustawienia sekcji.

• Dzielniki: Niskie
• Styl: 8. styl
• Kolor: #e5e8f0
• Wzrost: 10vw

Tekst nagłówka

Następnie otwórz moduł Fullwidth Header i dodaj tytuł, podtytuł i tekst przycisku. Usuń fikcyjny tekst dla treść ciała i pozostawić je puste.

• Tytuł: Rozpocznij swoją podróż, by poczuć się lepiej już dziś.
• Podtytuł: Leslie Saindon, licencjonowany terapeuta
• Przycisk nr 1: Umów się na wizytę
• body: brak

Obrazy nagłówka

Przewiń do Obrazy i wybierz obraz nagłówka. Wybieram obraz dostarczony z Pakiet układu terapii.

Tło nagłówka

Przewiń do Tło. Usuń kolor tła i wybierz kartę Gradient tła.

• Gradient zatrzymuje się:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

umożliwiać Umieść gradient nad obrazem tła .

• Kwadratowy gradient nad obrazem tła : TAK

Obraz tła nagłówka o pełnej szerokości

Następnie wybierzZakładka Obraz tła i wybierz obraz pełnoekranowy. Używam innego obrazu z pakietu Therapy Layout Pack.

• Pozycja obrazu tła: górny środek

Układ nagłówka o pełnej szerokości

Następnie wybierzkarta projektu i aktywuj Ustaw pełny ekran .

• Ustaw pełny ekran: TAK

Ikona przewijania nagłówka o pełnej szerokości

Następnie aktywuj Pokaż przycisk przewijania w dół. W naszych przykładach nadamy styl temu przyciskowi, więc na razie zostawimy go w ustawieniach domyślnych.

• Pokaż przycisk przewijania w dół: TAK

Obraz nagłówka

Następnie przewiń w dół do Obraz i zmień górne lewe zaokrąglone rogi na 200px dla komputerów stacjonarnych. Ustaw resztę zaokrąglonych rogów na 0px. Zmień zaokrąglone rogi na 100 pikseli dla tabletów i telefonów.

• Zaokrąglone rogi obrazu:
  • Pulpit: 200px u góry po lewej, 0px wszystkie inne
  • Tablet i telefon: 100px w lewym górnym rogu, 0px wszystkie inne

Tekst tytułu nagłówka

Następnie przewiń w dół do Tekst tytułu. Użyj H1 dla poziomu kursu. Wybierz Cormorant Garamond jako czcionkę tytułową, ustaw grubość na Pogrubienie, a kolor na #e1ecea.

• Tytuł:
  • Poziom nagłówka: H1
  • Czcionka: Kormoran Garamond
  • Waga czcionki: pogrubiona
  • Kolor tekstu: #e1ecea

Następnie ustaw taille dla wszystkich trzech rozmiarów ekranu. Użyj 90 pikseli dla komputerów stacjonarnych, 40 pikseli dla tabletów i 24 pikseli dla telefonów. Zmień wysokość linii na 1.1em.

• Rozmiar tekstu tytułu: 90px, 40px, 24px
• Wysokość wiersza tytułu: 1,1 em

Tekst napisów nagłówka o pełnej szerokości

Następnie przewiń w dół do Tekst napisów. Zmień czcionkę na Inter, grubość na pogrubienie, a kolor na #e1ecea.

• Podtytuł:
  • Czcionka: Inter
  • Waga czcionki: pogrubiona
  • Kolor tekstu: #e1ecea

Zdefiniuj taille 22px dla komputerów stacjonarnych, 20px dla tabletów i 16px dla telefonów. Zmień to wysokość wiersza o 1,6 godz.

• Rozmiar tekstu napisów: 22px, 20px, 16px
• Wysokość linii napisów: 1,6 em

przycisk nagłówka

Przewiń w dół do Ustawień Przycisk pierwszy i aktywuj Użyj niestandardowych stylów dla przycisku pierwszego . Zmień rozmiar na 14px, kolor tekstu na #2e5b61, a kolor tła na #e1ecea.

• Użyj niestandardowych stylów dla przycisku pierwszego: TAK
• Przycisk pierwszy
  • Rozmiar tekstu: 14 pikseli
  • Kolor tekstu: #2e5b61
  • Tło: #e1ecea

Zmień szerokość obrzeże przy 0px i promieniu obrzeże przy 50px. Użyj Inter jako czcionki i zmień grubość na pół pogrubioną.

• Przycisk pierwszy:
  • Szerokość obramowania: 0px
  • Promień graniczny: 50px
  • Czcionka: Inter
  • Waga: pogrubienie

dla wypełnienie guzików , użyj 20 pikseli dla góry i dołu oraz 40 pikseli dla lewej i prawej strony.

• Button One Padding: 20 pikseli góra i dół, 40 pikseli lewo i prawo

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

Przykłady przycisków przewijania w dół

Teraz, gdy mamy nasz nagłówek o pełnej szerokości, zobaczmy, jak dostosować przyciski przewijania w dół. Przyjrzymy się czterem przykładom z różnymi kombinacjami ikon, kolorów i rozmiarów.

Przyciski przewijania w dół zawierają trzy parametry. Każde ustawienie można regulować niezależnie dla każdego rozmiaru ekranu. Parametry obejmują:

• Wybór ikon – do wyboru 11 ikon. Obejmują one różne projekty strzałek z tłem lub bez, w tym nieokreślone, zakreślone i pełne.
• Kolor – próbnik kolorów Divi norma.
• Rozmiar – standardowa regulacja rozmiaru Divi.

Zawiera również pole CSS na karcie Zaawansowane. 

Wykorzystamy wszystkie te parametry.

Zobacz też: Divi: 5 nakładek masek i wzorów mających zastosowanie do obrazu tła

Przykład 1

W naszym pierwszym przykładzie użyjemy nieokreślonej ikony bez tła. Wybierz pierwszą ikonę, zmień kolor na #e1ecea i zmień rozmiar na 66px dla komputerów stacjonarnych, 60px dla tabletów i 50px dla telefonów.

• Ikona: pierwsza ikona
• Kolor: #e1ecea
• Rozmiar: 66 pikseli (komputer stacjonarny i tablet), 50 pikseli (telefon)

Tworzy to jasnozieloną strzałkę w dół, która dobrze współgra z resztą projektu i wyróżnia się na tyle, aby poinformować użytkownika.

Przykład 2

W naszym drugim przykładzie użyjemy ikony zakreślonej kółkiem. Wybierz siódmą ikonę i zmień kolor na #e8c553. Zamierzamy powiększyć ikonę tego. Zmień rozmiar na 78px dla komputerów stacjonarnych, 70px dla tabletów i 60px dla telefonów.

• Ikona: siódma ikona
• Kolor: #e8c553
• Rozmiar: 78px (komputer), 70px (tablet), 60px (telefon)

Ten kolor jest odmianą żółtego w pakiecie układu, ale jest jaśniejszy i najlepiej sprawdza się na zielonym tle. Ikona ma ostre rogi, ale okrąg pasuje do zaokrąglonego wyglądu układu.

Przykład 3

W naszym trzecim przykładzie użyjemy ikony otoczonej okręgiem i tła. Powoduje to pokolorowanie tła i utworzenie ikony z przesłoną, która pokazuje obraz tła Witryna internetowa. 

Aby uzyskać najlepsze wyniki, musimy zwrócić szczególną uwagę na rozmiar ikony i kolor tła przycisku.

Wybierz ósmą ikonę i zmień jej kolor na #0e4951. Ustaw rozmiar na 60px dla komputerów stacjonarnych, 56px dla tabletów i 50px dla telefonów.

• Ikona: ósma ikona
• Kolor: #0e4951
• Rozmiar: 60px (komputer), 56px (tablet), 50px (telefon)

Zielony to ciemniejszy odcień zieleni w tle. Ciemniejszy odcień wyróżnia się na tle zieleni i nadal pasuje do reszty układu.

Przykład 4

Co zrobić, jeśli chcesz połączyć kolory, aby mieć kolor tła za ikoną wycięcia? Możemy to zrobić za pomocą CSS. 

W tym przykładzie użyjemy CSS, aby utworzyć kształt tła za ikoną, który będzie widoczny przez ikonę wycięcia. Sama ikona użyje standardowych ustawień.

Wybierz jedenastą ikonę i zmień kolor na #e1ecea. W tym przypadku ustawimy mniejszą ikonę i utworzymy duży kształt tła. Zmień rozmiar na 50px dla komputerów stacjonarnych, 40px dla tabletów i 30px dla telefonów.

• Ikona: 11^th
• Kolor: #e1ecea
• Rozmiar: 50px (komputer), 40px (tablet), 30px (telefon)

Następnie przejdź do zakładki Zaawansowane i przewiń do pola Przycisk przewijania w dół i wprowadź ten CSS:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Ten format CSS dodaje dopełnienie na górze, po prawej, na dole i po lewej stronie. Użyłem tego dopełnienia, aby stworzyć owal tła, który dobrze pasuje do projektu nagłówka za pomocą przewodników projektowania układu.

Wyniki różnych przykładów

Przykład 1

Przykład 2

Pobierz DIVI teraz !!!

Przykład 3

Przykład 4

Pobierz DIVI teraz !!!

Wnioski

To jest nasz przegląd czterech przycisków przewijania w dół, które możesz uwzględnić w module Divi nagłówka o pełnej szerokości. Przycisk przewijania zawiera kilka ikon do wyboru i możesz ustawić jego kolor i rozmiar. 

Korzystając z pola CSS, możesz jeszcze bardziej dostosować przycisk. Kombinacje opcji stylizacji przycisków i CSS dają wiele możliwości projektowania za pomocą przycisków przewijania w dół.

Mam nadzieję, że będzie to przydatne w Twojej następnej witrynie blogowej. 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.

...