Cum să adăugați umbre cutie unilaterale pentru a proiecta elemente în Divi

Adăugarea de umbre de cutie unilaterale la diferite elemente de design din Divi este un mod subtil de a adăuga o înflorire creativă fără a distrage atenția de la conținut. În acest tutorial, vă voi arăta cum să adăugați umbre de cutie unilaterale la aspectul paginii cu întrebări frecvente despre terapia lui Divi. Ca un sfat bonus, vă voi arăta, de asemenea, cum să combinați pictogramele blurb ca grafică centrată vertical. Învățând aceste tehnici de proiectare Divi, puteți adăuga umbre de cutie unilaterale la orice module sau coloane dorite.

Să începem.

Trage cu ochiul

Iată o scurtă prezentare a proiectului de aspect FAQ pe care îl vom construi folosind umbre de cutie unilaterale.

Noțiuni de bază

Pentru a începe, va trebui să creați o nouă pagină. Din tabloul de bord WordPress, navigați la Pagini> Adăugați un nou. Apoi acordați titlului paginii dvs. și implementați constructorul vizual. Selectați opțiunea „Alegeți un aspect premade”. Din fereastra pop-up Încărcare din bibliotecă, găsiți și selectați pachetul de aspect terapeut. Apoi selectați aspectul paginii cu întrebări frecvente despre terapeut și faceți clic pe „Utilizați acest aspect”.

Acum sunteți gata să începeți proiectarea.

Partea 1: Organizarea aspectului

În acest aspect premade, ne vom concentra atenția asupra celei de-a doua secțiuni care conține întrebări simulate în interiorul mai multor module de comutare. Pentru început, să schimbăm aspectul coloanei rândului în trei coloane (1/3 1/3 1/3).

Apoi, mutați toate modulele din coloana 2 peste în coloana 3 folosind caracteristica Multiselect a lui Divi. Pentru aceasta, țineți apăsată Comanda (sau Control) și faceți clic pe fiecare modul din coloana 2 până când sunt selectate toate. Apoi trageți-le în coloana 3.

Acum trebuie să acordăm rândului nostru ceva mai mult spațiu. Deschideți setările rândului și actualizați următoarele:

Lățime: 80%
Lățimea jgheabului: 2
Egalizați înălțimile coloanei: DA

Partea 2: Proiectarea modulelor de comutare

Pentru a personaliza designul tuturor modulelor de comutare din această secțiune simultan, utilizați caracteristica Multiselect pentru a selecta fiecare dintre modulele de comutare. După ce toate sunt selectate, deschideți setările pentru oricare dintre modulele de comutare.

Apoi actualizați următoarele:

Deschideți Comutare Culoare text: #ffffff
Deschideți comuta Culoarea fundalului: rgba (0,0,0,0)
Comutare închisă Culoare text: #ffffff
Comutare închisă Culoare fundal: rgba (0,0,0,0)

Culoarea textului corpului: #ffffff

Căptușeală personalizată: 3vw sus, 3vw jos, 2vw stânga, 2vw dreapta

Acum putem adăuga o umbră de casetă în partea stângă a modulului nostru de comutare prin actualizarea opțiunilor de umbră a casetei, după cum urmează:

Poziție orizontală a umbrei cutiei: -30px
Box Shadow Vertical Position: 0px
Puterea neclarității umbrei cutiei: 40 px
Puterea răspândirii umbrei cutiei: -35px
Culoare umbră: rgba (0,0,0,0,4)

Trucul pentru a poziționa corect umbra cutiei este de a muta umbra spre stânga, setând poziția orizontală la -30px. După aceea, trebuie să găsiți echilibrul corect între rezistența neclară și rezistența la răspândire pentru a menține umbra cutiei vizibilă în stânga, fără ca aceasta să curgă în partea de sus și de jos a modulului.

Salvează setările.

Acum, toate modulele dvs. de comutare au fost actualizate cu noul design.

Cu toate acestea, dorim ca umbra de casetă a modulelor de comutare din coloana din dreapta să fie poziționată în partea dreaptă (nu în stânga). Pentru a schimba acest lucru, utilizați Multiselect pentru a selecta toate modulele de comutare din coloana din dreapta și deschideți setările elementului. Apoi schimbați poziția orizontală de la -30px la 30px după cum urmează:

Poziție orizontală a umbrei cutiei: 30 px

Apoi salvați setările.

Aceasta are grijă de modulele noastre de comutare cu umbrele lor unice de cutie unilaterale. Acum trebuie să adăugăm umbre similare de cutie unilaterale coloanelor noastre.

Partea 3: Adăugarea de umbre cutie unilaterale la coloane

Pentru a adăuga umbre de cutie unilaterale coloanelor, va trebui să adăugăm câteva fragmente de CSS în fila avansată a setărilor rândului.

Deschideți setările rândului și faceți clic pe fila avansată. În interiorul elementului principal al coloanei 1, adăugați următorul CSS:

box-shadow: 30px 0px 70px -45px rgba (0,0,0,0.4)

Dacă nu sunteți familiarizați cu CSS, ar trebui să puteți recunoaște asemănarea codului cu setările modulului umbrelor de casetă disponibile în generatorul Divi. În codul de mai sus ...

30px este valoarea pentru poziția orizontală
0px este valoarea pentru poziția verticală
70px este valoarea pentru rezistența neclară
-45px este valoarea puterii de împrăștiere
rgba (0,0,0,0,4) este culoarea umbrei

Am dat umbrei cutiei de coloane o rezistență de estompare mai mare decât modulele de comutare pentru a crea o adâncime puțin mai mare.

Pentru a adăuga o umbră de casetă stângă la Coloana 3, va trebui să adăugați următorul CSS la Coloana 3 Element principal:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Din nou, singura diferență dintre acest CSS și cea utilizată pentru coloana 1 este poziția orizontală negativă.

Partea 4: Adăugarea pictogramelor Blurb la coloana 2

Acum, când umbrele noastre de cutie unilaterale sunt complete, avem o coloană din mijloc goală, în care putem combina câteva pictograme ale modulului blurb pentru a crea un design grafic simplu. Pentru a face acest lucru, mai întâi adăugați un modul blurb și ștergeți titlul și conținutul. Apoi faceți clic pentru a utiliza o pictogramă și selectați următoarea pictogramă de chat.

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

Culoare pictogramă: rgba (203.241.252,0.37)
Pictogramă Dimensiune font: 20vw
Marjă personalizată: 0px jos

Apoi, copiați modulul blurb pentru a crea unul suplimentar dedesubt.

Apoi actualizați imaginea superioară cu o pictogramă semn de întrebare și actualizați următoarele setări de proiectare:

Pictogramă Dimensiune font: 9vw
Lățime: 40%
Alinierea modulului: dreapta
Marja personalizată: -2vw

În cele din urmă, copiați modulul blurb cu semn de întrebare pe care tocmai l-ați proiectat și lipiți-l sub modulul blurb al pictogramei mari de chat. Apoi actualizați setările de proiectare pentru modulul respectiv, după cum urmează:

Partea 5: Centrarea verticală a modulelor din coloana 2

Pentru a finaliza designul, trebuie să centrăm vertical pictogramele blurb din coloana 2, astfel încât acestea să rămână un element de design centrat pentru aspectul nostru. Pentru a realiza acest lucru, vom valorifica utilizarea de flex a Divi. Deoarece am ales să egalizăm înălțimile coloanei pentru rândul nostru, putem folosi un fragment simplu de CSS pentru a centra toate modulele din coloana 2. Puteți afla întotdeauna mai multe despre cum să aliniați vertical conținutul în Divi după cum doriți. Dar, deocamdată, deschideți setările rândurilor și faceți clic pe fila avansată. Apoi introduceți următorul css în Elementul principal al coloanei 2:

margin: auto

Acum, toate modulele blurb vor fi centrate vertical în coloana 2.

Pentru a face lucrurile mai ușoare la ochi, mergeți înainte un centru al textului de pe fiecare dintre modulele de text așezate în partea de sus a coloanei 1 și a coloanei 2. Apoi adăugați un gradient de fundal la secțiune după cum urmează:

Culoarea din stânga a gradientului de fundal: # 616ce1
Culoarea dreaptă a gradientului de fundal: # 3846e0

Asta e. Acum designul este complet.

Verificați rezultatul final.

Și, observați cum se extinde și se contractă umbra cutiei atunci când deschideți și închideți comutatoarele.

Gânduri finale

Adăugarea umbrelor de cutie unilaterale la module și coloane poate oferi adâncimea conținutului dvs. în moduri creative. Trucul este să știți cum să reglați în mod eficient setările de proiectare a umbrelor casetei Divi. Acest aspect al paginii cu întrebări frecvente este doar unul dintre numeroasele exemple pe care le puteți încorpora acest design. Dar procesul general este destul de simplu și ar trebui să fie o tehnică frumoasă pe care o puteți păstra în setul de instrumente de proiectare pentru proiecte viitoare.

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

Noroc!