Stackable: pluginul care vă deblochează blocurile

Îți amintești de anii 80? Sosirea noului val, apariția tunsorilor de chefal, succesul lui Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran și așa mai departe. În anii 80, este, de asemenea, explozia jocului video și lansarea unui joc în care suntem numeroși care am fost aproape de pocnetul degetului mare: Tetris.

Acest joc, cu principiul său simplu, a constat în stivuirea blocurilor de diferite forme optimizând în același timp spațiul disponibil.

Conceptul poate fi rezumat într-o singură linie: „Tetris se potrivește perfect definiției celui mai bun joc: un minut pentru a-l învăța, o viață întreagă pentru a-l stăpâni” , așa cum a spus jurnalistul Bill Kunkel (alias The Game Doctor).

O declarație care ar putea fi aplicată la multe programe, precum WordPress.

Apropo de WordPress, dacă menționez Tetris, este pentru că pluginul pe care îl voi diseca astăzi se numește Stackable. Și din motive întemeiate, acest plugin adaugă noi blocuri Gutenberg pentru a fi imbricate în site-ul tău WordPress .

Ești gata pentru acest nou test? Pe marca ta, pregătiți-vă, mergeți!

Scris inițial în iulie 2021, acest articol a fost actualizat în noiembrie 2021 cu versiunile gratuite și premium 3.0.5 de Stackable.

Cele mai bune proiecte WordPress au nevoie de cea mai bună gazdă!

WPMarmite recomandă Bluehost: performanță excelentă, suport excelent. Tot ce ai nevoie pentru un început excelent.

Încercați Bluehost

Ce este Stackable?

„Alimentează următoarea generație de web design”. Aceasta este misiunea Stackable pe site-ul său oficial, unde pluginul se definește ca „o nouă experiență de creare a paginii pentru Gutenberg”. Nu mai puțin!

Trebuie spus că pe directorul WordPress, pluginul bloc are peste 40.000 de instalări active și un rating frumos de 4,9 din 5 stele, însoțit de un șir de recenzii elogioase.

Dacă sunteți deja în căutarea unor noi blocuri Gutenberg , este posibil să fi întâlnit deja pluginuri precum Ultimate Addons pentru Gutenberg, Qubely, Getwid sau Coblocks.

Am vorbit despre ele în articolul nostru despre suplimente pentru a crește puterile lui Gutenberg. Misiunea lor este simplă: să diversifice gama de blocuri Gutenberg disponibile în editorul de conținut.

Stackable este și un plugin conceput pentru Gutenberg, căruia îi aduce o multitudine de blocuri, de la marile clasice (header, galerie, call to action) până la cele mai exotice (citate, tabele de prețuri, timer, mărturii etc.).
Aceste blocuri sunt gata de utilizare și personalizabile.

Deci, s-ar putea să vă gândiți, ce rost are instalarea Stackable? Sunt doar blocuri printre alte blocuri. Ei bine, Gutenberg oferă multe blocuri utile, dar cu Stackable, posibilitățile sunt multiplicate.

Mai mult, ai acces la funcții de personalizare mai avansate decât cele oferite nativ cu Gutenberg, precum: ajustarea aspectului elementelor din interiorul blocurilor, spațierea, schimbarea fundalului, adăugarea de efecte de hover etc.

Există două versiuni de Stackable:

• O versiune gratuită este disponibilă în directorul WordPress.

• O versiune plătită este disponibilă de pe site-ul oficial al pluginului, începând de la 49 USD pentru utilizare pe un site.

După cum vă puteți imagina, al doilea oferă acces la mai multe blocuri și permite personalizarea lor mai fină.

Pentru acest test, ne-am concentrat pe versiunea Premium.

Setări stivuibile

Pentru a începe configurarea Stackable, instalați și activați pluginul. Apoi accesați Setări > Stivuibil.

Pe interfața sa, veți avea acces la următoarele setări:

• Pictograme Font Awesome Pro (premium): pentru a integra un kit Font Awesome Pro în Stackable.
• Setări editor: vă permite să controlați anumite caracteristici ale editorului Stackable. De exemplu, puteți dezactiva Biblioteca de design, puteți seta lățimea anumitor blocuri, puteți închide panourile de editor pe care nu le utilizați și puteți lega coloanele astfel încât să sufere aceleași modificări.
• Manager de roluri (premium): pentru a acorda sau bloca accesul la editorul de blocuri unor roluri de utilizator și le permite să editeze doar conținutul. Notă: această gestionare funcționează pe toate blocurile , nu doar pe cele incluse în Stackable.
• Câmpuri personalizate (premium): această caracteristică vă permite să creați câmpuri personalizate pe care le puteți adăuga dinamic conținutului dvs. din editor. Pentru a face acest lucru, accesați secțiunea Câmpuri a administrării WordPress, faceți clic pe „Adăugați nou”, definiți un tip de câmp (Text, Număr, Data, Ora sau URL) și un nume.

Apoi faceți clic pe „Salvați câmpul”, introduceți o valoare pentru câmpul dvs. și faceți clic pe „Salvați modificările” pentru a o salva.

Pentru a-l integra în conținut, plasați cursorul unde doriți să apară valoarea câmpului dvs. și faceți clic pe pictograma bazei de date (corespunde câmpurilor dinamice).

Selectați „Site” ca „Sursă dinamică”, apoi câmpul nou creat (apare sub „Câmpuri personalizate stivuibile”) și, în final, faceți clic pe „Aplicați”. Asta e!

Asta e bine și bine, dar de ce am făcut toate astea? Datorită magiei conținutului dinamic, de îndată ce îl actualizez, adresa mea de e-mail va fi actualizată automat în fiecare loc de pe site-ul meu în care este integrat câmpul personalizat.

• Puncte de întrerupere responsive: este posibil să modificați lățimea ecranului de pe care site-ul dvs. va fi vizualizat în modul Tabletă sau Mobil, și astfel să afișați setările pe care le-ați definit pentru aceste dispozitive.
• Setări globale: sunt disponibile două funcții pentru a depăși posibilele incompatibilități cu tema existentă pe site-ul dvs. Puteți intra în selectorul zonei de conținut a temei dvs. și puteți forța utilizarea fonturilor Stackable, astfel încât acestea să preia pe cele ale temei dvs.

La fel ca Elementor, Stackable are setări globale: culorile și tipografia care se aplică paginilor create cu Elementor. Dar cu Stackable, ai posibilitatea de a defini aceste setări pentru toate blocurile care alcătuiesc site-ul tău .

• Activare și dezactivare bloc: dacă nu aveți nevoie de unele blocuri, le puteți dezactiva astfel încât acestea să nu apară în lista de blocuri disponibile.
• Setări de optimizare (premium): vă permite să încărcați fișiere JavaScript și CSS numai în postările care conțin blocuri stivuibile, mai degrabă decât pe întregul site. Scopul acestei funcții este de a îmbunătăți performanța site-ului dvs. Această caracteristică se aplică numai blocurilor din versiunea 2, deoarece se aplică deja celor mai recente blocuri ale pluginului (din versiunea 3).

Cum se utilizează Stackable?

Truse și blocuri

Stackable este utilizat direct din editorul WordPress. Pentru a face acest lucru, creați sau deschideți o pagină sau o postare, apoi selectați Biblioteca de proiectare în partea de sus a postării dvs.

Biblioteca de design conține kituri și categorii UI. Ce este?

De fapt, aceste două secțiuni conțin aceleași elemente, dar clasificate diferit. Kiturile UI adună blocurile disponibile de ghidul de stil, iar Categoriile le grupează după tipul de bloc: antet, mărturie, îndemn la acțiune etc., care pot fi găsite în toate ghidurile de stil disponibile.

Categoriile și kiturile UI sunt două moduri diferite de a găsi blocul potrivit pentru tine.

Fiecare bloc vine cu un design gata de utilizare și personalizabil. Vom vedea cum să le personalizăm în partea următoare.

Pentru a găsi blocul de care aveți nevoie, puteți folosi și bara de căutare la dispoziția dumneavoastră. Cele patru pictograme din dreapta sus a ferestrei vă permit să reîmprospătați rezultatele căutării și să modificați dimensiunea miniaturilor pentru a obține o vizualizare mai precisă sau mai mare a diferitelor blocuri.

Cum să integrezi un bloc stivuitor într-o postare

Puteți, de asemenea, să faceți pur și simplu clic pe pictograma „+” așa cum ați face pentru a adăuga orice bloc și veți recunoaște cu ușurință blocurile plug-in-s Stackable, deoarece sunt împodobite cu un gradient violet-portocaliu.

Făcând clic pe butonul „Browse All”, puteți accesa toate blocurile Gutenberg pe care le aveți la dispoziție. Blocurile Stackable sunt prezente în secțiunile „Text” și „Appearance” și sunt toate grupate în secțiunea eponimă „Stackable”, care oferă și acces la Biblioteca de design.

Toate aceste căi duc la Roma la blocurile stivuibile, da, dar în primul rând calea Bibliotecii de design oferă acces la modelele prefabricate.

Luați acest bloc Testimonial, de exemplu, care are formatare minimă, text de completare și nicio imagine exemplu:

Și vedeți un alt bloc Testimonial, adăugat din Biblioteca de design (blocul Prime Testimonial 2 ):

După ce ați găsit potrivirea perfectă, faceți clic pe articolul dorit pentru a-l încorpora direct în postarea dvs. Apoi puteți rearanja elementul de pe pagină, ca orice bloc Gutenberg, și îl puteți personaliza.

Personalizare stivuitoare

Pentru a personaliza un bloc stivuitor, accesați secțiunea „blocare” din partea dreaptă a postării, unde veți găsi o mulțime de opțiuni, clasificate în trei categorii: Blocare , Stil și Avansat .

Găsirea celui care vă interesează poate fi plictisitoare, deoarece există atât de multe din care să alegeți, dar îl puteți găsi și făcând dublu clic pe elementul bloc pe care doriți să îl schimbați. Veți fi apoi direcționat la setările pentru acel bloc cu un singur clic.

Diferitele opțiuni de personalizare sunt grupate în trei file:

• Bloc : aici puteți personaliza aspectul diferitelor elemente care alcătuiesc blocul dvs., puteți adăuga chenare și umbre și puteți acționa asupra fundalului, spațierea și alinierea textului.

De asemenea, puteți ajusta distanța dintre elementele din blocurile dvs. trecând peste ele și apoi folosind mânerele din partea de jos a elementului. Puteți vedea chiar și numărul de pixeli care îl separă de vecinul său. Foarte util!

• Stil : vă permite să gestionați coloanele și să acționați asupra tipografiei, culorilor, butoanelor și separatorilor. Este mai neașteptat, dar poți adăuga și un titlu și o descriere blocului tău.
• Avansat : aici aveți acces la funcții avansate precum eticheta HTML asociată blocului și gestionarea responsive-ului (posibilitatea de a ascunde blocul pe computer, tabletă sau mobil). Puteți ajusta marginile blocului și alinierea conținutului, dar și să vă distrați adăugând efecte de animație sau de tranziție elementelor dvs. (totuși, mergeți ușor).
  Cireasa de pe tort pentru pasionații de CSS este capacitatea de a modifica CSS-ul blocului direct în această interfață, lângă bloc, și cu o previzualizare a modificărilor în timp real.
  În cele din urmă, afișarea condiționată vă permite să afișați un element numai atunci când o condiție pe care ați definit-o anterior este îndeplinită.

Alăturați-vă abonaților WPMarmite

Obțineți ultimele postări WPMarmite (și, de asemenea, resurse exclusive).

ABONEAZĂ-TE ACUM

Daca nu esti pe deplin multumit de designul unui bloc, ai posibilitatea de a modifica multi parametri pentru a-l ajusta dupa bunul plac.

De exemplu, mi-a plăcut să pot adăuga cu ușurință efecte la trecerea cu mouse-ul elementelor sau elementului părinte (aplicați un fundal blocului părinte pentru a profita de această ultimă caracteristică) sau să modific cu ușurință marginile fiecărui element al blocului .

Și mai bine: poți alege diferite marje pe mobil și tabletă! Astfel, puteți schimba cu ușurință aspectul receptiv al site-ului dvs. Pentru a face acest lucru, faceți mai întâi clic pe pictograma de pe desktop (computer) pentru a afișa pictogramele altor dispozitive.

O altă opțiune frumoasă este să adăugați separatori în partea de sus sau de jos a unui element, ca în cazul Elementor. Desigur, puteți ajusta aspectul acestor separatoare și chiar puteți adăuga unul sau două straturi mai ușoare în versiunea Premium.

Iată cum arată în partea de jos a acestui burger apetisant:

Când treceți cu mouse-ul peste numele lor, unele setări devin violete, iar cursorul se transformă într-un semn de întrebare. Dacă nu știți ce sunt, faceți clic pentru a vedea o animație care vă va ajuta să înțelegeți pentru ce sunt. Destul de util pentru a vă găsi drumul în jurul tuturor acestor opțiuni.

Ce adaptare la teme și pluginuri?

Adaptare la teme

Conform documentației oficiale, „Stackable ar trebui să funcționeze cu orice temă”, atâta timp cât tema pe care o ai pe site-ul tău este optimizată pentru Gutenberg.

Apropo de teme, am menționat-o la începutul acestei postări: există o temă internă , concepută să funcționeze cu editorul Gutenberg și pluginul Stackable. Este gratuit și disponibil în directorul oficial WordPress. Cu el, compatibilitatea este garantată, pe scurt.

Este în culorile plugin-ului cu același nume, așa că sper că nu vă deranjează rozul dulce.

Descărcați tema Stackable:

Adaptare la pluginuri

Documentația Stackable asigură că este compatibilă cu generatorul de pagini elementor (link af). Dar atenție, nu veți putea folosi blocuri stivuibile în editorul de generare de pagini.

Este de fapt la fel ca pentru blocurile Gutenberg, nu le poți folosi în editorul Elementor, trebuie să faci o alegere: construiește-ți pagina cu Elementor sau cu editorul WordPress.

Site-ul oficial Stackable susține, de asemenea, că blocurile sale sunt compatibile cu orice plugin , așa că le puteți folosi cu alte biblioteci de blocuri fără nicio problemă.

Construiește-ți site-ul web cu Elementor

Proiectați cu ușurință aspectul site-ului dvs. WordPress cu celebrul generator de pagini. Încearcă Elementor

Încearcă Elementor

Documentare si suport

În cazul în care aveți dificultăți în timp ce utilizați Stackable, puteți consulta oricând documentația oficială.

Veți găsi acolo:

• O secțiune dedicată începerii cu pluginul.
• O secțiune de depanare.
• Detalii despre prețuri și licențe.
• Ghizi vizați.
• Întrebări frecvente.
• Și alte resurse.

De asemenea, puteți găsi această documentație în Setări > Suprabil, fila Documentație .

În cazul unor erori tehnice, echipa responsabilă cu pluginul oferă utilizatorilor o listă cu problemele întâlnite frecvent, precum și soluții pentru a le remedia.

Dacă încă ești blocat, poți apela la asistența Stackable sau te poți alătura grupului lor de Facebook pentru a obține răspunsuri la întrebările tale.

În ceea ce privește asistența, echipa Stackable vă poate ajuta dacă le trimiteți solicitarea dvs. prin formularul de contact din fila Contactați-ne din Setări > Stackable sau la adresa de e-mail [email protected] .

Care este raportul calitate-preț?

Versiunea premium este firesc mai generoasă în varietatea de blocuri oferite. Opțiunile de personalizare sunt și ele mai numeroase.

Pentru blocul Feature , de exemplu, există 2 opțiuni de aspect în versiunea gratuită (Basic și Plain ), față de 13 în versiunea Premium.

În versiunea Premium, există și parametri mai mult sau mai puțin interesanți, în funcție de utilizarea Stackable-ului, precum integrarea cu Font Awesome Pro și Role Manager precum și posibilitatea de a modifica orice bloc în CSS.

Pentru a utiliza această ultimă caracteristică, accesați secțiunea Avansat , apoi CSS personalizat . Convenabil: modificările dvs. sunt afișate în timp real.

Versiunea Premium oferă, de asemenea, acces la un an de asistență și actualizări .

Folosind Stackable sau un generator de pagini: aceasta este întrebarea

Gata, am analizat împreună funcțiile și setările Stackable. Acum aveți o idee mai clară despre ceea ce are în magazin pluginul bloc.

Dacă sunteți un fan al generatorilor de pagini sau le-ați aruncat deja o privire atentă, s-ar putea să vă întrebați: de ce să folosiți Stackable în loc de un generator de pagini?

Pentru că opțiunile oferite de Stackable și versiunea gratuită a Elementor de exemplu sunt comparabile. Și din motive întemeiate, Stackable abordează o experiență de proiectare cu un generator de pagini , așa cum se spune pe site-ul său oficial: „Aveți încrederea de a crea cu ușurință cele mai rapide site-uri web folosind o nouă experiență de creare a paginilor pentru Gutenberg” .

Iar odată cu apariția Full Site Editing, care va permite să acționeze asupra tuturor elementelor interfeței site-ului (și nu doar conținutului postărilor), Stackable s-ar putea apropia și mai mult. Acestea fiind spuse, Stackable are avantajul de a fi folosit direct în editorul de conținut WordPress , ceea ce simplifică experiența de proiectare în comparație cu generatorii actuali de pagini.

Pe de altă parte, versiunea pro a Elementor oferă widget-uri și funcții mult mai avansate. Deoarece ambele pluginuri costă același pentru o utilizare pe un singur site (49 USD), vă sugerăm să apelați în schimb la gigantul de constructori de pagini.

Opinia noastră finală despre Stackable

Una peste alta, putem spune că Stackable este un plugin destul de intuitiv care oferă modele moderne și estetice.

Stackable este pentru orice creator de site care dorește să aibă blocuri mai avansate pentru a personaliza designul site-ului său , fără a fi nevoie să atingă vreo linie de cod (dar având posibilitatea, dacă stăpânește CSS-ul, să pună blocurile după bunul plac).

Cu toate acestea, ar trebui să îl utilizați sau să mergeți direct la un generator de pagini mai avansat, cum ar fi Elementor?

Într-adevăr, cu Stackable abordăm o experiență de proiectare a unui generator de pagini direct în editorul WordPress. S-ar putea spune că acesta este începutul obiectivului final al Proiectului Gutenberg, care este să devină un adevărat „constructor de șantier”.

Cu toate acestea, nu suntem încă acolo. Deocamdată, Stackable vă va ajuta să creați postări în același mod ca și versiunea gratuită a Elementor, fără nicio gestionare a șabloanelor (Stackable vă permite să încărcați modele prefabricate, dar nu să le salvați pe ale dvs.).

Dacă vă place să lucrați cu editorul WordPress și blocurile furnizate de Stackable sunt suficiente pentru proiectul dvs., mergeți la el! Utilizarea Elementor nu va fi necesară.

Totuși, dacă aveți nevoie de funcții mai avansate sau trebuie să proiectați un site de la zero (prin care mă refer la personalizarea tuturor șabloanelor de pagină), Elementor (link aff) sau unul dintre concurenții săi va fi indispensabil.

Și dacă ești unul dintre utilizatorii care a fost deja sedus de Elementor, Stackable ar putea să nu fie un mare succes. La urma urmei, ai propriile tale obiceiuri, așa că nu există niciun motiv real să le schimbi.

Dacă sunteți interesat de versiunea Pro de Stackable, nu ezitați să vizualizați demo-ul disponibil și să răsfoiți versiunea gratuită, pentru a vă asigura că blocurile și opțiunile sunt pe placul dumneavoastră.

Descărcați pluginul Stackable:

Și tu, l-ai folosit deja? Te-a făcut acest articol să vrei să-l folosești? Împărtășește-ți gândurile în comentarii.