Wyprzedaż urodzinowa Elementora

Enjoy 60% Off on new purchases, renewal and upgrades.

00 Dni
:
00 godziny
:
00 Minuty
:
00 sekundy

Kup Teraz

Jak skutecznie scalić lepkie opcje z efektami przewijania w Divi

Rifat Divi Tutorials Oct 15, 2021

Wbudowane opcje Divi Builder można wykorzystać do tworzenia wszystkich pięknych projektów. Przyklejone opcje i efekty przewijania to dwie z tych niesamowitych wbudowanych funkcji Divi , a harmonizując je ze sobą, możemy wykonać bardzo ładne projekty. W dzisiejszym samouczku zobaczymy, jak łatwo zaprojektować stronę, łącząc przyklejone opcje i efekty przewijania, co niewątpliwie posunie przeglądanie stron o krok dalej. Zaprojektujemy sekcję strony, w której obraz będzie pływał z lewej strony, a wcześniej tekst będzie wsuwany z prawej strony. Może to zabrzmieć skomplikowanie, ale zanim przejdziemy do naszego samouczka, sprawdź zajawkę projektu.

zapowiedź

Oto układ projektu, który będziemy dziś tworzyć. Jest to responsywny projekt, więc sprawdzi się również na tabletach i telefonach komórkowych.

Struktura projektu budowlanego

Wstępny projekt przekroju

Tło gradientowe

Najpierw ustalimy strukturę, a później zastosujemy wszystkie ustawienia, aby była lepka i zapewniała płynne przewijanie. Otwórz początkowe ustawienia sekcji i dodaj gradientowy kolor tła.

  • Kolor 1: #854466
  • Kolor 2: #DABFCD
  • Typ gradientu: liniowy
  • Kierunek gradientu: 90 stopni
  • Pozycja startowa: 10%
  • Pozycja końcowa: 10%

Widoczność

Przejdź do zakładki Zaawansowane i ukryjmy widoczność przepełnienia.

Niesamowite oferty

Elementor 6 urodziny z do 60% zniżki

Zacząć teraz
  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: ukryte

Dodawanie wiersza

Struktura kolumny

Dodamy nowy wiersz o następującej strukturze kolumn.

Rozmiary

Otwórz ustawienia rozmiaru dla nowo dodanego wiersza i zmodyfikuj ustawienia, jak wspomniano.

  • Szerokość: 100%
  • Maksymalna szerokość: 2580 pikseli

Rozstaw

Ponadto musimy dodać trochę dolnego marginesu do naszego wiersza.

  • Margines dolny: 50px

Odstęp kolumny 2

Teraz przejdziemy do ustawień kolumny 2 i zmienimy wartości dopełnienia.

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

Kolumna 1: Moduł tekstowy

Dodaj zawartość H3

Dodaj moduł tekstowy do kolumny pierwszej i dodaj kilka wybranych przez siebie kopii.

Tło gradientowe

Dołącz następujące tło gradientowe:

  • Kolor 1: rgba(107,45,18,0,52)
  • Kolor 2: rgba (255,255,255,0)
  • Typ gradientu: liniowy
  • Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Dodaj wybrany obraz i odpowiednio go ustaw.

  • Rozmiar obrazu tła: okładka
  • Pozycja obrazu tła: środek

Ustawienia tekstu H3

Z zakładki projekt teraz zmienimy ustawienia H3.

  • Czcionka nagłówka 3: Prata
  • Styl czcionki nagłówka 3: Wielkie litery
  • Nagłówek 3 Wyrównanie tekstu: do środka
  • Kolor tekstu nagłówka 3: #ffffff
  • Rozmiar tekstu nagłówka 3: 42px
  • Nagłówek 3 Wysokość linii: 1,2 em

Rozstaw

Teraz zmień wartości odstępów dla modułu.

  • Górny margines: 20vh
  • Dolny margines: 20vh
  • Górna wyściółka: 48vh
  • Dolna wyściółka: 48vh

Dodaj pierwszy moduł tekstowy do kolumny 2

Dodaj zawartość H4

Dodamy wiele modułów tekstowych do kolumny 2. Dodajmy pierwszy moduł tekstowy i dodajmy do niego kopię nagłówka H4.

Ustawienia tekstu H4

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

  • Czcionka nagłówka 4: Prata
  • Nagłówek 4 Styl czcionki: wielkie litery
  • Kolor tekstu nagłówka 4: #854466
  • Nagłówek 4 Rozmiar tekstu: Pulpit: 45 pikseli, tablet: 40 pikseli i telefon: 35 pikseli
  • Nagłówek 4 Wysokość linii: 1,3 em

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Teraz dodamy moduł dzielników tuż pod modułem tekstowym i włączymy widoczność dzielników.

  • Pokaż dzielnik: tak

Linia

Na karcie projektu zmień kolor linii.

  • Kolor linii: #854466

Rozmiary

Czas zmienić ustawienia rozmiaru.

  • Waga dzielnika: 5px
  • Wysokość: 5px

Dodaj drugi moduł tekstowy do kolumny 2

Dodaj treść opisu

Dodaj kolejny moduł tekstowy do kolumny 2. Będzie on znajdował się tuż pod modułem dzielnika. Dodaj także wybraną treść opisu.

Ustawienia tekstu

Po dodaniu opisu zmieńmy ustawienia stylu dla tego modułu.

  • Czcionka tekstu: Lato
  • Kolor tekstu: #854466
  • Rozmiar tekstu: Pulpit: 20 pikseli, tablet i telefon: 16 pikseli
  • Odstępy między literami tekstu: -0,5px
  • Wysokość linii tekstu: 1,8 em

Rozmiary

Zmień ustawienia rozmiaru.

  • Szerokość: komputer stacjonarny: 72% , tablet i telefon: 100%

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Ostatnim modułem, który dodamy do kolumny 2, jest moduł przycisku. Dodajmy go, a także dodajmy do niego kopię.

Ustawienia przycisków

I na koniec odpowiednio zmień ustawienia przycisków.

  • Użyj niestandardowych stylów dla przycisku: Tak
  • Rozmiar tekstu przycisku: 20px
  • Kolor tekstu przycisku: #854466
  • Tło gradientowe przycisku
    • Kolor 1: rgba (43,135,218,0)
    • Kolor 2: rgba(188,128,160,0.95)
    • Pozycja startowa: 50%
    • Pozycja końcowa: 50%
  • Szerokość obramowania przycisku: 0px
  • Promień obramowania przycisku: 0px
  • Czcionka przycisku: Prata
  • Styl czcionki przycisku: wielkie litery

I pomyślnie zbudowaliśmy konstrukcję dla dzisiejszego projektu.

Lepkie efekty

Kolumna 2

Ponieważ mamy wszystko na swoim miejscu, zaczniemy dodawać przyklejone ustawienia, otwierając ustawienia w kolumnie 2. Na karcie Zaawansowane zastosuj następujące ustawienia.

  • Lepka pozycja: trzymaj się góry
  • Przyklejony górny offset: Pulpit: 50px. Tablet i telefon: 80px
  • Dolny limit lepkości: wiersz
  • Przesunięcie od otaczających lepkich elementów: Tak
  • Domyślne i trwałe style przejścia: Tak

Ustawienia lepkie dla kolumny 2

lepkie obramowanie

Udało nam się sprawić, że kolumna będzie lepka. Teraz dodamy obramowanie w kolumnie 2. Aby to zrobić, przejdźmy do ustawień obramowania.

  • Szerokość przyklejonej lewej krawędzi: 2px
  • Kolor lewej krawędzi: #854466

Przekształć Tłumacz

dostosuj wartości translacji transformacji w domyślnym stanie lepkim.

  • Dół: 10vw
  • Lepkie dno: 0vw

Lepkie krycie dla modułów tekstowych i modułu przycisków

Zmieniamy również przezroczystość w stanie domyślnym i przyklejonym.

  • Przezroczystość w stanie normalnym: 0%
  • Przezroczystość stanu lepkiego: 100%

Lepkie ustawienia modułu rozdzielacza

Rozmiary

Teraz zróbmy kilka lepkich ustawień dla modułu dzielnika.

  • Szerokość: 0px
  • Lepka szerokość: 21%

Przemiana

Na karcie Zaawansowane zwiększ czas przejścia.

  • Czas trwania przejścia: 800ms

Efekty przewijania

Kolumna 1 Moduły tekstowe

Następnie dodamy efekty przewijania. Zacznijmy od zastosowania go do modułu tekstowego kolumny 1. Otwórz ustawienia modułu tekstowego. Przejdź do zakładki Zaawansowane i dodaj ruch poziomy.

  • Włącz ruch poziomy: Tak
  • Przesunięcie początkowe: -5
  • Przesunięcie środkowe: 0 (przy 72%)
  • Przesunięcie końcowe: 0

Dodaj efekt przewijania i zanikania

Zakończ ustawienia efektów przewijania, stosując konfigurację zanikania i wygaszania do tego samego modułu.

  • Włącz pojawianie się i zanikanie: tak
  • Początkowe krycie: 0%
  • Średnie krycie: 0% (przy 46%)
  • Końcowe krycie: 100% (przy 52%)

Widok końcowy

Jak widać, udało nam się stworzyć projekt, w którym połączyliśmy efekty przewijania i opcje przyklejania. Jest całkowicie responsywny i świetnie wygląda na każdym urządzeniu.

Wniosek

Divi jest potężny dzięki swoim podstawowym funkcjom i może tworzyć wyjątkowe układy. Ten samouczek pokazuje, w jaki sposób możemy wykazać się kreatywnością dzięki przyklejonym efektom i opcjom przewijania oraz zaprojektować oszałamiające strony. Jeśli jesteś programistą, powinieneś użyć tego rodzaju projektu, aby zaimponować klientowi. Podziel się również tym samouczkiem ze znajomymi i daj nam znać, jaki samouczek chcesz następny. Dziękuję.