Przejdź do głównej treści

Jak stworzyć piękną sekcję kolizji kolumn na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Efekty przewijania Divi przynoszą mnóstwo nowych możliwości projektowania do tworzonych stron internetowych. Subtelne interakcje, które wybierzesz, mogą naprawdę poprawić ogólny wygląd Twojej witryny. Wszystko staje się jeszcze lepsze, gdy tylko zsynchronizujesz efekty przewijania. W tym samouczku będziemy w szczególności zarządzać tworzeniem pięknej sekcji bohaterów zderzającej się z kolumnami na zwoju. Projekt sekcji bohatera łączy dwie różne kolumny na zwoju, co z kolei pomaga podkreślić kopię.

Możliwy wynik

Teraz, gdy przeszliśmy przez wszystkie etapy, spójrzmy na wynik na różnych rozmiarach ekranu.

Odtwórz układ Sekcji Bohaterów

Dodaj nową sekcję

Dostosuj kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zmień kolor tła.

  • Kolor tła: # f4f2f7

rozstaw

Usuń także domyślne górne i dolne wypełnienie ze wszystkich sekcji.

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:

zaklejania

Nie dodając jeszcze modułów, otwórz parametry linii i odpowiednio zmodyfikuj parametry wymiarowania:

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

rozstaw

Następnie usuń wszystkie domyślne górne i dolne wypełnienie.

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px

przepełnienia

I ukryj przepełnienia rzędu.

  • Przelew poziomy: ukryty
  • Przelew pionowy: ukryty

Ustawienia kolumny 1

rozstaw

Następnie otwórz ustawienia w kolumnie 1 i dodaj niestandardowe wartości wypełnienia.

  • Górna wyściółka: 15vw
  • Wyściółka u dołu: 10vw
  • Lewa wyściółka: 5 vw
  • Prawa wyściółka: 5 vw

Indeks Z

Zwiększ także indeks Z kolumny.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • Indeks Z: 12

Ustawienia kolumny 2

Obraz tła

Kontynuuj, otwierając ustawienia w kolumnie 2 i prześlij wybrany obraz tła.

  • Rozmiar obrazu tła: okładka
  • Położenie obrazu tła: środek
  • Powtarzający się obraz tła: bez powtarzania
  • Mieszane obrazy tła: normalne

Dodaj moduł tekstowy # 1 do kolumny 1

Dodaj zawartość H1

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego w kolumnie 1. Dodaj wybraną zawartość H1.

Ustawienia tekstu H1

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj parametry tekstowe H1:

  • Czcionka tytułu: Cienie w świetle
  • Waga czcionki tytułu: pogrubiona
  • Kolor tekstu nagłówka: # 000000
  • Rozmiar tekstu nagłówka: 6vw (komputer stacjonarny), 11vw (tablet), 13vw (telefon)
  • Odstępy między nagłówkami: -2px
  • Wysokość linii głowy: 1.2 em

rozstaw

Dodaj także górny margines.

  • Górny margines: 10vw

Dodaj moduł tekstowy # 2 do kolumny 1

Dodaj treść

Wstaw kolejny moduł tekstowy z wybraną zawartością opisu.

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • Czcionka tekstu: Otwórz Sans
  • Kolor tekstu: # 1e1e1e
  • Rozmiar tekstu: 0.9vw (komputer stacjonarny), 1.9vw (tablet), 3vw (telefon)
  • Wysokość linii tekstu: 2,4 em

rozstaw

I dodaj niestandardowe wartości marginesów dla różnych rozmiarów ekranu.

  • Górny margines: 4vw (komputer stacjonarny), 8vw (tablet), 12vw (telefon)
  • Dolny margines: 4vw (komputer stacjonarny), 8vw (tablet), 12vw (telefon)

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

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

Ustawienia przycisków

Zmodyfikuj parametry przycisków modułu w następujący sposób:

  • Użyj niestandardowych stylów przycisku: Tak
  • Rozmiar tekstu przycisku: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
  • Kolor tekstu przycisku: #ffffff
  • Kolor tła przycisku: # 000000
  • Szerokość obramowania przycisku: 0px
  • Promień obramowania przycisku: 100px
  • Czcionka przycisku: Otwórz bez

rozstaw

I dokończ ustawienia przycisku, dodając niestandardowe wartości wypełnienia dla różnych rozmiarów ekranu.

  • Górna wyściółka: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
  • Wyściółka u dołu: 1vw (biurko), 2vw (tablet), 3vw (telefon)
  • Lewe wypełnienie: 3vw (komputer stacjonarny), 5vw (tablet), 7vw (telefon)
  • Prawa wyściółka: 3vw (biurko), 5vw (tablet), 7vw (telefon)

Dodaj moduł tekstowy do kolumny 2

Dodaj treść

W drugiej kolumnie jedynym modułem, którego będziemy potrzebować, jest moduł tekstowy. Wpisz wybraną treść.

Ustawienia tekstu

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

  • Czcionka tekstu: cienie w świetle
  • Kolor tekstu: rgba (0,0,0,0,25)
  • Rozmiar tekstu: 9vw (komputer stacjonarny), 14vw (tablet i telefon)
  • Odstępy między literami: -3px
  • Wysokość linii tekstu: 1em
  • Wyrównanie tekstu: środkowy (biuro), lewy (tablet i telefon)

rozstaw

Dodaj także niestandardowe wartości wypełnienia.

  • Górna wyściółka: 5vw (biurko),
  • Wyściółka u dołu: 60 vw (tablet i telefon)
  • Lewa wyściółka: 5 vw (tablet i telefon)

Zastosuj animacje przewijania

Sekcja

Wejście i zejście

Gdy wszystkie moduły będą na miejscu, czas zastosować efekty przewijania! Najpierw otwórz parametry sekcji i użyj następującego efektu skali:

  • Aktywuj Sclaing od góry do dołu
  • Skala początkowa: 100% (do 49%)
  • Średnia skala:
    • Biuro: 70% (100%)
    • Tablet i telefon: 100% (100%)
  • Skala końcowa:
    • Biuro: 70%
    • Tablet i telefon: 100%

Kolumna 1

Ruch poziomy

Kontynuuj otwierając parametry w kolumnie 1 i użyj następującego efektu ruchu poziomego:

  • Aktywuj ruch poziomy: Tak
  • Rozpocznij przesunięcie: 0
  • Średnie przesunięcie:
    • Biuro: 0 (65%)
    • Tablet i telefon: 0 (93%)
  • Przesunięcie końcowe:
    • Biuro: 6
    • Tablet i telefon: 0

Wejście i zejście

Zastosuj także efekt skali w górę i w dół do kolumny.

  • Włącz skalowanie w górę i w dół: Tak
  • Skala początkowa:
    • Biuro: 10%
    • Tablet i telefon: 100%
  • Średnia skala:
    • Biuro: 90%
    • Tablet i telefon: 100%
  • Skala końcowa: 100%
sekcja bohaterów zderzająca się z kolumnami

Kolumna 2

Ruch poziomy

Następnie otwórz parametry w kolumnie 2 i użyj następujących parametrów ruchu poziomego:

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

  • Aktywuj ruch poziomy: Tak
  • Rozpocznij przesunięcie: 0
  • Średnie przesunięcie:
    • Biuro: 0 (53%)
    • Tablet i telefon: 0 (56%)
  • Przesunięcie końcowe:
    • Biuro: -6 (53%)
    • Tablet i telefon: 0 (100%)

Zanikaj i znikaj

Wypełnij parametry kolumny, dodając efekt przenikania i zmniejszania.

  • Aktywuj pojawianie się i zanikanie: Tak
  • Początkowe krycie: 100% (przy 47%)
  • Średnie krycie:
    • Biuro: 0% (47%)
    • Tablet i telefon: 100% (47%)
  • Koniec krycia:
    • Biuro: 0%
    • Tablet i telefon: 100%

końcowe przemyślenia

W tym artykule pokazaliśmy, jak kreatywnie korzystać z efektów przewijania Divi, aby utworzyć sekcję bohaterów zderzających się z kolumnami. Gdy tylko przewijają się użytkownicy, dwie różne kolumny i ich elementy zaczynają się łączyć. To z kolei pozwoli ci jeszcze bardziej podkreślić kopię.

Inne zasoby

Oto lista treści, które pozwolą Ci zrobić więcej dzięki motywowi WordPress Divi.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
996 akcji
udział996
ćwierkanie
Enregistrer