Cum să creați un bloc lipicios (fix) în Gutenberg fără cod

Căutați modalități de a crea un bloc lipicios în Gutenberg? 🤔

Indiferent dacă doriți să creați o declinare a răspunderii pentru afiliați, să oferiți reduceri sau să atrageți atenția vizitatorilor asupra caracteristicilor importante ale produsului dvs. - un blocaj lipicios vă poate ajuta să atingeți aceste obiective.

Blocurile adezive, cunoscute și sub denumirea de blocuri fixe, rămân vizibile pe ecran chiar și atunci când utilizatorul derulează în jos pe pagină, asigurându-se că conținutul pe care doriți să îl evidențiați este întotdeauna în viziunea sa.

👉 Iată un exemplu despre ceea ce vorbim – puteți vedea cum pictogramele sociale sunt „blocate” în poziția lor chiar și ca defilare a utilizatorului:

Adăugarea unui bloc lipicios în Gutenberg oferă o experiență de utilizator fără întreruperi și captivantă, permițându-vă să transmiteți în mod eficient mesajul și să captați interesul publicului.

Gutenberg nu oferă un bloc lipicios din cutie. Dar, există instrumente terțe pe care le puteți folosi pentru a adăuga blocuri lipicioase la postările și paginile dvs.

În acest tutorial, vă vom arăta cum să utilizați un plugin popular Gutenberg numit Otter Blocks pentru a adăuga un bloc lipicios pe site-ul dvs. WordPress.

Să ne aruncăm în ea. 🤿

Cum să adăugați un bloc lipicios în Gutenberg Editor

Pentru a adăuga un bloc lipicios în Gutenberg Editor, trebuie să urmați următorii pași:

• Pasul 1: Instalați și activați pluginul Otter Blocks
• Pasul 2: Activați instrumentul Transformare în Sticky pentru blocul dvs
• Pasul 3: Schimbați poziția blocului lipicios
• Pasul 4: Configurați offset
• Pasul 5: Activați blocarea lipicioasă pe mobil
• Pas opțional: Încercați modul flotant
• Pas opțional: specificați comportamentul blocului

Pasul 1: Instalați și activați pluginul Otter Blocks 🔌

Otter Blocks este un plugin WordPress care extinde funcționalitățile Editorului Gutenberg.

Oferă o colecție de blocuri de construcție a paginii, funcții de editor și șabloane pentru a ajuta la îmbunătățirea designului și a funcției site-ului dvs.

Unele dintre cele mai populare blocuri oferite de Otter sunt tabele de prețuri, mărturii, pictograme sociale, hărți, bare de progres, animații, numărătoare inversă și recenzii de produse, printre altele. Iată o listă completă a blocurilor Otter.

Otter Blocks are o versiune gratuită și una premium (numită Otter Pro).

Puteți folosi versiunea gratuită pentru a crea un bloc sticky de bază în Gutenberg, astfel încât să puteți urma acest tutorial gratuit.

Cu toate acestea, pentru a efectua câțiva dintre pașii pe care i-am parcurs, cum ar fi adăugarea distanței dintre bloc și ecran, eliminarea blocului lipicios de pe front-end, afișarea blocurilor lipicioase pe mobil etc., aveți nevoie de versiunea premium a pluginului.

Otter Pro este disponibil la o taxă anuală de 49 USD pentru un singur site web. Îl poți cumpăra de aici. Și dacă doriți să încercați pluginul înainte de a-l folosi, dați o învârtire a acestei demonstrații.

➡️ Pentru a continua, instalați fie versiunea gratuită, fie versiunea premium de Otter. În tutorialul de mai jos, vom încerca să notăm când o anumită caracteristică necesită opțiunea premium.

Pasul 2: Activați instrumentul Transformare în Sticky pentru blocul dvs. 🚧

Deschideți pagina sau postarea în care doriți să adăugați blocul lipicios în Editorul Gutenberg.

Selectați blocul pe care doriți să îl faceți lipicios și mergeți la panoul situat în partea dreaptă a editorului.

În panou, navigați la Blocare și accesați opțiunea Instrumente de blocare . Extindeți Instrumentele bloc prin selectarea semnului plus .

Apoi alegeți Transformare în Sticky din meniul drop-down.

O nouă opțiune numită Sticky va apărea chiar sub Block Tools. Extindeți-l și accesați Sticky To .

În Sticky To, puteți seta elementul de care doriți să se lipească blocul. Există patru opțiuni:

1. Bloc de nivel superior
2. Secțiune
3. Bloc parental
4. Ecran

Pentru a înțelege aceste opțiuni și care se potrivește postării dvs. lipicioase, deschideți Prezentare generală a documentului în Editorul Gutenberg și uitați-vă la blocurile care înconjoară blocul dvs. de post lipicios.

Blocul cel mai de sus este blocul Top Level. Selectând blocul de nivel superior , veți face blocul lipicios fixat cu blocul de sus . În cazul nostru, este blocul Grup din imaginea de mai jos.

Apoi, selectând Secțiune se va asigura că blocul lipicios este fixat de blocul Secțiune, iar selectarea Blocului părinte va face blocul lipicios să fie fixat pe blocul chiar deasupra blocului tău lipicios .

În cazul nostru, blocul Parent este blocul Section Column. Vezi imaginea de mai jos.

În cele din urmă, selectarea opțiunii Ecran va spune editorului să ignore toate blocurile și doar să lipească postarea în partea de sus a ecranului utilizatorului .

Poziția blocului lipicios este setată implicit în partea de sus. Pentru a afla cum să-i schimbați poziția, treceți la pasul următor.

Pasul 3: Schimbați poziția blocului lipicios 🚩

Pentru a schimba poziția blocului lipicios, întoarceți-vă la panoul din dreapta și căutați Poziție chiar sub opțiunea Lipiți la.

Puteți poziționa blocul lipicios în partea de sus sau în partea de jos a ecranului. Poziția de jos este disponibilă numai pentru utilizatorii Otter Pro .

Iată cum arată blocul pe unul dintre site-urile noastre demonstrative:

Pasul 4: Configurați offset-ul ⚙️

După ce setați poziția blocului lipicios, încercați să-l previzualizați. Dacă blocul apare prea departe sau în apropierea ecranului, atunci utilizați opțiunea Offset pentru a mări sau a micșora distanța dintre blocul lipicios și ecran.

Pasul 5: Activați blocarea lipicioasă pe mobil 📱

În mod implicit, blocul lipicios apare numai pe desktop-uri. Dacă doriți să îl activați pe mobil, comutați doar pe opțiunea Activare pe mobil .

Apropo, doar utilizatorii Otter Pro pot accesa opțiunea mobilă .

Pas opțional: Încercați modul flotant 🏄

Blocul lipicios poate fi setat să plutească de-a lungul ecranului atunci când utilizatorii parcurg pagină. Este o modalitate excelentă de a atrage atenția utilizatorului și de a-l îndrepta către blocul lipicios.

Doar utilizatorii Otter Pro pot folosi modul float și poate fi aplicat doar blocului de nivel superior, care în cazul nostru este blocul de grup.

De îndată ce comutați modul flotant, vi se va cere să definiți lățimea blocului, latura și decalajul lateral .

Lățimea se referă, desigur, la lățimea blocului, iar partea laterală vă ajută să definiți locația blocului (stânga sau dreapta) pe ecran. Offset se referă la distanța dintre blocul lipicios și partea aleasă .

Vă recomandăm să previzualizați pagina după configurarea modului flotant și să faceți ajustările necesare.

Pas opțional: specificați comportamentul blocului 👨🏽‍💼

Folosind pluginul Otter Block, puteți crea mai multe blocuri lipicioase pe aceeași pagină. Uneori, aceste blocuri se pot ciocni între ele. Puteți dicta modul în care un bloc lipicios va răspunde în timpul coliziunilor folosind opțiunea Comportament .

Puteți seta comportamentul să se restrângă , să se estompeze sau să se stivuească .

Alegerea colapsului va seta blocurile lipicioase cu aceeași mișcare să se prăbușească unele în altele atunci când se ciocnesc, astfel:

Și alegerea fade va seta blocul să se estompeze sau să dispară unul în celălalt bloc .

În cele din urmă, alegerea stivei va stivui blocul peste celelalte blocuri lipicioase în care se ciocnește, așa cum se arată în gif-ul de mai jos.

Atât fade cât și stack sunt disponibile numai pentru utilizatorii Otter Pro .

Asta este. Acum ați adăugat un bloc lipicios în Gutenberg. 🤩

Creează primul tău bloc lipicios în Gutenberg 🧱

Adăugarea unui bloc fix sau lipicios în Gutenberg este o modalitate excelentă de a atrage atenția vizitatorilor asupra părților importante ale site-ului dvs. WordPress.

Deoarece Gutenberg nu oferă un bloc sticky implicit, trebuie să utilizați un plugin terță parte pentru a adăuga această funcționalitate pe site-ul dvs.

Deși există o mână de plugin-uri blocuri lipicioase acolo, Otter Blocks este cel mai simplu și mai ușor de utilizat plugin-uri de blocare de acolo.

Are o versiune gratuită și una premium. Versiunea gratuită poate fi folosită pentru a crea un bloc lipicios, dar unele dintre setările avansate, cum ar fi fixarea blocului în partea de jos a ecranului sau activarea blocării pe mobil, pot fi realizate folosind versiunea premium a pluginului.

👉 Pentru a obține un bloc lipicios pe pagina dvs. folosind pluginul Otter Blocks, trebuie să urmați pașii de mai jos:

Dacă aveți întrebări despre cum să creați un bloc lipicios în Gutenberg, anunțați-ne în secțiunea de comentarii de mai jos .