Cum să proiectezi o secțiune de difuzoare invitate cu un CTA eficient în Divi

Indiferent dacă aveți un podcast sau găzduiți un WordCamp (sau orice eveniment pentru difuzoare), este întotdeauna o idee bună să aveți o secțiune de difuzoare pentru site-ul dvs. La fel ca mărturiile, prezentarea vorbitorilor invitați este o modalitate eficientă de a promova valoarea și de a stabili credibilitatea în fața publicului. O secțiune de vorbitori invitați este, de asemenea, un loc cheie pentru relaxarea câtorva candidați noi pentru următorul eveniment sau episod. Acest tutorial vă arată cum să proiectați o secțiune de difuzoare invitate, care nu numai că prezintă difuzoarele într-un mod elegant, dar încurajează și difuzoarele noi să aplice cu un apel eficient la acțiune.

Dar, înainte de a intra, iată o scurtă privire asupra designului final.

Trage cu ochiul

Și iată un efect de hover bonus pe care ți-l voi arăta și eu.

Să începem!

Abonați-vă la canalul nostru Youtube

Construirea structurii de bază și a conținutului

Dacă nu ați făcut-o deja, creați o pagină nouă și implementați Divi Builder pentru a construi pe front-end.

În, adăugați o nouă secțiune cu un rând cu o coloană.

Adăugați un modul text la rând cu următorul conținut:

<h2>Guest Speaker</h2>

Apoi, adăugați un modul divizor direct sub modulul text.

Acum vom adăuga un nou rând cu o structură cu patru coloane pentru a ține difuzoarele noastre invitate.

În prima coloană a rândului, adăugați un modul persoană.

Actualizați conținutul modulului Persoană după cum urmează:

Nume: [necompletat]
Adresa URL a profilului Facebook: [adăugați „#” pentru moment]
Adresa URL a profilului Twitter: [adăugați „#” pentru moment]
Adresa URL a profilului LinkedIn: [adăugați „#” pentru moment]

Pentru descriere, adăugați următoarele:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

Notă: eticheta hr generează o linie separatoare care are un stil în linie de făcut, are o lățime de 90 px și plutește spre stânga. Eticheta puternică care este înfășurată în jurul numelui de familie o face îndrăzneață pentru un element de design unic.

Acum că aveți conținutul la locul său, salvați setările modulului persoană.

Copiați modulul persoană pe care tocmai l-ați creat și lipiți-l în fiecare dintre coloanele rămase, astfel încât să aveți același modul persoană în fiecare dintre cele patru coloane. Pentru a copia și lipi puteți utiliza opțiunile din meniul clic dreapta sau tastele scurte cmd + c cmd + v (mac) sau ctrl + c ctrl + v (câștiga).

Deschideți setarea modulului persoană din coloana 4 și actualizați conținutul astfel încât să conțină numai următoarele:

Nume: „Acesta ar putea fi tu!”
Descriere: „Folosiți butonul de mai jos pentru a aplica pentru a vorbi la evenimentul nostru.”

Salvați setările.

Apoi, adăugați un modul buton direct sub modulul persoană din coloana 4 și actualizați conținutul textului butonului la „Aplicați acum”. Și salvați setările.

Reveniți la primele module de trei persoane din coloanele 1-3 și adăugați imaginile pentru fiecare dintre portretele vorbitorului invitat. Asigurați-vă că au aceeași dimensiune, cu dimensiuni egale de înălțime și lățime și că sunt suficient de mari pentru a ține cont de lățimile coloanelor de pe toate dimensiunile browserului (în mod ideal, 600 x 600 x 600).

Așa ar trebui să arate aspectul dvs. Guest Speak în acest moment.

Stilizarea aspectului difuzorului invitat

Aranjarea secțiunii

Deschideți setările secțiunii și actualizați următoarele:

Imagine de fundal: [folosesc una din aspectul agenției noastre]

Culoarea din stânga a gradientului de fundal: # 293039
Culoarea dreaptă a gradientului de fundal: rgba (41,48,57,0.89)
Stilul divizorului superior: vezi captura de ecran
Culoarea separatorului superior: # 293039
Înălțimea separatorului superior: 30vw

Modificarea lățimilor rândurilor

Deoarece dorim ca ambele rânduri să aibă aceeași lățime, utilizați multiselect pentru a selecta ambele rânduri și faceți clic pe una dintre pictogramele de setări pentru a deschide setările elementului.

Apoi actualizați următoarele:

Lățime personalizată: 80%

Acum ambele rânduri vor avea aceeași lățime personalizată.

Stilul titlului

Deschideți setările modulului text care conține titlul secțiunii „Boxe invitate” și actualizați următoarele:

Rubrica 2 Font: Montserrat
Titlul 2 Greutate font: îndrăzneț
Rubrica 2 Stil font: TT
titlul 2 Aliniere text: dreapta
Rubrica 2 Culoarea textului: # 74bf46
Titlul 2 Dimensiune text: 70 px (desktop), 50 px (smartphone)

Salvează setările.

Acum deschideți setările Divider și actualizați următoarele:

Culoare: #ffffff
Înălțime: 0px
Lățime: 90 px
Alinierea modulului: corect

Stilizarea modulelor de persoană

De vreme ce dorim să acordăm același stil inițial tuturor modulelor noastre de persoană, utilizați multiselect pentru a selecta fiecare dintre ele și apoi faceți clic pe pictograma de setări a unuia dintre module pentru a implementa setările modale ale elementului.

Actualizați următorul element Setări:

Culoare pictogramă: # 74bf46
Titlu Font: Montserrat
Titlu Greutate font: ușor
Culoarea textului titlului: #ffffff
Dimensiune text titlu: 20 px
Font corp: Montserrat
Culoarea textului corpului: #ffffff
Spațierea literelor corporale: 2 px
Înălțimea liniei corpului: 1,8em

Stilul modulului CTA Person

Folosim acest modul pentru persoane ca un îndemn la acțiune care atrage noi vorbitori invitați pentru a aplica pentru un angajament de vorbire. Deci, putem lăsa imaginea implicită (silueta) activă ca mod creativ de a afișa un loc gol. Dar există câteva ajustări de stil pe care trebuie să le adăugăm pentru a finaliza designul. Deschideți setările modulului persoană din coloana 4 și actualizați următoarele.

Lățimea marginii imaginii: 18 px
Culoare margine imagine: # d2d2d2
Opacitatea imaginii: 50%

Greutatea fontului titlului: Bold
Înălțimea liniei de titlu: 1,5em

Acum nu mai rămâne decât să ne stilizăm butonul. Deschideți setările modulului buton și actualizați următoarele:

Culoarea textului butonului: # 293039
Culoarea fundalului butonului: # 74bf46
Raza chenarului butonului: 50 px
Buton Font: Montserrat
Greutatea fontului: Bold

Acum să aruncăm o privire asupra rezultatului final.

Sfat bonus: Efectul de zoom al imaginii

Nu uitați de toate opțiunile de hover încorporate disponibile în Divi. De fapt, puteți vedea câteva tutoriale inspiratoare despre aceste efecte de plimbare pe blogul nostru. Dar, pentru acest design, m-am gândit să mă gândesc puțin în afara casetei și să vă ofer câteva fragmente de CSS care vor face ca imaginea persoanei dvs. să mărească (sau să scară) ușor la plimbare.

Dacă sunteți în căutarea unui efect de hover subtil pentru a vă separa modulele de persoană, iată cum să o faceți.

Utilizați multiselectarea pentru a selecta modulele de persoană din coloanele 1, 2 și 3. Deschideți setările elementului. Sub fila avansată introduceți următorul CSS sub Elementul principal :

overflow: hidden;

Acest cod va împiedica extinderea imaginii în expansiune în afara containerului modulului.

Apoi adăugați următorul CSS sub Imagine membru :

transition: all 0.3s; 

Aceasta adaugă o tranziție lină atunci când imaginea se redimensionează.

Pentru a adăuga css-ul la hover, faceți clic pe pictograma hover și selectați fila hover și introduceți următorul CSS:

transform: scale(1.1) translateY(-4.5%);

Aceasta scalează (sau extinde) imaginea la o dimensiune puțin mai mare și o mută puțin în sus.

Acum, imaginile vor avea un efect de zoom subtil asupra cursorului.

Gânduri finale

Ei bine, sper că ți-a plăcut acest tutorial sau cel puțin ai lăsat câteva sfaturi utile de proiectare. Acest aspect al secțiunii pentru difuzorul invitat poate fi utilizat într-o varietate de moduri. O altă aplicație perfectă ar fi ca o pagină a angajaților să listeze simultan angajații actuali și să îi încurajeze pe alții să aplice pentru o funcție. Simțiți-vă liber să ne împărtășiți câteva idei.

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!