Elementor vs Gutenberg – la confrontation 2021 : quel constructeur de pages est le meilleur ?

Sommes-nous même capables de nous souvenir des moments où WordPress fonctionnait sans constructeurs de pages ?

Le temps passe vite, la technologie avance et WordPress avec ses capacités très limitées n'est plus qu'un vague souvenir grâce aux fonctionnalités des thèmes WordPress, mais surtout des plugins WordPress, comme les constructeurs de pages.

Dans cet article, nous allons couvrir deux des constructeurs de pages les plus populaires parmi les utilisateurs d'OceanWP - Elementor et Gutenberg . Les informations que nous fournirons ici ne sont pas basées uniquement sur notre opinion personnelle et notre expérience, mais également sur les commentaires des utilisateurs d'OceanWP que nous recevons quotidiennement.

Que l'épreuve de force commence !

Qu'est-ce qu'Elementor ?

Avec une note moyenne de 4,7 sur 5 et plus de 5 millions d'installations actives , cela ne fait aucun doute : Elementor est le constructeur de pages le plus populaire parmi les utilisateurs de WordPress .

Elementor a été introduit pour la première fois en 2016 et a pris la tête très rapidement. La raison de sa popularité presque instantanée était la différence entre le constructeur visuel par glisser-déposer d'Elementor et l'éditeur de texte WordPress habituel (l'ère pré-Gutenberg).

Les utilisateurs de WordPress ont finalement obtenu quelque chose qui ne ressemblait pas à Microsoft Word – un éditeur flexible qui a permis à leur créativité de briller , tout cela grâce à divers widgets qui ont réduit le besoin de toutes sortes de codage personnalisé ou de création de modèles HTML/PHP/CSS personnalisés.

Et si vous recherchez de nouveaux modèles de site Web WordPress Elementor ? Découvrez notre dernière collection HubSpot.

Dans cette comparaison Elementor vs Gutenberg, nous n'aborderons que les fonctionnalités de la version gratuite d'Elementor.

Qu'est-ce que Gutenberg ?

Gutenberg, également connu sous le nom d'éditeur de blocs , est l'éditeur de pages/postes WordPress par défaut. Il a été introduit en 2018 pour la première fois, avec la version WordPress Bebo 5.0.

L' équipe WordPress a compris les besoins de la communauté pour un éditeur par défaut plus avancé et intuitif , ainsi que les tendances en matière de création de sites Web. C'est ainsi que l'éditeur Gutenberg est né et a remplacé son prédécesseur - l'éditeur classique.

Même si Gutenberg n'est pas encore développé au maximum et que son apogée est attendue dans les années à venir , l'équipe WordPress a livré ce qu'elle avait promis - un éditeur visuel simple mais puissant qui est passé d'un éditeur de contenu à un constructeur de pages.

Et, si vous recherchez des modèles de site Web Gutenberg WordPress, consultez notre dernière collection de modèles WooCommerce qui utilisent Gutenberg.

Elementor vs Gutenberg : Comparaison

Elementor vs Gutenberg : facilité d'utilisation

Tout utilisateur de WordPress qui a eu le plaisir d'utiliser les deux outils vous dira quelque chose sur lequel nous pouvons également nous mettre d'accord - Elementor remporte la comparaison de facilité d'utilisation .

Grâce à son énorme flexibilité et mobilité, Elementor ressemble vraiment à des outils d'édition d'images avancés. Sélectionnez simplement le widget dont vous avez besoin et placez-le n'importe où dans le contenu - c'est tout.

Besoin de créer des rubriques ? Ou des sections avec un nombre différent de colonnes ? Choisir un design différent ou des images pour différents appareils ? Pas de problème non plus. Elementor vous permet véritablement de mettre en place tout le contenu jusqu'à la perfection. Sans oublier diverses animations dont les concepteurs de sites Web sont friands (même si les outils de mesure de la vitesse ne le sont pas).

D'autre part, Gutenberg est un constructeur de page propre et simple . Contrairement à Elementor, Gutenberg n'offre pas la fonction de glisser-déposer très appréciée (du moins pas encore). Même si vous pouvez facilement ajouter et déplacer des blocs, les choses ne sont pas aussi simples qu'avec Elementor. En plus de cela, le style d'un bloc peut être quelque peu difficile, en particulier pour ceux qui sont habitués à l'environnement luxueux fourni par Elementor.

Gutenberg est l'éditeur par défaut de WordPress depuis maintenant 3 ans, mais il y a encore des gens qui hésitent à l'essayer . Ces utilisateurs ne favorisent aucun constructeur de pages - ils préfèrent l'éditeur WordPress classique (de contenu) à toute autre chose.

Puisque nous sommes tous des créatures d'habitudes, nous pensons qu'il ne serait pas objectif de marquer Gutenberg comme non intuitif et difficile à utiliser simplement parce que l'éditeur classique est plus facile à utiliser. Mais, nous pouvons vous dire une chose : une fois que vous avez créé un message avec Gutenberg et surmonté cette courbe d'apprentissage initiale, vous continuerez à l'utiliser .

Elementor vs Gutenberg, lequel choisir ? La réponse est toujours OceanWP, car nous utilisons les deux

PS L'un des blocs de Gutenberg est également le bloc Classic, il n'y a donc aucune raison d'utiliser des plugins supplémentaires pour utiliser la fonction old-school

Résumé de la facilité d'utilisation d'Elementor vs Gutenberg

Elementor propose des widgets et des outils d'édition avancés qui le rendent plus facile à utiliser que Gutenberg, mais cela peut devenir tout aussi difficile une fois que le besoin de rendre les pages du site Web réactives se fait sentir .

Gutenberg est livré avec sa propre courbe d'apprentissage que vous pouvez facilement surmonter. Comprendre le fonctionnement de Gutenberg vous aidera à gérer tous les autres constructeurs de pages , y compris Elementor.

Elementor contre Gutenberg : caractéristiques

Elementor a des widgets, Gutenberg a des blocs - aussi simple que cela.

Le terme widget , cependant, est utilisé depuis longtemps dans WordPress, lorsqu'il fait référence à une fonctionnalité utilisant des éléments combinés . Par exemple, une image avec un titre, une liste d'articles de blog avec différentes options de requête, etc.

Les widgets Elementor fonctionnent de la même manière - en fournissant des fonctionnalités avec des options groupées et plusieurs paramètres de requête et de style. Naturellement, les widgets Elementor offrent bien plus d'options et de polyvalence que les widgets WordPress (Apparence > Widgets).

Gutenberg a commencé avec des blocs très basiques , comme le bloc de paragraphe, l'image, la vidéo, etc. Même si les blocs offrent également des options de style, ces fonctionnalités ne sont pas aussi riches ni aussi intuitives qu'avec Elementor. Mais, pour être juste, en ce qui concerne les paramètres conviviaux, Elementor ouvre définitivement la voie - pas seulement par rapport à Gutenberg, mais par rapport à presque tous les constructeurs de pages disponibles.

D'autre part, le "problème des blocs trop simples" peut être facilement résolu avec certains des plugins Gutenberg supplémentaires qui offrent des blocs hautement fonctionnels avec plus de fonctionnalités et d'options utilisateur .

En parlant de cela, avez-vous eu l'occasion d'explorer notre dernier produit - Ocean Gutenberg Blocks ? Si vous êtes client, ce plugin est déjà disponible dans votre tableau de bord pour être téléchargé et utilisé. Si vous envisagez de devenir pro, consultez notre dernière offre.

Elementor vs Gutenberg Résumé des fonctionnalités

Elementor utilise des widgets, Gutenberg utilise des blocs. La version gratuite d'Elementor est livrée avec de nombreux widgets avancés que chaque concepteur de site Web peut utiliser pour créer un site Web fantastique. Afin d'obtenir des blocs plus avancés, des plugins supplémentaires sont nécessaires pour Gutenberg - tels que les blocs Ocean Gutenberg.

Elementor contre Gutenberg : performances

Vous avez peut-être remarqué que nous avons intentionnellement utilisé le terme "performance" au lieu de "vitesse de la page".

La raison est claire et simple : la plupart des outils en ligne mesurent les scores des sites Web qui ne reflètent pas la vitesse d'un site Web . En dehors de cela, il y a tout simplement trop de facteurs dont dépend la vitesse du site Web . Le succès des performances d'un site Web ne dépend malheureusement pas uniquement du thème ou des plugins que vous utilisez.

Sans oublier que les propriétaires de sites Web oublient généralement que ces outils ne reflètent pas l'état de l'ensemble du site Web - uniquement la page attribuée à l'URL testée . En bref, prenez soin de toutes les pages du site Web de la même manière que vous le faites avec la page d'accueil .

Cependant, la qualité d'un thème et des plugins peut avoir un impact substantiel sur les performances globales du site Web . Et les constructeurs de pages aussi.

Comparaison de configuration WordPress

Avant de commencer, nous aimerions vous donner une petite introduction sur la façon dont nous créons des modèles WordPress . De cette façon, les résultats de la comparaison Elementor vs Gutenberg peuvent être compris dans leur intégralité.

Les modèles WordPress sont des exemples de contenu de site Web (pages, articles de blog, prédéfinis et stylisés). Ces modèles servent à accélérer le processus de construction ou à inspirer. Dans le cas des modèles de site Web Ocean, lorsque le constructeur de pages Elementor est utilisé, il est utilisé uniquement sur les pages principales (accueil, contact, à propos, etc.).

Toutes les autres pages, telles que les articles de blog, la boutique, les pages de produits, les pages d'archives sont des pages WordPress par défaut gérées par le thème OceanWP.

Pour cette petite expérience nous avons utilisé nos deux templates de site WordPress : Agenda et Agenda Gutenberg .

Au premier coup d'œil et en regardant simplement les images, seriez-vous capable de faire la différence entre ces deux et de deviner lequel a été construit avec Elementor et lequel avec Gutenberg ?

Les deux sites sont situés sur le même serveur et ont absolument la même configuration :

• Logiciel : Apache/2.4.51 (Unix)
• MySQL : (Ubuntu) v5.7.36
• PHP : 7.4.24
• WordPress : 5.8.1
• Limite de mémoire WordPress (PHP) : 256 Mo
• Thème WordPress : OceanWP (clignotement clignotement)

Les deux sites ont en commun la majorité des plugins WordPress :

• Océan Supplémentaire
• Partage des produits océaniques
• Partage social de l'océan
• WooCommerce
• Liste de souhaits TI WooCommerce
• WPforms Lite
• En-tête collant océan
• WP Rocket (non utilisé dans la création de templates WordPress).

Modèle WordPress d'ordre du jour :

• Élémentaire
• Widgets de l'élément océanique

Modèle WordPress de l'agenda de Gutenberg :

• Blocs de l'océan Gutenberg

Comme vous pouvez le constater, la version de Gutenberg ne nécessite aucun plugin supplémentaire pour fonctionner. Tout ce dont vous avez besoin est l'éditeur de blocs WordPress par défaut - Gutenberg .

Elementor contre Gutenberg : Google Page Speed ​​Insights

Pour tous ceux qui ont sauté quelques morceaux de texte et sont venus directement ici, il est important de souligner que Google Page Speed ​​Insights ne mesure pas la vitesse du site Web . Au lieu de cela, il note le site Web en tenant compte de différents facteurs.

De plus, il est également important de reconnaître que les scores peuvent non seulement être de faux positifs (scores faibles mais site Web rapide et vice versa), mais ils ne brossent souvent pas le tableau réel. En ce qui concerne les scores PSI (Page Speed ​​​​Insights) mobiles, Google recueille des informations auprès d'utilisateurs réels qui naviguent sur votre site Web à l'aide de téléphones mobiles .

Cela signifie que la situation réelle deviendra visible au fil du temps - pas instantanément. Cela signifie également que nous vous suggérons subtilement de ne pas vérifier vos scores et d'essayer de les travailler au moment où vous installez WordPress ou créez une page - les informations ne sont pas exactes.

Pour bien comprendre le fonctionnement de la collecte de données sur les performances du site Web et le traitement des données, nous vous recommandons de consulter cette réponse d'un employé de Google. Il n'y a rien de mieux que d'obtenir la réponse directement de la source.

Néanmoins, nous comprenons que les scores sont importants pour les utilisateurs. Et c'est pourquoi nous partageons les résultats avec vous.

En ce qui concerne les scores PSI mobiles , dans la course Elementor vs Gutenberg, le vainqueur est Gutenberg .

Les différences entre toutes les données sont assez apparentes, et en faveur de Gutenberg.

Le résultat qui nous a le plus surpris est la différence de temps total de blocage (TBT). Dans le cas de la page construite par Elementor, le TBT était de 310 ms, tandis que le TBT sur une page construite par Gutenberg n'était que de 50 ms .

Pouvez-vous imaginer quels auraient été les résultats si nous avions réellement optimisé les images sur le site Web avant de les télécharger et de configurer correctement WP Rocket au lieu d'exécuter les paramètres par défaut ? Ne soyez pas comme nous - optimisez vos images et trouvez les paramètres de mise en cache optimaux pour votre site Web .

Dans la comparaison Desktop Elementor vs Gutenberg , les différences ne sont pas si radicales même si les résultats sont légèrement en faveur de Gutenberg . Du moins, pas selon PSI.

C'est pourquoi nous passons à un autre outil que nous recommandons souvent à nos utilisateurs : GTmetrix.

Elementor vs Gutenberg : Comparaison GTmetrix

GTmetrix semble satisfait des deux versions de notre modèle WordPress Agenda - Elementor et Gutenberg.

Mais, nous ne pouvons pas ignorer l' énorme différence entre le Time to Interactive et le DOM Interactive Time - les deux mesures en faveur de Gutenberg.

Temps d'interactivité : Elementor contre Gutenberg : 912 ms contre 408 ms .

Temps interactif DOM : Elementor contre Gutenberg : 714 ms contre 405 ms .

En ce qui concerne la comparaison Elementor vs Gutenberg Structure, GTmetrix nous montre à nouveau un balayage vert.

Mais il y a une chose qui a immédiatement attiré notre attention : la taille du DOM . Là encore, les résultats sont en faveur de Gutenberg.

Evitez une taille excessive du DOM : Elementor vs Gutenberg : 1251 éléments vs 929 éléments .

Que vous soyez fan de Gutenberg ou non, vous devez admettre que plus de 300 éléments en moins pour une page au contenu presque identique est une énorme victoire . Sans oublier, c'est aussi une victoire prête à l'emploi.

Dans l'ensemble, les graphiques ont parlé. Bien que les scores de performance et de structure soient exactement les mêmes, où les deux sites Web ont obtenu le GTmetrix Grade A, le score de performance 100% et le score de structure 98% - il existe de nombreuses statistiques en faveur de Gutenberg qui pourraient être importantes pour vous si vous êtes un grand fan d'optimisation et de performances.

A en juger par GTmetrix, les choses sont limpides. En ce qui concerne la comparaison des performances côte à côte entre Elementor et Gutenberg, Gutenberg est le vainqueur absolu .

Mais, attendez une minute. Cela signifie-t-il qu'Elementor est mauvais et ne doit pas être utilisé ? Non, car obtenir des scores satisfaisants dont vous pouvez être fier peut aussi être fait avec Elementor .

Les résultats montrent seulement que Gutenberg offre des gains de performance instantanés, sans tracas et avant-gardistes , alors qu'en ce qui concerne Elementor, vous devez être un concepteur Web avisé et responsable.

Elementor vs Gutenberg Résumé des performances

Aucun de nos modèles de site Web n'a été optimisé pour la vitesse / les scores, et nous utilisons les paramètres de mise en cache par défaut de WP Rocket sur les deux. Gutenberg offre plus de gains de performances prêts à l'emploi et certaines des différences de métriques sont assez drastiques par rapport à Elementor , en particulier les métriques Total Blocking Time, DOM size, Time to Interactive et DOM Interactive Time.

Les concepteurs de sites Web expérimentés dotés de compétences avancées en optimisation qui suivent les meilleures pratiques de création de sites Web et utilisent les outils appropriés n'auront aucun problème à obtenir la meilleure vitesse ou les meilleurs scores avec Elementor.

Les sites Web alimentés par Gutenberg nécessitent également moins de ressources , principalement WordPress Memory Limit, pour fonctionner correctement par rapport aux sites Web Elementor en combinaison avec divers plugins Elementor supplémentaires.

Elementor contre Gutenberg : Avantages

En ce qui concerne la comparaison des avantages Elementor vs Gutenberg, il est difficile de trancher.

Chaque constructeur de page a ses propres gains et raisons d'être utilisé . De même, chaque constructeur de page a ses inconvénients. Les avantages et les inconvénients peuvent être de nature subjective .

Bien sûr, nous aimons tous Elementor en raison de sa fonctionnalité de glisser-déposer, mais utiliser Gutenberg n'est pas si difficile non plus .

Les paramètres de réactivité d'Elementor et la possibilité de masquer des sections ou des éléments basés sur des appareils ou de styler complètement des éléments basés sur l'appareil sont également l'une des raisons supplémentaires de l'aimer . Désormais, ce sont les mêmes fonctionnalités qui peuvent décourager et décourager les débutants lorsqu'ils commencent à se rendre compte que la création d'un site Web nécessite plus d'efforts qu'ils n'en lisaient dans divers blogs.

En termes d'utilisation conviviale et de libération de la créativité, nous votons pour Elementor .

Mais, lorsque nos utilisateurs nous demandent des alternatives à Elementor, ils mentionnent la stabilité comme principale raison d'un besoin de changement . Pour être clair, des erreurs et des bogues se produisent, même pour des entreprises comme Facebook. Et quelle que soit la configuration des propriétaires et des développeurs de sites Web, il est indispensable d'être responsable et de suivre les meilleures pratiques pour éviter les désagréments . Oui, nous parlons de faire des sauvegardes ou de tester de nouvelles mises à jour sur les zones de staging.

En effet, même les utilisateurs expérimentés suivant ces pratiques gardent un peu rancune à cause des innovations et des changements d'Elementor qui les laissent souvent sans possibilité d'utiliser [correctement] cet outil sur certaines périodes de temps.

En ce qui concerne Gutenberg, en tant que développeurs, nous attachons de l'importance à ses performances (à la fois frontales et dorsales), à son accessibilité et à sa stabilité . Soyez avisé, certains plugins Gutenberg peuvent ajouter autant ou même plus de gonflement au HTML que d'autres éditeurs de pages non Gutenberg, alors choisissez judicieusement.

Bien que Gutenberg n'apparaisse pas aussi convivial pour les débutants qu'Elementor, nous encourageons définitivement les débutants à l'essayer . Et, notre recommandation est basée exactement sur l'absence de certaines fonctionnalités avancées qui nécessitent une approche plus professionnelle ou expérimentée (comme l'édition en modes réactifs et l'ajustement du contenu pour différents appareils).

Il est également sûr de dire que ceux qui abordent et apprennent à gérer Gutenberg auront également une compréhension rapide de tous les autres constructeurs de pages , y compris Elementor.

Résumé des avantages d'Elementor vs Gutenberg

Les options et les paramètres de réactivité d'Elementor peuvent aider n'importe qui à ajuster la conception du site Web pour tous les appareils , même différemment si nécessaire. Mais ce sont aussi les mêmes paramètres qui peuvent narguer les débutants de WordPress une fois qu'ils réalisent que la création de sites Web nécessite juste un peu plus de temps, d'efforts et de pratique qu'ils n'en ont lu.

Gutenberg peut sembler intimidant et totalement non intuitif au début , mais c'est en fait un point de départ d'apprentissage incroyable. Surmonter Gutenberg aidera tout le monde à mieux comprendre tous les constructeurs de pages . De plus, Gutenberg offre plus de stabilité, d'accessibilité, de référencement et de performances globales .

Elementor vs Gutenberg : quel constructeur de page est le meilleur ?

Vous savez ce qu'ils disent - une chaussure ne conviendra pas à tous les pieds, mais vous ne le saurez pas à moins que vous n'essayiez d'abord la chaussure.

Certains utilisateurs aiment Elementor, certains Gutenberg , et il y a diverses raisons derrière cela. Puisque nous parlons de votre site Web, il est essentiel de savoir ce qui vous convient et les besoins de votre site Web .

Lorsque nos utilisateurs nous contactent pour obtenir des conseils sur l'utilisation d'Elementor sans compromettre la stabilité, les performances, le référencement, l'accessibilité du site Web et tout un tas de choses cruciales pour la création de sites Web , nous leur recommandons d'utiliser Elementor de la même manière que nous l'utilisons pour créer des modèles de sites Web WordPress. . Utilisez Elementor sur les pages principales qui doivent être attrayantes et attrayantes – laissez tout le reste à WordPress et à votre thème.

En bref, évitez de créer des modèles d'archives personnalisés, surtout si vous n'êtes pas un concepteur avisé ou si vous avez peu d'expérience dans l'optimisation globale des sites Web.

Si vous êtes un débutant et que vous souhaitez moins vous soucier de l'édition et du style supplémentaires , ou si vous êtes un professionnel qui n'hésite pas à faire un peu plus d'efforts dans la conception de sites Web (nous faisons référence à l'absence de glisser-et -drop) et ne vous opposez pas à l'absence de diverses options d'animation, alors vous devez absolument opter pour Gutenberg . Surtout compte tenu de tous les avantages en termes de performances et du fait que vous pouvez créer un design tout aussi de qualité en utilisant Gutenberg .

La seule chose que vous ne devriez absolument jamais faire et nous avons vu de telles conceptions, est de créer des modèles personnalisés avec Elementor, puis d'utiliser Gutenberg en combinaison avec lui pour ajouter du contenu. Ne vous rendez pas la vie plus difficile qu'elle ne devrait l'être et ne tuez pas votre site Web

Que votre constructeur de page de choix soit Elementor ou Gutenberg, la réponse est toujours OceanWP et le pack d'extensions Ocean Core, car nous vous proposons à la fois des widgets et des blocs pour obtenir la conception de site Web souhaitée.

Quel est votre verdict ? Quel est votre constructeur de page préféré et pourquoi ? Et oui, vous pouvez choisir et utiliser les deux.

Une fois que vous vous êtes reposé de la création de sites Web, laissez un commentaire et dites-nous ce que vous en pensez.