Cum să poziționați butoanele în mod absolut pentru a crea machete unice în Divi

Opțiunile de poziție încorporate ale Divi sunt un instrument de proiectare convenabil pentru poziționarea precisă a oricărui element Divi, inclusiv a butoanelor. De cele mai multe ori, ne bazăm pe poziția statică implicită a unui buton care păstrează fluxul documentului (sau al paginii). Cu toate acestea, dacă știm cum să poziționăm butoanele în mod absolut, putem crea câteva machete unice și practice pentru conținutul nostru Divi.

În acest tutorial, vă vom arăta cum să creați 4 machete de butoane diferite, care vor accentua în mod unic modulul Divi's Blurb. Acest lucru va fi util atunci când utilizați blurbs pe site-ul dvs. web.

Să începem.

Trage cu ochiul

Consultați această privire rapidă asupra celor patru planuri de butoane pe care le vom construi în acest tutorial.

Descărcați GRATUIT aspectele butonului Divi

Pentru a pune mâna pe proiectarea aspectului butoanelor din acest tutorial, 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șierele

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.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea aspectului butoanelor nr. 1: butoane duble de jos

Pentru primul dintre cele patru machete de butoane, vom crea butoane cu fund dublu sub un modul de blurb. Aceasta este o opțiune excelentă pentru prezentarea conținutului (cum ar fi serviciile) care necesită două CTA-uri. În plus, acesta este un mod excelent de a vă menține butoanele lipite în partea de jos a coloanelor cu înălțimi egale.

Pentru a începe, adăugați un rând cu două coloane (0ne jumătate jumătate) în secțiune.

Setări rând

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 2
• Egalizați înălțimile coloanei: DA
• Lățime: 100%
• Marja: 50 px de jos
• Căptușeală: 0 px sus, 0 px jos

Setări coloana 1

• Culoare fundal: # 2e3858
• Căptușeală: fund de 50 px

Această umplutură de jos va crea spațiul necesar pentru când adăugăm butoanele poziționate absolut.

Blurb Module Design

Apoi, adăugați un modul blurb în coloana 1.

Apoi, încărcați o imagine în modulul blurb după cum urmează:

Accesați setările de proiectare și actualizați următoarele:

• Aliniere imagine / pictogramă: stânga
• Font de titlu: PT Sans
• Greutatea fontului titlului: Bold
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 38 px
• Spațierea literelor de titlu: 2 px
• Culoarea textului corpului: #ffffff
• Lățimea imaginii: 40%
• Lățimea conținutului: 100%
• Lățime: 100%
• Căptușeală: 50 px, sus, 50 px jos, 30 px stânga, 30 px dreapta

Adăugarea butoanelor duble de jos

Butonul # 1 Design

Adăugați un nou modul buton sub modulul blurb.

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

• Dimensiune text buton: 16 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 2dc3a3
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: PT Sans
• Buton Font Greutate: Bold
• Stil Font Buton: TT
• Marja: 0 px de jos
• Căptușeală: 1em sus, 1em jos, 1,5em stânga, 2,5em dreapta

Butonul # 1 Poziționare absolută

Pentru a poziționa butonul absolut în partea stângă jos a coloanei, actualizați următoarele:

• Poziție: Absolută
• Locație: stânga jos

Divi face acest lucru ușor cu grila de locație încorporabilă. Din moment ce dorim ca butonul să stea la culoare în partea de jos a coloanei, nu sunt necesare valori de compensare.

Butonul # 2 Design și poziție

Pentru a crea butonul # 2, copiați modulul butonului anterior.

Duplicatul va fi stivuit direct deasupra butonului anterior, astfel încât, dacă utilizați generatorul de imagini, poate părea că nu s-a întâmplat nimic. Faceți clic pentru a deschide setările modulului buton și actualizați următoarele:

• Culoare fundal: # df4570

• Locația poziției: jos dreapta

Acum ștergeți coloana 2 goală curentă și dublați coloana 1 pentru a obține un design duplicat exact și în coloana din dreapta.

Rezultatul aspectului butonului nr. 1

Verificați rezultatul. Observați că conținutul din coloana din dreapta împinge coloana mai departe în jos, dar pentru că butoanele noastre sunt poziționate absolut, acestea continuă să îmbrățișeze fundul pentru un design simetric frumos.

Crearea aspectului butoanelor nr. 2: trei butoane laterale

Pentru următorul aspect al butoanelor, vom poziționa trei butoane în partea dreaptă a unui modul blurb într-o singură coloană.

Pentru a porni acest proiect de layout al butonului următor, copiați rândul anterior.

Setări Blurb

Actualizați setările de blurb după cum urmează:

• Culoare fundal: # df4570
• Lățimea imaginii: 60%
• Lățime: 56% (desktop și tabletă), 100% (telefon)

Aceasta va crea camera de care avem nevoie în dreapta blurbului pentru a adăuga aspectul nostru cu trei butoane.

Butonul de poziționare # 1

Pentru a poziționa butonul # 1, deschideți setările butonului pentru butonul verde din colțul din stânga jos și actualizați următoarele:

• Poziție: Absolută (desktop și tabletă), relativă (telefon)
• Locație: dreapta sus
• Decalaj vertical: 20% (desktop și tabletă), 0% (telefon)
• Decalaj orizontal: 5% (desktop și tabletă), 0% (telefon)

Butonul de poziționare # 2

Pentru a poziționa butonul # 2, copiați butonul pe care tocmai l-ați poziționat. Puteți șterge butonul roșu din dreapta jos, deoarece nu vom avea nevoie de el.

Apoi deschideți setările pentru butonul duplicat și actualizați următoarele:

• Culoare fundal: # df4570

Apoi mutați butonul puțin în jos creșteți decalajul vertical.

• Decalaj vertical: 35%

Butonul de poziționare # 3

În cele din urmă, repetați procesul încă o dată, duplicând butonul anterior și actualizând următoarele:

• Culoare fundal: # 3599e5
• Decalaj vertical: 50%

Rezultatul aspectului butonului nr. 2

Verificați rezultatul final al aspectului cu trei butoane.

Crearea aspectului butoanelor nr. 3: butoane împrăștiate și scalate

Pentru următorul aspect, vom poziționa butoanele un pic mai sporadic și apoi vom ajusta dimensiunea câtorva butoane folosind scala de transformare.

Pentru a începe, copiați rândul anterior care conține aspectul cu trei butoane.

Setări Blurb

Apoi deschideți setările pentru modulul blurb din coloana 1 și actualizați următoarele:

• Lățime: 60%

• Culoare fundal: transparent
• Lățime: 60%
• Alinierea modulului: centru

• Alinierea textului: centru
• Alinierea modulului: centru

• Lățimea chenarului: 2 px
• Culoare margine: rgba (255,255,255,0,15)

• Dimensiune text text: 20 px

• Marjă: partea superioară de 50 px

Buton # 1 Poziționare

• Decalaj vertical: 8%
• Decalaj orizontal: -7%

Buton # 2 Poziționare

• Poziție Locație: dreapta sus
• Decalaj vertical: 34%
• Decalaj orizontal: -10%

• Scala de transformare: 80%

Butonul # 3 Poziționare

• Poziție Locație: dreapta jos
• Decalaj vertical: -3%
• Decalaj orizontal: 5%

• Scara de transformare: 138%

Setări rând

• Lățimea jgheabului: 4
• Lățime: 80% (desktop)

Aspect buton # 3 Rezultat

Verificați rezultatul final.

Crearea aspectului butonului # 4: Butoane Pull-Tab

Pentru acest ultim aspect al butonului, vom crea câteva file de extragere în colțul din dreapta sus al textului.

Pentru a porni proiectul, copiați rândul aspectului butonului nr. 2.

Setări coloană

Apoi, actualizați setările de fundal pentru coloana # 1 după cum urmează:

• Culoare fundal (desktop): niciuna (implicit)
• Culoare fundal (telefon): # 2e3858

Sub fila Avansat, actualizați opțiunea de vizibilitate, astfel încât depășirea să fie ascunsă pe afișajul telefonului.

• Overflow orizontal (telefon): Ascuns
• Vertical Overflow (telefon): Ascuns

Butonul de poziționare a tabului # 1

Acum putem folosi cele trei butoane aflate în prezent în coloană ca butoane pull-tab. Deschideți setările pentru butonul de sus și actualizați următoarele:

• Decalaj vertical: 0 px
• Decalaj orizontal: 0 px

Întrucât vom folosi butonul pentru o filă, trebuie să facem loc pentru pictograma potrivită, astfel încât să arate centrat ori de câte ori iese din spatele modulului blurb. Continuați și actualizați umplerea butonului după cum urmează:

• Garnitura: 2em stânga, 3em dreapta

Apoi adăugați următorul CSS personalizat la elementul After:

padding-left: 10px;

Apoi actualizați decalajul orizontal pe telefon după cum urmează:

• Decalaj orizontal (telefon): -134px

Aceasta va ascunde partea stângă a butonului în afara coloanei de pe afișajul telefonului, astfel încât butonul complet să se afișeze la cursor / clic.

Poziționarea butonului de extragere # 2

Pentru a poziționa al doilea buton de extragere, copiați butonul anterior și actualizați culoarea de fundal a duplicatului.

• Culoare fundal: # df4570

Apoi, actualizați poziția după cum urmează:

• Decalaj vertical: 63 px

Apoi actualizați următoarele opțiuni de poziție pentru afișarea telefonului:

• Poziție (telefon): relativă
• Decalaj vertical (telefon): 0%

Butonul de poziționare a filei de tragere # 3

În cele din urmă, pentru a poziționa al treilea buton pull-tab, copiați modulul butonului anterior. Apoi deschideți setările pentru modulul buton duplicat și actualizați următoarele:

• Culoare fundal: # 3599e5
• Decalaj vertical: 126 px

Odată ce al treilea buton este în poziție, utilizați funcția de selectare multiplă a lui Divi, ținând apăsat Cmd (sau Ctrl) și făcând clic pe fiecare dintre modulele butonului.

Apoi deschideți setările unuia dintre modulele butoanelor și adăugați următoarea transformare la trecere.

• Transformă axa X tradusă (plasați): 68%

Aceasta va actualiza toate cele trei butoane cu funcția de extragere a hover-ului deplasându-l la dreapta 68%.

Poziționarea modulului Blurb

Acest aspect al butoanelor necesită ca modulul blurb să ascundă parțial cele trei butoane. Prin urmare, vom da blurbului o lățime de 100% și apoi vom folosi marginea dreaptă pentru a expune piesa necesară din filele butoanelor. Apoi, tot ce trebuie să facem este să conferim blurbului un index Z ridicat pentru a ne asigura că stă deasupra butoanelor.

Deschideți setările modulului blurb și actualizați următoarele:

• Lățime: automată
• Marja: 50 px dreapta
• Poziție: relativă
• Indicele Z: 11

Apoi actualizați culoarea de fundal.

• Culoare fundal: # 2e3858

Setări rând

După ce butoanele blurb și pull-tab sunt terminate, deschideți setările rândului și actualizați lățimea pentru a oferi acelor file spațiu de mișcare.

• Lățime: 80%

Ștergeți coloana 2 și apoi copiați coloana 1, astfel încât să aveți același design în fiecare.

Apoi deschideți setările pentru coloana 1 și dați-i următorul index Z:

• Indicele Z: 12

Acest lucru vă va asigura că butoanele din coloana unu nu vor fi ascunse în spatele conținutului din coloana 2 de pe mouse.

Dacă doriți, puteți actualiza pictogramele pentru fiecare buton pentru a se potrivi nevoilor dvs.

Aspect buton # 4 Rezultat

Verificați rezultatul final al aspectului butonului pull-tab.

Rezultate finale

Gânduri finale

Butoanele de poziționare deschid absolut ușa pentru dispuneri nesfârșite de butoane în Divi. Sperăm că acest tutorial vă ajută să înțelegeți cum să utilizați cel mai bine poziția absolută în Divi. Alte caracteristici utile încorporate, cum ar fi opțiunile de transformare și indexul Z, fac din design butoane poziționate absolut.

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

Noroc!