I page builder per WordPress sono quei plugin/temi che consentono anche agli utenti meno esperti di creare sofisticati layout di pagina in tempi rapidissimi. In questo articolo focalizzo l’attenzione su Beaver Builder, uno dei page builder più longevi. È stato lanciato infatti nella prima metà del 2014.
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:
Non tutti i page builder però presentano questo problema :)
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:
risultano infatti perfettamente accessibili all’interno dell’editor standard di WordPress anche dopo aver disattivato il plugin e senza alcuno shortcode:
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 molti 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.
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.
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.
Oltre 30 moduli disponibili da posizionare dove vuoi
Beaver Builder ti mette a disposizione oltre 30 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.
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.
È 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.
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.
Nel corso degli anni, la quantità di nuove funzionalità introdotte da Beaver Builder è stata inferiore rispetto alla maggior parte della concorrenza.
Ad oggi, Beaver Builder continua a svolgere il suo lavoro, ma non mi sento di consigliarlo come la miglior soluzione possibile. Per gli utenti finali, soluzioni come Elementor o Breakdance sono decisamente più potenti. L‘utenza più professionale invece farebbe meglio a rivolgersi a theme builder come Oxygen e soprattutto Bricks.
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.
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.
Ciao Tiziano,
che differenza c’è tra un “page builder” tipo Beaver e “Genesis Palette Pro”?
Grazie
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.
Ciao Tiziano e complimenti per l’articolo. Beaver builder è meglio anche di Dynamic website builder (fatto da chi ha creato genesis extender)?
Grazie
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 :)
Ottimo! Grazie Tiziano
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
Ciao Elena, anche nelle pagine create con Beaver Builder vengono rispettate le impostazioni SEO che dai con Yoast o tramite le impostazioni di Genesis.
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 ?
Ciao Alex,
non ho capito se ti interessa sapere come applicare effetti a testata e il sottomenu oppure cime gestire la testata e il sottomenu con Beaver Builder.
Come applicare effetti a testata e sottomenù o coumunque se esiste qualche sistema per modificarli e renderli un po’ diversi da sito a sito
Se vuoi applicare effetti o modifiche particolari, sfruttare la possibilità di inserire del codice CSS a mano è ancora la soluzione migliore. Altrimenti puoi dare un’occhiata a questi moduli aggiuntivi per Beaver Builder: https://www.ultimatebeaver.com/ e https://wpbeaveraddons.com/
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
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.
Che ne pensi ? http://supercustomizer.com/. Grazie
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
Ciao Mario, non ho parlato di Elemento semplicemente perché questo articolo è dedicato a Beaver Builder ;)
Di Elementor ne parlo qui https://www.fogliata.net/page-builder-wordpress/ e soprattutto qui: https://www.fogliata.net/beaver-builder-divi-elementor-wordpress/ con un confronto tra Beaver Builder, Elementor e Divi Builder.
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 ?
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.
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
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.
Altra domanda, grazie :)
Hai mai paragonato beaver a visual composer per capire quale è il meglio con genesis ?
Sicuramente Beaver Builder. Visual Composer preferisco evitarlo. Purtroppo è già presente su molti tempi, ma è una vera e propria piaga ;)
Io in realtà sto studiando da 2 ore tra i tuoi articoli e altri ed ero in dubbio tra Beaver, Visual Composer (che a questo punto elimino) e SiteOrigin.
Entro stasera scelgo ahahahh
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.
Ciao Antonio, nel modulo Editor di testo non è presente la possibilità di selezionare la famiglia di font da utilizzare. Questo anche per evitare che gli utenti possano selezionare troppe famiglie di font all’interno della stessa pagina.
Ma per impostare il font di tutta la pagina che si crea con beaver da dove si fa?
Di default viene utilizzato il font impostato dal tema. Quindi puoi cambiarlo modificando quello del tema, oppure tramite l’utilizzo di un CSS personalizzato o usando un plugin come questo https://it.wordpress.org/plugins/use-any-font/ .
Io normalmente, quando utilizzo Beaver Builder, imposto il font di default direttamente nel tema.
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?
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.