Beaver Builder: recensione del page builder per WordPress

Scritto da Tiziano Fogliata
Aggiornato il

Recentemente ho scritto un post dedicato ai vari page builder per WordPress, ossia a quei plugin/temi che consentono anche agli utenti meno esperti di creare sofisticati layout di pagina in tempi rapidissimi. In questo articolo ti spiego perché Beaver Builder è uno dei migliori page builder per WordPress attualmente disponibili.

I page builder sono strumenti incredibilmente potenti, che hanno permesso a migliaia di persone di avvicinarsi alla realizzazione di siti e pagine Web, permettendo loro di ottenere risultati di buona qualità in tempi molto rapidi.

Di certo non sono la soluzioni a tutti i problemi e richiedono comunque un minimo di pratica per essere padroneggiati e sfruttati al meglio. Inoltre se una persona è del tutto priva di senso estetico, un page builder non gli impedirà di creare pagine web orripilanti ;)

Molti page builder inoltre, come evidenziato nel post che ho citato poco fa, hanno un problema di fondo, costituito dal largo impiego di shortcode utilizzati per la definizione dei layout.

Questo comporta che, una volta disattivato quel plugin o attivato un nuovo tema, la pagina risulta piena zeppa di codice inutile che non permette di distinguere facilmente il reale contenuto dagli elementi del layout, come in questo esempio:

visual-composer-codice-shortcode-pagina

Non tutti i page builder però presentano questo problema :)

Perché Beaver Builder è diverso

Uno dei principali punti di forza di Beaver Builder consiste nel non dipendere dagli shortcode per la gestione dei layout delle pagine.

I contenuti presenti in una pagina di questo tipo realizzata con Beaver Builder:

esempio-layout-beaver-builder

risultano infatti perfettamente accessibili all’interno dell’editor standard di WordPress anche dopo aver disattivato il plugin e senza alcuno shortcode:

editor-wp-beaver-builder

Inoltre l’esperienza di utilizzo con Beaver Builder è estremamente piacevole rispetto ad altre soluzioni come ad esempio Divi o Visual Composer. L’utilizzo di questo plugin è infatti decisamente semplice e i comandi sono tutti molto chiari.

Beaver Builder offre parecchi layout già pronti

Beaver Builder, oltre a permettere la creazione di layout estremamente personalizzati, consente di sfruttare numerosi modelli già pronti sia per le home page che per le pagine interne. Inoltre è anche possibile costruire, esportare e importare dei propri modelli.

modelli-di-contenuto-beaver-builder

Sia che si tratti di realizzare una home contenente slider a tutta larghezza, un elenco dei servizi, una pagina “coming soon” per il lancio di un prodotto, un elenco di post o una galleria di immagini, Beaver Builder ti offre un modello già pronto che puoi utilizzare per partire rapidamente e personalizzare poi come ritieni più opportuno.

modelli-contenuto-pagine-interne-page-builder

Creare layout a griglia con Beaver Builder

Un page builder come Beaver Builder non serve solo a creare pagine con slider, effetti parallax o animazioni, ma può essere utile anche per creare rapidamente un layout a griglia che sia anche responsive, ossia che si adatti automaticamente ai vari dispositivi usati per visualizzare la pagina, come tablet e smartphone.

grid-layout-con-beaver-builder

29 moduli disponibili da posizionare dove vuoi

Beaver Builder ti mette a disposizione ben 29 moduli che puoi inserire in ogni genere di layout. 5 di essi sono disponibili anche nella versione gratuita, chiamata Beaver Builder Lite e disponibile nel repository ufficiale di WordPress.

I moduli spaziano dalla galleria fotografica allo slider, dal blocco di codice HTML personalizzato ai form di registrazione, dai tab agli accordion, dalle call to action alle tabelle per i prezzi. Oltre ai moduli previsti da Beaver Builder è inoltre possibile inserire nelle pagine anche i vari widget di WordPress.

Modelli di pagina e di riga personalizzati

Con Beaver Builder puoi creare modelli di pagina personalizzati da esportare e riutilizzare quando e dove vuoi, ma non solo. Anche ogni riga e ogni singolo elemento possono essere salvati come modelli, ossia come template riutilizzabili su tutto il sito. In questo modo puoi anche inserire un particolare elemento (riga o modulo) in più pagine del sito ma senza dover intervenire su tutte le singole pagine in caso di modifica.

modello-riga-beaver-builder

Gestire quali modelli, moduli e tipi di post abilitare

Tramite le impostazioni del plugin è possibile decidere di abilitare solo i modelli di default di Beaver Builder o anche quelli creati dagli utenti, oppure entrambi. Si possono inoltre disattivare alcuni moduli, se ad esempio non vuoi renderli disponibili ai tuo clienti o agli utenti del tuo sito.

È inoltre possibile abilitare Beaver Builder su tutti o solo su alcuni dei contenuti di WordPress: pagine, post e anche nei custom post type.

abilitare-moduli-beaver-builder

Un page builder che si integra perfettamente con Genesis

Se utilizzi il framework Genesis per WordPress, Beaver Builder è il page builder ideale per personalizzare il layout di alcune delle pagine del tuo sito.

In questo caso ti consiglio anche l’installazione del plugin gratuito Genesis Dambuster. Si tratta di un plugin espressamente pensato per Genesis e consente di eliminare il markup presente all’interno del tuo tema in modo da poter realizzare layout a tutta larghezza, utilissimo quando vuoi usare un page builder.

Nel video sottostante che ho realizzato puoi vedere in cosa consiste Genesis Dambuster e perché è utilissimo per utilizzare Beaver Builder con un tema basato su Genesis.

È possibile creare moduli personalizzati

Si tratta di un plugin interessante anche per gli sviluppatori, dato che è possibile aggiungere moduli personalizzati da utilizzare poi all’interno del builder. Sul sito è disponibile la documentazione e anche un modulo di esempio, se vuoi cimentarti nello sviluppo di un modulo personalizzato.

Beaver Builder è anche disponibile come tema

Beaver Builder mette a disposizione anche un tema, basato sul popolare framework Bootstrap, per rendere ancora più semplice la personalizzazione del proprio sito. Questa può essere una buona scelta se non avete un vostro tema o framework preferito. Personalmente preferisco basare i miei siti WordPress su Genesis e usare Beaver Builder quando mi serve.

Quanto costa Beaver Builder? Dove e come puoi utilizzarlo?

Beaver Builder è disponibile anche in versione Lite (gratuita), ma la versione completa è a pagamento. Le licenze disponibili sono 3:

  • Standard da $99
  • Pro da $199
  • Agency da $399

L’aspetto estremamente positivo di questo plugin è che con qualsiasi licenza può essere utilizzato su un numero illimitato di siti. Già con la versione Standard puoi fare di tutto, tranne che utilizzarlo su WordPress Multisite. La versione Standard non include il Beaver Builder Theme, ma questa a mio avviso non è una mancanza grave.

Se hai la necessità di usare Beaver Builder in installazioni Multisite devi necessariamente acquistare la licenza Pro. Se inoltre hai un’agenzia o vuoi semplicemente utilizzare questo plugin sui siti dei tuoi clienti ma senza far comparire il nome Beaver Builder, allora devi acquistare la licenza Agency che ti consente l’utilizzo in modalità white label.

Come accade per la maggior parte dei plugin a pagamento, anche Beaver Builder prevede un canone annuo per il rinnovo della licenza. Pur non essendo obbligatorio, dato che è possibile continuare a utilizzare il plugin anche una volta scaduta la licenza, il canone di rinnovo consente di continuare a ricevere gli aggiornamenti e il supporto.

Il canone di rinnovo è scontato del 40% rispetto al prezzo pieno. Inoltre, anche se non hai attivato il rinnovo automatico e hai lasciato scadere la licenza, hai tempo due settimane per riattivarla sempre a prezzo scontato.

Incompatibilità

Beaver Builder, così come altre soluzioni di questo tipo, può non funzionare correttamente in presenza di altri plugin.

Per quanto riguarda i temi di WordPress, non si segnalano temi incompatibili con Beaver Builder.

È inoltre da segnalare che l’istruzione JavaScript “document.write” genera problemi con il caricamento dell’interfaccia di Beaver Builder.

Tutte le incompatibilità conosciute sono comunque segnalate in questa pagina.

Conclusioni e alcune note negative

Rispetto ad altri page builder come Elementor, Beaver Builder offre di default un numero inferiore di widget. Questa mancanza è compensata dal fatto che, essendo relativamente semplice sviluppare widget per questo page builder, si è sviluppato un ricco ecosistema di plugin per aggiungere nuove funzionalità e widget. Uno di questi è l’ottimo Ultimate Addons for Beaver Builder. Quindi, anche con Beaver Builder puoi creare praticamente di tutto.

A parte questo, Beaver Builder è decisamente un’ottima soluzione per la creazione e gestione dei layout ed è sicuramente una delle soluzioni che preferisco tra tutti i page builder disponibili per WordPress.

Novità di Beaver Builder 1.8

Il 7 giugno 2016 è stata resa disponibile al pubblico la nuova versione di Beaver Builder, che introduce una lunga lista di novità, come ad esempio 16 nuovi template da utilizzare le pagine del tuo sito WordPress.

Alcuni dei nuovi template di Beaver Builder

I creatori di temi per Beaver Builder potranno inoltre esportare e rendere più facilmente disponibili i loro temi agli altri utenti del plugin, sia nella versione Lite che in quelle a pagamento.

Le performance del plugin sono state migliorate, è stato aggiunto il supporto per gli oEmbeds di WordPress nell’editor di testo, è stata aggiornata la versione di Font Awesome (così avrai a disposizione ancora più icone da usare) e sono stati corretti circa 18 bug presenti nella passata versione.

Questa nuova release del plugin inoltre consente anche di utilizzare dei video ospitati su server esterni (ad esempio Amazon S3) come background di una sezione.

Novità di Beaver Builder 1.9

Nel seguente video ho raccolto e illustrato tutte le principali novità introdotte, come:

  • la possibilità di nidificare 2 o più colonne all’interno di altre colonne, potendo così creare layout sofisticati e rendendo Beaver Builder uno strumento ancora più flessibile;
  • la funzione che ti consente di spostare intere colonne, non più solo righe o singoli elementi della pagina;
  • nuovi modelli di contenuto, per avere a disposizione ancora più template dai quali partire per le tue creazioni;
  • la possibilità di impostare padding, margini e bordi in modo diverso per desktop, tablet e smartphone, così da avere più controllo su come apparirà la tua pagina sui vari dispositivi;
  • l’effetto lightbox per i pulsanti, così da poter creare call to action che aprono video e finestre con contenuto personalizzato in modalità lightbox.

Ecco il video in cui ti illustro tutte queste novità:

Novità di Beaver Builder 2.0

Agli inizi di novembre 2017 è arrivata la versione 2.0 di Beaver Builder, con una grafica rinnovata e nuove funzionalità che rendono ancora più semplice creare layout di pagina complessi con estrema facilità.

Dai un’occhiata al video che ho realizzato nel quale ti mostro le principali novità della nuova versione:

Se vuoi realizzare un sito multilingue, qui trovi un articolo dedicato all’utilizzo di Beaver Builder con WPML.

Articoli che ti suggerisco…

All'interno di questa pagina sono presenti alcuni link di affiliazione verso siti esterni. Tali link mi permettono di guadagnare una piccola commissione nel caso in cui tu acquisti tali prodotti o servizi. Le opinioni espresse sono esclusivamente personali e, in nessun caso, ricevo dei compensi per effettuare recensioni positive.

29 commenti su “Beaver Builder: recensione del page builder per WordPress”

    • Ciao Marilisa, Palette Pro è orientato alla personalizzazione dell’aspetto di un tema Genesis e quindi di tutto il sito, mentre Beaver Builder ti consente di creare dei layout anche complessi per pagine specifiche.

      Rispondi
  1. Ciao Tiziano e complimenti per l’articolo. Beaver builder è meglio anche di Dynamic website builder (fatto da chi ha creato genesis extender)?
    Grazie

    Rispondi
    • Ciao Monica, difficile dare una risposta alla tua domanda indicando cosa è meglio tra Beaver Builder e Dynamik. Si tratta infatti di soluzioni diverse.
      Mentre Dynamik è principalmente focalizzato sulla costruzione di un intero tema basato su Genesis, Beaver Builder si concentra sulla creazione di layout per singole pagine.
      Quindi se vuoi creare un tema personalizzato è più indicato Dynamik, mentre se la tua intenzione è poter creare pagine con layout anche complessi (ad esempio landing page) mediante drag & drop in modo facile e veloce, allora la soluzione migliore è Beaver Builder.
      Continua a seguirmi, ho in programma altri video e tutorial su Genesis e Beaver Builder :)

      Rispondi
  2. Ciao Tiziano e grazie per questo articolo. Come si integra il plug-in Yoast Seo ( o il.sistema interno di Genesis) con i testi generati all’interno di modelli di pagina creati con BB?
    Grazie mille
    Elena

    Rispondi
  3. Ciao, io utilzzo beaver builder da diverso tempo e mi trovo bene, l’unica cosa è che per avere qualche effetto particolare e diverso ad esempio nell’header, come i pulsanti che si illuminano in hover, bisogna modificare di css, altrimenti è sempre uguale per tutti i siti. Cioè la struttura di base è abbastanza semplice come estetica, rispetto ad altri temi. Per le pagine interne l’ho integrato con un plugin di effetti esterno che mi ha risolto diversi problemi, ma per la testata e il sottomenù hai qualche consiglio ?

    Rispondi
  4. Ciao Tiziano innanzitutto grazie, ottimo articolo! :)
    Ho installato Beaver Builder però ho una domanda, come faccio ad apportare delle modifiche esterne al costruttore di pagina ovvero mediante text editor classico di WordPress e fare in modo che siano visibili? Per esempio ho la necessità di utilizzare un font che non è presente in beaver builder ma che ho aggiunto io manualmente e visibile solo nel text editor standard però quando effettuo la modifica essa non è poi visibile quando riattivo Beaver Builder.
    Grazie mille

    Rispondi
    • Dato che fondamentalmente Beaver Builder va a inserire i contenuti nello stesso campo dove agisce il text editor di WordPress, non puoi utilizzare entrambi nello stesso momento. Se il font è disponibile tramite il foglio di stile del tuo sito dovrebbe essere visibile anche nei contenuti creati con Beaver Builder.
      Se invece il font è stato aggiunto tramite qualche plugin allora dovresti modificare il CSS della pagina creata con Beaver Builder per utilizzarlo.

      Rispondi
  5. Ho letto che non hai considerato Elementor tra i page builders, come mai?

    Sono alla ricerca di un builder che permetta l’integrazione con WooCommerce e la scelta ricade tra Divi e Beaver ma sono “pratico” di Elementor e temo di poter incontrare difficoltà nella futura gestione del potenziale sito

    Rispondi
  6. Io non capisco una cosa, ho Genesis e sto per acquistare un child theme e stavo valutando l’acquisto di beaver ma mi chiedo, mi servirà solo per creare laoyout indipendenti dal tema o i moduli di beaver si integrano perfettamente con il child theme dandomi supporto per costruire le pagine ma mantenendo il layout del tema ?

    Rispondi
    • Fondamentalmente puoi usare Beaver Builder per creare pagine con un layout “particolare”. Puoi decidere se in quelle pagine lasciare attive alcune sezioni di pagina gestite dal tema, come ad esempio header o footer, oppure puoi creare l’intera pagina usando solo Beaver Builder.

      Il concetto base da afferrare è che il tema agisce a livello di tutte le pagine del sito, Beaver Builder interviene solo a livello di singola pagina.

      Rispondi
      • Perdona l’ignoranza ma questo vale per tutti i page builder ?
        Io per le landing utilizzo optimize press.
        Volevo qualcosa che mi aiutasse nella costruzione delle pagine dopo aver scelto il child theme ma mi sembra di capire a questo punto che agiscono indipendentemente dal tema e quindi cambia il layout rispetto a quello del tema fato salvo per il footer e l’header

        Rispondi
        • Tendenzialmente sì, tutti i page builder ragionano in questo modo.
          Diciamo che il page builder, di base, se ne frega del child theme che hai scelto. Il tema però deve mettere a disposizione del page builder lo spazio per operare. Per questo con Genesis devi utilizzare un plugin come Genesis Dambuster per poter decidere per ogni pagina quali elementi del tema disattivare per lasciare spazio al page builder.

          Rispondi
  7. Non riesco a capire perché nell’editor di testo non riesco a cambiare font mentre in titolo si. In Editor di testo non c’è proprio la voce stile che invece c’è in titolo.
    sbaglio io qualcosa?
    Saluti.

    Rispondi
  8. Ciao, ottimo articolo, mi rimane una cosa da capire, ma con Beaver è possibile creare solo un sito onepage? con le varie sezioni ed effetti agli elementi/testi allo scroll.

    e se volessi creare un sito con 3 pagine dovrei fare 3 pagine su wordpress e modificarle singolarmente con beaver? giusto?

    Rispondi
    • Ciao, non è che con Beaver Builder puoi creare solo siti one page, ma se vuoi creare un sito di 3 pagine è corretto dire che dovrai modificarle singolarmente con Beaver Buiilder.
      È possibile però creare dei modelli globali così da ripetere alcuni contenuti su tutte e 3 le pagine, senza doverli editare singolarmente.

      Rispondi

Lascia un commento