Używanie tła modułów do wyświetlania obrazów z paralaksą w linii za pomocą Divi

Korzystanie z wbudowanego tła paralaksy CSS może naprawdę pomóc poprawić wygląd i styl witryny, a ten samouczek jest doskonałym przykładem. Użyjemy wielu teł modułów, aby stworzyć oszałamiający i spójny efekt, który pokazuje wiele części obrazu tła. 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 paralaksy liniowej ZA DARMO

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

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać

Dodaj nową sekcję

Zacznij od dodania nowej zwykłej sekcji do strony, nad którą pracujesz.

Dodaj nowy wiersz

Struktura kolumny

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

Ustawienia kolumny 1

Rozstaw

Dodaj górną wartość dopełnienia do pierwszej kolumny.

• Górna wyściółka:
  • Komputer stacjonarny: 2vw
  • Tablet + telefon: 6vw

Ustawienia kolumny 2

Rozstaw

Dodaj górną wartość dopełnienia również do drugiej kolumny.

• Górna wyściółka:
  • Komputer stacjonarny: 4vw
  • Tablet + telefon: 6vw

Kolumna 4 Ustawienia

Rozstaw

Pomiń kolumnę 3 i dodaj kilka wartości odstępów do kolumny 4.

• Górna wyściółka
  • Komputer stacjonarny: 19vw
  • Tablet: 0vw
  • Telefon: 1vw
• Wyściółka lewa i prawa
  • Komputer stacjonarny i tablet: 1vw
  • Telefon: 0vw

Dodaj pierwszy moduł tekstowy do kolumny 1

Dodaj zawartość H2

Teraz dodaj pierwszy moduł tekstowy do kolumny 1. Wstaw wybrane przez siebie treści H2.

Tekst nagłówka

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

• Poziom tekstu nagłówka: H2
• Czcionka H2: EB Garamond
• Styl czcionki H2: TT
• Kolor tekstu H2: czarny #oooooo
• Rozmiar tekstu H2:
  • Komputer stacjonarny: 3.1vw
  • Tablet: 5.4vw
  • Telefon: 10vw
• Wysokość linii H2:
  • Komputer stacjonarny + tablet: 1,1 em
  • Telefon: 1.3em

Rozstaw

Następnie dodaj trochę odstępów do modułu.

• Górna wyściółka:
  • Komputer stacjonarny: 4vw
  • Tablet + telefon: 0vw
• Lewa wyściółka:
  • Komputer stacjonarny i tablet: 1vw
  • Telefon: 2vw
• Prawa wyściółka
  • Komputer stacjonarny i tablet: 1vw
  • Telefon: 0vw

Dodaj drugi moduł tekstowy do kolumny 1

Dodaj zawartość

Teraz dodaj drugi moduł tekstowy poniżej pierwszego. Wstaw treść akapitu.

Tekst

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

• Czcionka tekstu: EB Garamond
• Kolor tekstu: ciemnoszary #3d3d3d
• Rozmiar czcionki:
  • Pulpit: 1vw
  • Tablet: 2.2vw
  • Telefon: 3.8vw
• Wysokość linii tekstu: 1,8 em

Rozstaw

Następnie dostosuj ustawienia odstępów modułu.

• Dolna wyściółka:
  • Telefon: 4vw
• Lewa wyściółka:
  • Komputer stacjonarny + tablet: 1,4vw
• Prawa wyściółka:
  • Komputer stacjonarny: 1,3vw
  • Tablet + telefon: 1,7vw

Dodaj moduł przycisku do kolumny 1

Dodaj zawartość

Aby uzupełnić pierwszą kolumnę, dodaj moduł przycisku. Wstaw kopię.

Dodaj link

Dodaj również link do przycisku.

Przycisk

Przejdź do zakładki projektu i odpowiednio dostosuj ustawienia przycisków:

• Rozmiar tekstu przycisku:
  • Pulpit: 1vw
  • Tablet: 2vw
  • Telefon: 4vw
• Kolor tekstu przycisku: Ciemnoszary #3d3d3d
• Szerokość obramowania przycisku: 1px
• Czcionka przycisku: EB Garamond

Rozstaw

Następnie dostosuj ustawienia odstępów przycisku.

• Górny margines:
  • Komputer stacjonarny + tablet: 1vw
• Margines dolny:
  • Telefon: 5vw

Dodaj pierwszy moduł tekstowy do kolumny 2

Dodaj zawartość

Do następnej kolumny! Dodaj moduł tekstowy z wybraną zawartością H4.

Tło

Kontynuuj, dodając obraz tła. Prześlij obraz tła paralaksy CSS na komputer i użyj zwykłego obrazu na mniejszych ekranach (bez paralaksy CSS).

• Tło pulpitu: obraz
  • Paralaksa: CSS
• Tablet + telefon w tle: obraz

Tło unoszące się w tle

Następnie dodaj tło gradientowe tylko po najechaniu myszą.

• Tło po najechaniu: Gradient kolorów
• Gradient koloru 1: jasnozłoty żółty #edba63
• Gradient koloru 2: złoty żółty #ed9d12
• Kierunek gradientu: 23 stopni
• Umieść gradient nad obrazem tła: Tak

Tekst nagłówka

Przejdź do zakładki projektu i zmień ustawienia tekstu H4.

• Poziom nagłówka tekstu: H4
• Czcionka H4: EB Garamond
• Kolor tekstu H4: biały #ffffff
• Rozmiar tekstu H4:
  • Komputer stacjonarny: 2,3vw
  • Tablet: 4,5vw
  • Telefon: 8.5vw

Rozstaw

Następnie dostosuj odstępy.

• Górny margines:
  • Telefon: -6vw
• Górna wyściółka:
  • Komputer stacjonarny: 15vw
  • Tablet: 22vw
  • Telefon: 43vw
• Dolna wyściółka:
  • Komputer stacjonarny + tablet: 1vw
• Wyściółka lewa i prawa:
  • Komputer stacjonarny i tablet: 1,5vw
  • Telefon: 5vw

Granica

Kontynuuj, stylizując granice.

• Zaokrąglone rogi: 1vw wszystkie rogi
• Style obramowania: wszystkie strony
• Szerokość obramowania: 0,3vw
• Kolor obramowania: biały #ffffff

Przekształć skalę Hover

Uzupełnij ustawienia modułu, dodając efekt powiększenia po najechaniu myszą.

• Skala transformacji po najechaniu: 102%

Dodaj drugi moduł tekstowy do kolumny 2

Dodaj zawartość

Dodaj drugi moduł do drugiej kolumny z wybraną zawartością H4.

Tło

Podobnie jak w poprzednim module tekstowym, dodaj obraz tła CSS paralaksy na pulpicie i zwykły obraz tła na mniejszych rozmiarach ekranu.

• Tło pulpitu: obraz
  • Paralaksa: CSS
• Tablet + telefon w tle: obraz

Tło unoszące się w tle

Dodaj również tło gradientowe w najechaniu.

• Tło po najechaniu: Gradient kolorów
• Gradient koloru 1: Jasny Magenta #91463f
• Gradient koloru 2: Magenta #910400
• Kierunek gradientu: 23 stopni
• Umieść gradient nad obrazem tła: Tak

Tekst nagłówka

Następnie dostosuj ustawienia tekstu H4.

• Poziom nagłówka tekstu: H4
• Czcionka H4: EB Garamond
• Kolor tekstu H4: biały #ffffff
• Rozmiar tekstu H4:
  • Komputer stacjonarny: 2,3vw
  • Tablet: 4,5vw
  • Telefon: 8.5vw

Rozstaw

I zmodyfikuj ustawienia odstępów.

• Górna wyściółka:
  • Komputer stacjonarny: 15vw
  • Tablet: 21,1vw
  • Telefon: 43vw
• Dolna wyściółka:
  • Komputer stacjonarny + tablet: 1vw
• Wyściółka lewa i prawa:
  • Komputer stacjonarny i tablet: 1,5vw
  • Telefon: 5vw

Granica

Zmień też ustawienia obramowania.

• Zaokrąglone rogi: 1vw wszystkie rogi
• Style obramowania: wszystkie strony
• Szerokość obramowania: 0,3vw
• Kolor obramowania: biały #ffffff

Przekształć skalę Hover

Na koniec dodaj efekt powiększenia do modułu tekstowego.

• Skala transformacji po najechaniu: 102%

Powiel moduły tekstowe z kolumny 2 do kolumny 3

Powiel i przeciągnij moduły tekstowe

Sklonuj oba moduły tekstowe i umieść je w trzeciej kolumnie wiersza.

Dostosuj 1. moduł tekstowy w kolumnie 3

Zmień zawartość H4

Otwórz pierwszy zduplikowany moduł tekstowy w kolumnie 3 i zmień zawartość.

Zmień tło dla tabletu i telefonu

Następnie zmień obraz tła na mniejszych rozmiarach ekranu.

Zmień gradient kolorów po najechaniu kursorem

Kontynuuj, zmieniając kolory w najechaniu gradientem.

• Gradient kolorów 1: Różany róż #cc9293
• Gradient koloru 2: różowy #cc9293

Rozstaw

Na koniec dostosuj odstępy w następujący sposób.

• Górny margines:
  • Tablet: -6,4vw
  • Telefon: 0vw

Dostosuj 2. moduł tekstowy w kolumnie 3

Zmień zawartość H4

Najpierw zmień zawartość.

Zmień tło dla tabletu i telefonu

Następnie zmień obraz tła na mniejszych rozmiarach ekranu.

Zmień gradient kolorów po najechaniu kursorem

Zmień też tło gradientowe.

• Gradient koloru 1: miękka sosna #5c755c
• Gradient koloru 2: sosnowa zieleń #4D754D

Dodaj pierwszy moduł tekstowy do kolumny 4

Dodaj zawartość

Przechodząc do kolumny 4, dodaj moduł tekstowy. Wstaw wybrane przez siebie treści H3.

Tekst nagłówka

Przejdź do zakładki projektu i zmień ustawienia tekstu H3 w następujący sposób:

• Poziom tekstu nagłówka: H3
• Czcionka tekstu H3: EB Garamond
• Styl czcionki H3: TT
• Kolor tekstu H3: czarny #oooooo
• Rozmiar tekstu H3:
  • Komputer stacjonarny: 3vw
  • Tablet: 5vw
  • Telefon: 12vw
• Wysokość linii H3
  • Komputer stacjonarny + tablet: 1em
  • Telefon: 1.1em

Dodaj drugi moduł tekstowy do kolumny 4

Dodaj zawartość

Dodaj kolejny moduł tekstowy poniżej pierwszego. Wstaw treść akapitu.

Tekst

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

• Czcionka tekstu: EB Garamond
• Kolor tekstu: ciemnoszary #3d3d3d
• Rozmiar czcionki:
  • Pulpit: 1vw
  • Tablet: 2.2vw
  • Telefon: 3.8vw
• Wysokość linii tekstu: 1,8 em

Rozstaw

Następnie dostosuj odstępy.

• Dolna wyściółka:
  • Telefon: 4vw
• Lewa wyściółka: 0,9vw
• Prawa wyściółka: 2.2vw

Powiel moduł przycisków z kolumny 1 do kolumny 4

Zduplikuj i przeciągnij moduł przycisku

• Powiel moduł przycisku w kolumnie 1.
• Przeciągnij go do kolumny 3 poniżej modułów tekstowych.

Rozstaw

Dostosuj niektóre wartości odstępów w module zduplikowanych przycisków i gotowe!

• Dolny margines: 0vw
• Lewy margines:
  • Komputer stacjonarny + tablet: 0,7 vw
  • Telefon: 0,9vw

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Wniosek

W tym poście pokazaliśmy, jak stworzyć wbudowany projekt paralaksy z czterema polami tekstowymi, które pokazują różne części tego samego obrazu. Mamy nadzieję, że spodoba ci się ten projekt, a jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej!