Jak tworzyć przyklejone tytuły sekcji za pomocą Divi

Sposób, w jaki projektujesz swoje strony, jest bezpośrednim odzwierciedleniem Twojej marki. Dlatego w pewnym momencie swojej burzy mózgów możesz chcieć znaleźć i dodać do swojej witryny unikalne elementy projektu, które pomogą wygenerować wzór na wszystkich stronach. Jednym z unikalnych sposobów podkreślenia tożsamości Twojej witryny jest używanie przyklejonych tytułów sekcji. Te przyklejone tytuły sekcji będą podążać za zachowaniem nawigacji użytkowników, trzymając się górnej części ich przeglądarki. W tym samouczku pokażemy, jak tworzyć przyklejone tytuły sekcji za pomocą przyklejonych opcji Divi. Przyklejone tytuły sekcji będą mniej podkreślane, gdy odwiedzający będą przewijać, ale będą wystarczająco widoczne, aby rozpoznali sekcję, w której się znajdują. 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 układ za DARMO

Aby położyć ręce na darmowym układzie, najpierw musisz je 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!

Subskrybuj nasz kanał YouTube

1. Utwórz projekt przekroju

Dodaj nową sekcję

Rozstaw

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zastosuj górną i dolną wyściółkę.

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

Dodaj wiersz nr 1

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
• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Teraz dodaj moduł tekstowy do kolumny wiersza i wstaw wybrane przez siebie treści H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu modułu i zmodyfikuj ustawienia tekstu H2 w następujący sposób:

• Czcionka nagłówka 2: Poppins
• Grubość czcionki nagłówka 2: pół pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2:
  • Komputer stacjonarny: 20vw
  • Tablet i telefon: 28vw

Dodaj wiersz nr 2

Struktura kolumny

Dodaj kolejny wiersz tuż poniżej poprzedniego, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i odpowiednio zmień ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

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

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Kolor tekstu: #000000
• Rozmiar czcionki:
  • Komputer stacjonarny: 2vw
  • Tablet: 4vw
  • Telefon: 5vw
• Odstępy między literami tekstu: -0,1vw
• Wysokość linii tekstu: 1,6 em

Rozmiary

Zmodyfikuj również ustawienia rozmiaru dla różnych rozmiarów ekranu.

• Szerokość:
  • Komputer stacjonarny: 70%
  • Tablet i telefon: 90%
• Wyrównanie modułu: Środek

Dodaj moduł obrazu do kolumny 2

Załaduj obrazek

Przejdźmy do następnego modułu, którym jest moduł obrazu. Prześlij wybrany obraz.

Rozmiary

Przejdź do zakładki projektu modułu i wymuś pełną szerokość obrazu.

• Wymuś pełną szerokość: tak

Rozstaw

Dodaj też górny margines.

• Górny margines: 100px

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Następnie mamy moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Zmień odpowiednio ustawienia przycisków modułu:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku:
  • Komputer stacjonarny: 1,5vw
  • Tablet: 2,5vw
  • Telefon: 3.5vw
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #f6223e
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Poppins
• Pokaż ikonę przycisku: Tak
• Umieszczenie ikony przycisku: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk: Nie

Rozstaw

I uzupełnij ustawienia modułu, dodając niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka:
  • Komputer stacjonarny i tablet: 3%
  • Telefon: 5%
• Dolna wyściółka:
  • Komputer stacjonarny i tablet: 3%
  • Telefon: 5%
• Lewa wyściółka:
  • Pulpit: 5vw
  • Tablet: 8vw
  • Telefon: 12vw
• Prawa wyściółka:
  • Pulpit: 5vw
  • Tablet: 8vw
  • Telefon: 12vw

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość listy punktowanej

Następnym i ostatnim modułem, który dodamy do tej kolumny, jest kolejny moduł tekstowy. Dodaj wybrane elementy listy do pola treści.

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Kolor tekstu: #000000
• Rozmiar czcionki:
  • Komputer stacjonarny: 2vw
  • Tablet: 4vw
  • Telefon: 5vw
• Odstępy między literami tekstu: -0,1vw
• Wysokość linii tekstu: 1,6 em

Ustawienia tekstu listy uporządkowanej

Wprowadź również pewne zmiany w ustawieniach tekstu uporządkowanej listy.

• Kolor tekstu listy uporządkowanej: #ff2340
• Wysokość linii zamówionej listy: 1,6 em
• Typ uporządkowanej listy: górny-rzymski
• Pozycja stylu listy uporządkowanej: Na zewnątrz

Dodaj czarny kolor tekstu do poszczególnych pozycji listy w polu zawartości

Następnie przywrócimy elementy z powrotem do czarnego, przechodząc do pola treści i ręcznie dodając czarny kolor tekstu do każdego elementu listy.

Rozmiary

Następnie zmienimy ustawienia rozmiaru dla różnych rozmiarów ekranu.

• Szerokość:
  • Komputer stacjonarny: 70%
  • Tablet i telefon: 90%
• Wyrównanie modułu: Środek

Rozstaw

Zastosujemy również niestandardowe wartości marginesów i dopełnienia do ustawień odstępów modułu.

• Górny margines: 50px
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

2. Zastosuj efekt przyklejenia do tytułu sekcji

Dodaj lepki efekt do wiersza

Teraz, gdy stworzyliśmy podstawy naszego projektu, nadszedł czas, aby uzyskać efekt, który widzieliście na podglądzie tego posta. Aby to zrobić, zmienimy cały nasz pierwszy wiersz na lepkość, otwierając ustawienia wiersza, przechodząc do zakładki Zaawansowane i stosując następujące ustawienia:

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

Zmodyfikuj indeks wiersza Z

Aby upewnić się, że przyklejony rząd pozostanie poniżej drugiego rzędu w naszym projekcie, przypiszemy do naszego przyklejonego rzędu indeks az równy „1”. Podczas przewijania zobaczysz przyklejony wiersz, a jego moduł tekstowy znajduje się poniżej modułów drugiego wiersza.

• Indeks Z: 1

Dodaj tryb mieszania w kolumnie 2 (wiersz nr 2)

Jednak, jak możesz zauważyć na podglądzie tego posta, przyklejony tytuł sekcji jest widoczny przez cały czas. Aby osiągnąć ten efekt, dodamy moduł blend do drugiej kolumny naszego drugiego rzędu. Pomoże to połączyć lepki rząd i moduły w drugim rzędzie, jednocześnie utrzymując niski wskaźnik z dla lepkiego rzędu.

• Tryb mieszania: pomnóż

Zmień ustawienia przyklejonego tekstu H2

Zastosujemy też kilka lepkich stylów do naszego modułu tekstowego w wierszu 1. Zacznij od zmiany koloru tekstu H2 w stanie lepkim i zastosuj również niestandardowy cień tekstu.

• Przyklejony kolor tekstu H2: #ffffff
• Cień tekstu nagłówka 2: Druga opcja (patrz ekran drukowania poniżej)
• Kolor cienia tekstu nagłówka 2:
  • Domyślnie: rgba(0,0,0,0)
  • Przyklejony: rgba(0,0,0,0.08)

Zmień odstępy między modułami przyklejonego tekstu

Zmienimy również pozycję modułu, używając ujemnego lepkiego lewego marginesu w ustawieniach odstępów

• Lepki lewy margines: -35%

Zwiększ czas trwania przejścia modułu tekstowego

Aby zapewnić płynne przejście, zwiększymy czas trwania przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 500 ms

3. Sekcja ponownego wykorzystania

Sekcja klonowania

Teraz, gdy mamy jedną ukończoną sekcję, w tym przyklejony tytuł sekcji, możemy ponownie wykorzystać całą sekcję tyle razy, ile chcemy, klonując ją.

Zmień zawartość tytułu

Upewnij się, że zmieniłeś treść tytułu w pierwszym wierszu.

Dopasuj rozmiar tekstu do długości znaków

W zależności od tego, ile znaków ma twój nowy tytuł H2, możesz dostosować rozmiar tekstu nagłówka 2.

Zmień wszystkie inne treści i obrazy

I oczywiście będziesz musiał również zmienić całą inną zawartość w sekcji duplikatów. Otóż ​​to!

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 lepkim opcjom Divi. Mówiąc dokładniej, pokazaliśmy, jak tworzyć przyklejone tytuły sekcji, które podążają za odwiedzającymi przez cały tworzony projekt. Ten efekt nadaje Twojemu projektowi dodatkowy wymiar i płynne przejście. 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.