[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: cea mai ușoară temă WordPress de utilizat

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62.

Barele laterale lipicioase sunt extrem de eficiente pentru a atrage atenția vizitatorilor fără a fi preponderente sau distrase. Trucul constă în includerea unuia sau a două elemente din bara laterală care „rămân vizibile” sau fixate pe partea laterală a conținutului postării, pe măsură ce utilizatorul parcurge pagina. Aceasta este o alternativă răcoritoare la aspectul tradițional al barei laterale, deoarece oferă impresia unui aspect modern cu lățime completă (fără bară laterală), cu avantajul de a prezenta apeluri la acțiune. important pe 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, accesați Divi> Generator de teme. 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. Dacă există șabloane instalate în prezent pe site-ul dvs., asigurați-vă că debifați orice opțiuni care ar putea înlocui șabloanele dvs. actuale. Apoi faceți clic pe butonul de import.

Importați un aspect divi

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.

Adăugați un corp Divi personalizat

S-a adăugat aspectul dual al barei laterale pentru a păstra CTA-urile din bara laterală

În editorul de aspect șablon, găsiți rândul care conține modulul de publicare a conținutului și schimbați aspectul coloanei la o cincime cu trei cincimi cu o cincime structura coloanei (1/5 3/5 1/5 ). Acest lucru ne va permite să menținem coloana centrată pentru conținutul postării, oferind în același timp două secțiuni de ambele părți pentru CTA-urile noastre lipicioase.

Adăugați un aspect divi

După schimbarea structurii coloanelor, trageți modulul de publicare a conținutului în coloana centrală.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați Ușor și Gratuit orice site web sau design de blog cu aspect profesional. Nu mai plătiți mult pentru un site web pe care îl puteți face singur.

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
Adăugați o secțiune divi fix

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
Personalizați coloana 1 css divi

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.

Adăugați un modul de apel la acțiune

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: #
Personalizați modulul de îndemn
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
Colanți CTA
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
Secțiunea modulului Divi
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
Adăugați ct a în dreapta

Actualizați setările coloanei 3

Vrei să-ți vinzi produsele pe internet?

Descărcați gratuit WooCommerce, cele mai bune pluginuri de comerț electronic pentru a vă vinde produsele fizice și digitale pe WordPress și pentru a vă crea cu ușurință magazinul online. Perfect pentru incepatori.

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%

Personalizați stilul coloanei Divi

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.

Duplicați un modul cta divi

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ă).

Introduceți un modul de tip cod divi

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>

Cod parametru modul Divi

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.

Salvați parametrii modulului cta divi

Și apoi salvați setările constructorului de teme

Salvați divizorul constructor de teme

Rezultat final

Pentru a vizualiza rezultatul final, vizitați un articol pe blog folosind șablonul.

Colanți CTA

Ș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 apeluri la acțiune ale barei laterale lipicioase sunt o alternativă răcoritoare la bara laterală tradițională. Se potrivesc bine designului 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ă rămână lipit de pergament, făcându-l mai vizibil pentru 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 o mulțime de aplicații.

2 acțiuni
acțiune2
tweet
Registru