Cum să creați modele de colț plutitoare pentru conținut în Divi

Crearea de modele de colț plutitoare este o modalitate simplă și ușoară de a adăuga un pic de stil creativ Modulelor Divi, despre care s-ar putea să nu fi crezut că este posibil fără un cod personalizat. Vești bune! Cu Divi, puteți utiliza separatoare și blurbs pentru a stiliza cele patru colțuri ale modulului dvs. utilizând opțiunile integrate Divi. Și, poate fi destul de distractiv să încerci diferitele posibilități.

În acest tutorial, vă voi arăta cum să creați modele de colț plutitoare pentru conținutul dvs. în Divi. Odată ce aveți elementele pe loc, puteți stiliza acele colțuri cu nenumărate forme, icoane și culori!

Să începem!

Trage cu ochiul

Iată o scurtă privire asupra proiectelor de colț plutitoare posibile din acest tutorial.

Descărcați GRATUIT layout-ul cu exemple de proiectare a chenarelor flotante

Pentru a vă pune mâna pe aspectul planurilor de margini plutitoare, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierul

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Acum să trecem la tutorial, nu-i așa?

Noțiuni de bază

Singurul lucru de care aveți nevoie pentru acest tutorial este Divi. Vom construi aceste exemple de la zero pe capătul frontal al Divi Builder.

Pentru a începe, creați o pagină nouă și dați-i paginii un titlu. Faceți clic pentru a utiliza Divi Builder pe front-end și alegeți opțiunea „Construiți de la zero”.

Acum ești gata să pleci!

Crearea șablonului de aspect pentru designul colțului plutitor

Deoarece vor exista nenumărate posibilități de proiectare cu acest design, este logic să creați aspectul de bază (sau șablonul) din care să lucrați.

Pentru acest șablon, vom adăuga patru divizoare la fiecare colț al unui modul text. Apoi, odată ce aspectul este la locul său, veți putea explora noi modalități de a personaliza aceste separatoare pentru modele unice.

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

Înainte de a adăuga modulul text, actualizați setările rândului după cum urmează:

Lățime personalizată: 640 px
Împletire personalizată: 0 px sus, 0 px jos

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

Dimensiune text text: 20 px
Înălțimea liniei textului: 1,8em
Marjă personalizată: -25 px sus, 25 px jos, 25 px stânga, 25 px dreapta
Împletire personalizată (desktop): 10% sus, 10% jos, 10% stânga, 10% dreapta
Căptușeală personalizată (telefon): 20% sus, 20% jos
Lățimea chenarului: 4 px
Culoare margine: #eeeeee

Marja personalizată și căptușeala vor ajuta la alinierea modulelor noastre de separare pe care le vom adăuga în curând. Deoarece separatoarele vor avea o înălțime și o lățime de 50 px, marja de sus și de jos -25 px vor trage aceste separatoare la jumătatea modului de text pentru un design simetric frumos (veți vedea).

Adăugarea primelor două divizoare de colț plutitoare

Cu modulul de text în poziție, putem începe să adăugăm primele două modele de colț plutitoare folosind module divizoare.

Creați un nou modul divizor și trageți-l în partea de sus a modulului text.

Apoi și actualizați setările divizorului după cum urmează:

Show Divider: NU

Culoare fundal: # 7cda24 (sau orice culoare doriți)
Înălțime: 50 px
Lățime: 50 px

Înălțimea și lățimea de 50 px ne oferă pătratul perfect pe care îl putem folosi pentru chenarul nostru plutitor.

Acum, adăugați o umbră de cutie la divizor pentru a crea efectul de plutire după cum urmează:

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 0px
Puterea neclarității umbrei cutiei: 0 px
Puterea răspândirii umbrei cutiei: 20 px
Culoare umbră: #ffffff

Pentru a ne asigura că modulul divizor rămâne deasupra modulului text (și nu se ascunde în spatele acestuia), trebuie să adăugăm un fragment de CSS la elementul principal după cum urmează:

Element principal CSS:

position: relative

Apoi actualizați indexul Z la 1.

Apoi copiați modulul divizor și actualizați setările divizorului duplicat după cum urmează:

Alinierea modulului: corect
Marjă personalizată: -50 px de sus

Aceasta aliniază divizorul la dreapta și îl trage în sus la înălțimea exactă a modulului divizor așezat deasupra acestuia. Acest lucru creează plasarea exactă a colțului pe care o căutăm.

Adăugarea divizoarelor de colț de jos

Pentru a adăuga cele două separatoare de colț de jos, implementați modul de vizualizare wireframe și copiați separatoarele stânga și dreapta pe care tocmai le-ați creat și lipiți-le sub modulul text (asigurându-vă că separatorul stâng rămâne stivuit deasupra divizorului drept așa cum se arată în imagine de mai jos).

Asta e! Să verificăm designul final al aspectului nostru de bază.

Explorarea noilor modele de colț plutitor

Cu acest șablon, putem explora câteva modele diferite care sunt posibile. Puteți salva întreaga secțiune în biblioteca Divi, astfel încât să o puteți păstra ca șablon în viitor. Dar, deocamdată, să duplicăm secțiunea și să explorăm un nou design.

Forme de diamant cu fundal de gradient

Cu un duplicat al șablonului nostru, utilizați funcția multiselectare pentru a selecta toate cele patru module divizoare. Apoi faceți clic pe pictograma roată setări pe unul dintre separatoarele selectate pentru a implementa setările modale ale elementului. S-ar putea să folosiți modul de clic pentru acest pas.

În setările elementului, actualizați următoarele:

Culoare stânga de fundal degradat: # 7cda24
Culoare dreaptă de fundal degradat: # edf000
Direcția gradientului: 45 grade

Apoi utilizați opțiunile de transformare pentru a roti separatorul într-o formă de diamant.

Transformare Rotire axa Z: 45 grade

Iată designul final.

Divizoare înclinate

De asemenea, puteți utiliza opțiunea de înclinare a transformării pentru a distorsiona separatoarele pentru un design și mai unic. Puteți fie să adăugați un design de înclinare separat pentru fiecare divizor, fie să utilizați multiselect pentru a actualiza înclinarea de transformare pentru toți patru în același timp cu -37deg pe axa X și Y.

Iată cum ar arăta asta.

Modele de fundal întunecat

Puteți chiar experimenta adăugând o culoare de fundal închisă la modulul text pentru un design unic de colț plutitor. Iată un exemplu de modul de text cu o culoare de fundal # 002130 folosind rotirea sau înclinarea fără transformare.

Colțuri de margine rotunjite

Pentru a pune câteva colțuri rotunjite pe design, puteți adăuga pur și simplu colțuri rotunjite la rând după cum urmează:

Colțuri rotunjite: 20 px

Cercuri colțuri plutitoare

Pentru a transforma acele colțuri pătrate în cercuri, puteți adăuga următorul fragment de CSS personalizat la elementul principal al fiecărui divizor:

border-radius: 50%;

Deoarece separatoarele au 50 px cu 50 px, acest lucru va crea un design de cerc perfect.

După cum puteți vedea, există o mulțime de moduri diferite în care puteți modifica aceste elemente pentru nenumărate noi modele de colț.

Acum, să explorăm folosirea pictogramelor blurb pentru colțuri plutitoare în loc de module divizor.

Crearea de colțuri plutitoare cu pictograme Blurb

Adăugarea pictogramelor Blurb în fiecare colț al modulului text vă poate oferi și mai multe modele unice. Puteți utiliza același șablon de aspect pe care l-am construit la începutul tutorialului. Singura diferență va fi utilizarea modulelor blurb în loc de module divider pentru cele patru colțuri.

Continuați și obțineți un duplicat al șablonului de aspect al secțiunii implementat.

Apoi ștergeți modulele divizoare deasupra și dedesubtul modulului text.

Adăugarea primelor două colțuri ale pictogramei blurb

Întrucât vom dori să folosim doar modulul blurb pentru a afișa o singură pictogramă, trebuie să ne asigurăm și să obținem dimensiunea și spațiul corecte.

Adăugați un modul blurb deasupra modulului text și scoateți titlul și textul corpului. Apoi faceți clic pentru a utiliza o pictogramă în locul unei imagini și selectați pictograma cerc Facebook.

Apoi actualizați următoarele setări de blurb (aceste setări sunt foarte asemănătoare cu setările pe care le-am adăugat la modulul divizor în primul exemplu):

Culoare fundal: #ffffff
Pictogramă Dimensiune font: 50 px
Lățime: 50 px
Marja personalizată: 0 px de jos
Colțuri rotunjite: 50%
Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 0px
Puterea neclarității umbrei cutiei: 0 px
Puterea răspândirii umbrei cutiei: 20 px
Culoare umbră: #ffffff

Element principal CSS:

position: relative;

Blurb Image CSS:

margin-bottom: 0px

Indicele Z: 1

Apoi, copiați modulul blurb pentru a crea altul chiar sub blurb-ul curent și actualizați următoarele:

Aliniere modul: dreapta
Marjă personalizată: -50 px de sus

Apoi copiați cele două module superioare de blurb și lipiți-le sub modulul text (asigurându-vă că blurb stânga rămâne stivuite deasupra blurbului din dreapta).

Apoi, puteți actualiza pictogramele pentru fiecare blurb la orice doriți.

Iată designul final.

Explorați mai multe modele cu colțurile plutitoare ale pictogramei Blurb

Cu această configurație puteți explora multe modele unice. Puteți schimba pictogramele, puteți folosi diferite combinații de culori și chiar le puteți scala sau roti cu opțiuni de transformare.

Iată un exemplu de design care utilizează o culoare de fundal închisă pentru modulul text și diferite culori ale pictogramei.

Funcționează în aspecte cu coloane multiple

Atâta timp cât păstrați elementele împreună, puteți adăuga aceste aspecte de colț plutitoare în mai multe coloane.

Încheierea

Crearea proiectelor de colț plutitoare pentru conținutul dvs. în Divi arată într-adevăr puterea constructorului Divi. Cu toate opțiunile încorporate disponibile, puteți crea nenumărate variante de design dintr-un șablon de aspect de bază. Sper că acest lucru vă va inspira să vă distrați explorând noi modele proprii.

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

Noroc!