3 moduri utile de a utiliza opțiunile de depășire în Divi

Opțiunile de depășire încorporate ale lui Divi fac foarte simplu să adăugați proprietăți css de depășire (adică vizibile, ascunse, scroll) la orice element de pe pagină. Acest lucru este util pentru crearea de designuri unice și conținut care poate fi derulat cu ușurință. În această postare, voi trece prin ceea ce fac aceste opțiuni de depășire. Și, voi parcurge trei moduri utile de a utiliza depășirea pe propriul dvs. site Divi.

Să începem.

Înțelegerea opțiunilor de depășire ale Divi

Opțiunile de depășire Divi vă permit să setați proprietatea de depășire css a unui element la una dintre următoarele valori:

1. Implicit - Valoarea implicită este vizibilă (vezi mai jos).
2. Vizibil - Conținutul debordant va rămâne vizibil și nu va fi decupat atunci când se extinde în afara casetei. Deoarece aceasta este setarea implicită în Divi, va trebui rar să o selectați.
3. Derulare - Conținutul debordant va fi ascuns, dar utilizatorii vor putea defila prin conținutul ascuns fie pe verticală, fie pe orizontală.
4. Ascuns - Conținutul debordant în afara casetei va fi ascuns (fără posibilitatea de derulare)
5. Automat - Această opțiune va activa funcția de derulare ori de câte ori este necesar (de exemplu, conținutul se extinde dincolo de casetă). Acest lucru ar fi util pentru proiectele cu o înălțime sau lățime setată care trebuie să aibă capacități de derulare pe browsere mai mici.

Divi are o opțiune de depășire atât pentru depășirea orizontală, cât și pentru cea verticală, permițându-vă să setați valori de proprietate diferite pentru fiecare. Acest lucru este util atunci când doriți să adăugați funcționalitate de derulare verticală la un element, dar nu doriți să apară și o bară de derulare pe orizontală.

Iată câteva ilustrații rapide preluate din desenele din acest tutorial pentru a vă ajuta să înțelegeți cum funcționează opțiunile de depășire.

Overflow Visible (implicit)

În acest exemplu, conținutul care a fost poziționat în afara containerului rând rămâne vizibil, care este setarea implicită pentru toate elementele din Divi.

Overflow Ascuns

Odată ce adăugați proprietatea ascunsă de revărsare pe rând, conținutul din afara casetei devine tăiat și ascuns în întregime de vizualizare.

Defilare Overflow

Folosirea defilării cu depășire vă permite să ascundeți conținutul în afara containerului cutiei (la fel ca depășirea ascunsă). Diferența principală este că apare o bară de derulare care permite utilizatorului să deruleze conținutul care există dincolo de limitele containerului.

De exemplu, aici este un modul text cu o înălțime de 400 px. Conținutul modulului text se extinde dincolo de modulul text, dar rămâne vizibil în mod implicit.

Dar odată ce adăugați proprietatea de defilare verticală la modulul text, apare bara de defilare care permite utilizatorului să deruleze prin conținutul ascuns.

Acum, că înțelegeți un pic mai bine opțiunile de revărsare, să ne propunem să construim câteva exemple de lucru cu modalități utile de a le folosi în viața reală.

Abonați-vă la canalul nostru Youtube

3 moduri utile de a utiliza opțiunile de depășire ale Divi în Divi

# 1 Folosind Overflow Hidden pentru a decupa conținut debordant pentru modele unice

Pentru a înțelege cum se utilizează proprietatea ascunsă de revărsare, vom crea un exemplu rapid de proiectare cu text debordant și o imagine debordantă. Apoi, vom vedea cum se modifică designul atunci când ne setăm rândul pentru a revărsa ascuns.

Mai întâi, creați o secțiune obișnuită cu un rând de o coloană. Înainte de a începe să adăugăm module, să oferim secțiunii următoarea umplere:

Căptușeală personalizată: 12vw sus, 12vw jos

Apoi actualizați setările rândului după cum urmează:

Lățime: 80vw
Lățime maximă: 80vw
Căptușeală: 0 px sus, 0 px jos
Box Shadow: vezi captura de ecran
Puterea neclarității umbrei cutiei: 80 px

Apoi adăugați un modul text la rând și actualizați următoarele setări ale modulului text:

Mai întâi adăugați un titlu h2 în caseta de conținut, după cum urmează:

<h2>Overflow</h2>

Apoi actualizați setările de proiectare după cum urmează:

Rubrica 2 Font: Lato
Titlul 2 Greutate font: îndrăzneț
Rubrica 2 Stil font: TT
Titlul 2 Aliniere text: centru
Rubrica 2 Culoarea textului: #dddddd
Rubrica 2 Dimensiune text: 15vw
Rubrica 2 Spațierea literelor: 0,1em
Rubrica 2 Text Shadow: vezi captura de ecran
Titlul 2 Culoare umbră text: rgba (0,0,0,0.05)

Acum, pentru a face textul să depășească zona de conținut a rândului, trebuie să folosim margini personalizate. Adăugați următoarea marjă personalizată la modulul text pentru a-l revărsa deasupra rândului (vertical) și de fiecare parte a rândului (orizontal).

Marja: -6vw sus, -10vw stânga, -10vw dreapta

Apoi, adăugați un alt modul de text sub cel pe care tocmai l-ați creat și actualizați următoarele:

Conţinut:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(Apropo, fragmente de cod de acest fel sunt o modalitate excelentă de a profita de opțiunea de defilare overflow.)

Font text: Lato
Alinierea textului textului: dreapta
Dimensiune text text: 24 px (desktop), 16 px (telefon)
Înălțimea liniei textului: 1.3em
Lățime maximă: 50%
Alinierea modulului: corect
Garnitura: 4vw dreapta

Acum, să adăugăm o imagine care se revarsă în afara rândului. Creați un nou modul de imagine sub cele două module de text și apoi încărcați o imagine la alegere.

Apoi actualizați setările imaginii după cum urmează:

Lățime maximă: 35vw
Marja: -12vw sus, -8vw jos, -5vw stânga
Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: -40px
Box Shadow Vertical Position: -50px
Culoare umbră: rgba (0,0,0,0,17)

Proiectați cu Row setat la Overflow Visible (implicit)

Acum, să verificăm designul, menținând deversarea rândurilor setată la vizibil (implicit).

După cum puteți vedea, această opțiune vizibilă implicită pentru deversare este excelentă pentru crearea unor modele frumoase și moderne.

Proiectați cu Row setat la Overflow Hidden

Acum să vedem ce se întâmplă când folosim proprietatea Overflow Hidden pentru rând. Deschideți setările rândului și actualizați următoarele:

Overflow orizontal: ascuns
Vertical Overflow: ascuns

Iată rezultatul.

După cum puteți vedea, conținutul debordant (antetul superior și imaginea) este acum tăiat și ascuns pentru a crea un design unic. Și cu această configurație, puteți profita cu ușurință de opțiunile de transformare pentru a scala și a muta elementele pentru a obține designul corect.

# 2 Utilizarea Defilării pentru a permite utilizatorilor să deruleze conținutul pe verticală

Următorul exemplu introduce o defilare verticală. Această opțiune de depășire este utilă pentru adăugarea de conținut care poate fi derulat la listele de linkuri sau resurse. Puteți transforma orice modul sau rând într-un container pentru conținut care poate fi derulat. Iată cum să o faceți cu un modul text.

Creați o secțiune obișnuită cu un rând cu o coloană. Apoi adăugați un modul text cu următorul conținut:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

Apoi actualizați setările de proiectare a modulului text după cum urmează:

Font text: Lato

Culoare text link: # 333333
Dimensiune text link: 18 px

Culoarea textului listei comandate:
Dimensiune text listă comandată: 20 px
Înălțime linie listă comandată: 1.8em
Tipul stilului listei ordonate: zecimal-conducător-zero

Titlul 3 Greutate font: Ultra Bold
Rubrica 3 Dimensiune text: 50 px
Lățime maximă: 500 px
Căptușeală: 3% sus, 3% jos, 8% stânga, 8% dreapta

Iată cum arată modulul de text înainte de a da o defilare pe înălțime și overflow.

Acum, actualizați modulul text cu o înălțime maximă de 400 px. Deoarece valoarea implicită de deversare pentru modulul de text este vizibilă, veți observa că textul se revarsă sub modul.

Tot ce trebuie să facem acum este să setăm depășirea verticală pentru a derula după cum urmează:

Vertical Overflow: derulați

Iată designul final.

Pentru mai multe exemple despre cum să utilizați defilarea verticală pe site-ul dvs. Divi, consultați aceste postări:

• Cum să creați o machetă de galerie Scroll cu noile opțiuni de depășire ale Divi
• Cum să proiectați o zonă widget de postări recente care poate fi derulată în Divi

# 3 Folosind Defilare Defilare pentru a permite utilizatorilor să deruleze conținutul pe orizontală

Folosirea defilării pentru defilare orizontală este un alt mod de a vă menține conținutul accesibil dintr-o locație concisă. În plus, este, de asemenea, o modalitate excelentă de a încorpora funcționalitatea de glisare laterală pe mobil fără un plugin.

Pentru a vă arăta cum să o faceți, vom construi împreună un exemplu rapid.

Mai întâi, creați o secțiune obișnuită cu un rând de o coloană.

Apoi adăugați un modul de blurb pe rând.

Puteți înlocui imaginea implicită cu o imagine sau o pictogramă nouă. Apoi actualizați setările de proiectare cu câteva modificări:

Alinierea textului: centru
Titlu Font: Lato
Titlu Greutate font: greu
Căptușeală: 3% la stânga, 3% la dreapta

Duplicați modulul blurb de 5 ori, astfel încât să aveți un total de 6 blurbs în coloana de rând.

Apoi actualizați setările rândurilor cu următorul CSS personalizat la Elementul principal al coloanei.

display: grid;
grid-template-columns: repeat(6, 50%);

Acest lucru va transforma coloana dvs. de blurbs într-un aspect orizontal al grilei cu 6 coloane fiecare cu o lățime de 50% din container (sau, în acest caz, rândul). Aceasta înseamnă că două blurbs / coloane vor ocupa spațiul din interiorul rândului. Celelalte 4 module se vor extinde în afara rândului spre partea dreaptă. Aici este utilă proprietatea scroll scroll. Actualizați următoarea opțiune de depășire:

Depășire orizontală: derulați

Acum puteți regla lățimea rândului după cum este necesar, iar cele două blurbs se vor alinia întotdeauna frumos. Iată designul final.

Am adăugat o umbră de cutie la rând, astfel încât să puteți vedea caseta de conținut puțin mai bine. Observați cum se vor afișa inițial două blurbs până când utilizatorul derulează spre dreapta.

Pentru mai multe informații, consultați postarea completă despre crearea cardurilor orizontale.

Gânduri finale

Elementele suprapuse și elementele de poziționare în afara aspectului tipic al grilei devin din ce în ce mai frecvente în aceste zile. În cea mai mare parte, acest lucru se face doar în scopuri de proiectare. Înțelegerea modului de utilizare a opțiunilor de depășire Divi vă va ajuta să înțelegeți cum să ascundeți sau să afișați conținut în afara unui container pentru a crea aceste modele unice. Și, înțelegerea defilării va fi de asemenea utilă pentru adăugarea de conținut defilabil pe site-ul dvs. web.

Sper că acest articol a ajutat să arunce o lumină asupra proprietății de revărsare și modul în care o puteți folosi pentru următorul dvs. proiect Divi.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!