L’éditeur de blocs Gutenberg de WordPress existe depuis la version 5.0. Cet article s’y référera également comme l’éditeur de blocs WordPress ou simplement comme le bloc WordPress.

L’éditeur WordPress Block a fondamentalement changé la façon dont nous créons du contenu sur WordPress. C’est le nouvel éditeur par défaut. Cependant, vous pouvez toujours installer l’ancien éditeur classique sous forme de plugin, si cet éditeur Gutenberg ne vous convient pas !

Beaucoup de gens ont des sentiments mitigés à propos de WordPress Block parce qu’ils recherchent un éditeur simple en glisser-déposer. L’éditeur Gutenberg sera différent de ce à quoi vous êtes habitué, et il est important de se rappeler que ce nouvel éditeur est en cours de developpement. Depuis la sortie de la version initiale, l’éditeur WordPress s’est grandement amélioré, et je pense que c’est le moment de changer.

Qu’est-ce que l’éditeur WordPress ?

Les blocs WordPress sont conçus pour remplacer de nombreuses fonctionnalités qui nécessitaient auparavant des shortcodes ou des plugins, rendant la création de contenu plus compliquée qu’elle ne devait l’être parce que vous aviez différents outils interagissant maladroitement sur votre page.

Lorsque vous utilisez l’éditeur de blocs WordPress, tout est en blocs – paragraphes, titres, listes, listes d’icônes et listes de prix. Ceux-ci peuvent être manipulés avec des raccourcis clavier familiers ou des gestes rapides sur l’écran tactile. Par exemple, tapez « p » pour créer un nouveau bloc de paragraphe, puis appuyez deux fois sur la touche Entrée pour ajouter deux blocs de paragraphe vierges en dessous, de sorte que vous ayez de la place pour écrire votre contenu sans sortir de la page !

Le bloc Gutenberg permet aux créateurs de contenu de créer de magnifiques mises en page avec rien d’autre que du texte ! Avec Gutenberg, les éléments de liste viennent en tant que blocs puissants plutôt que d’être juste une option sous Paragraphes (ou Titres), donc vous pouvez les styliser différemment des listes à l’intérieur d’autres types de blocs comme Advanced Heading. L’arrière-plan peut également être facilement modifié en fonction de votre thème de conception actuel ou de votre schéma de couleurs grâce à de simples menus d’options dans les blocs Gutenberg.

Pourquoi utiliser l’éditeur Gutenberg ?

Les blocs Gutenberg sont idéaux car ils permettent aux auteurs d’organiser la mise en page de manière plus flexible qu’avec l’éditeur classique. L’éditeur de blocs WordPress comprend tous les blocs avancés dont on a besoin pour concevoir un blog de manière magnifique.

Les blocs Gutenberg sont encore en cours de développement, mais ils ont été considérablement améliorés depuis leur introduction avec WordPress 5.0

En quoi l’éditeur de blocs WordPress diffère-t-il des autres éditeurs ?

Bien qu’avec WordPress 5.8, de nouveaux blocs de conception aient été introduits, il y a encore du chemin à parcourir jusqu’à ce qu’il puisse remplacer les constructeurs de pages traditionnels comme Elementor ou Divi. Les éditeurs visuels d’Elementor et de Divi sont encore plus faciles à manipuler que l’éditeur WordPress.

Les blocs WordPress sont plus difficiles à apprendre, mais c’est un plaisir de travailler dessus une fois que vous les maîtrisez. Actuellement, je recommande une combinaison d’un éditeur de page traditionnel comme Elementor ou Divi avec l’éditeur Gutenberg. Je crée mes pages et mes modèles avec le constructeur de pages et j’utilise l’éditeur de blocs WordPress pour les articles.

– Aucun codage requis

Les blocs sont plus faciles que de coder du HTML. Le nouvel éditeur rend ce processus encore plus rapide en permettant aux utilisateurs sans aucune expérience en matière de conception ou de code de personnaliser leurs mises en page avec du contenu réutilisable tout en gardant le contrôle sur l’apparence de la mise en page sur différents appareils. Gutenberg est une excellente solution si vous recherchez quelque chose qui vous permette de créer rapidement de beaux designs sans avoir de compétences avancées en développement web.

Les blocs Gutenberg permettent aux utilisateurs sans expérience de codage de personnaliser les mises en page en déplaçant et en alignant les blocs là où c’est nécessaire. La bibliothèque Gutenberg Blocks comprend des blocs puissants pour tout projet !

– Blocs réutilisables

Les blocs réutilisables dans l’éditeur Gutenberg permettent aux créateurs de contenu de réutiliser le contenu sous forme de blocs. Ce contenu peut ensuite être stylisé, réarrangé et configuré au besoin pour diverses pages. Le bloc réutilisable est pratique si vous souhaitez enregistrer et réutiliser des blocs complexes sur d’autres pages Web. Par exemple, un appel à l’action avec un bouton comportant le texte « S’inscrire » avec un lien associé à l’intérieur.

Bien que les blocs réutilisables puissent sembler être une bonne idée à première vue, il existe certaines limitations lorsque vous apportez des modifications à ces blocs lorsqu’ils ont déjà été utilisés sur vos pages. Par exemple, si vous voulez changer la couleur du texte d’un bouton de rouge à vert pour une instance mais pas pour toutes les instances de votre page.

Vous devrez d’abord convertir le bloc réutilisable en un bloc ordinaire. Si vous ne le convertissez pas d’abord, la modification s’appliquera globalement. Vous pouvez facilement passer à côté de cette opération et ruiner votre site Web.

WordPress 5.8 tente d’y remédier avec une case à décocher qui n’applique pas la modification au bloc réutilisable.

Éditeur classique vs. bloc Gutenberg : Pour et Contre

WordPress a publié le projet Gutenberg en décembre 2018. Le changement a divisé la communauté WordPress.

Chaque version a ses avantages et ses inconvénients.

L’éditeur classique de WordPress est un éditeur WYSIWYG (What You See Is What You Get) simple qui existe depuis la création de WordPress. L’éditeur classique est facile à utiliser et familier à la plupart des utilisateurs de WordPress. Cependant, il peut être difficile d’ajouter des fonctionnalités plus avancées ou de personnaliser la mise en page de votre site à l’aide de l’éditeur classique.

L’éditeur classique permet de télécharger facilement des fichiers multimédias en cliquant sur le bouton « Ajouter un média ». Le contenu s’affiche dans l’ordre où il a été créé, les fichiers multimédias étant regroupés. Cela peut être gênant pour les utilisateurs qui ont l’habitude de pouvoir insérer rapidement des médias dans leur contenu. Avec l’éditeur de blocs de WordPress, vous devez d’abord créer un bloc « Media », puis télécharger vos fichiers dans ce bloc.

L’éditeur de blocs Gutenberg permet aux utilisateurs d’ajouter des blocs de contenu individuels à leurs pages, ce qui facilite la création de mises en page complexes. L’éditeur de blocs est un excellent choix pour les utilisateurs qui souhaitent avoir plus de contrôle sur la conception de leur site. Cependant, il peut être écrasant pour les débutants de WordPress.

L’éditeur classique de WordPress et les blocs Gutenberg ont tous deux leurs avantages et leurs inconvénients. Cela dépend finalement de vos besoins en tant qu’utilisateur pour savoir quelle version vous choisissez.

Cependant, il est essentiel de noter que l’éditeur classique finira par être supprimé et ne sera plus disponible en téléchargement depuis le dépôt WordPress. Je recommande de passer à l’éditeur de blocs Gutenberg et de se familiariser avec les nouvelles fonctionnalités.

Les meilleurs plugins de blocs Gutenberg pour votre site WordPress

Il existe maintenant un marché pour les plugins de bloc tiers. Certains sont des plugins gratuits avec une version Pro (payante).

Voici une liste de quelques plugins de blocs puissants

• Blocs Genesis
• Spectra (anciennement Ultimate Addons for Gutenberg)
• Blocs Kadence
• Blocs Ultimate

Mon éditeur de blocs WordPress Gutenberg préféré – Kadence Blocks

Gutenberg Blocks par Kadence est le meilleur addon parce qu’ils sont faciles à utiliser, et j’aime comment vous pouvez créer votre contenu réutilisable.

Avec le plugin de blocs de Kadence Blocks, j’ai rapidement construit la page d’accueil de mon site Web sans aucun tracas ni limitation en utilisant leurs blocs personnalisés comme les sections, la disposition en rangées et les colonnes. Les sites Web conçus à l’aide de Blocks se chargent plus rapidement et sont moins gonflés.

Kadence Blocks est disponible en deux éditions : Free et Pro (payante)

Laissez-moi vous présenter d’abord quelques blocs individuels dans la version gratuite.

Mise en page

Le bloc Row / Layout génère une expérience d’édition avancée dans l’éditeur Gutenberg. Le bloc Row est votre conteneur de base lorsque vous avez besoin d’une mise en page ou d’un contenu spécial. Lorsque vous ajoutez le bloc dans Gutenberg, il a automatiquement des mises en page prédéfinies différentes de ce que propose le WYSIWYG traditionnel.

Mise en page des articles

Affichez une grille soignée d’articles sur n’importe quelle partie de votre site Web, notamment sur votre page d’accueil, où vous pouvez présenter les nouveaux articles de votre blog.

Titres avancés

Notre système peut prendre vos titres et en faire des titres avancés qui sont personnalisés pour répondre à vos besoins en matière de famille de polices (y compris les polices google), de taille, de style et de mise en évidence des mots

Table des matières

Un moyen efficace de naviguer dans les longs articles est d’utiliser le bloc Table des matières. Vous pouvez choisir les niveaux de titre à prendre en compte. Le défilement fluide vers l’ancrage est une option. Une excellente caractéristique de ce bloc est qu’il peut être ajouté à une barre latérale adhésive et qu’il dispose d’un indicateur de défilement afin que vous puissiez voir vers quelle rubrique vous êtes en train de défiler. Le bloc ne doit pas nécessairement faire partie du contenu du message mais peut se déplacer dans une zone autocollante ou modale.

Galerie avancée

Réalisez de superbes galeries de photos WordPress, des carrousels et des sliders ! Diverses options d’emplacement de la légende sont disponibles, notamment la police, le fond, etc. Chaque style de galerie dispose de paramètres pour les filtres d’image, le rayon de la bordure, les ombres de la boîte, et plus encore ! Il est facile de créer des liens personnalisés vers d’autres pages ou sites Web et une lightbox intégrée.

En outre, vous pouvez choisir la taille d’image à utiliser pour vos vignettes et les images de la lightbox pour une performance optimale. C’est le meilleur module de galerie pour WordPress que j’ai jamais rencontré.

Boutons avancés

Gutenberg offre un moyen puissant de créer des boutons. Plusieurs boutons par ligne peuvent être facilement stylisés avec la taille du texte, le padding, le rayon de la bordure, la largeur de la bordure, la couleur, l’arrière-plan, la bordure et les styles de survol pour la couleur, l’arrière-plan et la bordure.

Compte à rebours

Avec ce bloc compte à rebours, vous pouvez décorer votre bannière en ajoutant un compte à rebours. Vous pouvez l’utiliser pour stimuler vos ventes marketing ou afficher le temps restant pour un événement.

Témoignages

Présentez des témoignages magnifiques et uniques pour renforcer la confiance dans votre marque ou votre produit. Les grilles et les carrousels sont deux options. Au total, quatre styles prédéfinis intégrés sont disponibles. Vous pouvez ensuite modifier les polices, les couleurs, la bordure, l’ombre, etc. Il est simple à utiliser et très polyvalent.

Intercalaire/Diviseur

Un simple bloc avec des options de séparateur et de réglage de la hauteur permet de définir la couleur, la taille et la largeur du séparateur. En fonction de la taille de l’écran, vous pouvez attribuer des hauteurs personnalisées à votre conception pour qu’elle soit parfaitement réactive.

Autres fonctionnalités de la version gratuite

Commandes réactives

Les différentes tailles d’écran doivent être prises en compte lors de la conception d’un design évolutif. Pendant la prévisualisation dans l’éditeur Gutenberg, vous pouvez modifier les paramètres pour tablettes et mobiles.

Chargements intelligents

Lorsque vous avez besoin de CSS ou de JavaScript pour vos blocs, Kadence Blocks les charge.

Contrôles de mise en page

Notre bloc row/layout vous permet de concevoir toutes les mises en page que vous pouvez imaginer, quelle que soit leur taille.

Valeurs par défaut configurables

C’est un jeu d’enfant de développer. Lorsque vous définissez les paramètres par défaut d’un bloc, ils sont automatiquement appliqués chaque fois que vous ajoutez un nouveau bloc.

Plus de 1500 icônes SVG incused

Il est possible de tout régler, de la taille à la couleur en passant par la largeur du trait. De plus, les icônes se chargent rapidement car aucune famille de polices n’est chargée !

Contrôles de la typographie, de la couleur et de l’arrière-plan

Mettez votre site en valeur grâce aux polices Google. Choisissez parmi plus de 900 options. Les types de couleurs d’arrière-plan suivants sont disponibles : dégradés, superpositions, mélanges, arrière-plans parallaxes, bordures, etc. Vous avez un contrôle total sur le design !

Premium Blocks by Kadence (version payante uniquement)

Superposition d’images

Il vous permet de créer facilement des liens et des paramètres de survol pour une image de couverture à l’aide de la superposition d’images. Ce bloc offre une excellente alternative aux superpositions d’images à l’intérieur des colonnes et en pleine largeur et en largeur.

Grille d’affichage / Carrousel

Vous obtiendrez toute la flexibilité dont vous avez besoin pour afficher joliment vos articles de blog avec le Post Grid/Carousel. Outre la mise en page, vous pouvez personnaliser le titre de l’extrait et le pied de page. En sélectionnant individuellement certains articles, vous pouvez concevoir une grille de blog spécialement pour vous.

Cet article portera sur le thème Kadence et expliquera pourquoi il constitue une excellente option pour les utilisateurs de WordPress. Nous parlerons de ce qui le rend si génial, de certaines des caractéristiques qui le distinguent des autres thèmes, et de mon opinion générale sur le fait qu’il s’agit ou non du bon thème pour vous.

Vous avez entendu parler des « éléments Kadence », n’est-ce pas ? Mais vous n’êtes pas sûr de ce que c’est. S’agit-il d’un thème ou d’un plugin ?

Kadence Conversion est un nouveau plugin WordPress conçu pour vous aider à convertir plus de prospects en ventes. Il est simple à installer et à configurer. Kadence Conversion fait partie de la famille Kadence. Le plugin a été publié en novembre 2021. C’est le complément idéal au thème Kadence et aux blocs Kadence.

Grille de portefeuille / Carrousel

Lorsqu’il s’agit d’afficher magnifiquement vos articles dans un style portfolio (axé sur les images), le Portfolio Grid/Carousel vous offre toute la flexibilité dont vous pourriez avoir besoin. Vous pouvez personnaliser le design pour obtenir le look exact de portefeuille que vous souhaitez.

Popup vidéo

Affichez une vignette vidéo en surimpression avec des effets de survol et un lien vers la vidéo en cas de clic. Cela fonctionne avec des vidéos locales ou externes !

Slider avancé

Créez de magnifiques curseurs avec des fonctions telles que les couches superposées et l’animation directement dans l’éditeur de blocs. Ce slider est léger et idéal comme alternative à un plugin de slider séparé.

Formulaire

Vous pouvez créer des formulaires de contact ou de marketing simples en utilisant le formulaire Kadence dans l’éditeur.

Contenu divisé

Vous pouvez utiliser ce module pour créer de magnifiques colonnes de présentation sur votre site Web. À l’aide de deux colonnes, vous pouvez créer une ligne à deux colonnes qui présente une image ou une vidéo dans une colonne, faire glisser pour ajuster la largeur de la colonne média et saisir le contenu souhaité dans la deuxième colonne.

Wireframing / NOUVEAU

Supposons que vous deviez créer un nouveau design de page pour votre client. Un nouveau jeu de blocs WordPress appelé Wireframing vous donne des sections préconstruites et propres pour construire votre site à partir de votre éditeur WordPress natif. Vous n’avez plus besoin d’utiliser une application ou un outil distinct en fournissant une maquette filaire directement dans WordPress. Vous aimeriez peut-être ajouter une section FAQ à votre page. En important une maquette filaire de FAQ directement depuis l’onglet Wireframing, vous n’aurez pas besoin de créer une mise en page en ligne ou d’expérimenter différents blocs pour trouver la meilleure façon de la structurer.

Fonctions Premium dans PRO (payant)

Animer au défilement

Créez une belle expérience pour vos visiteurs en ajoutant une animation sur le défilement pour les aider à trouver votre contenu.

Plus d’icônes personnalisées

Créez facilement votre icône personnalisée ou un ensemble d’icônes avec des icônes personnalisées.

Contenu dynamique

Un contrôle puissant du site avec des champs personnalisés remplis dynamiquement. Particulièrement utile pour les éléments accrochés.

Bibliothèque de conception

Les sites de démarrage et les éléments de la bibliothèque de conception accélèrent votre processus de développement.

Spécifier des scripts

Vous pouvez désormais ajouter un script de suivi à un seul article ou une seule page directement dans les outils de l’éditeur.

FAQs

Comment réorganiser les blocs individuels ?

Vous avez deux possibilités pour réorganiser les blocs. Lorsque vous passez la souris sur un bloc, vous pouvez utiliser la flèche Haut ou Bas pour le déplacer.u003cbru003eVous pouvez faire glisser les blocs. Vous devez passer votre souris sur les six points situés entre les flèches haut et bas pour utiliser le glisser-déposer.

Les blocs changent-ils la façon dont les lecteurs voient le contenu de mon site ?

Pas du tout. La présence de blocs n’affectera pas le contenu de vos articles ou de vos pages. Tous les blocs de contenu sont transparents sur votre site Web. Les visiteurs ne peuvent pas les voir. En tant qu’utilisateur de WordPress, vous pouvez uniquement les utiliser pour modifier les articles et les pages dans la zone d’administration de WordPress.

Que faire si je veux travailler avec l’ancien éditeur classique ?

Installez un plugin nommé à juste titre Classic Editor. Après l’avoir activé, allez dans Réglages → Rédaction et sélectionnez vos paramètres préférés : Vous pouvez toujours récupérer l’ancien éditeur, bien que ce ne soit pas une méthode particulièrement recommandée.u003cbru003eVous pourrez choisir l’ancien éditeur classique ou le nouvel éditeur de bloc par article si vous sélectionnez ‘Autoriser les utilisateurs à changer d’éditeur : Oui.’

Quels sont les avantages de l’utilisation de l’interface de l’éditeur de blocs ?

J’ai déjà mentionné plusieurs de ces avantages ci-dessus. Dans l’ensemble, ils sont portables, ce qui rend super facile l’insertion et la réorganisation de n’importe quel contenu. Vous pouvez créer une mise en page complexe sans utiliser un constructeur de pages comme Elementor ou Divi. Par conséquent, vous en tirerez le meilleur parti en utilisant un thème WordPress avec des styles d’éditeur compatibles avec le plugin block. De cette façon, vous pouvez voir le même design sur le front-end de votre site que dans l’éditeur en travaillant sur un article.

Conclusion

Le plugin de blocs Kadence pour WordPress ressemble à un éditeur visuel, ce qui rend la création de votre site Web facile et amusante. Vous obtiendrez tous les contrôles de conception dont vous avez besoin : contrôle approfondi de la typographie, superpositions d’arrière-plan ou arrière-plans parallaxes, schémas de couleurs parmi plus de 900 polices Google, icônes SVG avec taille, largeur de trait, couleurs, etc. Vous pouvez également choisir parmi les mises en page des articles et les personnaliser comme bon vous semble.

Et si ces fonctionnalités ne sont pas suffisantes – il y a plus !

Avec les Premium Blocks by Kadence (version payante uniquement), une fonctionnalité d’animation sur le défilement sera ajoutée pour créer une expérience intéressante pour le visiteur lorsqu’il fait défiler le contenu Web. La fonctionnalité d’icônes personnalisées supplémentaires vous permet de créer facilement vos propres jeux d’icônes personnalisés. Le contenu dynamique vous permettra d’alimenter dynamiquement des champs personnalisés dans l’éditeur WordPress avec du contenu tel que les métadonnées d’un article, la date de publication, ou même un hook spécifique déclenché au chargement de la page.

Pour plus d’informations sur les blocs Kadence et leurs fonctionnalités, veuillez cliquer ici.

Honnêtement, avec la version gratuite des modules Kadence, vous pouvez déjà faire beaucoup, et probablement pour un site Web personnel, c’est tout ce dont vous avez besoin. La version Pro est nécessaire pour les champs dynamiques avec ACF ou les crochets. Dans le monde Kadence, les hooks sont des éléments.

Kadence propose d’excellents produits. Le bundle complet est la meilleure option lorsqu’il s’agit de décider quoi acheter. Le Bundle complet inclut également tous les futurs plugins. Kadence Conversion est un autre excellent plugin.