Comment utiliser Gutenberg avec Elementor – La bonne manière

By | octobre 12, 2020

Cours WordPress en ligne

Elementor est l'un des plugins WordPress les plus populaires de tous les temps – et pour une bonne raison. Le constructeur de pages a nivelé le terrain de jeu de la conception Web en aidant des légions d'utilisateurs de WordPress à créer de beaux sites Web, sans apprendre à coder. Mais récemment, l'éditeur de blocs Gutenberg est devenu le nouveau standard pour la création de contenu WordPress. Compte tenu des similitudes entre ces deux outils, beaucoup ont commencé à se demander si Elementor est toujours nécessaire. À l'inverse, certains utilisateurs d'Elementor de longue date se demandent si l'utilisation de Gutenberg endommagera leur site Web.

Comme je l'expliquerai dans cet article, Elementor vs Gutenberg n'est pas une proposition soit / soit. Chaque outil a quelque chose à offrir. Elementor et Gutenberg fonctionnent bien ensemble lorsqu'ils sont utilisés correctement. Il aide à comprendre les forces et les faiblesses de chaque outil et à planifier l'intégration des deux sur votre site Web.

Dans cet article, je partagerai mes bonnes pratiques d'utilisation de Gutenberg avec Elementor. Suivez ces instructions pour tirer le meilleur parti des deux outils tout en maintenant la compatibilité avec les futures versions de WordPress.

Comparaison d'Elementor avec Gutenberg

Avant d’expliquer comment utiliser Gutenberg et Elementor ensemble, je voudrais prendre un moment pour développer les mérites relatifs de chaque outil.

Il y a eu une certaine confusion au sujet des capacités de Gutenberg et d'Elementor et de la façon dont chaque outil s'intègre dans un flux de travail de conception Web. À mon avis, une partie de cette confusion est due à une tendance à surestimer l’état actuel de Gutenberg. Bien que Gutenberg évolue rapidement et s'améliore à chaque itération, il est encore loin d'être aussi riche en fonctionnalités ou robuste que Elementor.

À mesure que de nouvelles fonctionnalités, telles que l'édition complète des thèmes, arriveront, nous devrons reconsidérer la place de Gutenberg dans nos processus de conception. Mais compte tenu de l’histoire de Gutenberg, ces nouvelles fonctionnalités prendront probablement un certain temps pour devenir utilisables dans un environnement de production.

Raisons d'utiliser Elementor

  • Elementor offre un meilleur contrôle sur la conception de votre site Web, de la mise en page d'une seule page à la conception complète du site.
  • L'édition de contenu frontale rend Elementor extrêmement intuitif et offre aux utilisateurs un aperçu en temps réel des modifications. C’est à peu près ce que vous voyez, c’est ce que vous obtenez. Gutenberg a un long chemin à parcourir à cet égard.
  • Le générateur de thèmes d'Elementor Pro permet à quiconque de créer un thème WordPress personnalisé. Et les conditions d'affichage d'Elementor permettent aux propriétaires de sites de contrôler où chaque partie de thème est affichée. Par exemple, créer des sections de site personnalisées avec différents en-têtes et pieds de page est un jeu d'enfant.
  • Les paramètres de conception globaux d'Elementor sont un endroit central pour créer et gérer les paramètres de conception de votre site, y compris la sélection des couleurs et des polices. Ces paramètres de conception deviennent des préréglages accessibles via l'interface Elementor.
  • Des fonctionnalités telles que les fenêtres contextuelles et le mode de maintenance du site éliminent le besoin de plugins supplémentaires.

Raisons d'utiliser Gutenberg

  • Gutenberg est l'éditeur de contenu WordPress par défaut. Si vous prévoyez d'utiliser WordPress pour les années à venir, vous utiliserez Gutenberg. Créez (la plupart de) votre contenu avec Gutenberg pour assurer la compatibilité ascendante avec les futures versions de WordPress.
  • La feuille de route de Gutenberg est vaste et ambitieuse. L'éditeur de blocs se développe pour remplacer les widgets traditionnels de la barre latérale. Bientôt, Gutenberg aura des capacités d'édition de thème. Avec le temps, Gutenberg ressemblera encore plus à Elementor.

Raisons d'utiliser Gutenberg avec Elementor

Elementor peut faire des choses que Gutenberg ne peut pas (encore) faire. Et même après que Gutenberg ait pu faire ces choses, nous ne savons pas comment cela se comparera – ni combien de temps il faudra pour approcher la parité avec Elementor. La plupart des gens ont besoin de créer un site Web aujourd'hui, pas dans trois ans.

Pendant ce temps, les concepteurs de sites devraient au moins réfléchir à ce qui pourrait arriver dans trois ans.

Je ne recommande pas de créer des centaines d'articles de blog dans Elementor. En fait, je ne recommande pas de créer tout articles de blog dans Elementor. Comme vous le verrez, il est tout à fait possible de créer vos messages avec Gutenberg et de les intégrer dans des modèles conçus par Elementor. Cette méthode est le meilleur des deux mondes.

Meilleures pratiques pour utiliser ensemble Elementor et Gutenberg

Il n'y a aucune raison de ne pas utiliser Elementor avec Gutenberg mais de le faire avec un œil tourné vers l'avenir. Un jour, Gutenberg pourrait éclipser Elementor en termes de fonctionnalités et de facilité d'utilisation. Jusqu'à ce que ce jour arrive, voici comment vous pouvez utiliser les deux ensemble sans conflit.

1. Utilisez un thème qui prend en charge Elementor et ne se bat pas contre lui

Arrêtez de chercher le thème parfait, car vous allez créer votre propre thème avec Elementor.

Cela étant dit, vous avez toujours besoin d'un thème pour commencer. Mais au lieu de rechercher un thème chargé de fonctionnalités, de paramètres de personnalisation et de modèles personnalisés, utilisez un thème minimaliste qui sort du chemin et permet à Elementor de faire son travail.

Commencez par essayer le thème Hello Elementor. Il est conçu par l’équipe d’Elementor pour être utilisé avec Elementor. Attendez-vous à être déçu lorsque vous activez ce thème pour la première fois. Hello est aussi simple que possible, et c’est l’intérêt.

Astra est un autre bon choix. Astra comprend plus de fonctionnalités que Hello, mais la plupart des fonctionnalités sont désactivées lors de la première installation du plugin. Il est facile d’activer les fonctionnalités d’Astra selon vos besoins.

2. Utilisez le générateur de thèmes Elementor Pro

La boîte à outils d'Elementor est tellement excitante qu'il est facile de sauter le générateur de thèmes et de commencer à créer de superbes pages Web immédiatement. Ne fais pas ça! Au lieu de cela, passez du temps à apprendre comment fonctionne le générateur de thèmes et commencez par créer les éléments fondamentaux de votre site.

Je suggère de créer d'abord l'en-tête et le pied de page de votre site. Ce sont des composants essentiels de la conception de votre site qui apparaissent sur chaque page.

Ensuite, créez des modèles pour les articles et les pages. Votre contenu créé par Gutenberg entre dans ces modèles. Il est essentiel de comprendre pleinement les implications de cette approche. Vous allez créer et modifier vos messages dans Gutenberg tout en utilisant Elementor pour concevoir le modèle des articles.

3. Désactivez Elementor pour les messages

Comme je l'ai dit, je ne pense pas qu'Elementor devrait être utilisé pour concevoir des articles individuels.

Il n’est pas difficile pour un site Web actif de générer des centaines de messages au fil du temps. La création de publications individuelles dans Elementor est une utilisation inefficace du temps. Cela garantit que vous devrez recréer ces messages si vous décidez d'arrêter d'utiliser Elementor à l'avenir.

En créant le contenu de votre message avec Gutenberg (ou l'éditeur classique), vous assurez la compatibilité ascendante. Si vous arrêtez d'utiliser Elementor à l'avenir, cela ressemble plus à un changement de thème qu'à une reconstruction complète de votre site Web à partir de zéro.

Pour vous assurer de ne pas créer accidentellement une publication dans Elementor, je vous suggère de désactiver Elementor pour les publications. Cela empêchera les auteurs d'articles d'appuyer accidentellement sur le bouton «modifier dans Elementor», ce qui entraînera toutes sortes de maux de tête pour les auteurs inattendus. Vos modèles conçus par Elementor continueront de fonctionner même après la désactivation de la post-édition.

Pour désactiver Elementor pour la post-édition.

  1. Allez dans Elementor -> Paramètres.
  2. À côté des types de publication, décochez la case Messages.
  3. Enregistrez vos paramètres.
Paramètres Elementor - Désactiver pour les publications

4. Utilisez Elementor pour créer des modèles uniques pour les pages spéciales

En plus d'utiliser le générateur de thèmes, vous devez utiliser Elementor pour concevoir vos principales pages de destination. En règle générale, ce sont les pages incluses dans la navigation principale de votre site.

Quelques exemples:

  • Page d'accueil
  • Pages d'inscription
  • Produits et services
  • Page de tarification
  • Page de contact

Vous trouverez une sélection de modèles de démarrage pour des pages comme celles-ci dans la bibliothèque de modèles Elementor.

Sachez simplement que si jamais vous vous éloignez d'Elementor, vous devrez reconstruire ces pages. Mais il en va de même lors de l'utilisation de la plupart des thèmes avec des modèles et des fonctionnalités de conception uniques.

5. Utilisez les paramètres du système de conception Elementor

Avoir un système de conception bien pensé est la clé pour maintenir la cohérence sur votre site Web. Cela est particulièrement vrai si vous avez importé une variété de conceptions à partir de la bibliothèque de modèles Elementor. Sans parler du mélange de pages conçues par Elementor avec des articles rédigés par Gutenberg.

Depuis la version 3.0, Elementor Pro offre un contrôle complet des paramètres de conception. Ces paramètres permettent aux utilisateurs de définir facilement les couleurs, les polices et d'autres préférences de conception à utiliser sur tout le site. Les paramètres de police et de couleur deviennent des paramètres prédéfinis facilement accessibles dans toute l'interface d'Elementor.

Ces paramètres de conception s'appliquent au contenu de l'article que vous créez avec Gutenberg. Vous pouvez considérer cela comme l'équivalent de la définition de polices et de couleurs préférées dans un thème.

Les paramètres de conception font partie de ces améliorations de fonctionnalités subtiles qu'il est facile de manquer si vous utilisez Elementor depuis un certain temps. Le temps que vous passez à vous familiariser avec ces nouveaux paramètres sera remboursé plusieurs fois grâce à un flux de travail de conception rationalisé.

Non seulement cela, ces paramètres accéléreront les futures refontes en vous permettant d'apporter des changements majeurs de couleur et de police en un seul endroit.

Regard vers l'avenir

Comme vous pouvez le voir, Elementor Pro et Gutenberg sont des outils complémentaires. La clé est de savoir comment tirer parti des atouts de chaque outil tout en évitant les futurs défis de compatibilité.

Si vous avez aimé cet article, vous pourriez également être intéressé par mon nouveau cours, «Création de thèmes avec Elementor Pro». Le cours comprend plus de 90 minutes d'instructions vidéo étape par étape qui vous guident tout au long du processus de création d'un thème avec Elementor Pro.

Rejoignez le programme de formation et de coaching WP Apprentice pour accéder au cours Theme Builder et à toute notre bibliothèque de formation.