Barele laterale lipicioase sunt extrem de eficiente în a atrage atenția vizitatori fără a fi intruziv sau distragător. Trucul este să includeți unul sau două elemente în bara laterală care „rămân vizibile” sau fixate pe partea laterală a cuprins a postării atunci când utilizatorul derulează pagina. Aceasta este o alternativă revigorantă la aspectul tradițional al barei laterale, deoarece dă impresia unui aspect modern cu lățime completă (fără o bară laterală), cu avantajul prezentării îndemnurilor la acțiune importante pentru partea laterală a paginii atunci când este necesar.
În acest tutorial, vă vom arăta cum să adăugați apeluri lipsite de acțiune la un șablon de postare pe blog folosind Divi Theme Builder. Aplicarea acestui aspect este considerabilă. Acesta va funcționa pentru aproape orice pagină sau orice șablon de postare. În plus, nu trebuie să te limitezi la CTA-uri; puteți alege să adăugați modulele Divi la alegere.
Ce ai nevoie pentru a începe
Pentru început, trebuie pentru a instala și activa tema Divi . Asigurați-vă că aveți cea mai recentă versiune de Divi.
De asemenea, veți avea nevoie de cel puțin un mesaj creat cu Divi Builder pentru testare pentru a afișa rezultatul dorit.
După aceea, sunteți gata să plecați.
studiu
Iată o prezentare rapidă a ACT-urilor lipicioase care au fost adăugate la un șablon de postare pe blog în Divi.
Cum să adăugați apeluri fixe la acțiune în șablonul dvs. de postare pe blog în Divi
Adăugarea șablonului pentru constructorul de teme
Primul pas este să importăm șablonul nostru predefinit pe site-ul nostru. Vom folosi șablonul de publicație Divi Theme Builder Pack # 1.
Pentru a începe, navigați la Divi > Generator tematică. Faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii. În modulul de portabilitate, selectați fila de import și alegeți fișierul divi-theme-builder-pack-1-post-template.json din folder. Dacă aveți șabloane instalate în prezent pe site-ul dvs., asigurați-vă că debifați toate opțiunile care ar putea suprascrie șabloanele dvs. actuale. Apoi faceți clic pe butonul de import.
Construiți șablonul de postare pe blog
După importarea șablonului, suntem gata să adăugăm noile noastre CTA-uri la bara laterală lipite de aspectul șablonului. Pentru a face acest lucru, faceți clic pe pictograma de editare pentru zona personalizată a corpului.
S-a adăugat aspectul dual al barei laterale pentru a păstra CTA-urile din bara laterală
În Editorul de aspect al modelului, găsiți rândul care conține modulul Publicare. cuprins și înlocuiți structura coloanei cu o structură de coloană de o cincime cu trei cincimi cu o cincime (1/5 3/5 1/5). Acest lucru ne va permite să păstrăm coloana centrată pentru cuprins a postării, oferind în același timp două secțiuni pe fiecare parte pentru CTA-urile noastre lipicioase.
După schimbarea structurii coloanelor, trageți modulul de publicare a conținutului în coloana centrală.
Actualizați parametrii liniei
Deschideți setările liniei și actualizați următoarele opțiuni de proiectare:
- Utilizați o lățime personalizată a jgheabului: DA
- Lățimea jgheabului: 2
- Lățime: 100% (desktop), 90% (tabletă)
- Lățimea maximă: 1500px
Acest lucru ne va oferi spațiul de care avem nevoie pentru configurația noastră cu bara laterală dublă.
Actualizați setările coloanei 1
Apoi, deschideți setările coloanei 1 și conferiți acestei coloane o clasă CSS personalizată:
- Clasa CSS: sticky-cta
Adăugarea unei bare laterale CTA în coloana din stânga
Acum suntem pregătiți pentru primul apel la acțiune. Adăugați un apel la modulul de acțiune din coloana din stânga.
Stilizează bara laterală CTA
Actualizați setările după cum urmează:
Conținut
- Buton: «Faceți clic aici»
- Corp: „Conținutul dvs. merge aici. Editați sau ștergeți acest text online sau în setările de conținut ale modulului. ”
- URL-ul linkului butonului: #
Proiectarea textului corporal
- Font pentru corp: Montserrat
- Greutatea fontului: semi-îndrăzneț
- Textul corpului: aliniere dreaptă
- Culoarea corpului textului: # 444444
- Dimensiunea corpului: 22px (desktop), 18px (tabletă)
- Înălțimea corpului: 1.3em
buton
- Dimensiunea textului butonului: 14px
- Culoarea textului butonului: #ffffff
- Culoarea fundalului butonului: # 6148df
- Lățimea marginii butonului: 0px
- Radiusul butonului: 80px
- Greutatea fontului: îndrăzneț
- Stilul fontului pentru butoane: TT
- Completarea butoanelor: 12px în partea de sus, 12px în partea de jos, 22px în stânga, 22px în dreapta
Lățime, aliniere, căptușire și borduri
- Lățime: 100%
- Lățimea maximă: 320px
- Alinierea modulului: dreapta
- Căptușire: 10px în stânga, 10px în dreapta
- Lățimea marginii superioare: 10px
- Culoarea marginii superioare: #eeeeee
- Lățimea marginii de jos: 10px
- Culoarea marginii de jos: #eeeeee
Adăugarea barei laterale CTA la coloana din dreapta
Pentru a crea CTA pentru coloana din dreapta, copiați 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 corpului textului: stânga
- Alinierea modulului: stânga
Actualizați setările coloanei 3
Pentru acest CTA din coloana din dreapta, vom adăuga o marjă superioară coloanei pentru a stabili o poziție de pornire a barei laterale CTA într-un punct inferior al paginii.
Începeți prin deschiderea parametrilor coloanei 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:
Birou
margin-top: 50%
tabletă
margin-top: 0%
Acest lucru ne va oferi un punct de plecare diferit pentru CTA lipicios pe coloana din dreapta, care este 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ăugați CSS personalizate 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 CSS personalizate. Pentru a face acest lucru, creați un nou modul de cod sub modulul de publicare a conținutului (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ă atunci când derulați. 50vh este jumătate din înălțimea ferestrei browserului și 130px este jumătate din înălțimea CTA. Dacă CTA este mai mare sau mai mic, va trebui să ajustați cei 130 de pixeli în sus sau în jos.
Salvați setările
După ce ați terminat, salvați aspectul șablonului.
Și apoi salvați setările constructorului de teme
Rezultat final
Pentru a vizualiza rezultatul final, vizitați un articol pe blog folosind șablonul.
Și acesta este modul în care CTA-urile lipicioase vor rămâne blocate pe scroll. Puteți vedea cum ar funcționa cel mai bine pentru un conținut mai lung.
Ultimele gânduri
Aceste îndemnuri laterale lipicioase la acțiune sunt o alternativă răcoritoare la bara laterală tradițională. Funcționează bine pentru design minimalist, deoarece sunt mai puțin intruzive și nu fac postarea să se simtă aglomerată. În plus, puteți poziționa CTA mai jos pe pagină, astfel încât să apară treptat și să se lipească de scroll, făcându-l mai vizibil pentru oameni. vizitatori. Și nu uita. Puteți înlocui CTA cu orice modul Divi sau combinație de module pentru a crea aproape orice doriți. De asemenea, puteți alege să păstrați un singur CTA pe o parte. Se pare că are multe aplicații.
