10 zabawnych sposobów korzystania z modułu dzielnika z nowymi opcjami Divi

W dzisiejszym samouczku Divi podzielimy się z Tobą spojrzeniem na to, co możesz zrobić z nowymi opcjami, które zostały dodane do Divi w poprzednich aktualizacjach. Dokładniej; zamierzamy podzielić się 10 interesującymi sposobami, w jaki możesz stylizować moduł dzielnika za pomocą tych nowych zmian. Możliwości są naprawdę nieograniczone, ale ten post może pomóc Ci znaleźć inspirację, której potrzebujesz do następnego projektu.

zapowiedź

Jedną z najlepszych rzeczy w tym samouczku jest fakt, że nie będziemy używać żadnego dodatkowego CSS (ani żadnego kodu). Wszystkie tworzone przez nas przykłady będą korzystały tylko z opcji zawartych w module dzielnika. Rzućmy okiem na dzielniki, które zbudujemy, zanim pokażę Ci, jak tworzyć je krok po kroku:

10 zabawnych sposobów korzystania z modułu dzielnika z nowymi opcjami Divi

Subskrybuj nasz kanał YouTube

Utwórz sekcję wielokrotnego użytku

Pierwszą rzeczą, którą musisz zrobić, to utworzyć sekcję, której będziemy używać we wszystkich 10 przykładach. Oczywiście możesz używać dzielników również w innych kontekstach, ale tworząc tę ​​sekcję jako pierwszą, będziesz miał okazję pobawić się własnym Divi Builder i zobaczyć, który z nich wolisz.

Utwórz nową stronę

Zacznij od utworzenia nowej strony na pulpicie WordPress, włączając Divi Builder i otwierając Visual Builder.

Utwórz sekcję z rzędem trzech kolumn

Gdy znajdziesz się na nowej stronie, utwórz sekcję standardową i użyj trzykolumnowego wiersza w tej sekcji standardowej. Użyliśmy „#f4f4f4” jako koloru tła sekcji.

Dodaj pierwszy moduł tekstowy

Następnie dodaj pierwszy moduł tekstowy do pierwszej kolumny wiersza. Otwórz ustawienia, wpisz tekst, który chcesz wyświetlić i przejdź do zakładki Projekt. Na karcie Projekt wprowadź następujące zmiany w podkategorii Tekst:

• Czcionka tekstu: Homar
• Rozmiar czcionki tekstu: 35
• Kolor tekstu: #000000
• Wysokość linii tekstu: 1,7 em
• Orientacja tekstu: Środek

Dodaj drugi moduł tekstowy

Po dodaniu pierwszego modułu tekstowego możesz dodać kolejny tuż pod nim. Dodaj tekst, który chcesz wyświetlić, i przejdź do karty Projekt. Na karcie Projekt upewnij się, że zastosowano następujące modyfikacje:

• Czcionka tekstu: Roboto
• Rozmiar czcionki tekstu: 14
• Wysokość linii tekstu: 1,7 em
• Orientacja tekstu: Środek

Klonuj moduły tekstowe i umieszczaj je w innych dwóch kolumnach

Po utworzeniu tych dwóch modułów tekstowych możesz umieścić je również w pozostałych dwóch kolumnach wiersza.

Przed rozpoczęciem

Podzielimy się 10 zabawnymi sposobami stylizacji modułu rozdzielacza Divi. Każdy z przykładów będzie miał trzy dzielniki, które są ze sobą w harmonii. Większość ustawień jest taka sama dla wszystkich trzech modułów. Zaczniemy od pokazania ustawień, które liczą się dla każdego z nich, a następnie pokażemy zmiany, które należy wprowadzić w pozostałych dwóch dzielnikach. Tak więc za każdym razem, gdy skończysz pierwszy rozdzielacz, sklonuj go i umieść w pozostałych dwóch kolumnach. Gdy to zrobisz, możesz wprowadzić modyfikacje pozostałych dwóch przegródek.

Uwaga: dla każdego z dzielników musisz włączyć opcję „Pokaż dzielnik” na karcie Treść.

1. Zamazany trójkąt

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Na karcie treści będziemy korzystać z następujących ustawień tła:

• Pierwszy kolor: #e09900
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: liniowy
• Kierunek gradientu: 176 stopni
• Pozycja startowa: 13%
• Pozycja końcowa: 31%

Karta projektu

Przejdź do karty Projekt i upewnij się, że następujące ustawienia dotyczą podkategorii Rozmiar:

• Waga rozdzielacza: 0
• Wysokość: 25px
• Szerokość: 35%
• Wyrównanie modułu: Środek

Przewiń w dół tę samą kartę i użyj następujących ustawień animacji w podkategorii Animacja:

• Styl animacji: slajd
• Powtórzenie animacji: raz
• Kierunek animacji: Centrum
• Czas trwania animacji: 1200 ms
• Intensywność animacji: 80%

Ustawienia modułu drugiego rozdzielacza

Karta treści

Na karcie treści jedyne, co musisz zrobić, to zmienić pierwszy kolor gradientu na „#0c71c3”.

Karta projektu

Następnie musisz dodać opóźnienie animacji „250 ms” do podkategorii Animacja.

Ustawienia modułu trzeciego rozdzielacza

Karta treści

Zmień pierwszy kolor gradientu na „#8300e9” dla ostatniego dzielnika.

Karta projektu

Opóźnienie animacji, które musisz dodać do podkategorii Animacja ostatniego dzielnika, to „500ms”.

2. Kolorowy cień

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Użyj następujących ustawień gradientu tła na karcie Zawartość:

• Pierwszy kolor: #e09900
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: liniowy
• Kierunek gradientu: 180 stopni
• Pozycja startowa: 0%
• Pozycja końcowa: 72%

Karta projektu

Pierwszą rzeczą, którą musisz zrobić na karcie Projekt, jest zmiana koloru dzielnika na „#000000”.

W podkategorii Style tej samej zakładki użyj opcji „Solid” jako stylu dzielnika i „Góra” jako pozycji dzielnika.

Kontynuuj przewijanie w dół i wprowadź następujące zmiany w podkategorii Rozmiar:

• Waga rozdzielacza: 2
• Wysokość: 20px
• Szerokość: 70%
• Wyrównanie modułu: Środek

Na koniec użyj następujących ustawień opcji dla podkategorii Animacja:

• Styl animacji: odbicie
• Powtórzenie animacji: raz
• Kierunek animacji: Centrum
• Czas trwania animacji: 2000 ms

Ustawienia modułu drugiego rozdzielacza

Karta treści

Zmień pierwszy kolor gradientu tła gradientu na „#0c71c3”.

Karta projektu

W podkategorii Animacja dodaj „350 ms” do opcji Opóźnienie animacji.

Ustawienia modułu trzeciego rozdzielacza

Karta treści

Dokonaj tej samej zmiany w trzecim dzielniku, ale zamiast tego użyj koloru „#8300e9”.

Karta projektu

I na koniec dodaj opóźnienie animacji wynoszące „700 ms”.

3. Seria gradientowa

Ustawienia modułu pierwszego rozdzielacza

Karta treści

W przypadku pierwszego separatora użyj następujących ustawień gradientowego tła:

• Pierwszy kolor: #0970a0
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: liniowy
• Kierunek gradientu: 119deg
• Pozycja startowa: 0%
• Pozycja końcowa: 86%

Karta projektu

Na karcie Projekt wybierz „#FFFFFF” jako kolor przekładki.

Następnie wprowadź następujące zmiany w podkategorii Style:

• Styl dzielnika: Solidny
• Pozycja dzielnika: wyśrodkowana w pionie

Pozostając na tej samej karcie, upewnij się, że następujące ustawienia dotyczą podkategorii Rozmiar:

• Waga rozdzielacza: 3
• Wysokość: 10px
• Szerokość: 25%
• Wyrównanie modułu: do lewej

Dodaj „15px” również do dolnego wypełnienia w podkategorii Odstępy.

Na koniec użyj następujących ustawień dla podkategorii Animacja:

• Styl animacji: slajd
• Powtórzenie animacji: raz
• Kierunek animacji: w lewo
• Czas trwania animacji: 2000 ms
• Intensywność animacji: 100%

Ustawienia modułu drugiego rozdzielacza

Karta treści

Ustawienia gradientu tła dla drugiego separatora są nieco inne:

• Pierwszy kolor: #0970a0
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 0%
• Pozycja końcowa: 100%

Karta projektu

W podkategorii Rozmiar zmień Wyrównanie modułu na środek.

Na koniec scentralizuj również kierunek animacji.

Ustawienia modułu trzeciego rozdzielacza

Karta treści

Trzeci separator zawiera również inne tło gradientowe:

• Pierwszy kolor: rgba (255,255,255,0)
• Drugi kolor: #0970a0
• Typ gradientu: liniowy
• Kierunek gradientu: 119deg
• Pozycja startowa: 14%
• Pozycja końcowa: 100%

Karta projektu

Wprowadzimy te same zmiany, które wprowadziliśmy do drugiego dzielnika, ale użyjemy prawego zamiast środka.

4. Toczący się krąg

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Zacznij od zastosowania następujących ustawień gradientu tła:

• Pierwszy kolor: #e09900
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 20%
• Pozycja końcowa: 21%

Karta projektu

Pierwszą rzeczą, którą musisz zrobić na karcie Projekt, jest użycie koloru „#000000” dla dzielnika.

Następnie wybierz „Solidny” jako styl dzielnika i „Pionowo wyśrodkowany” jako pozycję dzielnika.

Idąc dalej, wprowadź następujące zmiany w podkategorii Rozmiar:

• Waga rozdzielacza: 2
• Wysokość: 50px
• Szerokość: 40%
• Wyrównanie modułu: Środek

Wreszcie podkategoria Animacja będzie wymagała następujących ustawień:

• Styl animacji: rolka
• Powtórzenie animacji: raz
• Kierunek animacji: Centrum
• Czas trwania animacji: 1500 ms
• Opóźnienie animacji: 850 ms
• Intensywność animacji: 60%

Ustawienia modułu drugiego rozdzielacza

Karta treści

Zmień pierwszy kolor gradientu na „#0c71c3”.

Karta projektu

I zmień opóźnienie animacji na „0ms”.

Ustawienia modułu trzeciego rozdzielacza

Karta treści

W przypadku ostatniego dzielnika wystarczy zmienić pierwszy kolor tła gradientu na „#8300e9”.

5. Wspornik

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Użyj następujących ustawień gradientu tła:

• Pierwszy kolor: #e0d1b1
• Drugi kolor: #e09900
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 36%
• Pozycja końcowa: 100%

Karta projektu

Upewnij się, że kolor przegrody jest taki sam jak kolor tła sekcji. W tym przypadku jest to „#f4f4f4”.

Przewiń w dół kartę projektu i użyj „Dashed” jako stylu dzielnika i „Góra” jako pozycji dzielnika.

Dokonaj następujących ustawień dla podkategorii Rozmiar:

• Waga rozdzielacza: 100
• Wysokość: 18px
• Szerokość: 60%
• Wyrównanie modułu: Środek

Musisz także dodać „15px” do dopełnienia górnego, prawego i lewego.

Na koniec użyj następujących ustawień animacji:

• Styl animacji: Zoom
• Powtórzenie animacji: raz
• Kierunek animacji: Centrum
• Czas trwania animacji: 1000 ms
• Intensywność animacji: 80%

Ustawienia modułu drugiego rozdzielacza

Karta treści

Zmień kolory tła gradientowego na „#87acc1” i „#0c71c3”.

Karta projektu

Następnie zmień czas trwania animacji na „1300ms”, a opóźnienie animacji na „250ms”.

Ustawienia modułu trzeciego rozdzielacza

Karta treści

Kolory gradientu używane w trzecim dzielniku to „#c9a4e8” i „#8300e9”.

Karta projektu

Zmień czas trwania animacji na „1300ms”, a opóźnienie animacji na „500ms”.

6. Podwójne linie

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Zastosuj następujące ustawienia gradientu tła:

• Pierwszy kolor: #e09900
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: liniowy
• Kierunek gradientu: 179 stopni
• Pozycja startowa: 0%
• Pozycja końcowa: 45%

Karta projektu

Wybierz „#000000” jako kolor dzielnika.

W podkategorii Style użyj opcji „Podwójny” jako stylu dzielnika i „Pionowo wyśrodkowany” jako pozycji dzielnika.

Idąc dalej, użyj następujących ustawień dla podkategorii Rozmiar:

• Waga rozdzielacza: 5
• Wysokość: 25px
• Szerokość: 35%
• Wyrównanie modułu: do lewej

Na koniec użyj następujących ustawień animacji:

• Styl animacji: rolka
• Powtórzenie animacji: raz
• Kierunek animacji: w lewo
• Czas trwania animacji: 1000 ms
• Intensywność animacji: 50%

Ustawienia modułu drugiego rozdzielacza

Karta treści

Zmień pierwszy kolor gradientu na „#0c71c3”.

Karta projektu

Następnie użyj innej animacji dla drugiej przegrody:

• Styl animacji: zanikanie
• Powtórzenie animacji: raz
• Czas trwania animacji: 1400 ms

Ustawienia modułu trzeciego rozdzielacza

Karta treści

W przypadku trzeciego dzielnika użyj „#8300e9” jako pierwszego koloru tła gradientu.

Karta projektu

Jedyną rzeczą, którą musisz zmienić w zakładce Projekt, jest Kierunek animacji, który w tym przypadku jest 'Prawy'.

7. Most

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Zacznij od przypisania „#8300e9” do tła.

Karta projektu

Kontynuuj, używając koloru tła sekcji jako koloru rozdzielającego, czyli w tym przypadku „#f4f4f4”.

Następnie użyj „kropki” jako stylu dzielnika i „góry” jako pozycji dzielnika.

W podkategorii Rozmiary użyj następujących ustawień:

• Waga rozdzielacza: 15
• Wysokość: 7px
• Szerokość: 70%
• Wyrównanie modułu: do lewej

Potrzebujemy również niestandardowego dopełnienia:

• Górna wyściółka: 7px
• Prawe wypełnienie: -7px
• Lewy dopełnienie: -7px

Animacja, której będziemy używać, ma następujące ustawienia:

• Styl animacji: slajd
• Powtórzenie animacji: raz
• Kierunek animacji: w lewo
• Czas trwania animacji: 800ms
• Opóźnienie animacji: 400 ms
• Intensywność animacji: 30%

Ustawienia modułu drugiego rozdzielacza

Karta treści

Dla drugiego dzielnika zmień tło na „#0c71c3”.

Karta projektu

Użyjemy też innej animacji:

• Styl animacji: Zoom
• Powtórzenie animacji: raz
• Kierunek animacji: Centrum
• Czas trwania animacji: 800ms
• Intensywność animacji: 30%

Ustawienia modułu trzeciego rozdzielacza

Karta treści

Trzeci element rozdzielający użyje „#8300e9” jako koloru tła.

Karta projektu

Animacja trzeciego dzielnika również jest nieco inna:

• Styl animacji: Zoom
• Powtórzenie animacji: raz
• Kierunek animacji: w prawo
• Czas trwania animacji: 800ms
• Opóźnienie animacji: 400 ms
• Intensywność animacji: 30%

8. Elegancja

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Zacznij od dodania następującego tła gradientowego do pierwszego dzielnika:

• Pierwszy kolor: #000000
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Karta projektu

Użyj koloru „#8300e9” jako dzielnika.

Następnie użyj „kropek” jako stylu dzielnika i „pionowo wyśrodkowany” jako pozycji dzielnika.

Potrzebujemy również górnego dopełnienia „40px”.

Oraz animację z następującymi ustawieniami:

• Styl animacji: odbicie
• Powtórzenie animacji: raz
• Kierunek animacji: w dół
• Czas trwania animacji: 1000 ms

Ustawienia modułu drugiego rozdzielacza

Karta projektu

Dla drugiego dzielnika zmień kolor na „#0c71c3”.

Animacja również będzie wymagała pewnych zmian:

• Kierunek animacji: Centrum
• Czas trwania animacji 1500 ms

Ustawienia modułu trzeciego rozdzielacza

Karta projektu

Trzeci dzielnik będzie używał „#8300e9” jako koloru.

I będzie miał 'Up' jako kierunek animacji.

9. Subtelność

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Wybierz następujące ustawienia dla gradientowego tła:

• Pierwszy kolor: #8300e9
• Drugi kolor: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 0%
• Pozycja końcowa: 38%

Karta projektu

W ramach podkategorii Rozmiar potrzebujesz następujących ustawień:

• Waga rozdzielacza: 0
• Wysokość: 4px
• Szerokość: 100%

Wreszcie animacja, której będziemy używać, ma następujące ustawienia:

• Styl animacji: odbicie
• Powtórzenie animacji: raz
• Kierunek animacji: w górę
• Czas trwania animacji 1800 ms

Ustawienia modułu drugiego rozdzielacza

Karta treści

Dla drugiego separatora zmień pierwszy kolor tła gradientu na „#0c71c3”.

Ustawienia modułu trzeciego rozdzielacza

Karta treści

Dokonaj tej samej zmiany dla trzeciego separatora, ale zamiast tego użyj fioletowego koloru „#8300e9”.

10. Blask

Ustawienia modułu pierwszego rozdzielacza

Karta treści

Skorzystaj z następujących ustawień gradientowego tła dla ostatniej serii dzielników:

• Pierwszy kolor:
• Drugi kolor:
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 0%
• Pozycja końcowa: 38%

Karta projektu

Wybierz również kolor tła sekcji jako kolor separatora, w tym przypadku jest to „#f4f4f4”.

Następnie użyj „Dashed” jako stylu dzielnika i „Pionowo wyśrodkowany” jako swojej pozycji dzielnika.

W podkategorii Rozmiary użyj następujących ustawień:

• Waga rozdzielacza: 70
• Wysokość: 20px
• Szerokość: 100%

Na koniec użyjemy animacji z następującymi opcjami:

• Styl animacji: zanikanie
• Powtórzenie animacji: raz
• Czas trwania animacji: 1800 ms
• Opóźnienie animacji: 800ms

Ustawienia modułu drugiego rozdzielacza

Karta treści

Dla drugiego separatora zmień drugi kolor tła gradientu na „#0c71c3”.

Karta projektu

I dodaj opóźnienie animacji wynoszące „250 ms”.

Ustawienia modułu trzeciego rozdzielacza

Karta treści

Dla ostatniego separatora zmień drugi kolor tła gradientu na „#8300e9”.

Karta projektu

I zakończ, ustawiając Opóźnienie animacji na „0ms”.

Końcowe przemyślenia

Dzięki nowym opcjom Divi możliwe jest wiele nowych kreatywnych rzeczy dzięki wbudowanym ustawieniom każdego modułu. W tym poście pokazaliśmy konkretnie, w jaki sposób te opcje mogą pomóc w ulepszeniu projektu za pomocą modułu rozdzielającego. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa VikiVector / shutterstock.com