Elementor vs Gutenberg: la resa dei conti del 2021: quale Page Builder è migliore?

Siamo anche in grado di ricordare i tempi in cui WordPress funzionava senza page builder?

Il tempo vola, la tecnologia avanza e WordPress con le sue capacità molto limitate ora è solo un vago ricordo , grazie alle funzionalità dei temi di WordPress, ma soprattutto ai plugin di WordPress, come i page builder.

In questo articolo tratteremo due dei page builder più popolari tra gli utenti di OceanWP: Elementor e Gutenberg . Le informazioni che forniremo qui non si basano solo sulla nostra opinione personale ed esperienza, ma anche sul feedback degli utenti OceanWP che riceviamo quotidianamente.

Che lo Showdown abbia inizio!

Cos'è Elementor?

Con una valutazione media di 4,7 su 5 e oltre 5 milioni di installazioni attive , non ci sono dubbi: Elementor è il page builder più popolare tra gli utenti di WordPress .

Elementor è stato introdotto per la prima volta nel 2016 e ha preso il comando molto velocemente. Il motivo della sua popolarità quasi istantanea era la differenza tra il builder drag-and-drop visivo di Elementor e il solito editor di testo di WordPress (l'era pre-Gutenberg).

Gli utenti di WordPress hanno finalmente ottenuto qualcosa che non assomigliava a Microsoft Word: un editor flessibile che ha permesso alla loro creatività di brillare , tutto grazie a vari widget che hanno ridotto la necessità di tutti i tipi di codifica personalizzata o la creazione di modelli HTML / PHP / CSS personalizzati.

E, se stai cercando alcuni nuovi modelli di siti Web WordPress di Elementor? Dai un'occhiata alla nostra ultima collezione HubSpot.

In questo confronto tra Elementor e Gutenberg, affronteremo solo le funzionalità della versione gratuita di Elementor.

Cos'è Gutenberg?

Gutenberg, noto anche come editor di blocchi , è l'editor di pagine/post predefinito di WordPress. È stato introdotto per la prima volta nel 2018 , con la versione WordPress Bebo 5.0.

Il team di WordPress ha compreso le esigenze della community per un editor predefinito più avanzato e intuitivo , nonché le tendenze nella creazione di siti Web. È così che è nato l'editor di Gutenberg e ha sostituito il suo predecessore: l'editor classico.

Anche se Gutenberg non è ancora completamente sviluppato e il suo picco è previsto negli anni a venire , il team di WordPress ha mantenuto ciò che aveva promesso: un editor visivo semplice ma potente che ha fatto il passaggio da editor di contenuti a page builder.

E, se stai cercando alcuni modelli di siti Web WordPress Gutenberg, dai un'occhiata alla nostra ultima raccolta di modelli WooCommerce che utilizzano Gutenberg.

Elementor vs Gutenberg: confronto

Elementor vs Gutenberg: facilità d'uso

Qualsiasi utente di WordPress che ha avuto il piacere di utilizzare entrambi gli strumenti ti dirà qualcosa su cui possiamo anche essere d'accordo: Elementor vince il confronto della facilità d'uso .

Grazie alla sua enorme flessibilità e mobilità, Elementor assomiglia davvero a strumenti avanzati di editing delle immagini. Basta selezionare il widget che ti serve e posizionarlo ovunque nel contenuto: il gioco è fatto.

Hai bisogno di creare sezioni? O sezioni con un numero diverso di colonne? Scegli un design o immagini diversi per dispositivi diversi? Inoltre non è un problema. Elementor ti consente davvero di impostare l'intero contenuto fino alla perfezione. Per non parlare delle varie animazioni che piacciono ai designer di siti Web (anche se gli strumenti di misurazione della velocità non lo sono).

D'altra parte, Gutenberg è un generatore di pagine pulito e semplice . A differenza di Elementor, Gutenberg non offre l'apprezzata funzione di trascinamento della selezione (almeno non ancora). Anche se puoi facilmente aggiungere e spostare i blocchi, le cose non sono così semplici come con Elementor. Inoltre, lo stile di un blocco può essere alquanto impegnativo, soprattutto per coloro che sono abituati all'ambiente lussuoso offerto da Elementor.

Gutenberg è l'editor di WordPress predefinito da 3 anni ormai, ma ci sono ancora persone che sono riluttanti a provarlo . Tali utenti non favoriscono alcun costruttore di pagine : preferiscono il classico editor (contenuto) di WordPress rispetto a qualsiasi altra cosa.

Dal momento che siamo tutti creature abitudinarie, troviamo che non sarebbe obiettivo contrassegnare Gutenberg come non intuitivo e difficile da usare semplicemente perché l'editor classico è più facile da usare. Ma possiamo dirti una cosa: una volta creato un post con Gutenberg e superato quella curva di apprendimento iniziale, continuerai a usarlo .

Elementor vs Gutenberg, quale scegliere? La risposta è sempre OceanWP, perché usiamo entrambi

PS Uno dei blocchi di Gutenberg è anche il blocco Classic, quindi non c'è motivo di utilizzare plug-in aggiuntivi per utilizzare la funzionalità della vecchia scuola

Riepilogo facilità d'uso Elementor vs Gutenberg

Elementor offre widget avanzati e strumenti di modifica che lo rendono più facile da usare rispetto a Gutenberg, ma può diventare altrettanto impegnativo una volta che emerge la necessità di rendere reattive le pagine del sito web .

Gutenberg ha una propria curva di apprendimento che puoi facilmente superare. Capire come funziona Gutenberg ti aiuterà a gestire tutti gli altri page builder , incluso Elementor.

Elementor vs Gutenberg: caratteristiche

Elementor ha widget, Gutenberg ha blocchi, per quanto semplice sia.

Il termine widget , tuttavia, è stato utilizzato in WordPress per molto tempo, quando si fa riferimento a una funzionalità che utilizzava elementi combinati . Ad esempio, un'immagine con un'intestazione, un elenco di post del blog con diverse opzioni di query, ecc.

I widget Elementor funzionano in modo simile, fornendo funzionalità con opzioni raggruppate e più query e impostazioni di stile. Naturalmente, i widget Elementor offrono molte più opzioni e versatilità rispetto ai widget di WordPress (Aspetto > Widget).

Gutenberg ha iniziato con blocchi molto semplici , come il blocco di paragrafo, l'immagine, il video, ecc. Anche se i blocchi offrono anche opzioni di stile, queste funzionalità non sono così ricche né intuitive come con Elementor. Ma, per essere onesti, quando si tratta di impostazioni intuitive, Elementor è sicuramente all'avanguardia, non solo rispetto a Gutenberg, ma rispetto a quasi tutti i page builder disponibili.

D'altra parte, il "problema dei blocchi eccessivamente semplici" può essere facilmente risolto con alcuni dei plug-in Gutenberg aggiuntivi che offrono blocchi altamente funzionali con più funzionalità e opzioni utente .

A proposito, hai avuto la possibilità di esplorare il nostro ultimo prodotto: Ocean Gutenberg Blocks? Se sei un cliente, questo plug-in è già disponibile nella tua dashboard per il download e l'utilizzo. Se stai pensando di diventare un professionista, controlla la nostra ultima offerta.

Riepilogo delle caratteristiche di Elementor vs Gutenberg

Elementor usa i widget, Gutenberg usa i blocchi. La versione gratuita di Elementor include molti widget avanzati che ogni progettista di siti Web può utilizzare per creare un fantastico sito Web. Per ottenere una mano con blocchi più avanzati, sono necessari plugin aggiuntivi per Gutenberg , come Ocean Gutenberg Blocks.

Elementor vs Gutenberg: prestazioni

Potresti notare che abbiamo usato intenzionalmente il termine "prestazioni" invece di "velocità della pagina".

Il motivo è semplice e diretto: la maggior parte degli strumenti online misura i punteggi dei siti Web che non riflettono la velocità di un sito Web . A parte questo, ci sono troppi fattori da cui dipende la velocità del sito web . Il successo delle prestazioni di un sito Web purtroppo non dipende solo dal tema o dai plug-in che stai utilizzando.

Per non parlare del fatto che i proprietari di siti Web di solito dimenticano che questi strumenti non riflettono lo stato dell'intero sito Web, ma solo la pagina assegnata all'URL testato . In breve, prenditi cura di tutte le pagine del sito web allo stesso modo come fai con la home page .

Tuttavia, la qualità di un tema e dei plug-in può avere un impatto sostanziale sulle prestazioni complessive del sito web . E così fanno i costruttori di pagine.

Confronto delle impostazioni di WordPress

Prima di iniziare, vorremmo fare una piccola introduzione su come costruiamo i modelli di WordPress . In questo modo, i risultati del confronto Elementor vs Gutenberg possono essere compresi appieno.

I modelli di WordPress sono contenuti di esempio del sito Web (pagine, post del blog, predefiniti e con uno stile). Questi modelli servono per accelerare il processo di costruzione o ispirare. In caso di modelli di siti Web Ocean, quando viene utilizzato il page builder Elementor, viene utilizzato esclusivamente nelle pagine principali (home, contatti, informazioni, ecc.).

Tutte le altre pagine, come post di blog, negozio, pagine di prodotti, pagine di archivio sono pagine WordPress predefinite gestite dal tema OceanWP.

Per questo piccolo esperimento abbiamo utilizzato i nostri due modelli di siti Web WordPress: Agenda e Gutenberg Agenda .

A prima vista e solo guardando le immagini, saresti in grado di dire la differenza tra questi due e indovinare quale è stato costruito usando Elementor e quale usando Gutenberg?

Entrambi i siti Web si trovano sullo stesso server e hanno assolutamente la stessa configurazione:

• Software: Apache/2.4.51 (Unix)
• MySQL: (Ubuntu) v5.7.36
• PHP: 7.4.24
• WordPress: 5.8.1
• Limite di memoria di WordPress (PHP): 256 milioni
• Tema WordPress: OceanWP (lampeggio lampeggiante)

Entrambi i siti web hanno in comune la maggior parte dei plugin di WordPress :

• Extra Oceano
• Condivisione dei prodotti oceanici
• Condivisione sociale oceanica
• WooCommerce
• Lista dei desideri di TI WooCommerce
• WPforms Lite
• Intestazione appiccicosa dell'oceano
• WP Rocket (non utilizzato nella creazione di template WordPress).

Modello di agenda WordPress:

• Elementor
• Widget Ocean Elementor

Modello WordPress Agenda Gutenberg:

• Blocchi di Gutenberg dell'Oceano

Come puoi vedere, la versione di Gutenberg non richiede plug-in aggiuntivi per l'esecuzione. Tutto ciò di cui hai bisogno è l'editor di blocchi di WordPress predefinito: Gutenberg .

Elementor vs Gutenberg: Google Page Speed ​​Insights

Per tutti coloro che hanno saltato alcune parti del testo e sono arrivati ​​direttamente qui, è importante sottolineare che Google Page Speed ​​Insights non misura la velocità del sito web . Invece, valuta il sito Web tenendo conto di diversi fattori.

Inoltre, è anche importante riconoscere che i punteggi non solo possono essere falsi positivi (punteggi bassi ma sito web veloce e viceversa), ma spesso non dipingono il quadro reale. Quando si tratta di punteggi PSI (Page Speed ​​Insights) per dispositivi mobili, Google raccoglie informazioni da utenti reali che navigano sul tuo sito Web utilizzando i telefoni cellulari .

Ciò significa che la situazione reale diventerà visibile nel tempo , non all'istante. Ciò significa anche che ti suggeriamo sottilmente di non controllare i tuoi punteggi e di provare a lavorarci sopra nel momento in cui installi WordPress o crei una pagina : le informazioni non sono accurate.

Per comprendere appieno come funziona la raccolta dei dati sulle prestazioni del sito Web e l'elaborazione dei dati, ti consigliamo di controllare questa risposta di un dipendente di Google. Non c'è niente di meglio che ottenere la risposta direttamente dalla fonte.

Tuttavia, comprendiamo che i punteggi sono importanti per gli utenti. Ed è per questo che condividiamo i risultati con te.

Quando si tratta di punteggi PSI mobili , nella gara Elementor vs Gutenberg, il vincitore è Gutenberg .

Le differenze tra tutti i dati sono abbastanza evidenti ea favore di Gutenberg.

Il risultato che ci ha sorpreso di più è la differenza del Total Blocking Time (TBT). Nel caso della pagina costruita da Elementor, il TBT era di 310 ms, mentre il TBT su una pagina costruita da Gutenberg era di soli 50 ms .

Riesci a immaginare quali sarebbero stati i risultati se avessimo effettivamente ottimizzato le immagini sul sito Web prima di caricare e configurare correttamente WP Rocket invece di eseguire le impostazioni predefinite? Non essere come noi: ottimizza le tue immagini e trova le impostazioni di memorizzazione nella cache ottimali per il tuo sito web .

Nel confronto tra Elementor e Gutenberg desktop , le differenze non sono così drastiche anche se i risultati sono leggermente a favore di Gutenberg . Almeno, non secondo PSI.

Ecco perché stiamo passando a un altro strumento che spesso consigliamo ai nostri utenti: GTmetrix.

Elementor vs Gutenberg: confronto GTmetrix

GTmetrix sembra soddisfatto di entrambe le versioni del nostro modello Agenda WordPress: Elementor e Gutenberg.

Ma non possiamo ignorare l' enorme differenza tra Time to Interactive e DOM Interactive Time , entrambe metriche a favore di Gutenberg.

Time to Interactive : Elementor vs Gutenberg : 912ms vs 408ms .

Tempo interattivo DOM: Elementor vs Gutenberg : 714 ms vs 405 ms .

Quando si tratta del confronto tra Elementor e Gutenberg Structure, GTmetrix ci mostra ancora una volta una svolta verde.

Ma c'è una cosa che ha immediatamente attirato la nostra attenzione : la dimensione del DOM . Ancora una volta, i risultati sono a favore di Gutenberg.

Evita una dimensione DOM eccessiva : Elementor vs Gutenberg : 1251 elementi vs 929 elementi .

Che tu sia un fan di Gutenberg o meno, devi ammettere che oltre 300 elementi in meno per una pagina con contenuti quasi identici è un'enorme vittoria . Per non parlare del fatto che è anche una vittoria fuori dagli schemi.

Insomma, i grafici hanno parlato. Sebbene i punteggi di Performance e Structure siano esattamente gli stessi, dove entrambi i siti web hanno ottenuto il GTmetrix Grade A, il Performance Score 100% e il Structure Score 98%, ci sono molte statistiche a favore di Gutenberg che potrebbero essere importanti per te se lo sei un grande fan dell'ottimizzazione e delle prestazioni.

A giudicare da GTmetrix, le cose sono limpide. Quando si tratta del confronto fianco a fianco delle prestazioni Elementor vs Gutenberg, Gutenberg è il vincitore assoluto .

Ma aspetta un minuto. Questo significa che Elementor è cattivo e non dovrebbe essere usato? No, perché anche con Elementor è possibile ottenere punteggi soddisfacenti di cui essere orgogliosi .

I risultati mostrano solo che Gutenberg offre vittorie istantanee, senza problemi e all'avanguardia , mentre quando si tratta di Elementor, devi essere un web designer esperto e responsabile.

Riepilogo delle prestazioni di Elementor vs Gutenberg

Nessuno dei nostri modelli di siti Web è stato ottimizzato per velocità/punteggi e utilizziamo le impostazioni predefinite di memorizzazione nella cache di WP Rocket su entrambi. Gutenberg offre più vittorie in termini di prestazioni pronte all'uso e alcune delle differenze di metrica sono piuttosto drastiche rispetto a Elementor , in particolare le metriche Total Blocking Time, DOM size, Time to Interactive e DOM Interactive Time.

I progettisti di siti Web esperti con capacità di ottimizzazione avanzate che seguono le migliori pratiche di creazione di siti Web e utilizzano strumenti adeguati non avranno problemi a raggiungere la velocità o i punteggi migliori utilizzando Elementor.

I siti Web basati su Gutenberg richiedono anche meno risorse , principalmente WordPress Memory Limit, per funzionare senza problemi rispetto ai siti Web Elementor in combinazione con vari plug-in Elementor aggiuntivi.

Elementor vs Gutenberg: vantaggi

Per quanto riguarda il confronto tra i vantaggi di Elementor e Gutenberg, è difficile decidere.

Ogni page builder ha le sue vincite e le sue ragioni per essere utilizzato . Allo stesso modo, ogni page builder ha i suoi contro. Sia i pro che i contro possono essere di natura soggettiva .

Ovviamente, tutti noi amiamo Elementor per la sua funzione di trascinamento della selezione, ma nemmeno usare Gutenberg è così difficile .

Le impostazioni di reattività di Elementor e la possibilità di nascondere sezioni o elementi basati sui dispositivi o anche elementi di stile completamente basati sul dispositivo, sono uno dei motivi aggiuntivi per amarlo . Ora, sono le stesse funzionalità che possono far sentire i principianti scoraggiati e sopraffatti quando sono appena agli inizi quando si rendono conto che la creazione di siti Web richiede uno sforzo maggiore di quanto non ne leggessero in vari blog.

In termini di utilizzo intuitivo e libera creatività, votiamo per Elementor .

Ma quando i nostri utenti ci chiedono delle alternative a Elementor, citano la stabilità come il motivo principale della necessità di un cambiamento . Per essere chiari, errori e bug accadono, anche ad aziende come Facebook. E indipendentemente dalla configurazione che i proprietari e gli sviluppatori di siti Web eseguono, essere responsabili e seguire le migliori pratiche è un must per evitare inconvenienti . Sì, stiamo parlando di eseguire backup o testare nuovi aggiornamenti su aree di staging.

In effetti, anche gli utenti esperti che seguono queste pratiche nutrono un po' di rancore a causa delle innovazioni e dei cambiamenti di Elementor che spesso li lasciano senza la possibilità di utilizzare [correttamente] questo strumento per alcuni periodi di tempo.

Quando si tratta di Gutenberg, come sviluppatori facciamo il tifo per le sue prestazioni (sia frontend che backend), accessibilità e stabilità . Tieni presente che alcuni plug-in Gutenberg possono aggiungere tanto o anche più rigonfiamento all'HTML di altri editor di pagine non Gutenberg, quindi scegli con saggezza.

Nonostante Gutenberg non appaia adatto ai principianti come Elementor, incoraggiamo sicuramente i principianti a provarlo . Inoltre, la nostra raccomandazione si basa esattamente sull'assenza di alcune funzionalità avanzate che richiedono un approccio più professionale o esperto (come l'editing in modalità responsive e la regolazione dei contenuti per i diversi dispositivi).

È anche sicuro dire che coloro che affrontano e imparano a gestire Gutenberg avranno anche una rapida conoscenza di tutti gli altri costruttori di pagine , incluso Elementor.

Riepilogo dei vantaggi di Elementor vs Gutenberg

Le opzioni e le impostazioni di reattività di Elementor possono aiutare chiunque a modificare il design del sito Web per tutti i dispositivi , anche in modo diverso se necessario. Ma sono anche le stesse impostazioni che possono schernire i principianti di WordPress una volta che si rendono conto che la creazione di siti Web richiede solo un po' più di tempo, fatica e pratica di quanto non abbiano letto a riguardo.

Gutenberg può sembrare intimidatorio e del tutto non intuitivo all'inizio , ma in realtà è un fantastico punto di partenza per l'apprendimento. Superare Gutenberg aiuterà tutti a capire meglio tutti i page builder . Inoltre, Gutenberg offre maggiore stabilità, accessibilità, SEO e prestazioni complessive .

Elementor vs Gutenberg: quale page builder è migliore?

Sai cosa si dice: una scarpa non si adatta a tutti i piedi, ma non lo saprai a meno che non provi prima la scarpa.

Alcuni utenti adorano Elementor, altri Gutenberg e ci sono vari motivi dietro. Dal momento che stiamo parlando del tuo sito web, è essenziale scoprire cosa si adatta alle tue esigenze e al tuo sito web .

Quando i nostri utenti ci contattano per un consiglio sull'utilizzo di Elementor senza compromettere la stabilità, le prestazioni, la SEO, l'accessibilità del sito Web e un sacco di cose che sono cruciali per la creazione di siti Web , consigliamo loro di utilizzare nello stesso modo in cui lo usiamo per creare modelli di siti Web WordPress . Usa Elementor sulle pagine principali che devono essere attraenti e accattivanti: lascia tutto il resto a WordPress e al tuo tema.

In breve, evita di creare modelli di archivio personalizzati, soprattutto se non sei un designer esperto o hai poca esperienza nell'ottimizzazione generale del sito web.

Se sei un principiante e vuoi preoccuparti meno di ulteriori modifiche e stili , o se sei un professionista a cui non dispiace dedicare un po' più di impegno alla progettazione del sito web (ci riferiamo all'assenza del trascinamento -drop) e non obiettare all'assenza di varie opzioni di animazione, quindi dovresti assolutamente optare per Gutenberg . Soprattutto considerando tutti i vantaggi in termini di prestazioni e il fatto che è possibile creare un design altrettanto di qualità utilizzando Gutenberg .

L'unica cosa che non dovresti mai fare assolutamente e abbiamo visto progetti di questo tipo, è creare modelli personalizzati con Elementor, quindi utilizzare Gutenberg in combinazione con esso per aggiungere contenuti. Non rendere la tua vita più difficile di quanto dovrebbe essere e non uccidere il tuo sito web

Indipendentemente dal fatto che il tuo generatore di pagine preferito sia Elementor o Gutenberg, la risposta è sempre OceanWP e Ocean Core Extensions Bundle, perché ti offriamo sia widget che blocchi per ottenere il design del sito Web desiderato

Qual è il tuo verdetto? Qual è il tuo generatore di pagine preferito e perché? E sì, puoi scegliere e utilizzare entrambi.

Una volta che ti sei preso una pausa dalla creazione di siti Web, lascia un commento e facci sapere cosa ne pensi.