Jak układać wiersze na przewijaniu za pomocą lepkich opcji Divi

Odkąd pojawiły się lepkie opcje Divi, pokazaliśmy Ci sposoby korzystania z różnych funkcji w całej kompilacji witryny, szczególnie w nagłówkach. Istnieje jednak mnóstwo sposobów wykorzystania lepkich opcji, aby poprawić wrażenia użytkownika w Twojej witrynie i sprawić, by Twoja witryna błyszczała. Na przykład w dzisiejszym samouczku pokażemy, jak układać wiersze podczas przewijania za pomocą lepkich opcji Divi. Gdy tylko rząd dotknie górnej części widocznego obszaru, zacznie schodzić poniżej następnego rzędu, co daje efekt nakładania się, który wygląda pięknie. Odtworzymy projekt od zera, a także będziesz mógł bezpłatnie pobrać plik JSON sekcji!

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 układania rzędów ZA DARMO

Aby położyć swoje ręce na dowolnym układzie układania rzędów, musisz najpierw pobrać go 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 koncepcję pierwszego rzędu

Dodaj nową sekcję

Rozstaw

W pierwszej części tego samouczka zaczniemy układać fundamenty naszego pierwszego rzędu. Gdy skończymy stylizować elementy w pierwszym rzędzie, możemy użyć go ponownie, aby stworzyć efekt układania wierszy. Dodaj nową sekcję do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zastosuj niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka:
  • Pulpit: 100px
  • Tablet: 40px
  • Telefon: 25px
• Dolna wyściółka:
  • Pulpit: 100px
  • Tablet: 40px
  • Telefon: 25px

Dodaj nowy wiersz

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 zastosuj następujące ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 90%
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Ustawienia kolumny 1

Kolor tła

Następnie otwórz ustawienia kolumny 1 i zastosuj wybrany kolor tła.

• Kolor tła: #2b343b

Zdjęcie w tle

Użyj również obrazu tła. Jeśli chcesz użyć tych, które są wyświetlane w tym samouczku, pobierz spakowany folder na początku samouczka i prześlij obrazy tła do biblioteki multimediów.

• Rozmiar obrazu tła: Dopasuj

Rozstaw

Przejdź do karty projektu kolumny i zastosuj następujące wartości dopełnienia dla różnych rozmiarów ekranu:

• Górna wyściółka:
  • Komputer stacjonarny: 25%
  • Tabletka: 40%
  • Telefon: 50%
• Dolna wyściółka:
  • Komputer stacjonarny: 25%
  • Tabletka: 40%
  • Telefon: 50%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Ustawienia kolumny 2

Kolor tła

Następnie otwórz drugą kolumnę i użyj tam również koloru tła.

• Kolor tła: #394751

Rozstaw

Wraz z kilkoma niestandardowymi wartościami dopełnienia.

• Górna wyściółka: 13%
• Dolna wyściółka: 13%
• Lewa wyściółka: 8%
• Prawa wyściółka: 8%

Cień Pudełka

I cień pudełkowy.

• Pozycja pionowa cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0.14)

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H2

Czas dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Umieść wybrane treści H2 w polu treści.

Ustawienia tekstu H2

Przejdź do zakładki projektu modułu i odpowiednio dostosuj ustawienia tekstu H2:

• Czcionka nagłówka 2: Alata
• Grubość czcionki nagłówka 2: pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2:
  • Pulpit: 200px
  • Tablet: 150px
  • Telefon: 100px
• Nagłówek 2 Odstępy między literami: -1px

Pozycja

Zmień położenie modułu również w zakładce Zaawansowane.

• Pozycja: bezwzględna
• Lokalizacja: górny lewy
• Przesunięcie pionowe: 2%
• Przesunięcie poziome: 2%

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projektu modułu i odpowiednio dostosuj styl przycisku:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #83a5bf
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 1px
• Czcionka przycisku: Alata

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia.

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

Pozycja

I zmień położenie modułu w zakładce Zaawansowane.

• Pozycja: bezwzględna
• Lokalizacja: dolny prawy

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość H3

Do drugiej kolumny. Dodaj pierwszy moduł tekstowy z wybraną zawartością H3.

Ustawienia tekstu H3

Przejdź do zakładki projektu modułu i zastosuj następujące style tekstu H3:

• Czcionka nagłówka 3: Alata
• Grubość czcionki nagłówka 3: pogrubiona
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3: 40px

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Poniżej pierwszego modułu tekstowego dodamy moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Ustawienia linii

Przejdź do zakładki projektu modułu i zmień kolor linii.

• Kolor linii: #f3f0ee

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Waga dzielnika: 5px
• Szerokość: 19%
• Wysokość: 5px

Rozstaw

I uzupełnij ustawienia modułu, dodając trochę dolnego marginesu do ustawień odstępów.

• Dolny margines: 20%

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy tuż pod modułem dzielnika. Wprowadź wybraną treść opisu.

Ustawienia tekstu

Odpowiednio dostosuj tekst modułu:

• Czcionka tekstu: Montserrat
• Kolor tekstu: #ffffff
• Rozmiar czcionki:
  • Pulpit: 15px
  • Tablet i telefon: 14px
• Wysokość linii tekstu: 2em

2. Zamień rząd w element układający w stos

Ustawienia wiersza

Indeks Z

Teraz, gdy mamy już pierwszy wiersz, nadszedł czas, aby zastosować ustawienia lepkiego układania wierszy. Zastosujemy te ustawienia przed sklonowaniem naszego wiersza w celu ponownego użycia, aby efekt kumulacji nastąpił automatycznie. Otwórz ustawienia wiersza, przejdź do zakładki Zaawansowane i zastosuj indeks az równy 1. Ten indeks z pomoże nam upewnić się, że każdy następny wiersz znajduje się na górze poprzedniego.

• Indeks Z: 1

Przyklejone ustawienia

Następnie przejdziemy do ustawień efektów przewijania i zastosujemy następujące przyklejone ustawienia:

• Lepka pozycja:
  • Pulpit: trzymaj się góry
  • Tablet i telefon: nie przykleja się
• Dolny limit lepkości: sekcja
• Odsunięcie od otaczających lepkich elementów: Nie

3. Użyj ponownie rzędu układania w tej samej sekcji

Rzęd klonowania x3

Teraz, gdy nasze opcje przyklejania zostały zastosowane, możemy ponownie wykorzystać cały wiersz tyle razy, ile chcemy.

Zmiany ogólne

Zmień całą kopię

Upewnij się, że zmieniłeś kopię w każdym duplikacie

Zmień kolory i obrazy tła kolumny 1

Wraz z kolorami i obrazami tła w kolumnie 1.

• Duplikat 1: #edc1b6
• Duplikat 2: #efe7e2
• Duplikat 3: #f7f6f4

Zmień kolory tła kolumny 2

Używamy również różnych kolorów dla drugiej kolumny każdego zduplikowanego wiersza.

• Duplikat 1: #ffd1c1
• Duplikat 2: #fff8f2
• Duplikat 3: #fffaf7

Zmień kolory tła przycisku

Następnie zmienimy kolory tła przycisków w każdym zduplikowanym wierszu.

• Duplikat 1: #c18a7a
• Duplikat 2: #bab5b2
• Duplikat 3: #c98f7d

Zmiany w rzędach z jasnymi kolorami tła

Zmień kolory tekstu

I wreszcie, co nie mniej ważne, zmienimy kolor tekstu dla każdego modułu tekstowego w wierszach na jaśniejszy kolor tła. Otóż ​​to!

• Kolor tekstu: #2b343b

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 przyklejonym opcjom Divi w projekcie strony. Mówiąc dokładniej, pokazaliśmy, jak układać wiersze, aby stworzyć atrakcyjny wygląd i wrażenia użytkownika. Odtworzyliśmy piękny przykład projektu od podstaw, a Ty również możesz 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.