Pagina principala
- 12 august 2022 Pluginul nostru Beaver Builder vă ajută să construiți site-uri web complete cu șabloane și module. Cu toate acestea, pot exista momente în care doriți să vă personalizați și mai mult site-ul. Cu codurile scurte Beaver Builder, puteți adăuga conținut suplimentar în module, anteturi, subsoluri și bare laterale.
În această postare, vom introduce codurile scurte Beaver Builder și vă vom arăta cum să le introduceți în conținutul dvs. De asemenea, vom explora câteva exemple care ar putea îmbunătăți designul site-ului dvs. web. Să sărim înăuntru!
Cuprins
Dacă ați mai lucrat cu site-uri web WordPress, este posibil să fiți deja familiarizați cu codurile scurte. Acestea sunt mici fragmente de cod care adaugă funcționalitate site-ului dvs.
În loc să scrieți totul în HTML folosind editorul de cod, puteți introduce pur și simplu un shortcode în pagina dvs. Acesta va avea un slug sau un ID care corespunde unui element Beaver Builder, cum ar fi un modul, un rând sau o coloană. De asemenea, puteți utiliza coduri scurte pentru postări, pagini sau șabloane de aspect.
În acest exemplu, adăugăm un rând salvat la un modul HTML:
Când facem clic pe Salvare , Beaver Builder convertește automat codul scurt în rândul salvat căruia îi corespunde:
Mai târziu, în postare, vă vom arăta cum să adăugați coduri scurte în editor. Deocamdată, să discutăm despre beneficiile utilizării codurilor scurte Beaver Builder.
Shortcode-urile pot fi utile pentru adăugarea de elemente vizuale în zonele bazate pe text. De exemplu, puteți crea un modul de prețuri și puteți utiliza un shortcode pentru a adăuga o fotografie a produsului. În acest fel, nu va trebui să lucrați cu două module individuale (Preț și Foto), deoarece acestea vor fi combinate:
De asemenea, codurile scurte vă permit să inserați elemente Beaver Builder în conținutul dvs. în timp ce lucrați cu Editorul de blocuri WordPress. Aceasta înseamnă că nu va trebui să comutați la editorul Beaver Builder pentru a adăuga un modul, un rând sau o coloană.
Puteți adăuga coduri scurte la orice modul Beaver Builder cu un câmp de text, inclusiv:
Cu toate acestea, ar putea să nu fie înțelept să adăugați prea multe coduri scurte. Acest lucru ar putea crește timpii de încărcare, deoarece serverul trebuie să solicite fișierele CSS și Javascript pentru fiecare cod scurt. Vă recomandăm să utilizați cel mult două pe pagină.
Există multe cazuri de utilizare pentru codurile scurte Beaver Builder. Să ne uităm la câteva exemple utile.
Să presupunem că aveți un tabel de prețuri cu mai multe opțiuni de produse pe o pagină de destinație sau pe o pagină de vânzare. Puteți doar să enumerați prețurile și apoi să direcționați clienții să verifice cu un buton din partea de jos a paginii. Cu toate acestea, utilizatorii vor trebui să deruleze mai departe în jos, ceea ce ar putea dăuna experienței utilizatorului (UX).
În schimb, puteți crea un buton de îndemn la acțiune (CTA) care îi solicită clienților să cumpere produsul. Aceasta va trimite direct la pagina de finalizare a comenzii, astfel încât clienții să nu fie nevoiți să navigheze mai departe. Apoi, puteți adăuga acest buton la tabelul de prețuri cu un shortcode:
Nu uitați să personalizați butonul CTA pentru a se potrivi cu marca dvs. vizuală.
Dacă aveți un site de afaceri, puteți adăuga câteva file la secțiunea Despre. În acest fel, utilizatorii pot afla mai multe despre compania dvs. fără a fi nevoie să derulați în jos în pagină.
Să presupunem că doriți și clienții potențiali să vă contacteze în legătură cu serviciile dvs. imediat ce termină de citit. Utilizatorii petrec deja timp comutând între filele dvs. Dirijarea lor în altă parte le-ar putea oferi câteva secunde în plus pentru a-și regândi decizia de a contacta.
În schimb, puteți adăuga un formular de contact la una dintre file, folosind un shortcode:
Este atât de ușor! Acum clienții vă pot contacta fără a fi nevoiți să părăsească pagina.
Când vă construiți paginile, este posibil să preferați să adăugați imagini și text la un singur modul. Deși ai putea folosi două module separate, conținutul ar fi împărțit și nu ai putea pune imaginea în mijlocul textului.
Combinarea textului și a imaginilor este o modalitate eficientă de a afișa produse în magazinul dvs. online. De exemplu, puteți adăuga imagini la modulul Caseta de prețuri pentru a prezenta diferite caracteristici ale produsului:
Teoretic, ați putea pune împreună același aspect cu module diferite stivuite unul peste altul. Cu toate acestea, utilizarea unui cod scurt de imagine poate accelera procesul de proiectare.
De asemenea, puteți utiliza codurile scurte Beaver Builder atunci când lucrați cu Editorul de blocuri. Acest lucru ar putea fi deosebit de util dacă scrieți o postare pe blog și doriți să adăugați elemente interactive la articolul dvs.
Puteți plasa cu ușurință un modul Beaver Builder în pagină fără a părăsi Editorul de blocuri. Pur și simplu introduceți un bloc Shortcode și inserați codul în interior:
Odată ce publicați postarea, codul scurt va afișa conținutul pe front-end:
De exemplu, puteți introduce un modul Formular de contact. De asemenea, puteți adăuga un îndemn la acțiune care direcționează clienții către magazinul dvs. sau o hartă încorporată a locației magazinului dvs.
Tema noastră Beaver Builder vine cu un cod scurt personalizat Date. Aceasta afișează data curentă în orice parte a paginii dvs., inclusiv anteturi, subsoluri și bare laterale:
Acest cod scurt ar putea fi util dacă rulați un site de știri. Puteți adăuga data folosind oricare dintre următoarele coduri scurte:
| Cod scurt | Format |
| 2022 | 2022 |
| 22 | 22 |
| 14 august 2022 | 28 iulie 2022 |
| Duminică, 14 august 2022 | Joi, 28 iulie 2022 |
| 14-08-2022 | 28-07-2022 |
| „8-14-22” | 7-28-22 |
| „14.08.22” | 28.07.22 |
De asemenea, poate doriți să utilizați acest cod scurt lângă mesajul privind drepturile de autor din subsol. În acest fel, vă puteți asigura că este mereu la zi.
Tocmai am acoperit mai multe scenarii în care codurile scurte Beaver Builder vă pot accelera și simplifica procesul de proiectare. Acum, să vedem cum să le adăugați pe site-ul dvs.:
Shortcode-urile nu sunt ușor disponibile pe site-ul dvs. Mai întâi va trebui să salvați elementele Beaver Builder înainte de a le putea insera ca shortcodes. Aceste elemente pot include:
De exemplu, să presupunem că doriți să proiectați un modul personalizat de formular de contact. Puteți face acest lucru navigând la Beaver Builder > Module salvate > Adăugați nou :
Apoi vi se va solicita să denumiți modulul și să alegeți tipul acestuia:
Faceți clic pe Adăugați modul salvat . Pe pagina următoare, selectați Lansați Beaver Builder pentru a accesa editorul. Aici, puteți personaliza formularul de contact după bunul plac:
Când sunteți gata, asigurați-vă că vă publicați modulul. Acum va apărea pe pagina Module salvate . Dacă utilizați cea mai recentă versiune de Beaver Builder, veți putea vedea codurile scurte generate automat:
Dacă nu puteți vedea coloana ShortCode , va trebui să creați codul manual. Pentru a face acest lucru, veți avea nevoie de slug-ul modulului.
Dacă faceți clic pe butonul Editați de sub modulul dvs., ar trebui să puteți vedea slugul acestuia. Dacă nu îl vedeți, deschideți meniul Opțiuni ecran și bifați caseta de lângă Slug :
Acum puteți folosi următorul cod pentru a crea un shortcode pentru acest modul:
[fl_builder_insert_layout slug="my-post-slug"]Nu uitați să înlocuiți „my-post-slug” cu slug-ul modulului dvs. Beaver Builder. În exemplul nostru, va arăta astfel:
[fl_builder_insert_layout slug="contact-form"]Asta e tot – acum știi cum să creezi shortcodes pentru modulele Beaver Builder.
Pasul final este să adăugați codul scurt pe pagina dvs. În cele mai multe cazuri, acest proces va implica lipirea fragmentului în câmpul Text al unui modul.
Iată exemplul nostru de Tabel de prețuri de mai devreme. După cum puteți vedea, am adăugat codul scurt pentru butonul CTA în caseta de text Caracteristica 5 :
Deoarece Beaver Builder folosește un editor front-end, veți putea vedea imediat modulul salvat. În unele cazuri (cum ar fi atunci când utilizați un modul HTML), poate fi necesar să salvați modificările înainte ca codul scurt să se convertească în elementul vizual.
Codurile scurte Beaver Builder vă permit să adăugați rapid module salvate, rânduri, coloane sau machete în diferite părți ale paginilor dvs. Le puteți folosi pentru a accelera procesul de proiectare și pentru a crea pagini WordPress frumoase.
Pentru a recapitula, puteți utiliza codurile scurte Beaver Builder urmând acești pași simpli:
Ești gata să începi să creezi pagini uimitoare pentru site-ul tău? Consultați lista completă a caracteristicilor ușor de utilizat ale Beaver Builder!
Beaver Builder oferă coduri scurte pentru elementele salvate, cum ar fi module, rânduri, coloane și șabloane. Puteți adăuga apoi aceste fragmente în câmpuri și module bazate pe text. Acest lucru este posibil atât în editorul front-end Beaver Builder, cât și în Editorul bloc WordPress. În plus, codurile scurte vă permit să utilizați celelalte plugin-uri preferate împreună cu Beaver Builder.
Nu aveți nevoie de tema oficială Beaver Builder pentru a utiliza coduri scurte. Puteți crea pagini și adăuga coduri scurte cu majoritatea temelor utilizând pluginul pentru generatorul de pagini. Cu toate acestea, unele coduri scurte, cum ar fi codul scurt Date, funcționează numai cu tema Beaver Builder.
Beaver Builder este un instrument de creare a paginilor care vă permite să editați zona de conținut a paginilor și postărilor folosind module și șabloane. În schimb, Beaver Themer este un plugin suplimentar care vă permite să editați zone ale site-ului dvs. care sunt de obicei controlate de tema dvs., cum ar fi anteturile, subsolurile și barele laterale. Acest conținut include șabloane de teme, părți de șablon și grile de postare.