Jak połączyć nakładanie się z lepkimi opcjami Divi, aby tworzyć bezproblemowe przejścia?

Wraz z rozwojem technologii ewoluuje również projekt. Bardziej niż kiedykolwiek możesz natknąć się na strony internetowe, które wprawiają w zdumienie i zastanawiają się, jak zostały stworzone. Chociaż strony internetowe, które mają interakcje z przewijaniem, nie są przeznaczone dla każdego rodzaju działalności, wiedza o tym, jak pójść o krok dalej, jest szczególnie pomocna, aby pozostawić dobre wrażenie. Dzięki Divi wiele rzeczy jest już możliwych bez konieczności dotykania jednej linii kodu. Dzisiejszy samouczek pomoże Ci zrozumieć Divi z innej perspektywy. Pokażemy Ci, jak połączyć lepkie opcje Divi z innymi wbudowanymi ustawieniami, aby tworzyć bezproblemowe przejścia. 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ć swoje ręce na darmowym układzie, najpierw musisz go 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!

1. Odtwórz strukturę projektu

Dodaj nową sekcję

Rozstaw

W pierwszej części tego samouczka skupimy się na odtworzeniu struktury projektu w Divi. Następnie, w części drugiej, poświęcimy czas na przeglądanie wszystkich przyklejonych opcji, aby osiągnąć efekt, który można zauważyć na podglądzie tego posta. Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji, przejdź do zakładki projektowania i dodaj dolną wyściółkę.

• Dolna wyściółka: 100vh

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze modułów, otwórz ustawienia wierszy, przejdź do zakładki projekt i odpowiednio zmień ustawienia rozmiaru:

• Szerokość: 90%
• Maksymalna szerokość: 100%

Indeks Z

Przypisz indeks az również do tego wiersza.

• Indeks Z: 1

Dodaj moduł obrazu do kolumny

Pozostaw puste pole obrazu

Czas na dodanie modułów, zaczynając od modułu obrazu. Pozostaw pole zawartości puste.

Zamiast tego użyj obrazu tła

Zamiast tego użyj wybranego obrazu tła.

• Rozmiar obrazu tła: okładka

Rozmiary

Następnie zmień szerokość modułu.

• Szerokość: 100%

Rozstaw

Następnie zastosuj niestandardowe górne i dolne wyściółki do ustawień odstępów.

• Górna wyściółka: 40vh
• Dolna wyściółka: 40vh

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Przejdź do następnego modułu, który jest modułem tekstowym zawierającym wybrane przez Ciebie treści H2.

Ustawienia tekstu H2

Zmień odpowiednio ustawienia tekstu H2 modułu:

• Czcionka nagłówka 2: Montserrat
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2:
  • Komputer stacjonarny: 10vw
  • Tablet: 14vw
  • Telefon: 15vw
• Nagłówek 2 Odstępy między literami: -0,5vw

Rozmiary

Upewnij się, że moduł ma również „100%”.

• Szerokość: 100%

Pozycja

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

• Pozycja: bezwzględna
• Lokalizacja: Centrum

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu. Użyj następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza, przejdź do zakładki projekt i zmień ustawienia rozmiaru w następujący sposób:

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

Indeks Z

Przypisz indeks az również do tego wiersza.

• Indeks Z: 2

Odstęp kolumny 1

Uzupełnij ustawienia wiersza, otwierając ustawienia pierwszej kolumny i przypisując dopełnienie lewe i prawe.

• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H3

Teraz, gdy ustawienia wierszy są gotowe, nadszedł czas na dodanie modułów. Dodaj moduł tekstowy do kolumny 1 z wybraną zawartością H3.

Ustawienia tekstu H3

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

• Czcionka nagłówka 3: Montserrat
• Styl czcionki nagłówka 3: Podkreślenie
• Nagłówek 3 Kolor podkreślenia: #ffffff
• Nagłówek 3 Styl podkreślenia: Jednolity
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3:
  • Komputer stacjonarny: 4vw
  • Tablet i telefon: 10vw
• Nagłówek 3 Odstępy między literami: -3px

Rozstaw

Dodaj odpowiednie dopełnienie na mniejszych rozmiarach ekranu.

• Prawa wyściółka: 20% (tylko tablet i telefon)

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy do kolumny 2 z wybraną zawartością opisu.

Kolor tła

Następnie zmień kolor tła.

• Kolor tła: #ffffff

Ustawienia tekstu

Następnie zmodyfikuj ustawienia tekstu w następujący sposób:

• Czcionka tekstu: wyświetlacz Playfair
• Styl czcionki tekstu: kursywa
• Rozmiar czcionki:
  • Komputer stacjonarny: 1,6vw
  • Tablet: 3vw
  • Telefon: 4vw
• Wysokość linii tekstu: 1,5 em

Rozstaw

Zastosuj również niestandardowe wartości dopełnienia.

• Górna wyściółka: 10vh
• Dolna wyściółka: 10vh
• Lewa wyściółka: 10%
• Prawa wyściółka: 10%

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Następny i ostatni moduł, który dodamy, to moduł przycisku do kolumny 2. Dodaj wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projektowania modułu i zmień ustawienia przycisków w następujący sposób:

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

• Styl czcionki przycisku: podkreślenie
• Kolor podkreślenia przycisku: #000000
• Styl podkreślenia przycisku: Jednolity

Rozstaw

Dodaj również niestandardowe 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

2. Zastosuj lepkie efekty

Moduł obrazu w rzędzie nr 1

Przyklejone ustawienia

Teraz, gdy stworzyliśmy podstawy naszego projektu, nadszedł czas, aby zacząć stosować niestandardowe efekty przyklejania. Otwórz moduł obrazu w rzędzie nr 1 i przyklej moduł w następujący sposób:

• Lepka pozycja: trzymaj się u góry
• Dolny limit lepkości: sekcja
• Odsunięcie od otaczających lepkich elementów: Nie

Lepkie zaklejanie

Po zastosowaniu lepkich ustawień możemy również zmienić lepkie style naszego modułu. Pierwszą rzeczą, którą zrobimy, jest zmiana szerokości w stanie lepkim.

• Lepka szerokość: 80%

Lepkie odstępy

Następnie zmodyfikujemy lepką górną i dolną wyściółkę.

• Lepka wyściółka górna: 50vh
• Lepka wyściółka dolna: 50vh

Lepkie tło gradientowe

Do naszego modułu również zastosujemy lepkie tło gradientowe.

• Kolor 1: #00336b
• Kolor 2: rgba (41,196,169,0)
• Typ gradientu: liniowy
• Kierunek gradientu: 90 stopni
• Umieść gradient nad obrazem tła: Tak

Przemiana

Aby zapewnić płynne przejście, wydłużymy czas trwania przejścia modułu.

• Czas trwania przejścia: 1500 ms

Kolumna 2 w rzędzie #2

Kolumna 2 Ustawienia lepkie

Następnie zmienimy również drugą kolumnę naszego drugiego rzędu na lepką.

• Lepka pozycja: trzymaj się u góry
• Przyklejony górny offset: 150px
• Dolny limit lepkości: sekcja
• Odsunięcie od otaczających lepkich elementów: Nie
• Domyślne i trwałe style przejścia: Nie

Moduł tekstowy w lepkiej kolumnie

Lepki kolor tła

Teraz, gdy kolumna 2 wiersza nr 2 została przyklejona, możemy zastosować kilka lepkich stylów do modułu tekstowego wewnątrz tej kolumny. Zacznij od zmiany koloru tła w stanie lepkim.

• Lepki kolor tła: #333333

Przyklejony kolor tekstu

Następnie zmodyfikuj kolor tekstu w stanie lepkim.

• Przyklejony kolor tekstu: #ffffff

Przemiana

I uzupełnij ustawienia modułu, zwiększając czas trwania przejścia w zakładce Zaawansowane. Otóż ​​to!

• Czas trwania przejścia: 1000 ms

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 łączyć nakładanie się z lepkimi opcjami Divi, aby tworzyć łatwe przejścia. Po zapoznaniu się z podejściem stosowanym w tym samouczku będziesz mógł tworzyć nieskończone różne wariacje. 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.