Beaver Builder vs Divi - Quale WordPress Builder è adatto a te e quale no? (2021)

Beaver Builder contro Divi

Quindi, stai cercando un nuovo plug-in per la creazione di pagine WordPress, giusto? Come si sceglie tra Beaver Builder vs Divi quando questi sono i prodotti più popolari in circolazione?

Hai svolto alcune ricerche preliminari e hai scoperto che queste due sono le scelte più pubblicizzate per la creazione di siti Web. Potresti anche avere una certa esperienza nell'utilizzo di uno di questi plug-in di pagebuilder.

Ora vuoi scoprire quale di questi plugin popolari è il migliore. E soprattutto, che vale i tuoi soldi?

In tal caso, sei capitato nel posto giusto. Nel post di oggi su CollectiveRay, esploreremo tutte le caratteristiche importanti di questi plugin per la creazione di pagine e li confronteremo testa a testa per aiutarti a trovare quello migliore per tu - e dove dovresti spendere i tuoi soldi.

Continua a leggere per scoprire qual è il miglior plugin per la creazione di pagine per WordPress. Se sei interessato ai plugin di WordPress in generale, potresti voler dare un'occhiata alle nostre altre recensioni e raccolte presenti su Collectiveray.

Abbiamo siti in esecuzione con entrambi questi prodotti installati, quindi abbiamo rivisitato questo articolo in Ottobre 2021 per aggiornare tutti i dettagli rilevanti, se necessario.

Beaver Builder contro Divi

Beaver Builder è molto facile da usare ma Divi ha più opzioni di personalizzazione. Entrambi i prodotti ti danno accesso a layout dall'aspetto professionale. Divi ha più di 140 layout rispetto a Beaver Builder's 50 modelli. Divi è leggermente più economico di Beaver Builder a $ 89 che include tutti i prodotti da ElegantThemes.

sommario

  Divi Builder beaver builder logo
Piccolo $ 89 (include tutti i plugin ET e i temi WordPress) $ 99
Free Version Non
Editor in tempo reale
Frontend/Backend Entrambi Entrambi
Destinatari Sviluppatore / Designer / Utente Web Developer / Designer
Elementi supportati 46  31 
Codice pulito
Modelli / layout predefiniti 140+ 50+
Caratteristica interessante Test A / B Tema del castoro
Prestazioni
Cosa ci è piaciuto  Una soluzione molto potente per creare qualsiasi tipo di layout  Interfaccia utente semplice
   Opzioni di gestione del layout superiori  Il contenuto rimane intatto anche dopo la disattivazione del plug-in
   Prezzi interessanti con accesso a molti altri temi e plugin di WordPress  Modalità editor unica per i clienti
   Nuovi miglioramenti delle prestazioni cambiano il gioco  Ti consente di utilizzare i widget di WordPress nei layout
Cosa non ci è piaciuto  Ci vuole del tempo per abituarsi  Più costoso degli altri page builder
   L'editor di frontend impiega un po 'di tempo per caricare.  
Totale
Vincitore ????  
Sito web Visita Elegant Themes (10% DI SCONTO) Visita Beaver Builder 

Perché usare Beaver o Divi Builder?

Logo BBSe sei relativamente nuovo nel mondo di WordPress, potresti non conoscere la storia completa dei page builder e come sono arrivati.

In sostanza, fino a pochi anni fa, WP poteva creare pagine o post. Entrambi questi elementi di contenuto sono molto simili.

Supportavano principalmente testi e immagini e il contenuto del tuo sito Web ordinario come video, ecc.

Se volevi qualcosa di più elaborato, dovevi usare plugin e / o shortcode, se necessario.

Ora, gli shortcode erano fantastici, perché ti permettevano di inserire caratteristiche e funzioni specifiche ovunque tu volessi su una pagina.

Ma avevano ancora i loro limiti: dovevi ancora installare una serie di plugin diversi per poter ottenere e utilizzare più elementi diversi su una pagina.

Se volevi cursori, pulsanti di invito all'azione, video, gallerie di immagini e altre cose, dovevi continuare ad aggiungere sempre più plugin.

Questo ha portato con sé un altro problema: più prodotti aggiungi alla tua installazione, più pesante diventerà il tuo sito web e più sarà soggetto a vulnerabilità di sicurezza derivanti dai vari elementi che dovevi installare.

Questo era un problema.

C'era un altro problema. Non puoi creare una pagina o un post visivamente. Dovevi progettare una pagina utilizzando codici brevi e dopo diverse iterazioni di modifiche, arrivavi a un risultato vicino a quello che desideri.

Alla fine, sviluppatori e fornitori di WP hanno iniziato a rendersi conto che la maggior parte delle persone desiderava la capacità di progettare e definire le proprie pagine senza vincoli, non di utilizzare modelli, il che rendeva tutti i siti Web uguali.

E così è nato il concetto di page builder.

Questo è essenzialmente il fulcro di tale funzionalità: la capacità di trascinare e rilasciare diversi elementi per progettare e definire una pagina o un post nel modo che TU desideri.

Divi builder

Non siamo troppo sicuri di chi abbia inventato il primo prodotto per la creazione di pagine, ma sicuramente, Elegant Themes sono stati uno dei fornitori a rendere questo concetto molto efficace.

Non appena le persone hanno visto il potenziale, tutti i principali fornitori hanno iniziato a saltare sul carro dei vincitori.

Oggi, la maggior parte dei principali fornitori raggrupperà una sorta di generatore di pagine visive nel proprio file temi - se non ne hanno uno, collaboreranno con qualcuno e incorporeranno / abiliteranno questa funzione nel loro tema.

Quindi che dire di Divi e Beaver Builder?

ElegantThemes sono in questa nicchia da così tanto tempo che hanno davvero capito cosa vogliono le persone e gliel'hanno dato: il loro prodotto è uno dei più popolari in circolazione, con più di 600,000, 701,600 vendite.

Si concentrano su quegli utenti che vogliono creare un sito web ma non sono infastiditi da quello che sta succedendo sotto il cofano: vogliono solo che le cose funzionino e non vogliono diventare tecnici al riguardo o scherzare con qualsiasi codice.

Elegant Themes Destinatari: 

Persone che desiderano che un sito Web venga progettato e funzionante senza coinvolgere uno sviluppatore or sapere molto sul codice.

Utenti di esempio:

  1. Proprietari di piccole imprese
  2. bloggers
  3. SEO
  4. Proprietari di siti web affiliati
  5. Scrittori di contenuti che stanno realizzando siti web
  6. Web designer
  7. Agenzie di marketing digitale

Se dovessi dare un'occhiata all'immagine qui sotto, Divi è rivolto al designer. In effetti, potresti voler dare un'occhiata ad alcuni esempi di temi Divi dal vivo

Designer vs sviluppatore

Beaver Builder ha un diverso tipo di utente. Mentre ElegantThemes prende di mira coloro che sono less "tecnico", BB va dietro a quegli utenti che sono designer e sviluppatori nel cuore. Divi ha alcune limitazioni che questi tipi di sviluppatori trovano frustranti e BB identifica e risolve bene questi problemi. 

Ciò ha permesso a questo prodotto di decollare piacevolmente con coloro che si identificano di più come sviluppatori.

Se sei interessato a come i prodotti ET si confrontano con altre popolari opzioni disponibili là fuori, potresti prendere in considerazione i seguenti due articoli che abbiamo scritto:

https://www.collectiveray.com/wp/themes/divi-vs-genesis-website.html

,

https://www.collectiveray.com/wp/themes/divi-vs-avada

Continuando sull'immagine sopra, BB sarebbe più a suo agio con lo sviluppatore.

Pubblico target di BeaverBulder:

Sviluppatori web e designer che amano a armeggiare con il codice, avere il pieno controllo di ciò che sta succedendo su cosa essere in grado di modificare le cose per farle funzionare nel modo desiderato, non nel modo in cui il fornitore lo ha progettato.

Utenti di esempio:

  1. Sviluppatori web
  2. Web designer che vogliono armeggiare con il codice
  3. Agenzie digitali
  4. Liberi professionisti

Con questa introduzione fuori mano, iniziamo a scavare in ogni prodotto, in modo da poter vedere le caratteristiche, le funzioni, i PRO e i CONTRO dell'utilizzo di uno di questi due elementi.

Cominciamo discutendo l'interfaccia utente di entrambi questi prodotti.

L'interfaccia utente e l'esperienza utente di WordPress PageBuilder

I Divi Builder Interfaccia

ElegantThemes hanno lavorato sul loro prodotto per parecchi anni a questo punto. Con una forte community che li supporta, dando loro un sacco di ottimi feedback, questi ragazzi sanno come rimanere al passo con i loro utenti.

Hanno costruito un'interfaccia interamente incentrata su un'ottima esperienza utente.

Non hanno accumulato orde di fan per caso. La loro rigorosa attenzione al design e all'usabilità del loro prodotto è stato uno degli aspetti chiave del successo di questo costruttore.

Dai un'occhiata a questo breve video introduttivo (2 minuti). Questo è dalla primissima versione di Divi (2015), molte cose sono cambiate da allora, ma è fantastico avere un breve riassunto delle possibilità.

zH0xUAb3Yws

Ma diamo uno sguardo reale all'interfaccia utente.

Dopo aver installato Divi, sarai in grado di accedere al generatore creando un nuovo post o una nuova pagina. La prima cosa che vedrai è questa:

interfaccia divi

Cliccando sul Utilizza Divi Builder ti reindirizzerà al nuovo editor visuale, introdotto in Divi 3.18.

Questa funzione è in risposta a WordPress 5.0 dopo l'introduzione del nuovo editor Gutenberg, come puoi vedere dall'immagine sopra. Il vecchio editor back-end Divi non è ora disponibile per l'uso con il nuovo editor di post di WordPress.

Ecco perché Elegant Themes si è concentrato sul miglioramento del loro editor visivo front-end e lo ha reso tale che il back-end e il front-end sono ora cucitilessly integrati tra loro.

Tuttavia, hai ancora la possibilità di tornare non solo al classico editor di backend Divi, ma anche al classico editor di post di WordPress. Tutto quello che devi fare è andare a Divi > Opzioni del plugin > Avanzate.

abilita l'editor classico

Attiva o disattiva "Abilita editor classico"Su On per ripristinare il post editor di WordPress originale.

L'abilitazione di questa opzione ripristinerà anche l'editor di back-end completo di Divi. Quindi, alternando il “Abilita le ultime Divi Builder Esperienza" su disabled riporterà il builder backend pre-Gutenberg Divi (tuttavia, tieni presente che perderai alcune delle funzionalità e dei miglioramenti più recenti del builder moderno).

L'editor in tempo reale front-end, ora ti consente di progettare e visualizzare la pagina su cui stai lavorando al volo.

Questa è francamente una grande caratteristica perché non devi "indovinare" o aggiornare il front-end per vedere il risultato del design su cui stai lavorando.

Puoi vederlo mentre lo progetti.

Questo è ciò ElegantThemes stanno chiamando "Una nuova esperienza visiva".

Interfaccia utente

Recentemente hanno lavorato alla creazione di una nuova versione del Builder (che è stata rilasciata come versione 3.0). Il punto cruciale di questa versione era che invece di avere due "viste" separate, una vista backend e una vista live, le due si fondono nella stessa cosa. L'editor di back-end mostra la versione live mentre stai lavorando.

Il nuovo visual builder Divi ha sostituito i vecchi editor back-end / front-end.

Di seguito puoi vedere come appare il nuovo costruttore. Nota come puoi cucirelessPassare dalla visualizzazione backend (wireframe) alla visualizzazione front-end con un solo clic del mouse.

vista wireframe

Questa è un'esperienza WYSIWYG (What You See is What You Get) completa. 

Dai un'occhiata all'immagine qui sotto: vedi quel design nel backend? Questo è esattamente come apparirà una volta pubblicato.

Per accedere al pagebuilder dal backend, vai su Post > Aggiungi nuovo. Nella pagina risultante, fai clic su "Usa The Divi Builderpulsante ". Questo aprirà l'interfaccia, che assomiglia alla seguente

 

Divi 3 Page Builder Frontend

 

Divi (che abbiamo già recensito qui) consente di creare sezioni separate per varie parti della pagina. Supporta tre tipi di sezioni: standard, a larghezza intera e speciali.

Per le sezioni standard e a larghezza intera, è possibile scegliere una struttura basata su colonne. Ci sono molte combinazioni tra cui due, tre, quattro colonne di diverse dimensioni. La sezione speciale presenta nove strutture di colonne create appositamente. È possibile aggiungere più righe all'interno di una sezione per avere più strutture di colonne.

colonne

Dopo aver scelto un layout, puoi aggiungere moduli alle singole colonne. Troverai opzioni separate per fornire il contenuto del modulo, configurare le opzioni di progettazione e fornire CSS personalizzati.

È possibile riposizionare i moduli, le colonne, le righe e le sezioni trascinandoli e rilasciandoli nelle posizioni desiderate. Sono presenti pulsanti dedicati per eliminare, duplicare e aprire la sezione delle impostazioni per ciascuno di questi elementi. È anche possibile annullare, ripetere le ultime azioni e ripristinare le azioni precedenti utilizzando la funzione cronologia.

Per utilizzare il pagebuilder dal frontend, visita la pagina che desideri modificare e fai clic sul pulsante "Abilita Visual Builder".

A seconda del contenuto della pagina, potrebbe essere necessario un po 'di tempo per caricare l'interfaccia (abbiate pazienza, l'editor front-end è piuttosto pesante e richiede tempo per il download e il rendering).

Interfaccia frontend Divi

Una volta caricato il pagebuilder in primo piano, puoi iniziare a personalizzare la pagina.

Come l'interfaccia di backend, puoi aggiungere una nuova sezione, scegliere la struttura della colonna e godere dell'accesso completo a tutte le opzioni di impostazione del modulo.

Ovviamente, un designer senza drag and drop è morto nell'acqua, ma ovviamente questo prodotto gestisce D & D molto bene.

In effetti, non solo è trascinabile, ma mantiene anche la reattività durante la progettazione.

Dato che lavorerai sugli effettivi blocchi live di contenuti ed elementi, trascinerai i contenuti effettivi.

E, naturalmente, tutto è ancora completamente reattivo.

Dai un'occhiata alla seguente breve demo di blocchi reattivi dal vivo.

 

 Editing reattivo

 

È possibile trascinare e rilasciare i moduli, le righe, le colonne e anche copiarli, incollarli, eliminarli o modificarli in base alle proprie esigenze. 

Ottieni il 10% di sconto su Divi fino al Ottobre 2021

PS. L'offerta di cui sopra è disponibile solo tramite CollectiveRay.

Quindi, che dire ElegantThemes concorrente? Ha la stessa flessibilità? Funziona in tempo reale nel front-end?

Leggi il resto di questo articolo per trovare la risposta a queste domande. 

Come si usa Beaver Builder

Non volendo essere lasciato indietro nella corsa al dominio dei pagebuilder, BB è uscito con tutte le armi in fiamme.

O digrignare i denti, se vogliamo mantenere l'analogia del castoro. 😀

BB offre sia l'editing nel frontend che nel backend, quindi non è in ritardo a tale riguardo.

Può essere utilizzato su pagine, post e sulla maggior parte degli altri tipi di WP personalizzati, purché siano stati abilitati.

Facendo clic sulla scheda Amministratore per il tipo personalizzato pertinente, vedrai il builder caricato in modo da poterlo utilizzare per progettare i tuoi contenuti.

Prima di continuare, potresti voler visualizzare il seguente breve video (2 minuti) sull'uso di BB.

tCNDDQ7Jrs8

In sostanza, nel metodo backend, dopo aver effettuato prima l'accesso alla dashboard, vai su Post> Aggiungi nuovo e fai clic sul pulsante "Page Builder". Questo farà apparire l'interfaccia del pagebuilder, qualcosa di simile al seguente.

Interfaccia utente di BB PageBuilder

Il primo passo è scegliere un modello per la pagina. Puoi scegliere uno qualsiasi dei modelli già pronti o iniziare con quello vuoto per creare il tuo modello. Dopo aver scelto il modello, il passaggio successivo è scegliere il layout delle righe.

Puoi scegliere il layout delle righe dalla barra laterale sinistra. Apri la barra laterale facendo clic sul pulsante "Aggiungi contenuto" nel menu in alto a sinistra della pagina. Il menu offre anche alcuni altri pulsanti per modificare il modello, aprire gli strumenti, la sezione, pubblicare la pagina e un pulsante di aiuto dedicato.

BeaverBuilder offre diverse strutture di colonne tra cui una, due, tre, quattro, cinque o sei colonne e righe con barre laterali sinistra, destra o entrambe.

Basta trascinare il layout di riga nella posizione desiderata sulla pagina.

Struttura a file di castoro

Il passaggio successivo consiste nell'aggiungere moduli alle colonne. Troverai i moduli nella barra laterale di sinistra.

Scegli il modulo che desideri utilizzare e trascinalo nella colonna desiderata della pagina. A questo punto, ti verrà fornita la finestra delle impostazioni del modulo. Ci sono più sezioni per gestire il contenuto e lo stile del modulo.

È possibile trascinare e rilasciare le righe e i moduli per modificarne la posizione. Sono presenti pulsanti separati per eliminare, duplicare o aprire le impostazioni per qualsiasi riga o modulo. È anche possibile modificare la struttura della colonna di una riga.

Per accedere al pagebuilder dal frontend, visita la pagina che desideri modificare e fai clic sul pulsante "Page Builder". Si aprirà la stessa interfaccia della creazione della pagina dal backend.

BeaverBuilder interfaccia frontend

Puoi lavorare con il design esistente o scegliere un nuovo layout. Tutte le altre opzioni come l'aggiunta di varie righe, moduli, widget e la loro gestione sono esattamente le stesse del backend.

Ti piacerebbe vedere una demo live gratuita di BeaverBuilder Ora? Fare clic sul pulsante in basso. (Si apre in una nuova finestra)

Prova il file BeaverBuilder demo ora

 

I moduli disponibili per Beaver Builder / Divi

Divi Builder

Questo plugin attualmente include 46 moduli di contenuto, ma data la portata dello sviluppo e le nuove versioni di versioni, potresti probabilmente vederne di più a partire dalla lettura di questo articolo.

Parlando di nuove versioni, il nuovo aggiornamento delle prestazioni per Divi lanciato nell'agosto 2021 ha mandato Divi in ​​testa alla coda per i temi di WordPress.

La pagina creata utilizzando la nuova versione di Divi si carica più velocemente che mai grazie a una serie di miglioramenti del codice nascosti.

Tali miglioramenti includono:

  • CSS più piccolo del 94%
  • CSS intelligente che carica solo ciò che è necessario
  • Gli stili intelligenti riducono la duplicazione tra i fogli di stile per un caricamento più rapido
  • PHP dinamico per un'elaborazione più rapida
  • Ottimizzazione JavaScript
  • Differimento del foglio di stile di Gutenberg
  • rinvio jQuery

Tra questi, troverai quelli normali come:

  • testo,
  • ricerca,
  • fisarmonica,
  • pulsante,
  • CTA,
  • audio,
  • video,
  • codice personalizzato,
  • divisore

Le scelte avanzate di elementi includono:

  • contatore,
  • optin,
  • portafoglio,
  • login,
  • carta geografica,
  • persona,
  • tabella dei prezzi,
  • testimonial, e
  • slider video

Ovviamente questi non sono gli unici moduli disponibili, ma se continuassimo ad elencarli, dato che ci sono più di 46 elementi supportati, saremmo qui per sempre.

Diciamo solo che è molto probabile che tu trovi un modulo per tutti i requisiti di cui avrai bisogno.

Se non trovi un tale modulo integrato, puoi optare per elementi di terze parti sviluppati appositamente per esigenze particolari.

Con la versione 3.1, è stata sviluppata e rilasciata un'API, per cui puoi aspettarti che elementi e moduli personalizzati inizino a comparire ovunque.

Tempi divertenti avanti!

Vediamo cosa inventeranno altri sviluppatori. Rimanete sintonizzati.

Ma ora basta, diamo un'occhiata a come utilizzare un modulo:

Divi builder moduli

Fare clic sul modulo desiderato per aggiungerlo al post. A questo punto, devi configurare le impostazioni del modulo. 

Il pagebuilder ti fornisce tre sezioni per questo scopo:

  1. Soddisfare,
  2. Design e
  3. Avanzate.

I del Pacco la sezione include tutte le opzioni relative al contenuto del modulo scelto.

Design ti permette di scegliere il colore, il carattere, lo stile di sfondo, il bordo, il margine e il riempimento per il modulo.

Infine, Avanzate include campi dedicati per l'aggiunta di ID CSS personalizzati, classe e per applicare CSS personalizzati prima o dopo il modulo o al contenuto principale.

Vuoi leggere più informazioni su questo plugin ora? Clicca sul pulsante qui sotto per visitare il ElegantThemes di LPI.

Ottieni il 10% di sconto su Divi fino al Ottobre 2021

PS. L'offerta è disponibile solo dal link sopra. 

Beaver Builder

BB divide i moduli in due categorie:

  1. Moduli di base e
  2. Moduli avanzati

I moduli di base includono:

  • editor di testo,
  • voce,
  • HTML,
  • pulsante,
  • Immagine,
  • video e così via.

L'altra categoria contiene moduli più avanzati:

  • CTA,
  • dispositivo di scorrimento dei contenuti,
  • conto alla rovescia,
  • Menu,
  • dispositivo di scorrimento dei post,
  • schede,
  • ecc.

Moduli BB

Il plugin offre tre sezioni per gestire un modulo:

  1. Generale,
  2. Stile e
  3. Avanzate.

Tra questi, il Generale la sezione consente di configurare le impostazioni relative al tipo di modulo.

I Stile la sezione consente di scegliere il colore, l'allineamento, il carattere e altri stili per le versioni desktop e mobile.

Avanzate include opzioni per impostare la visibilità, l'animazione insieme a campi dedicati per l'aggiunta di classe CSS e ID.

Puoi vedere una demo più chiara del BeaverBuilder caratteristiche di seguito.

Visita BeaverBuilder Sito web

La prossima parte del nostro Beaver Builder vs Divi review si occuperà dei modelli di pagina disponibili o dei layout predefiniti. Questo è qualcosa che è destinato a semplificarti la vita e ti consente di progettare siti Web nuovi di zecca in poche ore, persino minuti, anziché settimane.

Vedi sotto cosa intendiamo!

Modelli di pagina incorporati

I modelli di pagina incorporati servono essenzialmente per abbreviare i tempi di progettazione / sviluppo. Avendo questi a posto, devi solo modificare leggermente il contenuto e il design e sei a posto!

Divi Builder Modelli di pagina (noti anche come layout)

Quando è stata rilasciata la versione 3.0, veniva fornita con diversi (più di 100) modelli già pronti per aiutarti a iniziare il più rapidamente possibile.

Puoi utilizzare un modello facendo clic sul pulsante "Carica dalla libreria" nell'editor dei post. Questo aprirà un elenco dei modelli disponibili.

layout precostruito divi

Troverai layout professionali per la pagina di destinazione, presto disponibili, su di me, contattaci, team, pagina di manutenzione insieme a diverse varianti per la home page, il blog, il negozio e le pagine del portfolio.

È possibile utilizzare questi layout così come sono o personalizzarli in base alle proprie esigenze.

Naturalmente, si può avere un numero piuttosto elevato di modelli (o come li chiama ET) layout di pagina, ma la vera carne è se sono effettivamente buoni e utilizzabili per creare i propri progetti.

In sostanza, l'idea di base è questa: carichi un layout predefinito, quindi personalizzi il testo, le immagini e altri contenuti per adattarli alla tua attività e - voilà - hai un fantastico sito web "progettato" senza richiedere alcuna conoscenza reale del design .

Questo è un grande potere nelle mani di coloro che vogliono far funzionare le cose rapidamente ma non sono molto a proprio agio con il codice o il design di per sé.

Solo un FYI - ci sono più di 250 layout disponibili al momento della stesura di questo articolo.

Diamo una rapida occhiata a ciò che è disponibile in termini di layout.

Pacchetti sito web completi

Questa qui è una caratteristica killer che pensiamo sia ottima per il pubblico di destinazione a cui è rivolto questo prodotto. Dato che abbiamo menzionato il pubblico come persone che vogliono far decollare qualcosa rapidamente, la disponibilità di pacchetti di siti Web completi è davvero ablessING.

Essenzialmente, si tratta di un pacchetto delle 7-8 pagine progettate individualmente essenziali necessarie a qualcuno per lanciare un sito completo in pochi minuti. 

Dai un'occhiata a come Nick Roach di ET descrive il valore che i layout apportano a questo prodotto. (Sì, noterai che i capelli di Nick sono più lunghi, è passato un bel po 'di tempo tra i due video!).

Y31_8DPOqlY

Le pagine sono personalizzate per la specifica nicchia / settore, con gli elementi essenziali richiesti per quel tipo specifico di attività.

Tutto ciò che devi fare come utente è importare il design e modificare il contenuto in base alle tue esigenze specifiche.

Ecco alcune delle nicchie disponibili come pacchetti di siti Web. Al momento, sono disponibili 31 pacchetti di layout con un totale di 250 pagine progettate.

  • Pagina di destinazione del ristorante - questo è un pacchetto composto da 8 pagine per fornire tutto ciò che un ristorante o un'attività alimentare per lanciare la propria presenza online, inclusi gli orari di apertura nel piè di pagina per un facile accesso da parte dei clienti.

 Pagina di destinazione del ristorante

  • Agenzia di progettazione - il pacchetto agenzia di design è un pacchetto di 9 pagine di pagine progettate in modo creativo e professionale per un'agenzia di design o digitale. Naturalmente, viene data importanza al lavoro e allo stile, mettendo in mostra le capacità dell'azienda in un modo che converte
  • Pagina di destinazione della moda - un settore che sicuramente deve avere un bell'aspetto online è un blog di moda. Questo pacchetto di layout di 8 pagine si concentra sul consentire al blogger di marcare la propria immagine secondo necessità. È tutto ottimo per l'uso da parte di fotografi e altre attività visive.
  • Agenzia di viaggi - il design qui si concentra fortemente sull'azione dell'utente che visita il sito, spingendo e sollecitando lo spettatore corrente a chiamare o prenotare ora con attraenti pulsanti di chiamata all'azione.
  • Home page del matrimonio - un modo perfetto per lanciare rapidamente una vetrina di nozze. Naturalmente, si concentra molto sull'estetica e su molte altre caratteristiche personalizzate specifiche per i matrimoni.
  • SaaS Company - un altro tipo di attività, tipicamente startup, che in genere ha poco tempo da perdere e ha bisogno di essere subito operativa. Questo pacchetto di layout offre loro tutto ciò di cui hanno bisogno per essere operativi e ottenere le informazioni necessarie là fuori.

Layout Divi

Sono disponibili molti altri layout inclusi ma non limitati a:

  • Learning Management System
  • Caffetteria
  • Mercato degli agricoltori
  • Studio di yoga o fitness
  • Mercato fotografico
  • Copywriter
  • Fioraio
  • Web Agency
  • Azienda di Interior Design
  • Attività di pagamenti digitali
  • Laboratorio di ceramica e artigianato
  • SEO Agency
  • Consulenza aziendale
  • Conferenza di design
  • Ricette alimentari
  • Studio Legale
  • Autore
  • ecc., ecc.

Col passare del tempo, ET continua ad aggiungere sempre più layout alla propria libreria per soddisfare nicchie specifiche. Anche se il tuo settore specifico non è stato soddisfatto in questo momento, sarai sicuramente in grado di personalizzare uno dei layout esistenti e progettato per soddisfare le tue esigenze.

Dai un'occhiata a tutti i layout ora

 

Beaver Builder Modelli di pagina

BB include anche molti modelli progettati in modo professionale. Ti verrà chiesto di scegliere un modello quando crei un nuovo post. È anche possibile modificare il modello corrente facendo clic sul pulsante "Modelli".

BeaverBuilder modelli

Esistono due tipi di layout:

  • Pagine di destinazione e
  • Pagine di contenuto.

Landing pagine includono modelli per prodotti fisici, app, professionisti, ristoranti, tecnologia, moda, fotografia, dispositivi mobili, musica, automobili e così via.

Pagine di contenuti includere modelli per le pagine del sito web necessarie come chi siamo, servizi, portfolio, team, contatti, FAQ, blog, ecc. La maggior parte di questi modelli sono disponibili in diversi stili. Poiché i modelli sono forniti con un'immagine, puoi facilmente scegliere il migliore in base alle tue esigenze.

Diamo uno sguardo più approfondito a ciò che è disponibile per te come cliente di BB.

Landing Pages

BB ha progettato diversi modelli di landing page pronti per l'uso. Tra questi possiamo trovare:

  • Modello di piccola impresa - basato sul modello Probiz, questo ti aiuterà a creare rapidamente una presenza per una piccola impresa.
  • Modello di fitness, palestra o sportivo - Il fitness e lo sport sono sempre una nicchia calda e il modello Body Factory è progettato specificamente per i clienti in questo settore. Yoga, palestra o qualsiasi industria del fitness fisico funzionano bene con questo.
  • Magazine, Blogger, modello di fashion blogger - Un'altra industria sempre fumante, il modello Fashion Freaks è perfetto come un aspetto progettato di fascia alta e una sensazione di classe, raffinatezza e lusso che urlano.
  • Avvocato, modello di studio legale - un'altra nicchia calda, avvocati e studi legali sono clienti redditizi, che richiedono una presenza in grado di convertire i clienti ben pagati. La presenza sul web professionale può essere facilmente adattata ad altri settori basati sulla pratica.
    Menzioneremo solo brevemente il resto dei modelli
    Modello DJ Beaver
  • Modello di portfolio fotografico
  • Modello DJ / musicista / band
  • Modello di ristorante / bar
  • Modello di layout a schermo intero
  • Creativo, modello di agenzia web
  • modello di eBook
  • Modello di istruzione o università
  • Modello di automobili / automobilistico
  • Modello di app per dispositivi mobili
  • Modello di business generale
  • Modello di costruzione
  • Prossimamente modello

Ti consigliamo vivamente di dare un'occhiata alle demo disponibili con ciascuno di questi modelli, per vedere quanto è facile iniziare con questi modelli.

Pagine di contenuti

Sebbene i modelli di siti Web completi siano fantastici, a volte vogliamo comunque modificare o creare pagine specifiche. Per questo motivo, BB dispone anche di molte pagine di contenuto progettate e pronte per l'uso.

Pagine di contenuto

Ecco alcune delle pagine disponibili per l'uso:

  • Chi siamo (diverse versioni)
  • I nostri servizi 
  • Portfolio fotografico
  • Portfolio di design
  • Il nostro team (diverse versioni)
  • Contatto (diverse versioni)
  • Prezzi (diverse versioni)
  • Blog (diverse versioni)

Naturalmente, ci aspettiamo solo che questi crescano nel tempo.

Fare clic sul collegamento sottostante per accedere direttamente alla pagina dei modelli. 

Check out BeaverBuilder modelli

 

Impostazioni di PageBuilder 

Divi Builder Impostazioni

L'impostazione di questo plugin è molto semplice.

Dopo aver installato e attivato il plug-in, vai a Opzioni del plugine fornire il nome utente e la chiave API nella sezione "Aggiornamenti" per ricevere gli aggiornamenti automatici.

divi builder opzioni delle impostazioni

Puoi vedere impostazioni aggiuntive qui come le impostazioni API, l'integrazione del tipo di post e Avanzate.

Le impostazioni dell'API contengono opzioni per l'integrazione di Google Fonts e Google Maps.

In Integrazione tipo di post potrai abilitare o disabilitare Divi builder su alcuni tipi di post.

Nella scheda Avanzate puoi trovare le opzioni per la minimizzazione, il generatore di file CSS statici, ecc. E le opzioni per abilitare il classico editor di WordPress e il classico generatore di back-end Divi.

L'elemento più recente qui è la pagina "Theme Builder".

Qui puoi trovare i modelli del generatore di temi che hai creato o importato insieme alle opzioni per importarli ed esportarli, visualizzare la cronologia delle modifiche del generatore di temi e altro ancora. Tratteremo questa nuova funzionalità in modo più dettagliato più avanti in questo articolo.

Troverai un elenco di tutti i layout personalizzati nel file Biblioteca Divi pagina. Sono presenti pulsanti separati per gestire la categoria di layout e per importare o esportare i layout. Vai a Editor dei ruoli Divi per definire la quantità di accesso che avranno i diversi ruoli utente.

Infine, nel Support Center, puoi controllare lo stato del tuo server di sistema, in sostanza, mostra alcune informazioni importanti sul tuo server.

Se ci sono opzioni che non sono impostate su determinati valori consigliati, Divi ti avviserà qui in modo che tu possa correggerle.

Qui è anche possibile configurare l '"accesso remoto", consentendo al team di supporto di Elegant Theme di accedere direttamente alla dashboard dell'amministratore per aiutarti a correggere eventuali errori che potresti avere.

Altri elementi includono la modalità provvisoria e la registrazione.

Beaver Builder Impostazioni

Le opzioni di impostazione per BB si trovano nella pagina Impostazioni> Page Builder. Fornisci la tua chiave di licenza nella sezione Licenza per abilitare gli aggiornamenti automatici per il plug-in.

In Moduli, puoi abilitare o disabilitare i moduli. I tipi di post ti consentono di definire quali tipi di post possono essere utilizzati BeaverBuilder. In Modelli, puoi decidere quali modelli saranno disponibili nell'interfaccia del pagebuilder.

beaver builder opzioni delle impostazioni

La sezione Icone consente di decidere quali icone devono essere disponibili nell'interfaccia.

Le opzioni disponibili includono

  • Carattere Fantastico,
  • Fondazione e
  • Dashicon. 

Questo è un esempio di come BB ti consente di personalizzare e armeggiare con tutte le opzioni di cui hai bisogno. Se non sei soddisfatto di usare FontAwesome, scegli qualcosa che ti piace.

Troverai anche sezioni separate per svuotare la cache che rimuoverà qualsiasi CSS e Javascript generato dinamicamente.

Infine, troverai un'opzione per disinstallare Beaver Builder. Queste funzioni rimuovono tutti i dati relativi a BB dal database di WordPress, quindi esegui dei backup prima di utilizzarlo e assicurati di sapere cosa stai facendo.

Letture consigliate: https://www.collectiveray.com/beaver-builder-vs-elementor

Caratteristiche aggiuntive

Divi Theme

Il plugin di Elegant Themes viene fornito con molte altre interessanti funzionalità. Ad esempio, la libreria PageBuilder ti consente di salvare moduli e layout personalizzati in modo da poterli riutilizzare in futuro. Inoltre, è anche possibile importare o esportare questi elementi da e verso altri siti web.

Anche le opzioni di spaziatura del layout superiori richiedono una menzione speciale. Queste opzioni rendono molto più semplice applicare la spaziatura esatta desiderata tra le righe, gli elementi e le sezioni. Troverai opzioni dedicate per definire il margine, la spaziatura interna, la spaziatura verticale e orizzontale. È anche possibile impostare la larghezza delle righe e delle colonne.

Opzioni di spaziatura Divi

In alcuni casi, potrebbe essere necessario utilizzare lo stesso modulo in più posizioni. Puoi facilmente copiare e incollare qualsiasi modulo, riga o colonna in altri post o pagine. Inoltre, puoi contrassegnarli come elementi globali. Ciò ti consente di apportare le modifiche a un singolo elemento globale e le modifiche verranno automaticamente applicate anche alle altre posizioni. 

Generatore di temi Divi

Uno dei più grandi aggiornamenti Elegant Themes rilasciato per Divi negli ultimi anni è il Theme Builder.

Questa nuova funzionalità (a partire da ottobre 2019) ti consente di creare, progettare e personalizzare l'intero sito web. Non è più solo un generatore di pagine, è un generatore di temi completo.

Puoi creare intestazioni e piè di pagina personalizzati globali o definirne uno per singole aree del tuo sito.

Puoi anche definire modelli di corpo personalizzati che ti consentono di creare modelli di prodotto personalizzati, modelli di post di blog, pagine 404, pagine dei risultati di ricerca e pagine di archivio personalizzate come pagine di categorie personalizzate, pagine di autore personalizzate e altro ancora.

creatore di temi divi

Il generatore di temi estende la potenza del generatore di pagine all'intero sito web.

Quando crei un nuovo modello, hai accesso a tutti gli strumenti e le funzionalità del generatore di pagine, permettendoti di crearlo e progettarlo come preferisci.

Ciò significa che puoi creare design personalizzati per intestazioni e piè di pagina, se lo desideri. Per completare questo, il modulo menu include miglioramenti come opzioni di layout aggiuntive e controllo totale del design per aiutarti a creare bellissime intestazioni e piè di pagina con un menu personalizzato.

I nuovi modelli di corpo personalizzati ti consentono di modificare tutti i tuoi post, prodotti o design e struttura della pagina contemporaneamente.

Prima di questo, dovresti andare su ogni post, prodotto o pagina e modificarli utilizzando il generatore di pagine per apportare modifiche. Ora, tutto ciò che devi fare è definire un modello, applicarlo alle aree appropriate del tuo sito e il gioco è fatto.

Puoi persino utilizzare i moduli WooCommerce per creare modelli di prodotto personalizzati per il tuo negozio online. Esistono anche moduli di contenuto dinamico dotati di un ciclo di post aggiornato e di opzioni di filtro che è possibile utilizzare per creare pagine di archivio personalizzate.

Naturalmente, hai anche tutti i mezzi per controllare dove e come verrà applicato il tuo modello. Puoi facilmente includere o escludere determinati elementi da un modello tramite le caselle di controllo, come puoi vedere di seguito:

logica condizionale

A partire dalla versione 4.0, Divi non è più un generatore di pagine, è un generatore di temi.

Ottieni il 10% di sconto su Divi fino al Ottobre 2021

PS. L'offerta di cui sopra è disponibile solo tramite il link sopra da CollectiveRay

Beaver Builder

D'altra parte, BB ha anche alcuni assi nella manica.

Prima di tutto, l'editing dal frontend live è impressionante. Offre un'esperienza intuitiva in cui è possibile modificare la pagina e ottenere l'output esatto senza alcuna supposizione. Ti consente inoltre di utilizzare i widget WordPress predefiniti e i widget personalizzati nei tuoi layout.

Beaver Builder Widget di WordPress

La modalità editor sarà utile quando si consegna un progetto al cliente. Questa modalità consente di limitare le capacità del cliente per assicurarsi che non stia apportando modifiche indesiderate al layout principale.

Un'altra caratteristica significativa di BB è che il contenuto della pagina rimane intatto anche dopo aver disattivato il plugin.

Perderai gli stili, ma la pagina continuerà a visualizzare il contenuto. Al contrario, la maggior parte degli altri costruttori di pagine ti lascerà con un pasticcio di codici brevi quando disattivi quel plugin.

Visita BeaverBuilder sito web

 

Pro e contro

Divi Theme

Vantaggi

  1. Una soluzione molto potente per creare qualsiasi tipo di layout,
  2. Il nuovo aggiornamento delle prestazioni (agosto 2021) rende Divi più veloce che mai,
  3. Prezzi interessanti con accesso a molti altri temi e plug-in di WordPress: acquistarlo è un gioco da ragazzi e un valore eccellente
  4. Molti fantastici design, con molte opzioni di personalizzazione,
  5. Potente generatore di temi,
  6. Ampia documentazione e supporto eccellente e reattivo

CONTRO

  1. Prenditi del tempo per abituarti
  2. L'editor di frontend richiede un po 'di tempo per caricarsi e l'aggiunta di moduli alle pagine è molto più lenta di BB
  3. Sei limitato ai moduli disponibili e sviluppati da ET (sebbene la versione 3.1 ora supporti un'API per sviluppatori, il che significa che gli sviluppatori inizieranno a integrare i loro plugin con essa)
  4. Non è possibile rimuovere i dati che aggiunge al database, rendendo l'allontanamento dal tema Divi un problema

Beaver Builder

Vantaggi

  1. Una semplice interfaccia utente,
  2. Il contenuto rimane intatto anche dopo aver disattivato il plugin,
  3. Modalità editor unica per i clienti,
  4. Ti consente di utilizzare i widget di WordPress nei layout.
  5. Interfaccia utente veloce, scattante e reattiva che è di facile comprensione
  6. Ampia selezione di modelli professionali per aiutarti a iniziare con il tuo design
  7. Supporta i widget nativi di WP in modo da poter utilizzare qualsiasi plug-in disponibile per WP in BB

CONTRO

  1. Più costoso degli altri page builder di WordPress

Prezzi di Divi vs Beaver Builder

 

Entrambi Beaver Builder e Divi sono compatibili con GPL, il che significa che puoi usarli su tutti i siti di cui hai bisogno. prodotti in modo da poterli utilizzare su tutti i siti Web che desideri.

Ci sono tre diversi piani con cui puoi optare Beaver Builder da $ 99 fino a $ 399. Ogni piano o licenza ti dà pieno accesso al Beaver Builder plug-in e tutti i moduli e modelli, con i livelli superiori che offrono alcune funzionalità più avanzate come Multisite, White labeling e Themer.

Con Divi, hai solo due opzioni, all'anno, a un prezzo standard di $ 89 che richiede un acquisto annuale o l'opzione a vita a $ 249. Entrambi hanno lo stesso identico accesso, ma ovviamente perderai l'accesso al supporto e agli aggiornamenti una volta trascorso l'anno.

Diamo uno sguardo più dettagliato. 

Divi Builder

Devi essere un Elegant Themes membro di utilizzare i propri plug-in e l'accesso avviene alle tariffe seguenti. 

Sono disponibili due piani per te: accesso annuale e accesso a vita.

Il piano di accesso annuale ha un prezzo di $ 89 all'anno. D'altra parte, l'accesso a vita ti consente di godere di tutti questi vantaggi con un pagamento una tantum di $ 249.

Fortunatamente, c'è un ESCLUSIVO per CollectiveRay 10% OFF offerta in corso in questo momento quindi fatti un affare oggi. Già che ci sei, potresti anche ottenere l'accesso a vita dato questo sconto limitato!

Entrambi i piani offrono accesso illimitato a tutti i temi e plugin sviluppati da ElegantThemes.

Riceverai aggiornamenti tempestivi, supporto premium e una garanzia di rimborso di 30 giorni.

Ottieni il 10% di sconto su Divi fino al Ottobre 2021

 

Beaver Builder

Beaver Builder prezzi

Beaver Builder offre tre piani tariffari. Il piano Standard ha un prezzo di $ 99, che ti consente di utilizzare il plug-in su un sito Web, ti offre un anno di supporto e l'accesso a moduli e modelli premium.

Pro ha un prezzo di $ 199, che include tutti i vantaggi del piano standard, oltre al tema BB e alla compatibilità multisito.

Infine, Agency ha un prezzo di $ 399 e gode di tutte le funzionalità di Pro insieme al permesso completo di etichettatura bianca.

Acquistare BeaverBuilder ORA

DOMANDE FREQUENTI

Che è meglio Divi o Beaver Builder?

Divi è meglio di Beaver Builder in alcune situazioni. Divi è l'ideale se desideri il controllo completo sul design del tuo sito web e prevedi di utilizzarlo per molto tempo. Beaver Builder ha il vantaggio di essere più piccolo e di facile presa. Anche se diciamo che Divi è migliore, non c'è molto in esso!

Is Beaver Builder più veloce di Divi?

Beaver Builder non è più più veloce di Divi. In passato caricava l'editor più velocemente ed è più veloce da usare e da imparare. Tuttavia, un nuovo aggiornamento delle prestazioni di Divi introdotto nell'agosto 2021 ha trasformato il modo in cui funziona Divi. Ora è uno dei temi WordPress più veloci che puoi acquistare.

Quale è meglio: Divi o Elementor?

Divi è meglio di Elementor per alcune cose mentre Elementor è più forte in altre. Divi è migliore per l'accesso a plug-in e funzionalità, al suo piano di agenzia e alla pura potenza del page builder. Elementor è migliore per essere libero, con opzioni premium ed essere molto facile da gestire.

Elementor è il miglior generatore di pagine?

Elementor il miglior generatore di pagine se desideri un generatore di pagine accessibile gratuitamente. Se stai cercando un generatore potente e autonomo per creare uno o due siti Web, semplicemente non puoi andare meglio di Elementor. È veloce, gratuito e facile da usare. Di cosa potresti aver bisogno di più?

 

 

 

Quale Pagebuilder dovresti scegliere?

Ora arriviamo alla parte (difficile) in cui dobbiamo scegliere tra questi pagebuilder.

Come avrai notato, entrambi i plugin offrono un ottimo rapporto qualità-prezzo. Offrono un'eccellente interfaccia utente e semplificano notevolmente la creazione di layout personalizzati.

Poiché entrambi i plugin hanno i loro casi d'uso, devi scoprire quale soddisfa di più le tue esigenze. Lascia che ti aiuti con quello -

  • Scegli Divi se vuoi il controllo completo sul layout. Una volta che ti sei abituato alle opzioni disponibili, è uno strumento molto potente che ti consente di creare qualsiasi tipo di layout desideri.
    Risultato finale: 5 su 5.
  • Vai con Beaver Builder se vuoi iniziare velocemente. Poiché questo pagebuilder non utilizza codici brevi, puoi facilmente eliminare il design corrente e provarne uno nuovo con pochi clic del mouse.
     Risultato finale: 4.5 su 5

 

Se stai cercando altre opzioni potresti anche voler controllare Visuale Compositore or Elementor Pro, entrambi trattati separatamente su questo sito. Sia Elementor che Visual Composer sono i principali attori nella nicchia del page builder.

Parole finali: Beaver Builder contro Divi

Divi e Beaver Builder sono due dei plugin di pagebuilder più popolari in questo momento. Unless hai utilizzato ampiamente entrambi i plugin, è davvero difficile sceglierne uno rispetto all'altro. Questo post di confronto dovrebbe aiutarti a prendere questa decisione.

crediamo che Elegant Themes ti dà più valore in generale, dato che hai accesso a una tonnellata di temi e plugin di WordPress, ma BB è anche un'ottima scelta. Inoltre, quel nuovo aggiornamento delle prestazioni che hanno introdotto ha davvero cambiato il gioco. È seriamente difficile da scegliere Beaver Builder su Divi ora.

Ottieni il 10% di sconto su Divi fino al Ottobre 2021

Acquistare BeaverBuilder ORA

Allora, quale hai scelto? Fateci sapere nei commenti qui sotto. 

L'autore
David Attard
Autore: David AttardSito web: https://www.linkedin.com/in/dattard/
David ha lavorato nel o intorno al settore online / digitale negli ultimi 18 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali disponibili oggi.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Fatti un favore: lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!

Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...