10 moduri distractive de a utiliza modulul divizor cu noile opțiuni Divi

În tutorialul Divi de astăzi, vă vom împărtăși o privire asupra a ceea ce puteți face cu noile opțiuni care au fost adăugate la Divi în actualizările anterioare. Mai precis; vom împărtăși 10 moduri interesante prin care puteți modula modulul divizor cu aceste noi modificări. Posibilitățile sunt cu adevărat nelimitate, dar această postare vă poate ajuta să găsiți inspirația de care aveți nevoie pentru următorul dvs. proiect.

Trage cu ochiul

Unul dintre cele mai bune lucruri despre acest tutorial este faptul că nu vom folosi CSS suplimentar (sau cod de niciun fel în acest sens). Toate exemplele pe care le vom crea vor folosi doar opțiunile incluse în modulul Divider. Să aruncăm o privire rapidă la separatoarele pe care le vom construi înainte să vă arăt cum să le creați pas cu pas:

10 moduri distractive de a utiliza modulul divizor cu noile opțiuni Divi

Abonați-vă la canalul nostru Youtube

Creați secțiunea reutilizabilă

Primul lucru pe care va trebui să-l faceți este să creați secțiunea pe care o vom folosi în toate cele 10 exemple. Desigur, puteți folosi separatoarele și în alte contexte, dar făcând această secțiune mai întâi, veți avea ocazia să vă jucați cu propriul Divi Builder și să vedeți pe care îl preferați.

Creați o pagină nouă

Începeți prin crearea unei noi pagini în tabloul de bord WordPress, activând Divi Builder și deschizând Visual Builder.

Creați secțiune cu rândul cu trei coloane

După ce vă aflați pe noua dvs. pagină, creați o secțiune standard și utilizați un rând cu trei coloane în secțiunea standard respectivă. Am folosit „# f4f4f4” ca culoare de fundal a secțiunii.

Adăugați primul modul de text

Apoi, adăugați primul modul de text la prima coloană a rândului. Deschideți setările, tastați textul pe care doriți să îl afișați și accesați fila Design. În fila Proiectare, efectuați următoarele modificări la subcategoria Text:

• Font text: homar
• Dimensiunea fontului textului: 35
• Culoarea textului: # 000000
• Înălțimea liniei textului: 1.7em
• Orientare text: centru

Adăugați al doilea modul de text

După ce ați adăugat primul modul de text, puteți adăuga altul chiar sub acesta. Adăugați textul pe care doriți să îl afișați și accesați fila Design. În fila Proiectare, asigurați-vă că se aplică următoarele modificări:

• Font text: Roboto
• Dimensiunea fontului textului: 14
• Înălțimea liniei textului: 1.7em
• Orientare text: centru

Clonați module de text și plasați în alte două coloane

După ce ați creat aceste două module de text, le puteți pune și în celelalte două coloane ale rândului.

Înainte de a începe

Vom împărtăși 10 moduri distractive prin care puteți stiliza modulul divizor Divi. Fiecare dintre exemple va avea trei separatoare care sunt în armonie unele cu altele. Majoritatea setărilor sunt aceleași pentru toate cele trei module. Vom începe prin a vă arăta setările care contează pentru fiecare dintre ele și vom arăta în continuare modificările pe care trebuie să le faceți celorlalte două divizoare. Deci, de fiecare dată când terminați primul divizor, clonați-l și plasați-l în celelalte două coloane. După ce ați făcut acest lucru, puteți face modificările celorlalte două divizoare.

Notă: pentru fiecare dintre divizoare, va trebui să activați opțiunea „Afișați divizorul” din fila Conținut.

1. Triunghiul neclar

Setările primului modul divizor

Fila Conținut

În fila conținut, vom folosi următoarele setări de fundal:

• Prima culoare: # e09900
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: liniar
• Direcția gradientului: 176 grade
• Poziția inițială: 13%
• Poziție finală: 31%

Fila de proiectare

Treceți la fila Design și asigurați-vă că următoarele setări se aplică subcategoriei Dimensionare:

• Greutatea divizorului: 0
• Înălțime: 25 px
• Lățime: 35%
• Alinierea modulului: centru

Derulați în jos aceeași filă și utilizați următoarele setări de animație în subcategoria Animație:

• Stil de animație: Slide
• Repetați animația: o dată
• Regia de animație: Centru
• Durata animației: 1200 ms
• Intensitate animație: 80%

Setările modulului al doilea divizor

Fila Conținut

În fila conținut, singurul lucru pe care trebuie să-l faci este să schimbi prima culoare de gradient în „# 0c71c3”.

Fila de proiectare

Apoi, va trebui să adăugați o întârziere a animației de „250ms” la subcategoria Animație.

Setările modulului al treilea divizor

Fila Conținut

Schimbați culoarea primului gradient în „# 8300e9” pentru ultimul separator.

Fila de proiectare

Întârzierea animației pe care va trebui să o adăugați la subcategoria Animație a ultimului divizor este „500ms”.

2. Umbra de culoare

Setările primului modul divizor

Fila Conținut

Utilizați următoarele setări de fundal de gradient în fila Conținut:

• Prima culoare: # e09900
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: liniar
• Direcția gradientului: 180 grade
• Poziția inițială: 0%
• Poziție finală: 72%

Fila de proiectare

Primul lucru pe care trebuie să îl faceți în fila Design este să schimbați culoarea divizorului în „# 000000”.

În subcategoria Stiluri a aceleiași file, utilizați „Solid” ca stil divizor și „Sus” ca poziție divizor.

Continuați derularea în jos și efectuați următoarele modificări pentru subcategoria Dimensionare:

• Greutatea divizorului: 2
• Înălțime: 20 px
• Lățime: 70%
• Alinierea modulului: centru

Și, în cele din urmă, utilizați următoarele setări de opțiuni pentru subcategoria Animație:

• Stil de animație: Bounce
• Repetați animația: o dată
• Regia de animație: Centru
• Durata animației: 2000 ms

Setările modulului al doilea divizor

Fila Conținut

Schimbați prima culoare de gradient a fundalului de gradient în „# 0c71c3”.

Fila de proiectare

În subcategoria Animație, adăugați „350 ms” la opțiunea Întârziere animație.

Setările modulului al treilea divizor

Fila Conținut

Efectuați aceeași modificare la cel de-al treilea divizor, dar folosiți în schimb culoarea „# 8300e9”.

Fila de proiectare

Și, în sfârșit, adăugați o întârziere a animației de '700ms'.

3. Seria Gradient

Setările primului modul divizor

Fila Conținut

Pentru primul divizor, utilizați următoarele setări de fundal de gradient:

• Prima culoare: # 0970a0
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: liniar
• Direcția gradientului: 119 grade
• Poziția inițială: 0%
• Poziție finală: 86%

Fila de proiectare

În fila Design, alegeți „#FFFFFF” ca culoare a separatorului.

Apoi, efectuați următoarele modificări la subcategoria Stiluri:

• Stil divizor: solid
• Poziția divizorului: centrat vertical

În timp ce vă aflați în aceeași filă, asigurați-vă că următoarele setări se aplică subcategoriei de dimensionare:

• Greutatea divizorului: 3
• Înălțime: 10 px
• Lățime: 25%
• Alinierea modulului: stânga

Adăugați „15 px” la umplerea de jos din subcategoria Spacing.

Și, în cele din urmă, utilizați următoarele setări pentru subcategoria Animație:

• Stil de animație: Slide
• Repetați animația: o dată
• Direcția animației: Stânga
• Durata animației: 2000 ms
• Intensitate animație: 100%

Setările modulului al doilea divizor

Fila Conținut

Setările de fundal de gradient pentru al doilea divizor sunt ușor diferite:

• Prima culoare: # 0970a0
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 0%
• Poziție finală: 100%

Fila de proiectare

În subcategoria Dimensionare, schimbați Alinierea modulului în centru.

În cele din urmă, centralizați și Direcția de animație.

Setările modulului al treilea divizor

Fila Conținut

Al treilea divizor conține, de asemenea, un alt gradient de fundal:

• Prima culoare: rgba (255,255,255,0)
• A doua culoare: # 0970a0
• Tipul gradientului: liniar
• Direcția gradientului: 119 grade
• Poziția inițială: 14%
• Poziție finală: 100%

Fila de proiectare

Vom face aceleași modificări pe care le-am făcut la cel de-al doilea divizor, dar vom folosi dreapta în loc de centru.

4. Cercul rulant

Setările primului modul divizor

Fila Conținut

Începeți prin aplicarea următoarelor setări de fundal de gradient:

• Prima culoare: # e09900
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 20%
• Poziție finală: 21%

Fila de proiectare

Primul lucru pe care trebuie să îl faceți în fila Design este să folosiți culoarea „# 000000” pentru divizor.

Apoi, selectați „Solid” ca stil divizor și „Vertical Centered” ca poziție divizor.

Continuând, efectuați următoarele modificări la subcategoria Dimensionare:

• Greutatea divizorului: 2
• Înălțime: 50 px
• Lățime: 40%
• Alinierea modulului: centru

În cele din urmă, subcategoria Animație va avea nevoie de următoarele setări:

• Stil de animație: Roll
• Repetați animația: o dată
• Regia de animație: Centru
• Durata animației: 1500 ms
• Întârziere animație: 850 ms
• Intensitatea animației: 60%

Setările modulului al doilea divizor

Fila Conținut

Schimbați prima culoare de gradient în „# 0c71c3”.

Fila de proiectare

Și schimbați întârzierea animației la „0ms”.

Setările modulului al treilea divizor

Fila Conținut

Pentru ultimul separator, va trebui doar să schimbați culoarea de fundal a primului gradient în „# 8300e9”.

5. Suportul

Setările primului modul divizor

Fila Conținut

Utilizați următoarele setări de fundal de gradient:

• Prima culoare: # e0d1b1
• A doua culoare: # e09900
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 36%
• Poziție finală: 100%

Fila de proiectare

Asigurați-vă că culoarea separatorului este aceeași cu culoarea de fundal a secțiunii. În acest caz, acesta este „# f4f4f4”.

Derulați în jos fila de proiectare și utilizați „Dashed” ca stil divizor și „Sus” ca poziție divizor.

Efectuați următoarele setări pentru subcategoria Dimensionare:

• Greutatea divizorului: 100
• Înălțime: 18 px
• Lățime: 60%
• Alinierea modulului: centru

De asemenea, va trebui să adăugați „15 px” în partea de sus, dreapta și stânga.

În cele din urmă, utilizați următoarele setări de animație:

• Stil de animație: Zoom
• Repetați animația: o dată
• Regia de animație: Centru
• Durata animației: 1000 ms
• Intensitate animație: 80%

Setările modulului al doilea divizor

Fila Conținut

Schimbați culorile fundalului de gradient în „# 87acc1” și „# 0c71c3”.

Fila de proiectare

Apoi, schimbați Durata animației la „1300ms” și întârzierea animației la „250ms”.

Setările modulului al treilea divizor

Fila Conținut

Culorile de gradient utilizate în al treilea separator sunt „# c9a4e8” și „# 8300e9”.

Fila de proiectare

Schimbați durata animației la „1300ms” și întârzierea animației la „500ms”.

6. Liniile duble

Setările primului modul divizor

Fila Conținut

Aplicați următoarele setări de fundal de gradient:

• Prima culoare: # e09900
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: liniar
• Direcția gradientului: 179 grade
• Poziția inițială: 0%
• Poziție finală: 45%

Fila de proiectare

Alegeți „# 000000” ca culoare separatoare.

În subcategoria Stiluri, utilizați „Dublu” ca stil divizor și „Centrat vertical” ca poziție divizor.

Mergând mai departe, utilizați următoarele setări pentru subcategoria Dimensionare:

• Greutatea divizorului: 5
• Înălțime: 25 px
• Lățime: 35%
• Alinierea modulului: stânga

În cele din urmă, utilizați următoarele setări de animație:

• Stil de animație: Roll
• Repetați animația: o dată
• Direcția animației: Stânga
• Durata animației: 1000 ms
• Intensitatea animației: 50%

Setările modulului al doilea divizor

Fila Conținut

Schimbați prima culoare de gradient în „# 0c71c3”.

Fila de proiectare

Apoi, utilizați o animație diferită pentru al doilea divizor:

• Stil de animație: Fade
• Repetați animația: o dată
• Durata animației: 1400 ms

Setările modulului al treilea divizor

Fila Conținut

Pentru al treilea separator, utilizați „# 8300e9” ca culoare de fundal pentru primul gradient.

Fila de proiectare

Singurul lucru pe care va trebui să îl schimbați în fila Design este Direcția de animație, care este în acest caz „Corect”.

7. Podul

Setările primului modul divizor

Fila Conținut

Începeți prin atribuirea „# 8300e9” fundalului.

Fila de proiectare

Continuați folosind culoarea de fundal a secțiunii ca culoare separatoare, care este în acest caz „# f4f4f4”.

Apoi, utilizați „Punctat” ca stil divizor și „Sus” ca poziție divizor.

În subcategoria Dimensionare, utilizați următoarele setări:

• Greutatea divizorului: 15
• Înălțime: 7 px
• Lățime: 70%
• Alinierea modulului: stânga

Vom avea nevoie de niște căptușeli personalizate:

• Căptușeală superioară: 7 px
• Garnitura dreapta: -7px
• Căptușeală stângă: -7px

Animația pe care o vom folosi are următoarele setări:

• Stil de animație: Slide
• Repetați animația: o dată
• Direcția animației: Stânga
• Durata animației: 800 ms
• Întârziere animație: 400 ms
• Intensitatea animației: 30%

Setările modulului al doilea divizor

Fila Conținut

Pentru al doilea divizor, schimbați fundalul în „# 0c71c3”.

Fila de proiectare

Vom folosi și o altă animație:

• Stil de animație: Zoom
• Repetați animația: o dată
• Regia de animație: Centru
• Durata animației: 800 ms
• Intensitatea animației: 30%

Setările modulului al treilea divizor

Fila Conținut

Al treilea separator va folosi „# 8300e9” ca culoare de fundal.

Fila de proiectare

Animația pentru al treilea divizor este, de asemenea, ușor diferită:

• Stil de animație: Zoom
• Repetați animația: o dată
• Direcția animației: Corect
• Durata animației: 800 ms
• Întârziere animație: 400 ms
• Intensitatea animației: 30%

8. Eleganța

Setările primului modul divizor

Fila Conținut

Începeți prin adăugarea următorului fundal de gradient la primul divizor:

• Prima culoare: # 000000
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 20%
• Poziție finală: 20%

Fila de proiectare

Utilizați culoarea „# 8300e9” pentru divizorul dvs.

Apoi, utilizați „punctat” ca stil de divizor ”și„ centrat vertical ”ca poziție de divizor.

Vom avea nevoie și de o căptușeală superioară de „40 px”.

Și o animație cu următoarele setări:

• Stil de animație: Bounce
• Repetați animația: o dată
• Direcția animației: Jos
• Durata animației: 1000 ms

Setările modulului al doilea divizor

Fila de proiectare

Pentru al doilea divizor, schimbați culoarea în „# 0c71c3”.

Animația va avea nevoie și de câteva modificări:

• Regia de animație: Centru
• Durata animației 1500 ms

Setările modulului al treilea divizor

Fila de proiectare

Al treilea separator va folosi „# 8300e9” ca culoare.

Și va avea „Sus” ca direcție de animație.

9. Subtilitatea

Setările primului modul divizor

Fila Conținut

Alegeți următoarele setări pentru fundalul de gradient:

• Prima culoare: # 8300e9
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 0%
• Poziție finală: 38%

Fila de proiectare

În subcategoria Dimensionare, veți avea nevoie de următoarele setări:

• Greutatea divizorului: 0
• Înălțime: 4 px
• Lățime: 100%

În cele din urmă, animația pe care o vom folosi are următoarele setări:

• Stil de animație: Bounce
• Repetați animația: o dată
• Direcția animației: sus
• Durata animației 1800 ms

Setările modulului al doilea divizor

Fila Conținut

Pentru al doilea divizor, schimbați culoarea de fundal a primului gradient în „# 0c71c3”.

Setările modulului al treilea divizor

Fila Conținut

Efectuați aceeași modificare la cel de-al treilea separator, dar folosiți în schimb culoarea violet „# 8300e9”.

10. Strălucirea

Setările primului modul divizor

Fila Conținut

Utilizați următoarele setări de fundal de gradient pentru ultima serie de separatoare:

• Prima culoare:
• A doua culoare:
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 0%
• Poziție finală: 38%

Fila de proiectare

Alegeți și culoarea de fundal a secțiunii ca culoare separatoare, în acest caz, este „# f4f4f4”.

Apoi, utilizați „Dashed” ca stil divizor și „Vertical Centered” ca poziție divizor.

În subcategoria Dimensionare, utilizați următoarele setări:

• Greutatea divizorului: 70
• Înălțime: 20 px
• Lățime: 100%

În cele din urmă, vom folosi o animație cu următoarele opțiuni:

• Stil de animație: Fade
• Repetați animația: o dată
• Durata animației: 1800 ms
• Întârziere animație: 800 ms

Setările modulului al doilea divizor

Fila Conținut

Pentru cel de-al doilea divizor, schimbați culoarea de fundal a doua gradientă în „# 0c71c3”.

Fila de proiectare

Și adăugați o întârziere de animație de „250ms”.

Setările modulului al treilea divizor

Fila Conținut

Pentru ultimul separator, schimbați culoarea de fundal a doua gradientă la „# 8300e9”.

Fila de proiectare

Și finalizați punând Animation Delay la „0ms”.

Gânduri finale

Cu noile opțiuni Divi, o mulțime de lucruri creative noi sunt posibile cu setările încorporate ale fiecărui modul. În acest post, v-am arătat în mod specific cum aceste opțiuni vă pot ajuta să vă îmbunătățiți designul prin intermediul modulului divizor. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de VikiVector / shutterstock.com