Stackable: il plugin che sblocca i tuoi blocchi

Ricordi gli anni '80? L'arrivo della new wave, l'avvento dei tagli di capelli di triglia, il successo di Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran e così via. Negli anni '80 è anche l'esplosione del videogioco, e l'uscita di un gioco su cui siamo numerosi ad essere stati vicini allo schiocco del pollice: Tetris.

Questo gioco, con il suo semplice principio, consisteva nell'impilare blocchi di forme diverse ottimizzando allo stesso tempo lo spazio disponibile.

Il concetto può essere riassunto in una riga: "Tetris si adatta perfettamente alla definizione del miglior gioco: un minuto per impararlo, una vita per padroneggiarlo" , ha affermato il giornalista Bill Kunkel (alias The Game Doctor).

Una dichiarazione che potrebbe essere applicata a molti programmi, come WordPress.

A proposito di WordPress, se cito Tetris, è perché il plugin che analizzerò oggi si chiama Stackable. E per una buona ragione, questo plugin aggiunge nuovi blocchi Gutenberg da annidare nel tuo sito WordPress .

Pronti per questo nuovo test? Ai vostri posti, pronti, via!

Scritto originariamente a luglio 2021, questo articolo è stato aggiornato a novembre 2021 con le versioni gratuite e premium 3.0.5 di Stackable.

I tuoi migliori progetti WordPress hanno bisogno del miglior host!

WPMarmite consiglia Bluehost: ottime prestazioni, ottimo supporto. Tutto quello che ti serve per iniziare alla grande.

Prova Bluehost

Che cos'è impilabile?

"Alimentare la prossima generazione di web design". Questa è la missione di Stackable sul suo sito ufficiale, dove il plugin si definisce come una "nuova esperienza di creazione di pagine per Gutenberg". Non di meno!

Va detto che nella directory di WordPress, il plug-in di blocco ha più di 40.000 installazioni attive e una bella valutazione di 4,9 stelle su 5, accompagnata da una serie di recensioni entusiastiche.

Se stai già cercando nuovi blocchi Gutenberg , potresti aver già trovato plugin come Ultimate Addons per Gutenberg, Qubely, Getwid o Coblocks.

Ne abbiamo parlato nel nostro articolo sugli addon per aumentare i poteri di Gutenberg. La loro missione è semplice: diversificare la gamma di blocchi Gutenberg disponibili nell'editor di contenuti.

Stackable è anche un plugin pensato per Gutenberg, al quale porta una miriade di blocchi, dai grandi classici (header, gallery, call to action) a quelli più esotici (citazioni, listini prezzi, timer, testimonianze, ecc.).
Questi blocchi sono pronti per l'uso e personalizzabili.

Quindi, potresti pensare, qual è lo scopo di installare Stackable? Sono solo blocchi tra gli altri blocchi. Bene, Gutenberg fornisce molti blocchi utili, ma con Stackable le possibilità si moltiplicano.

Inoltre, hai accesso a funzionalità di personalizzazione più avanzate rispetto a quelle offerte nativamente con Gutenberg, come: regolazione della disposizione degli elementi all'interno dei blocchi, spaziatura, modifica dello sfondo, aggiunta di effetti hover, ecc.

Esistono due versioni di Stackable:

• Una versione gratuita è disponibile nella directory di WordPress.

• Una versione a pagamento è disponibile dal sito Web ufficiale del plug-in, a partire da $ 49 per l'uso su un sito.

Come puoi immaginare, il secondo dà accesso a più blocchi e permette di personalizzarli più finemente.

Per questo test, ci siamo concentrati sulla versione Premium.

Impostazioni impilabili

Per iniziare a configurare Stackable, installa e attiva il plugin. Quindi vai su Impostazioni> Impilabile.

Sulla sua interfaccia, avrai accesso alle seguenti impostazioni:

• Font Awesome icons Pro (premium): per integrare un kit Font Awesome Pro in Stackable.
• Impostazioni dell'editor: consente di controllare alcune funzionalità dell'editor di Stackable. Ad esempio, puoi disabilitare la Libreria del progetto, impostare la larghezza di determinati blocchi, chiudere i riquadri dell'editor che non stai utilizzando e collegare le colonne in modo che subiscano le stesse modifiche.
• Gestione ruoli (premium): per concedere o bloccare l'accesso all'editor di blocchi ad alcuni ruoli utente e consentire loro di modificare solo il contenuto. Nota: questa gestione funziona su tutti i blocchi , non solo quelli inclusi con Stackable.
• Campi personalizzati (premium): questa funzione ti consente di creare campi personalizzati che puoi aggiungere dinamicamente ai tuoi contenuti dall'editor. Per farlo, vai nella sezione Campi della tua amministrazione WordPress, clicca su “Aggiungi nuovo”, definisci un tipo di campo (Testo, Numero, Data, Ora o URL) e un nome.

Quindi fai clic su "Salva campo", inserisci un valore per il tuo campo e fai clic su "Salva modifiche" per salvarlo.

Per integrarlo nei tuoi contenuti, posiziona il cursore dove vuoi che appaia il valore del tuo campo e clicca sull'icona del database (corrisponde a Campi Dinamici).

Seleziona "Sito" come "Sorgente dinamica", quindi il campo appena creato (appare sotto "Campi personalizzati impilabili") e infine fai clic su "Applica". Questo è tutto!

Va tutto bene, ma perché abbiamo fatto tutto questo? Grazie alla magia dei contenuti dinamici, non appena lo aggiorno, il mio indirizzo email verrà aggiornato automaticamente in ogni punto del mio sito dove è integrato il campo personalizzato.

• Responsive breakpoints: è possibile modificare la larghezza dello schermo da cui verrà visualizzato il tuo sito in modalità Tablet o Mobile, e visualizzare così le impostazioni che hai definito per questi dispositivi.
• Impostazioni globali: sono disponibili due funzionalità per superare possibili incompatibilità con il tema in atto sul tuo sito. Puoi entrare nel selettore dell'area contenuto del tuo tema e forzare l'uso dei caratteri di Stackable in modo che prendano il sopravvento su quelli del tuo tema.

Come Elementor, Stackable ha impostazioni globali: i colori e la tipografia che si applicano alle pagine create con Elementor. Ma con Stackable, hai la possibilità di definire queste impostazioni per tutti i blocchi che compongono il tuo sito .

• Abilita e disabilita il blocco: se non hai bisogno di alcuni blocchi, puoi disabilitarli in modo che non appaiano nell'elenco dei blocchi disponibili.
• Impostazioni di ottimizzazione (premium): consente di caricare file JavaScript e CSS solo nei post contenenti blocchi impilabili anziché sull'intero sito. Lo scopo di questa funzione è migliorare le prestazioni del tuo sito. Questa funzionalità si applica solo ai blocchi della versione 2 perché si applica già ai blocchi più recenti del plug-in (dalla versione 3).

Come usare Impilabile?

Kit e blocchi

Stackable viene utilizzato direttamente dall'editor di WordPress. Per fare ciò, crea o apri una pagina o un post, quindi seleziona Libreria design nella parte superiore del tuo post.

La Libreria del design contiene kit e categorie dell'interfaccia utente. Che cos'è?

In effetti, queste due sezioni contengono gli stessi elementi, ma classificati in modo diverso. Gli UI Kit raccolgono i blocchi disponibili dalla style guide e le Categorie li raggruppano per tipologia di blocco: header, testimonial, call to action, ecc., che si trovano in tutte le style guide disponibili.

Le categorie e i kit dell'interfaccia utente sono due modi diversi per trovare il blocco giusto per te.

Ogni blocco viene fornito con un design pronto all'uso e personalizzabile. Vedremo come personalizzarli nella parte successiva.

Per trovare il blocco che ti serve, puoi anche utilizzare la barra di ricerca a tua disposizione. Le quattro icone in alto a destra della finestra consentono di aggiornare i risultati della ricerca e modificare le dimensioni delle miniature per ottenere una visualizzazione più accurata o più ampia dei diversi blocchi.

Come integrare un blocco impilabile in un post

Puoi anche semplicemente fare clic sull'icona "+" come faresti per aggiungere qualsiasi blocco e riconoscerai facilmente i blocchi del plug-in impilabile, poiché sono decorati con un gradiente viola-arancione.

Cliccando sul pulsante “Sfoglia tutto”, potrai accedere a tutti i blocchi Gutenberg a tua disposizione. I blocchi Impilabili sono presenti nelle sezioni “Testo” e “Aspetto”, e sono tutti raggruppati nell'omonima sezione “Impilabili”, che dà anche accesso alla Libreria Disegni.

Tutti questi percorsi portano a Roma ai blocchi Impilabili, sì, ma è soprattutto il percorso Design Library che dà accesso ai progetti precostituiti.

Prendi questo blocco Testimonial, ad esempio, che ha una formattazione minima, testo di riempimento e nessuna immagine di esempio:

E guarda un altro blocco Testimonial, aggiunto dalla Libreria del design (il blocco Prime Testimonial 2 ):

Una volta trovata la vestibilità perfetta, fai clic sull'elemento desiderato per incorporarlo direttamente nel tuo post. Puoi quindi riorganizzare l'elemento sulla pagina, come qualsiasi blocco Gutenberg, e personalizzarlo.

Personalizzazione Impilabile

Per personalizzare un blocco impilabile, vai alla sezione "blocco" sul lato destro del tuo post, dove troverai una serie di opzioni, classificate in tre categorie: Blocco , Stile e Avanzate .

Trovare quello che ti interessa può essere noioso perché c'è così tanto da scegliere, ma puoi anche trovarlo semplicemente facendo doppio clic sull'elemento del blocco che desideri modificare. Verrai quindi indirizzato alle impostazioni per quel blocco con un clic.

Le diverse opzioni di personalizzazione sono raggruppate in tre schede:

• Blocco : è qui che puoi personalizzare il layout dei diversi elementi che compongono il tuo blocco, aggiungere bordi e ombre e agire sullo sfondo, spaziatura e allineamento del testo.

Puoi anche regolare la spaziatura tra gli elementi nei tuoi blocchi passandoci sopra con il mouse e quindi usando le maniglie nella parte inferiore dell'elemento. Puoi persino vedere il numero di pixel che lo separano dal suo vicino. Molto utile!

• Stile : permette di gestire le colonne e agire su tipografia, colori, pulsanti e separatori. È più inaspettato, ma puoi anche aggiungere un titolo e una descrizione al tuo blocco.
• Avanzate : qui si ha accesso a funzionalità avanzate come il tag HTML associato al blocco e la gestione del responsive (possibilità di nascondere il blocco su computer, tablet o mobile). Puoi regolare i margini del blocco e l'allineamento del contenuto, ma anche divertirti ad aggiungere animazioni o effetti di transizione ai tuoi elementi (vai piano, però).
  La ciliegina sulla torta per gli appassionati di CSS è la possibilità di modificare il CSS del blocco direttamente in questa interfaccia, accanto al blocco, e con un'anteprima delle modifiche in tempo reale.
  Infine, la visualizzazione condizionale consente di visualizzare un elemento solo quando viene soddisfatta una condizione precedentemente definita.

Unisciti agli abbonati WPMarmite

Ottieni gli ultimi post di WPMarmite (e anche risorse esclusive).

ISCRIVITI ORA

Se non sei completamente soddisfatto della progettazione di un blocco, hai la possibilità di modificare molti parametri per adattarlo a tuo piacimento.

Ad esempio, mi è piaciuto poter aggiungere facilmente effetti al passaggio del mouse degli elementi o dell'elemento genitore (applicare uno sfondo al blocco genitore per sfruttare quest'ultima funzionalità), oppure modificare facilmente i margini di ogni elemento del blocco .

Ancora meglio: puoi scegliere margini diversi su cellulare e tablet! In questo modo puoi facilmente modificare l'aspetto reattivo del tuo sito. Per fare ciò, clicca prima sull'icona del desktop (computer) per visualizzare le icone di altri dispositivi.

Un'altra opzione interessante è aggiungere separatori nella parte superiore o inferiore di un elemento, come con Elementor. Ovviamente puoi regolare l'aspetto di questi separatori e persino aggiungere uno o due strati più chiari nella versione Premium.

Ecco come appare in fondo a questo appetitoso hamburger:

Quando passi il mouse sopra il loro nome, alcune impostazioni diventano viola e il tuo cursore si trasforma in un punto interrogativo. Se non sai cosa sono, clicca per vedere un'animazione che ti aiuterà a capire a cosa servono. Abbastanza utile per orientarsi in tutte queste opzioni.

Quale adattamento a temi e plugin?

Adattamento ai temi

Secondo la documentazione ufficiale, "Stackable dovrebbe funzionare con qualsiasi tema", purché il tema che hai sul tuo sito sia ottimizzato per Gutenberg.

Parlando di temi, l'ho menzionato all'inizio di questo post: c'è un tema interno , progettato per funzionare con l'editor Gutenberg e il plug-in Stackable. È gratuito e disponibile nella directory ufficiale di WordPress. Con esso, la compatibilità è garantita, insomma.

È nei colori del plugin con lo stesso nome, quindi spero che non ti dispiaccia il rosa confetto.

Scarica il tema Impilabile:

Adattamento ai plugin

La documentazione Stackable garantisce che sia compatibile con l' elementor page builder (aff link). Ma attenzione, non sarai in grado di utilizzare i blocchi impilabili nell'editor del generatore di pagine.

In realtà è lo stesso dei blocchi di Gutenberg, non puoi usarli nell'editor di Elementor, devi fare una scelta: costruisci la tua pagina con Elementor o con l'editor di WordPress.

Il sito Web ufficiale di Stackable afferma inoltre che i suoi blocchi sono compatibili con qualsiasi plug -in, quindi puoi utilizzarli con altre librerie di blocchi senza alcun problema.

Costruisci il tuo sito web con Elementor

Progetta facilmente l'aspetto del tuo sito Web WordPress con il famoso generatore di pagine. Prova Elementor

Prova Elementor

Documentazione e supporto

In caso di difficoltà durante l'utilizzo di Stackable, puoi fare riferimento alla documentazione ufficiale in qualsiasi momento.

lì troverai:

• Una sezione dedicata a iniziare con il plugin.
• Una sezione per la risoluzione dei problemi.
• Dettagli su prezzi e licenze.
• Guide mirate.
• Una FAQ.
• E altre risorse.

Puoi trovare questa documentazione anche in Impostazioni > Impilabile, scheda Documentazione .

In caso di problemi tecnici, il team responsabile del plug-in fornisce agli utenti un elenco dei problemi riscontrati di frequente, nonché le soluzioni per risolverli.

Se sei ancora bloccato, puoi chiamare il supporto di Stackable o unirti al loro gruppo Facebook per ottenere risposte alle tue domande.

Per quanto riguarda il supporto, il team di Stackable può aiutarti se invii loro la tua richiesta tramite il modulo di contatto nella scheda Contattaci in Impostazioni > Stackable o all'indirizzo email [email protected] .

Qual è il rapporto qualità-prezzo?

La versione premium è naturalmente più generosa nella varietà di blocchi offerti. Più numerose anche le opzioni di personalizzazione.

Per il Blocco Funzionalità , ad esempio, ci sono 2 opzioni di layout nella versione gratuita (Basic e Plain ), rispetto alle 13 nella versione Premium.

Nella versione Premium sono presenti anche parametri più o meno interessanti, a seconda del tuo utilizzo di Stackable, come l'integrazione con Font Awesome Pro e Role Manager oltre alla possibilità di modificare qualsiasi blocco in CSS.

Per utilizzare quest'ultima funzionalità, vai alla sezione Avanzate , quindi CSS personalizzato . Comodo: le tue modifiche vengono visualizzate in tempo reale.

La versione Premium dà anche accesso a un anno di supporto e aggiornamenti .

Usare Stackable o un page builder: questa è la domanda

Ecco fatto, abbiamo esaminato insieme le funzionalità e le impostazioni di Stackable. Ora hai un'idea più chiara di cosa ha in serbo il plug-in di blocco.

Se sei un fan dei page builder, o li hai già esaminati da vicino, ti starai chiedendo: perché usare Stackable invece di un page builder?

Perché le opzioni offerte da Stackable e la versione gratuita di Elementor, ad esempio, sono comparabili. E per una buona ragione, Stackable si avvicina a un'esperienza di progettazione con un generatore di pagine , come affermato sul suo sito Web ufficiale: "Avere la sicurezza di creare facilmente i siti Web più veloci utilizzando una nuova esperienza di creazione di pagine per Gutenberg" .

E con l'arrivo del Full Site Editing, che permetterà di agire su tutti gli elementi dell'interfaccia del sito (e non solo sul contenuto dei post), Stackable potrebbe avvicinarsi ancora di più. Detto questo, Stackable ha il vantaggio di essere utilizzato direttamente nell'editor di contenuti di WordPress , il che semplifica l'esperienza di progettazione rispetto agli attuali page builder.

D'altra parte, la versione pro di Elementor offre widget e funzionalità molto più avanzati. Poiché entrambi i plug-in costano lo stesso per un utilizzo su un singolo sito ($ 49), ti suggeriamo di rivolgerti invece al colosso dei costruttori di pagine.

La nostra opinione finale su Stackable

Tutto sommato, possiamo dire che Stackable è un plugin piuttosto intuitivo che offre design moderni ed estetici.

Stackable è per qualsiasi creatore di siti che voglia avere blocchi più avanzati per personalizzare il design del proprio sito , senza bisogno di toccare nessuna riga di codice (ma avendo la possibilità, se padroneggia il CSS, di mettere i blocchi a proprio piacimento).

Tuttavia, dovresti usarlo o andare direttamente a un generatore di pagine più avanzato come Elementor?

Infatti, con Stackable ci stiamo avvicinando a un'esperienza di progettazione di un page builder direttamente nell'editor di WordPress. Si potrebbe dire che questo è l'inizio dell'obiettivo finale del Progetto Gutenberg, che è quello di diventare un vero e proprio “costruttore di siti”.

Tuttavia, non ci siamo ancora. Per ora, Stackable ti aiuterà a creare post allo stesso modo della versione gratuita di Elementor, senza alcuna gestione dei modelli (Stackable ti consente di caricare progetti prefabbricati, ma non di salvare i tuoi).

Se ti piace lavorare con l'editor di WordPress e i blocchi forniti da Stackable sono sufficienti per il tuo progetto, fallo! L'utilizzo di Elementor non sarà necessario.

Tuttavia, se hai bisogno di funzionalità più avanzate o devi progettare un sito da zero (con il che intendo personalizzare tutti i modelli di pagina), Elementor (aff link) o uno dei suoi concorrenti sarà indispensabile.

E se sei uno degli utenti che è già stato sedotto da Elementor, Stackable potrebbe non essere un grande successo. Dopotutto, hai le tue abitudini, quindi non c'è un vero motivo per cambiarle.

Se sei interessato alla versione Pro di Stackable, non esitare a visualizzare la demo disponibile e sfoglia la versione gratuita, per assicurarti che i blocchi e le opzioni siano di tuo gradimento.

Scarica il plug-in Stackable:

E tu, l'hai già usato? Questo articolo ti ha fatto venire voglia di usarlo? Condividi i tuoi pensieri nei commenti.