Elementor vs Gutenberg – Confruntarea din 2021: care constructor de pagini este mai bun?

Suntem capabili să ne amintim vremurile când WordPress funcționa fără generatori de pagini?

Timpul zboară, tehnologia avansează și WordPress cu capabilitățile sale foarte limitate este doar o amintire vagă acum , datorită funcționalităților temelor WordPress, dar mai ales pluginurilor WordPress, cum ar fi creatorii de pagini.

În acest articol, vom acoperi doi dintre cei mai populari constructori de pagini printre utilizatorii OceanWP – Elementor și Gutenberg . Informațiile pe care le vom furniza aici nu se bazează doar pe opinia și experiența noastră personală, ci și pe feedback-ul utilizatorilor OceanWP pe care le primim zilnic.

Să înceapă Confruntarea!

Ce este Elementor?

Cu o evaluare medie de 4,7 din 5 și peste 5 milioane de instalări active – nu există nicio îndoială: Elementor este cel mai popular generator de pagini printre utilizatorii WordPress .

Elementor a fost introdus pentru prima dată în 2016 și a preluat conducerea foarte repede. Motivul popularității sale aproape instantanee a fost diferența dintre generatorul vizual de drag-and-drop al Elementor și editorul de text WordPress obișnuit (era pre-Gutenberg).

Utilizatorii WordPress au câștigat în cele din urmă ceva care nu semăna cu Microsoft Word – un editor flexibil care a permis creativității lor să strălucească , totul datorită diverselor widget-uri care au redus nevoia de tot felul de codare personalizată sau crearea de șabloane HTML / PHP / CSS personalizate.

Și dacă sunteți în căutarea unor noi șabloane de site web Elementor WordPress? Consultați cea mai recentă colecție HubSpot a noastră.

În această comparație Elementor vs Gutenberg, vom aborda doar caracteristicile versiunii gratuite a Elementor.

Ce este Gutenberg?

Gutenberg, cunoscut și sub numele de editor de blocuri , este pagina WordPress / editor de postări implicit. A fost introdus în 2018 pentru prima dată, cu versiunea WordPress Bebo 5.0.

Echipa WordPress a înțeles nevoile comunității pentru un editor implicit mai avansat și mai intuitiv , precum și tendințele în construirea site-urilor web. Așa a apărut editorul Gutenberg și îl înlocuiește pe predecesorul său – editorul clasic.

Chiar dacă Gutenberg nu este încă dezvoltat la maximum și se așteaptă apogeul său în anii următori , echipa WordPress a livrat ceea ce a promis – un editor vizual simplu, dar puternic, care a făcut trecerea de la un editor de conținut la un generator de pagini.

Și, dacă sunteți în căutarea unor șabloane de site web WordPress Gutenberg, consultați cea mai recentă colecție a noastră de șabloane WooCommerce care folosesc Gutenberg.

Elementor vs Gutenberg: comparație

Elementor vs Gutenberg: Ușurință în utilizare

Orice utilizator WordPress care a avut plăcerea de a folosi ambele instrumente vă va spune ceva asupra căruia putem fi de acord – Elementor câștigă comparația ușurinței de utilizare .

Datorită flexibilității și mobilității sale enorme, Elementor seamănă cu adevărat cu instrumentele avansate de editare a imaginilor. Doar selectați widgetul de care aveți nevoie și plasați-l oriunde în conținut - asta este.

Trebuie să creați secțiuni? Sau secțiuni cu un număr diferit de coloane? Alegeți un design diferit sau imagini pentru diferite dispozitive? De asemenea, nu este o problemă. Elementor vă permite cu adevărat să configurați întregul conținut până la perfecțiune. Ca să nu mai vorbim de diversele animații pe care le iubesc designerii de site-uri web (chiar dacă instrumentele de măsurare a vitezei nu sunt).

Pe de altă parte, Gutenberg este un generator de pagini curat și simplu . Spre deosebire de Elementor, Gutenberg nu oferă funcția de drag-and-drop foarte apreciată (cel puțin nu încă). Chiar dacă puteți adăuga și muta cu ușurință blocurile, lucrurile nu sunt atât de simple ca în Elementor. În plus, aranjarea unui bloc poate fi oarecum provocatoare, mai ales pentru cei care sunt obișnuiți cu mediul luxos pe care Elementor îl oferă.

Gutenberg este editorul WordPress implicit de 3 ani, dar mai sunt oameni care sunt reticente să-l încerce . Astfel de utilizatori nu favorizează niciun generator de pagini – ei preferă editorul WordPress clasic (de conținut) față de orice altceva.

Deoarece suntem cu toții creaturi de obiceiuri, considerăm că nu ar fi obiectiv să-l marchem pe Gutenberg ca fiind neintuitiv și dificil de utilizat doar pentru că editorul clasic este mai ușor de utilizat. Dar, vă putem spune un lucru - odată ce creați o postare cu Gutenberg și depășiți acea curbă inițială de învățare, veți continua să o utilizați .

Elementor vs Gutenberg, pe care să alegi? Răspunsul este întotdeauna OceanWP, pentru că le folosim pe amândouă

PS Unul dintre blocurile lui Gutenberg este, de asemenea, blocul Clasic, așa că nu există niciun motiv să folosiți pluginuri suplimentare pentru a utiliza caracteristica de școală veche

Rezumatul ușurinței de utilizare Elementor vs Gutenberg

Elementor oferă widget-uri avansate și instrumente de editare care îl fac mai ușor de utilizat decât Gutenberg, dar poate deveni la fel de provocator odată ce apare nevoia de a face paginile site-ului web receptive .

Gutenberg vine cu propria sa curbă de învățare pe care o puteți depăși cu ușurință. Înțelegerea modului în care funcționează Gutenberg vă va ajuta să gestionați toți ceilalți generatori de pagini , inclusiv Elementor.

Elementor vs Gutenberg: Caracteristici

Elementor are widget-uri, Gutenberg are blocuri – la fel de simplu este.

Cu toate acestea, termenul de widget a fost folosit de mult timp în WordPress, când se referă la o caracteristică care folosea elemente combinate . De exemplu, o imagine cu un titlu, o listă de postări de blog cu diferite opțiuni de interogare etc.

Widgeturile Elementor funcționează într-un mod similar – oferind funcții cu opțiuni grupate și setări multiple de interogare și stil. Desigur, widget-urile Elementor oferă mult mai multe opțiuni și versatilitate decât widget-urile WordPress (Aspect > Widgeturi).

Gutenberg a început cu blocuri foarte de bază , cum ar fi blocul de paragraf, imaginea, videoclipul etc. Chiar dacă blocurile oferă și opțiuni de stil, aceste funcții nu sunt la fel de bogate și nici la fel de intuitive ca în Elementor. Dar, pentru a fi corect, atunci când vine vorba de setări ușor de utilizat, Elementor conduce cu siguranță calea – nu doar în comparație cu Gutenberg, ci și în comparație cu aproape toți generatorii de pagini disponibile.

Pe de altă parte, „problema blocurilor prea simple” poate fi rezolvată cu ușurință cu unele dintre pluginurile suplimentare Gutenberg, care oferă blocuri foarte funcționale, cu mai multe caracteristici și opțiuni de utilizator .

Apropo de asta, ați avut ocazia să explorați cel mai recent produs al nostru – Ocean Gutenberg Blocks? Dacă sunteți client, acest plugin este deja disponibil în tabloul de bord pentru descărcare și utilizare. Dacă te gândești să devii profesionist, verifică ultima noastră ofertă.

Rezumatul caracteristicilor Elementor vs Gutenberg

Elementor folosește widget-uri, Gutenberg folosește blocuri. Versiunea gratuită a Elementor vine cu multe widget-uri avansate pe care fiecare designer de site-uri web le poate folosi pentru a construi un site web fantastic. Pentru a obține o mână de blocuri mai avansate, sunt necesare pluginuri suplimentare pentru Gutenberg - cum ar fi blocurile Ocean Gutenberg.

Elementor vs Gutenberg: Performanță

Poate ați observat că am folosit în mod intenționat termenul „performanță” în loc de „viteza paginii”.

Motivul este simplu și simplu – majoritatea instrumentelor online măsoară scorurile site-ului web care nu reflectă viteza unui site web . În afară de asta, există prea mulți factori de care depinde viteza site-ului . Succesul performanței unui site web, din păcate, nu depinde numai de tema sau de pluginurile pe care le executați.

Ca să nu mai vorbim că proprietarii de site-uri web uită de obicei că aceste instrumente nu reflectă starea întregului site web – doar pagina alocată adresei URL testate . Pe scurt, aveți grijă de toate paginile site-ului la fel ca și de pagina de pornire .

Cu toate acestea, calitatea unei teme și a pluginurilor poate avea un impact substanțial asupra performanței generale a site-ului web . La fel și creatorii de pagini.

Comparație de configurare WordPress

Înainte de a începe, am dori să oferim o mică introducere despre cum construim șabloane WordPress . În acest fel, rezultatele comparației Elementor vs Gutenberg pot fi înțelese pe deplin.

Șabloanele WordPress sunt exemple de conținut de site (pagini, postări de blog, preconstruite și stilate). Aceste șabloane servesc pentru a accelera procesul de construire sau pentru a inspira. În cazul șabloanelor de site web Ocean, atunci când se folosește generatorul de pagini Elementor, acesta este utilizat numai pe paginile principale (acasă, contact, despre etc.).

Toate celelalte pagini, cum ar fi articole de blog, magazin, pagini de produse, pagini de arhivă sunt pagini WordPress implicite gestionate de tema OceanWP.

Pentru acest mic experiment am folosit cele două șabloane de site web WordPress: Agenda și Agenda Gutenberg .

La prima vedere și doar privind imaginile, ați fi capabil să faceți diferența dintre acestea două și să ghiciți care dintre ele a fost construită folosind Elementor și care folosind Gutenberg?

Ambele site-uri web sunt situate pe același server și au absolut aceeași configurație:

• Software: Apache/2.4.51 (Unix)
• MySQL: (Ubuntu) v5.7.36
• PHP: 7.4.24
• WordPress: 5.8.1
• Limită de memorie WordPress (PHP): 256 M
• Tema WordPress: OceanWP (clipire clipire)

Ambele site-uri au majoritatea pluginurilor WordPress în comun :

• Ocean Extra
• Partajarea produselor oceanice
• Ocean Social Sharing
• WooCommerce
• Lista de dorințe TI WooCommerce
• WPforms Lite
• Antet Ocean Sticky
• WP Rocket (nu este folosit la crearea șabloanelor WordPress).

Șablon WordPress pentru agendă:

• Elementor
• Widgeturi Ocean Elementor

Șablon WordPress Agenda Gutenberg:

• Blocurile Ocean Gutenberg

După cum puteți vedea, versiunea Gutenberg nu necesită pluginuri suplimentare pentru a rula. Tot ce aveți nevoie este editorul de blocuri WordPress implicit – Gutenberg .

Elementor vs Gutenberg: Google Page Speed ​​Insights

Pentru toți cei care au sărit peste câteva bucăți din text și au venit direct aici – este important să subliniem că Google Page Speed ​​Insights nu măsoară viteza site-ului . În schimb, punctează site-ul ținând cont de diferiți factori.

Mai mult decât atât, este, de asemenea, important să recunoaștem că scorurile nu pot fi doar fals pozitive (scoruri mici, dar site-ul web rapid și invers), dar de multe ori nu reprezintă imaginea reală. Când vine vorba de scorurile PSI mobile (Page Speed ​​Insights), Google adună informații de la utilizatori reali care navighează pe site-ul dvs. folosind telefoanele mobile .

Aceasta înseamnă că situația reală va deveni vizibilă în timp , nu instantaneu. Acest lucru înseamnă, de asemenea, că vă sugerăm subtil să nu vă verificați scorurile și să încercați să lucrați la ele în momentul în care instalați WordPress sau construiți o pagină - informațiile nu sunt exacte.

Pentru a înțelege pe deplin cum funcționează colectarea datelor privind performanța site-ului și procesarea datelor, vă recomandăm să consultați acest răspuns de la un angajat Google. Nu este nimic mai bun decât să obții răspunsul direct de la sursă.

Cu toate acestea, înțelegem că scorurile sunt importante pentru utilizatori. Și de aceea vă împărtășim rezultatele.

Când vine vorba de scorurile PSI mobile , în cursa Elementor vs Gutenberg, câștigătorul este Gutenberg .

Diferențele dintre toate datele sunt destul de evidente și în favoarea lui Gutenberg.

Rezultatul care ne-a surprins cel mai mult este diferența Total Blocking Time (TBT). În cazul paginii construite de Elementor, TBT a fost de 310 ms, în timp ce TBT pe o pagină construită de Gutenberg a fost de doar 50 ms .

Vă puteți imagina care ar fi fost rezultatele dacă am optimiza efectiv imaginile de pe site înainte de a încărca și a configura WP Rocket în mod corespunzător, în loc să rulăm setările implicite? Nu fi ca noi – optimizează-ți imaginile și găsește setările optime de cache pentru site-ul tău .

În comparația desktop Elementor vs Gutenberg , diferențele nu sunt atât de drastice, deși rezultatele sunt ușor în favoarea lui Gutenberg . Cel puțin, nu conform PSI.

De aceea, trecem la un alt instrument pe care îl recomandăm adesea utilizatorilor noștri – GTmetrix.

Elementor vs Gutenberg: comparație GTmetrix

GTmetrix pare mulțumit de ambele versiuni ale șablonului WordPress Agenda – Elementor și Gutenberg.

Dar, nu putem ignora diferența uriașă dintre Time to Interactive și DOM Interactive Time – ambele valori în favoarea lui Gutenberg.

Timp până la Interactive : Elementor vs Gutenberg : 912ms vs 408ms .

Timp interactiv DOM: Elementor vs Gutenberg : 714ms vs 405ms .

Când vine vorba de comparația Elementor vs Gutenberg Structure, GTmetrix ne arată din nou o matură verde.

Dar există un lucru care ne-a atras imediat atenția – dimensiunea DOM . Din nou, rezultatele sunt în favoarea lui Gutenberg.

Evitați o dimensiune DOM excesivă : Elementor vs Gutenberg : 1251 elemente vs 929 elemente .

Indiferent dacă ești fan Gutenberg sau nu, trebuie să recunoști că peste 300 de elemente mai puține pentru o pagină cu conținut aproape identic reprezintă un câștig uriaș . Ca să nu mai vorbim că este, de asemenea, o victorie ieșită din cutie.

Una peste alta, graficele au vorbit. Deși scorurile de performanță și structură sunt exact aceleași, acolo unde ambele site-uri web au câștigat GTmetrix Grade A, Scorul de performanță 100% și Scorul de structură 98% - există multe statistici în favoarea lui Gutenberg care ar putea fi importante pentru tine dacă ești un mare fan de optimizare și performanță.

Judecând după GTmetrix, lucrurile sunt limpide. Când vine vorba de comparația de performanță între Elementor și Gutenberg, Gutenberg este câștigătorul absolut .

Dar, așteaptă un minut. Înseamnă asta că Elementor este rău și nu ar trebui folosit? Nu, pentru că obținerea unor scoruri satisfăcătoare cu care poți fi mândru se poate face și cu Elementor .

Rezultatele arată doar că Gutenberg oferă câștiguri de performanță instantanee, fără probleme și avangardiste , în timp ce atunci când vine vorba de Elementor, trebuie să fii un designer web priceput și responsabil.

Rezumatul performanței Elementor vs Gutenberg

Niciunul dintre șabloanele noastre de site nu a fost optimizat pentru viteză/scoruri și folosim setările implicite de cache WP Rocket pentru ambele. Gutenberg oferă mai multe câștiguri de performanță ieșite din cutie și unele dintre diferențele de metrică sunt destul de drastice în comparație cu Elementor , în special valorile Timp total de blocare, dimensiunea DOM, Time to Interactive și DOM Interactive Time.

Designerii de site-uri web cu experiență, cu abilități avansate de optimizare, care urmează cele mai bune practici de construire a site-urilor web și folosesc instrumente adecvate, nu vor avea probleme în a obține cea mai bună viteză sau scoruri folosind Elementor.

Site-urile web alimentate de Gutenberg necesită, de asemenea, mai puține resurse , în principal WordPress Memory Limit, pentru a funcționa fără probleme în comparație cu site-urile web Elementor în combinație cu diferite pluginuri Elementor suplimentare.

Elementor vs Gutenberg: Beneficii

În ceea ce privește comparația beneficiilor Elementor vs Gutenberg, este greu de decis.

Fiecare generator de pagini are propriile câștiguri și motive pentru a fi folosit . În mod similar, fiecare generator de pagini are dezavantajele sale. Atât argumentele pro și contra pot fi de natură subiectivă .

Desigur, cu toții iubim Elementor datorită funcției sale de glisare și plasare, dar nici folosirea lui Gutenberg nu este atât de dificilă .

Setările de răspuns ale Elementor și posibilitatea de a ascunde secțiuni sau elemente bazate pe dispozitive sau elemente de stil complet bazate pe dispozitiv, este unul dintre motivele suplimentare pentru a-l iubi . Acum, aceleași caracteristici îi pot face pe începători să se simtă descurajați și copleșiți atunci când încep, deoarece își dau seama că construirea site-ului web necesită mai mult efort decât obișnuiau să citească despre asta în diferite bloguri.

În ceea ce privește utilizarea ușor de utilizat și dezlănțuirea creativității, votăm pentru Elementor .

Dar, atunci când utilizatorii noștri ne întreabă despre alternative la Elementor, ei menționează stabilitatea ca motiv principal pentru necesitatea unei schimbări . Pentru a fi clar, se întâmplă greșeli și bug-uri, chiar și companiilor precum Facebook. Și indiferent de configurația pe care proprietarii și dezvoltatorii de site-uri web rulează, a fi responsabil și a urma cele mai bune practici este o necesitate pentru a evita inconvenientele . Da, vorbim despre realizarea de copii de rezervă sau testarea de noi actualizări pe zonele de staging.

Într-adevăr, chiar și utilizatorii cu experiență care urmăresc aceste practici păstrează puțină ranchiună din cauza inovațiilor și modificărilor Elementor, care adesea îi lasă fără posibilitatea de a folosi acest instrument [corespunzător] în anumite perioade de timp.

Când vine vorba de Gutenberg, în calitate de dezvoltatori, ne sprijinim performanța (atât frontend, cât și backend), accesibilitate și stabilitate . Fiți atenți, unele plugin-uri Gutenberg pot adăuga la fel de mult sau chiar mai multă umflare la HTML ca și alți editori de pagini non-Gutenberg, așa că alegeți cu înțelepciune.

În ciuda faptului că Gutenberg nu pare la fel de prietenos pentru începători ca Elementor, cu siguranță îi încurajăm pe începători să-l încerce . Și, recomandarea noastră se bazează exact pe absența unor funcții avansate care necesită o abordare mai profesionistă sau cu experiență (cum ar fi editarea în moduri responsive și ajustarea conținutului pentru diferite dispozitive).

Este, de asemenea, sigur să spunem că cei care abordează și învață cum să se ocupe de Gutenberg vor avea, de asemenea, o înțelegere rapidă a tuturor celorlalți constructori de pagini , inclusiv Elementor.

Rezumatul beneficiilor Elementor vs Gutenberg

Opțiunile și setările de răspuns ale Elementor pot ajuta pe oricine să ajusteze designul site-ului web pentru toate dispozitivele , chiar și diferit dacă este necesar. Dar, sunt, de asemenea , aceleași setări care îi pot batjocori pe începătorii WordPress odată ce își dau seama că construirea site-ului web necesită doar puțin mai mult timp, efort și practică decât au citit despre asta.

Gutenberg poate părea intimidant și complet neintuitiv la început , dar este de fapt un punct de plecare uimitor de învățare. Depășirea lui Gutenberg va ajuta pe toată lumea să înțeleagă mai bine toți generatorii de pagini . În plus, Gutenberg oferă mai multă stabilitate, accesibilitate, SEO și câștiguri de performanță generală .

Elementor vs Gutenberg: care constructor de pagini este mai bun?

Știi ce se spune – un pantof nu se potrivește fiecărui picior, dar nu vei ști asta decât dacă încerci mai întâi pantoful.

Unii utilizatori iubesc Elementor, alții Gutenberg și există diverse motive în spatele lui. Deoarece vorbim despre site-ul dvs. web, este esențial să aflați ce vi se potrivește și nevoilor site-ului dvs. .

Când utilizatorii noștri ne solicită sfaturi despre utilizarea Elementor fără a compromite stabilitatea site-ului, performanța, SEO, accesibilitatea și o mulțime de lucruri care sunt cruciale pentru construirea site-ului web , le recomandăm să folosească Elementor în același mod în care îl folosim pentru a construi șabloane de site web WordPress. . Utilizați Elementor pe paginile principale care trebuie să fie atractive și atrăgătoare - lăsați totul în sarcina WordPress și a temei dvs.

Pe scurt, evitați să creați șabloane de arhivă personalizate, mai ales dacă nu sunteți un designer priceput sau aveți puțină experiență în optimizarea generală a site-urilor web.

Dacă sunteți începător și doriți să vă faceți mai puține griji cu privire la editarea și stilul suplimentar , sau dacă sunteți un profesionist care nu deranjează să depună un pic mai mult efort în designul site-ului web (ne referim la absența opțiunii drag-and -drop feature) și nu obiectați cu privire la absența diferitelor opțiuni de animație, atunci cu siguranță ar trebui să optați pentru Gutenberg . Mai ales având în vedere toate beneficiile de performanță și faptul că puteți crea un design la fel de calitativ folosind Gutenberg .

Singurul lucru pe care nu ar trebui să-l faceți niciodată și am văzut astfel de modele, este să creați șabloane personalizate cu Elementor, apoi să utilizați Gutenberg în combinație cu acesta pentru a adăuga conținut. Nu-ți face viața mai grea decât ar trebui și nu-ți ucide site-ul

Indiferent dacă generatorul de pagini preferat este Elementor sau Gutenberg, răspunsul este întotdeauna OceanWP și Ocean Core Extensions Bundle, deoarece vă oferim atât widget-uri, cât și blocuri pentru a obține designul site-ului dorit.

Care este verdictul tău? Care este generatorul tău de pagini preferat și de ce? Și da, le poți alege și folosi pe ambele.

După ce vă odihniți de la construirea site-urilor web, lăsați un comentariu și spuneți-ne ce credeți.