WordPress è il sistema di gestione del contenuto (CMS) Open Source più utilizzato al mondo. Per creare pagine su un sito web WordPress è necessario un page builder, fondamentale per raggiungere il risultato desiderato in termini di impaginazione e aspetto grafico.
In questo articolo andremo a presentare Bricks Builder e ad analizzare vari website builder per WordPress mettendoli a confronto con Bricks: il builder che attualmente reputo più innovativo, potente e interessante sul mercato e che attualmente utilizzo in produzione. Cominciamo!
Cosa è e perché dovresti usare un page builder?
Con l’avvento del Web 2.0 (ovvero le applicazioni web che interagiscono con gli utenti e variano il loro stato e contenuto dinamicamente) hanno preso sempre più piede i Content Management System, primo fra tutti WordPress.
I CMS sono il cuore pulsante di ogni sito web grazie ai quali possiamo salvare, gestire e presentare i nostri contenuti agli utenti, che ne usufruiranno in maniera chiara e ordinata sul web.
Con il passare del tempo all’interno dei vari CMS e in particolare su WordPress, si sono affermati vari tipi di builder, alcuni ufficiali (sviluppati e aggiornati dalla community di WordPress) e altri sviluppati da software house indipendenti (come Bricks, Oxygen, Elementor, Divi, WPBakery, ecc.).
I builder sono essenzialmente degli editor (spesso di tipo drag and drop) che semplificano la creazione di contenuti come pagine e articoli, attraverso elementi preimpostati (sezioni, blocchi, ecc.) e funzionalità semplificate rispetto alla scrittura manuale di codice sorgente tradizionale (HTML, CSS, JavaScript, ecc.). Analizziamo i più conosciuti!
Temi e temi figlio WordPress
Prima di iniziare la nostra panoramica sui builder è importante dare la definizione di tema, tema figlio e in particolare parlare del blank slate.
Un tema WordPress (anche detto tema genitore nel caso sia installato anche il tema figlio) è un insieme ordinato e definito di files che generano l’aspetto del sito web. Nella maggior parte dei casi il tema definisce i colori, i fonts e il layout del sito web.
Ogni sito web WordPress necessita di almeno un tema e che questo sia “attivo” sul sito web. Su un singolo sito web possono essere installati anche altri temi ma solo uno di essi sarà attivato, per questo consiglio sempre di installare e mantenere un solo tema (quello attivo) sul proprio sito web oltre al suo eventuale tema figlio. In questo modo si limitano eventuali problemi di sicurezza dovuti a temi non aggiornati e al tempo stesso si risparmia qualche MB di spazio web (hosting).
Ogni tema può essere compatibile con uno o più builder e alcuni temi contengono nativamente un sitebuilder con delle funzionalità ad-hoc o delle funzionalità aggiuntive per i builder compatibili con il tema.
A oggi ci sono più di 12.000 temi gratuiti nella directory ufficiale di WordPress senza contare quelli venduti direttamente dalle software house o disponibili sui marketplace (il più conosciuto in assoluto è Envato Market). Chiunque può creare il proprio tema personalizzato e decidere di utilizzarlo sul suo sito web, pubblicarlo sulla directory ufficiale o metterlo in vendita sui marketplace dedicati.
È bene ricordare che la scelta iniziale del tema (come quella del builder e più in generale della tecnologia utilizzata per creare un sito web o qualsiasi altro prodotto software) è fondamentale in termini di scalabilità, robustezza, performance nonché di sicurezza futura dell’applicativo. Affronteremo questo argomento nella parte finale di questo articolo.
I Child Themes
I Child Themes o temi figlio permettono di cambiare piccoli aspetti e funzionalità rispetto tema originale (genitore), andando a sovrascrivere parzialmente o totalmente uno o più template del tema genitore o aggiungendo semplici funzioni nel caso si modifichi il solo file functions.php.
I vantaggi dell’utilizzo di un tema figlio sono molteplici:
- possibilità di aggiungere codice custom senza andare a modificare/intaccare il tema originale;
- possibilità di andare a ridefinire (sovrascrivere) selettivamente solo alcuni dei templates del tema originale;
- il tutto senza rischiare di perdere le modifiche effettuate quando si aggiorna il tema genitore.
Blank Slate
Capita spesso di sentire parlare del tema BlankSlate. Si tratta di un tema davvero minimale, quasi completamente vuoto e senza fogli di stile, che permette la massima personalizzazione e la creazione di un tema figlio completamente customizzato. Un vero e proprio “skeleton theme” come lo definiscono gli sviluppatori nella repository di WordPress.
Questa tecnica era ed è ancora ampiamente utilizzata dai WordPress developer della “vecchia scuola” (quelli più radicali se così vogliamo definirli) alcuni dei quali oggi stanno guardando con interesse verso il nuovo Block Editor di Gutenberg. Quella del Blank Slate è una tecnica utilizzata spesso anche nel caso di progetti importanti che necessitano di una personalizzazione estrema e indipendenza rispetto al codice di terzi.
Il Classic Editor
Uno tra i builder più noti e sicuramente il più “storico” di tutti: il Classic Editor di WordPress fa la sua comparsa già nelle prime versioni (1.5) e si rivela un ottimo strumento per la creazione di pagine e articoli. Stiamo parlando dei primi anni 2000 ed è naturale che oggi le sue funzionalità appaiano piuttosto limitate, soprattutto dal punto di vista grafico.
Oggi il Classic Editor è accessibile solo attraverso il plugin ufficiale: infatti a partire dalla versione 5.0 di WordPress l’editor di default è Gutenberg, il nuovo editor a blocchi che viene supportato dai nuovi block themes.
I temi compatibili con il Classic Editor sono detti Classic themes e sono compatibili con le versioni di WordPress dalla 1.5 in poi. I Classic themes usano un sistema di templating basato su PHP che viene supportato ancora oggi da WordPress.
Diversamente dai Block themes i Classic themes richiedono un minimo di conoscenza per la scrittura del codice PHP, HTML e CSS. Hanno molti meno standard da rispettare ed esistono delle API per l’utilizzo di specifiche funzionalità.
Dalle ultime indiscrezioni anche se il plugin Classic Editor è considerato obsoleto continuerà ad essere supportato e aggiornato finché necessario e quindi anche per tutto il prossimo anno.
Puoi trovare informazioni sull’utilizzo del Classic Editor nella guida ufficiale.
Gutenberg, l’editor a blocchi
Il 6 dicembre 2018 esce WordPress 5.0 e viene rilasciato Gutenberg: il nuovo editor a blocchi o Block Editor che promette di rivoluzionare il site-editing grazie all’utilizzo dei blocchi.
Anche detto “WordPress Editor”, Gutenberg va a sostituire il Classic Editor aggiungendo funzionalità avanzate e permettendo di creare interi siti web responsivi aggiungendo svariati tipi di contenuti multimediali grazie ai blocchi. Gutenberg non si limita quindi alla creazione di semplici articoli ma si propone di essere il nuovo standard per la creazione di interi siti web.
Grazie all’utilizzo dei blocchi di base e di blocchi composti “preimpostati” (detti pattern) Gutenberg promette di realizzare layouts moderni, responsivi ed elaborati ma non è tutto oro quel che luccica: la semplicità dell’utilizzo del builder non permette di raggiungere risultati avanzati senza programmare dei blocchi personalizzati che richiedono una discreta conoscenza di linguaggi come PHP, HTML, CSS e JSON.
I temi compatibili con il nuovo editor Gutenberg sono detti Block themes e si basano su template di blocchi HTML che contengono il markup.
Ti invito a proseguire la lettura per scoprire perché Gutenberg non mi sembra un’alternativa valida ai site builder più evoluti e come possiamo integrarlo per renderlo più funzionale.
Per maggiori informazioni su Gutenberg puoi consultare la documentazione ufficiale.
Le caratteristiche che deve avere il builder per WordPress ideale
Per descrivere al meglio le caratteristiche che dovrebbe avere il Page Builder ideale lascio la parola a Kevin Geary, sviluppatore, creator e titolare di una nota Digital Agency di Atlanta (Georgia). Considero Kevin un vero guru quando si parla di WordPress e in generale di sviluppo web quindi spero davvero che tu sia familiare con la lingua inglese!
In ogni caso sotto al video ti lascio anche un elenco puntato delle principali caratteristiche che Kevin ha individuato.
Le 20 caratteristiche che deve avere qualsiasi Website Page Builder professionale
- Inserimento di un elemento <div> senza stile
- Classi, Pseudo Classi e Pseudo Elementi
- Sezioni (tag HTML section)
- Header & Footer Templates
- Custom HTML Tags
- Blocchi di codice
- Elemento Query Loop o Repeater per i post personalizzati
- Dati Dinamici (query di campi personalizzati)
- Logica condizionale
- Output HTML pulito
- Flexbox
- CSS Grid
- Builder per menù accessibile
- Componenti riutilizzabili
- SRCSET per le immagini
- Attributi HTML
- Unità custom (px, rem, em, ch, vh, vw, ecc.)
- Pannello drag & drop facilmente utilizzabile e con buona UI
- Esecuzione di Shortcode
- Breakpoints personalizzati
Il miglior page builder per WordPress (secondo me) è Bricks
Dopo un’introduzione completa finalmente presentiamo Bricks Builder: un tema WordPress a pagamento che integra un builder drag and drop di ultima generazione, sviluppato con il moderno framework JavaScript Vue 3.
Bricks agisce come un tema (con la possibilità di installare il suo Child Theme) e permette di progettare e realizzare visivamente e in tempo reale il proprio sito web WordPress. Non è quindi progettato per essere utilizzato con altri temi come ad esempio Elementor o per “bloccare” il tema attuale come il plugin Oxygen Builder.
Bricks permette di realizzare templates, componenti riutilizzabili e pagine rendendo il frontend molto veloce e pulito dal punto di vista del markup del codice. Come dicono gli sviluppatori di Codeer, la software house che sviluppa Bricks e Happy Files, “the frontend uses smart asset loading, clean markup, and some magic 🙂”.
Tra le principali caratteristiche di Bricks troviamo:
- Builder visuale Drag and Drop che permette una customizzazione completa dello stile;
- Ottimizzazione nativa degli asset e dell’accessibilità dei componenti;
- Query Loop builder visuale;
- Dati dinamici: integrazione nativa con Advanced Custom Fields, Meta Box, JetEngine, Toolset, Pods, e ACPT nel builder. Render di funzioni PHP, filtri per i dati, action hooks e condizioni dinamiche;
- Logica condizionale e supporto per API;
- Interazioni integrate nativamente nel builder;
- Popup builder integrato con le funzionalità di logica condizionale e interazioni del builder;
- Più di 110 elementi nativi personalizzabili;
- Form builder integrato;
- Builder visuale per WooCommerce con più di 30 elementi nativi;
- Libreria di Templates della community;
- Output contenuto di Gutenberg;
- e tante altre.
Insomma un builder per WordPress moderno, veloce, sicuro e aggiornato regolarmente che ha tutte le caratteristiche che servono (tra le quali quelle indicate da Kevin) per garantire uno sviluppo fluido e completo di siti web di piccole, medie e anche di grandi dimensioni e che necessitano di funzionalità più avanzate.
Puoi testare l’ultima release di Bricks Builder sul sito web ufficiale creando un account gratuitamente qui: try.bricksbuilder.io
Bricks a confronto con altri website builders
WordPress default editor (Gutenberg) VS Bricks
Delle caratteristiche di Gutenberg ne abbiamo già parlato.
Parlando del confronto con Bricks, non avendo avuto molte opportunità di testare Gutenberg, torna in aiuto un video del mitico Kevin Geary che ha testato il Block Editor di WordPress nella realizzazione di una sezione dal layout semplice che è riuscita (purtroppo) a mettere molto in difficoltà il nuovo editor a blocchi!
Elementor VS Bricks
Fermo restando che è e rimane ancora oggi il builder drag and drop più diffuso sul mercato, non posso parlare bene di Elementor: le rare volte che ho avuto a che fare con questo page builder visuale mi sono trovato molto in difficoltà nel realizzare i layout che avrei voluto.
Elementor è disponibile sia in versione free, con molte limitazioni, che nella versione Pro, dove offre il meglio di sé.
Ecco alcune delle sue caratteristiche nella versione Pro:
- Editor Drag & Drop;
- Più di 300 templates già pronti;
- Più di 100 widgets;
- Editing responsivo live;
- Impostazioni globali;
- e molte altre.
In definitiva penso che Elementor sia un’alternativa valida per chi non ha grandi necessità di personalizzazione, performance e soprattutto per chi è alle prime armi e ha bisogno di sviluppare con WordPress in autonomia.
WPBakery page builder VS Bricks
Lo storico plugin WPBakery, il cui nome in origine era Visual Composer, è in testa alle classifiche dei page builder più diffusi al mondo dopo Elementor. Facilmente integrabile con la maggior parte dei temi in circolazione, permette di creare layout abbastanza personalizzati ma caratterizzati da un aspetto “squadrato” poco moderno.
Alcune delle sue caratteristiche sono:
- Frontend editor (visuale);
- Backend editor (stilizzato con blocchi);
- Elementi personalizzabili;
- Preset di impostazioni;
- Skins;
- Design responsivo;
- e tante altre.
Personalmente ho utilizzato molto WPBakery all’inizio della mia carriera da Web Designer e, al pari di Elementor, non mi sento di consigliarlo per un utilizzo professionale ma piuttosto per i neofiti che debbano sviluppare in autonomia.
Oxygen Builder VS Bricks
Oxygen Builder è un plugin WordPress che disattiva il tema installato e permette di creare il proprio tema completo di template per footer e header. La possibilità di personalizzazione molto elevata, i dati dinamici, il markup HTML pulito e il frontend veloce fanno di Oxygen il precursore di Bricks e Zion.
Tra le caratteristiche principali di Oxygen Builder troviamo:
- Editing Drag & Drop;
- Header & Footer builder;
- Colori globali;
- Elemento codice personalizzato;
- Dati dinamici;
- Integrazione con Gutenberg;
- Design Library;
- Composite elements;
- Integrazione ed elementi per WooCommerce;
- e molte altre.
Oxygen sarebbe l’alternativa più valida a Bricks se Soflyy, la software house che lo ha sviluppato, non avesse abbandonato l’implementazione di nuove funzionalità in favore del loro nuovo builder Breakdance. Fortunatamente vengono ancora rilasciati aggiornamenti di sicurezza.
Divi VS Bricks
Divi è un tema sviluppato dall’azienda Elegant Themes. Ha due editor, uno a blocchi e uno visuale, molto simili a quelli di WPBakery e lo ricorda veramente tanto anche nella limitata possibilità di personalizzazione degli elementi.
Ecco alcune delle sue caratteristiche:
- Editor Drag & Drop (molto simile a WPBakery);
- CSS personalizzato;
- Editing responsivo;
- Più di 200 elementi;
- Più di 200 design già pronti;
Anche per Divi vale lo stesso di WPBakery: è un builder abbastanza leggero e che ho avuto l’opportunità di testare. Permette anche una discreta personalizzazione ma non lo consiglio per un utilizzo professionale in quanto mancano diverse funzionalità fondamentali. Per questo ancora una volta vince Bricks.
Zion Builder VS Bricks
Poco conosciuto e mai testato ma Zion Builder si propone come una valida alternativa a Bricks e Oxygen Builder, molto simile in termini di funzionalità ma soprattutto di leggerezza e pulizia del codice di markup.
Tra le sue caratteristiche abbiamo:
- Elementi e templates;
- Header & Footer builder;
- Theme builder;
- Stile globale;
- Cronologia delle revisioni;
- WooCommerce builder;
- Elemento repeater per le Query WP;
- Dati dinamici;
- e molte altre.
Non avendolo mai utilizzato mi astengo dal giudicare e confrontare direttamente con Bricks ma consiglio comunque l’utilizzo di quest’ultimo che rimane sicuramente più conosciuto e adottato.
Il caso Cwicly
Proprio nei giorni in cui stavo finendo di scrivere questo articolo una notizia ha scosso l’ecosistema di WordPress e in particolare gli utilizzatori di Gutenberg: Cwicly, un pagebuilder basato sul block editor di WordPress, non verrà più aggiornato né sviluppato.
Mettendo da parte momentaneamente il discorso aggiornamento e sicurezza, che affronteremo nella prossima sezione, non ho mai avuto l’opportunità di testare personalmente Cwicly ma ne ho sempre sentito parlare molto bene tanto che l’ho sempre tenuto presente come una delle poche possibili alternative a Bricks.
È un vero peccato decretare la fine di questo builder che sembrava tanto promettente!
Come scegliere il tema e il builder WordPress più adatto?
Premesso che la scelta del tema e del builder per sviluppare il tuo prossimo sito web WordPress non può essere snocciolata con la lettura di un breve articolo e che varia in base al tipo di progetto e del WordPress developer che dovrà sviluppare, ecco i miei consigli per scegliere al meglio.
Sicurezza
Prima di tutto occorre valutare la sicurezza del builder che si andrà ad utilizzare, che è sempre il tallone di Achille di ogni installazione di WordPress.
In generale è bene scegliere soluzioni a pagamento (premium) poiché tendenzialmente il programmatore o la software house che lo hanno sviluppato avranno maggiore interesse (economico si intende) ad aggiornarlo sviluppando nuove funzionalità e ma soprattutto rilasciando patch di sicurezza.
Il rischio di utilizzare un page builder per WordPress (tema o plugin che sia) che non viene aggiornato non è solo quello dell’incompatibilità con nuove versioni di PHP e altri plugins ma soprattutto quello delle vulnerabilità dovute a falle di sicurezza che non sono state “patchate”.
Caratteristiche
Dopo la sicurezza vengono sicuramente le funzionalità e quindi la versatilità del builder. Non mi dilungherò ripetendo le caratteristiche fondamentali che un site builder dovrebbe avere: le abbiamo descritte nelle sezioni precedenti.
Performance
Per quanto mi riguarda le performance sono a pari merito con le caratteristiche del builder: è soprattutto per questo che preferisco Bricks a Elementor.
Un markup del codice pulito ed essenziale è fondamentale per avere le massime performance e ottimizzare al meglio il sito web anche per i motori di ricerca.
Affidabilità e robustezza
È fondamentale anche valutare l’affidabilità e la robustezza del page builder. Un’indicazione ce la possono dare il tasso di adozione, una roadmap chiara sul sito web ufficiale e la presenza o meno di una community di utenti che lo utilizza regolarmente.
Intelligenza artificiale
Un aspetto che secondo me è poco rilevante e non influenza la scelta del builder è l’integrazione dell’intelligenza artificiale: se devo generare del testo o delle immagini preferisco farlo con un tool esterno che posso controllare con più accuratezza (a proposito di AI, Lorenzo ha scritto un articolo fantastico sui principali tool per la generazione immagini). Stesso discorso vale anche per i plugins.
Il verdetto
In generale quindi il mio consiglio è quello di diffidare di site builder e temi gratuiti che sono i più inclini ad essere abbandonati e non aggiornati nel tempo (questo vale anche per i plugins, approfondiremo meglio in un prossimo articolo) e di diffidare anche di soluzioni a pagamento che siano poco utilizzate come ci insegna il caso di Cwicly.
È chiaro quindi che non c’è un builder adatto a ogni esigenza e a qualsiasi programmatore.
La mia scelta, oggi, ricade su Bricks Builder per tutti i nuovi progetti di sviluppo ma non è detto che in futuro la mia idea possa cambiare e che Bricks sia la scelta giusta anche per te.
Conclusioni
In questo articolo abbiamo spiegato e introdotto l’utilizzo dei temi e dei sitebuilder, abbiamo analizzato e confrontato con Bricks i più blasonati builder per WordPress, senza entrare troppo nello specifico, ma cercando di dare una panoramica sullo stato dell’arte e motivando le nostre scelte.
Se oltre a un tema stai cercando i plugins giusti per il tuo nuovo sito web ti consiglio di dare un’occhiata a questo articolo nel quale presento i principali plugin WordPress che non possono mancare in ogni sito web che sviluppo.
Se questo articolo ti è stato utile o hai bisogno di aiuto per il tuo sito web scrivici: io e gli altri professionisti di Midable saremo felici di aiutarti e guidarti verso la soluzione migliore.
Alla prossima!
