Cum să adăugați CTA-uri laterale lipicioase la un șablon de postare pe blog în Divi

CTA-urile din bara laterală lipicioasă sunt extrem de eficiente pentru a atrage atenția vizitatorilor fără a fi preponderent sau distrag atenția. Trucul este de a include unul sau două elemente în bara laterală care „lipesc” sau rămân fixate pe partea laterală a conținutului postării, pe măsură ce utilizatorul derulează pagina în jos. Aceasta este o alternativă răcoritoare la un aspect tradițional al barei laterale, deoarece oferă senzația unui aspect modern cu lățime completă (fără bară laterală), cu avantajul de a prezenta CTA-uri importante pe partea laterală a paginii, atunci când este necesar.

În acest tutorial, vă vom arăta cum să adăugați CTA-uri laterale lipicioase la un șablon de postare pe blog folosind Divi Theme Builder. Aplicarea acestui aspect este de mare anvergură. Acesta va funcționa pentru aproape orice pagină sau șablon de postare. În plus, nu trebuie să vă limitați la CTA-uri; puteți alege să adăugați orice module Divi doriți.

Să începem!

Descărcați gratuit șablonul CTA Sticky Sidebar

Pentru a vă pune mâinile pe șablonul de postare bara laterală cta 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 în listă, pur și simplu introduceți adresa de e-mail de 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 adăugați unul dintre fișierele json în Divi Theme Builder folosind opțiunea Theme Builder Portability.

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

Ce trebuie să începeți

Pentru a începe, va trebui să instalați și să activați tema Divi. Asigurați-vă că aveți cea mai recentă versiune de Divi.

De asemenea, veți avea nevoie de cel puțin o postare creată cu Divi Builder în scopul testării pentru a arăta rezultatul dorit.

După aceea, sunteți gata să plecați.

Trage cu ochiul

Iată o scurtă privire asupra CTA-urilor lipsite de bara laterală care au fost adăugate la un șablon de postare pe blog în Divi.

Cum să adăugați CTA-uri laterale lipicioase la șablonul dvs. de postare pe blog în Divi

Adăugarea șablonului Generator de teme

Primul pas include importarea șablonului nostru premade pe site-ul nostru. Vom folosi șablonul de postare din Divi Theme Builder Pack # 1.

Pentru a începe, navigați la Divi> Theme Builder. Faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii. În modalitatea de portabilitate, selectați fila de import și alegeți fișierul divi-theme-builder-pack-1-post-template.json din folder. În cazul în care aveți șabloane instalate în prezent pe site-ul dvs., asigurați-vă că debifați orice opțiuni care pot suprascrie șabloanele dvs. actuale. Apoi faceți clic pe butonul de import.

Construirea șablonului de postare pe blog

Odată ce șablonul a fost importat, suntem gata să începem să adăugăm noile noastre CTA-uri lipicioase din bara laterală la aspectul șablonului. Pentru aceasta, faceți clic pe pictograma de editare a zonei personalizate a corpului.

Adăugarea unui aspect dual al barei laterale pentru a menține CTA-urile din bara laterală

În Editorul de aspect șablon, găsiți rândul care conține modulul de conținut post și schimbați aspectul coloanei într-o structură de coloană de o cincime trei cincimi o cincime (1/5 3/5 1/5). Acest lucru ne va permite să păstrăm coloana centrată pentru conținutul postării, oferind în același timp două secțiuni de ambele părți pentru CTA-urile noastre laterale lipicioase.

După modificarea structurii coloanei, trageți modulul de conținut al postării în coloana centrală.

Actualizarea setărilor rândului

Deschideți setările rândului și actualizați următoarele opțiuni de proiectare:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 2
• Lățime: 100% (desktop), 90% (tabletă)
• Lățime maximă: 1500 px

Acest lucru ne va oferi spațiul de care avem nevoie pentru configurarea dublă a barei laterale.

Actualizarea setărilor coloanei 1

Apoi, deschideți setările pentru coloana 1 și dați coloanei o clasă CSS personalizată:

• Clasa CSS: sticky-cta

Adăugarea unui CTA al barei laterale în coloana din stânga

Acum suntem pregătiți pentru primul îndemn la acțiune. Adăugați un modul de apel la acțiune în coloana din stânga.

Stilul CTA al barei laterale

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

Conţinut

• Buton: „Faceți clic aici”
• Corp: „Conținutul dvs. merge aici. Editați sau eliminați acest text în linie sau în modul Setări de conținut. ”
• Adresă URL a butonului: #

Proiectarea textului corpului

• Font corp: Montserrat
• Greutatea fontului corpului: Semi îndrăznețe
• Alinierea textului corpului: corect
• Culoarea textului corpului: # 444444
• Dimensiune text corp: 22 px (desktop), 18 px (tabletă)
• Înălțimea liniei corpului: 1.3em

Buton

• Dimensiune text buton: 14 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 6148df
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 80 px
• Buton Font Greutate: Bold
• Stil Font Buton: TT
• Căptușirea butonului: 12 px sus, 12 px jos, 22 px stânga, 22 px dreapta

Lățime, aliniere, căptușire și margini

• Lățime: 100%
• Lățime maximă: 320 px
• Alinierea modulului: corect
• Căptușeală: 10 px stânga, 10 px dreapta
• Lățimea marginii superioare: 10 px
• Culoarea frontierei superioare: #eeeeee
• Lățimea marginii inferioare: 10 px
• Culoarea chenarului inferior: #eeeeee

Adăugarea barei laterale CTA în coloana din dreapta

Pentru a crea CTA pentru coloana din dreapta, copiați-o pe cea pe care tocmai am creat-o și lipiți-o în coloana din dreapta. Apoi actualizați setările pentru duplicat după cum urmează:

• Alinierea textului corpului: stânga
• Alinierea modulului: stânga

Actualizați setările coloanei 3

Pentru acest CTA din coloana din dreapta, vom adăuga o marjă de sus la coloană pentru a stabili o poziție de pornire a barei laterale CTA într-un punct mai jos de pe pagină.

Mai întâi, deschideți setările pentru coloana 3 și adăugați aceeași clasă CSS pe care am adăugat-o la coloana 1:

• Clasa CSS: sticky-cta

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

Desktop

margin-top: 50%

Comprimat

margin-top: 0%

Acest lucru ne va oferi un punct de plecare diferit pentru CTA lipicios pe coloana din dreapta, care este egal cu 50% din lățimea rândului. Simțiți-vă liber să ajustați această valoare după cum este necesar pentru propria dvs. postare de blog.

Adăugarea CSS personalizat la șablon cu un modul de cod

Pentru a obține poziționarea „lipicioasă” pentru CTA-urile din bara laterală, trebuie să adăugăm câteva CSS personalizate. Pentru a face acest lucru, creați un nou modul de cod sub modulul conținut post (sau oriunde pe pagină).

Apoi lipiți următorul CSS în caseta de cod:

<style> 
@media only screen and (min-width: 980px) {
  #page-container { 
    overflow-y:visible !important; } 
  .sticky-cta {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(50vh - 130px) !important;
  }
  }
</style>

Decalajul superior din acest cod este un calcul care poziționează CTA centrat vertical pe pagină în timp ce derulați. 50vh este practic jumătate din înălțimea ferestrei browserului și 130px este aproximativ jumătate din înălțimea CTA. Dacă aveți un CTA care are o înălțime mai mare / mai mică, va trebui să ajustați 130px în sus sau în jos.

Salvează setările

După ce ați terminat, salvați aspectul șablonului.

Și apoi salvați setările pentru generatorul de teme

Rezultat final

Pentru a vizualiza rezultatul final, vizitați o postare pe blog care utilizează șablonul.

Și acesta este modul în care CTA-urile laterale lipicioase vor rămâne pe scroll. Puteți vedea cum ar funcționa cel mai bine pentru un conținut mai lung.

Și iată-l pe ecranul mobil.

Gânduri finale

Aceste CTA-uri laterale lipicioase sunt o alternativă răcoritoare la bara laterală tradițională. Se potrivesc bine pentru un design minimalist, deoarece sunt mai puțin intruzive și nu dau postării o senzație aglomerată. În plus, puteți poziționa CTA mai departe în jos, astfel încât să apară treptat și să rămână pe scroll, făcându-l să iasă în evidență un pic mai mult pentru vizitatori. Și nu uita. Puteți înlocui CTA cu orice modul Divi sau combinație de module pentru a crea cam orice doriți. De asemenea, puteți alege să păstrați un singur CTA pe o parte. Se pare că are o mulțime de aplicații.

Sper că acest lucru vă va ajuta să îmbunătățiți modul în care afișați CTA-urile pe șabloanele de postare în viitor.

Pentru mai multă inspirație, consultați postările noastre similare pe elemente lipicioase.

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

Noroc!