Comment utiliser Gutenberg le nouvelle editeur de WordPress ?

WordPress a introduit Gutenberg comme éditeur par défaut dans la version 5.0. Il fournit une nouvelle interface et une nouvelle expérience pour créer du contenu avec des blocs.

Les développeurs de plates-formes ont poussé le concept d’édition de blocs au niveau supérieur en introduisant l’édition complète du site dans WordPress 5.9. Essentiellement, l’éditeur de blocs a maintenant remplacé le personnalisateur WordPress en tant qu’outil principal pour modifier le thème et l’apparence de votre site Web.

Cet article vous montrera comment utiliser le nouvel éditeur de blocs Gutenberg WordPress pour personnaliser votre site WordPress.

Qu’est-ce que Gutenberg sur WordPress ?

Gutenberg est le nouvel éditeur WordPress qui est préinstallé dans WordPress 5.0 et supérieur. Il introduit une nouvelle approche du processus de création de contenu, vous donnant plus de contrôle sur les aspects visuels de votre contenu.

Comment fonctionne l’éditeur WordPress Gutenberg ?

L’éditeur WordPress Gutenberg utilise le concept de blocs de contenu pour ajouter et modifier divers éléments dans les articles et les pages, tels que du texte, des images, des fichiers et des liens. L’ancien éditeur WordPress par défaut, TinyMCE, était axé sur l’édition de texte.

Conseils d’experts

Bien que le nouvel éditeur de blocs soit préinstallé dans WordPress 5.0 et versions ultérieures, les utilisateurs d’anciennes versions de WordPress peuvent également utiliser l’éditeur de blocs en installant le plugin Gutenberg. Cependant, nous vous recommandons fortement de mettre à jour le logiciel principal de WordPress vers la dernière version.

Après la mise à jour WordPress 5.9, l’éditeur Gutenberg fonctionne plus qu’un simple éditeur de contenu. Il comprend tous les aspects de la personnalisation du site Web, y compris l’édition de thèmes et la création de pages ou de publications.

Le nouvel éditeur fournit également une meilleure représentation visuelle des pages Web, ce qui en fait davantage un constructeur de pages que l’ancien éditeur WordPress.

Il divise les éléments du site Web tels que les titres, le texte et les images en blocs, ce qui les rend plus faciles à gérer et à personnaliser.

En sélectionnant un bloc, vous pouvez le personnaliser individuellement, par exemple en définissant une couleur de fond ou une typographie différente sans affecter les autres blocs ou éléments. Cela offre plus d’options de personnalisation et de flexibilité pour l’édition de sites.

La nouvelle interface est conviviale, permettant aux nouveaux utilisateurs d’apprendre rapidement à utiliser WordPress. Tous les blocs sont répertoriés dans une liste déroulante en fonction de leur structure. Changer leur position sur le site Web est facile, car les utilisateurs n’ont qu’à faire glisser et déposer des blocs individuels dans la vue de liste.

Les utilisateurs peuvent ajouter des blocs en cliquant sur le bouton plus (+) dans la barre supérieure, à droite de chaque ligne vide ou entre des blocs existants.

Chaque bloc a des outils de configuration et de conception différents. Par exemple, les blocs de paragraphe ont des outils pour changer la couleur et la typographie. En revanche, les blocs d’images disposent d’outils pour ajouter du texte alternatif et redimensionner les images.

La nouvelle approche d’édition complète du site réduit également le besoin de codage et de CSS personnalisé. Le nouvel éditeur de blocs introduit le panneau de styles globaux, qui contrôle le fichier theme.json. Cela permet aux utilisateurs de modifier le style de l’ensemble du site, comme l’ajout de couleurs personnalisées et la modification de la typographie directement sur le site. Éditeur par défaut.

Comment utilisez l’éditeur de blocs Gutenberg sur votre site Web

L’interface de l’éditeur Gutenberg peut être déroutante pour les utilisateurs novices ou toute personne habituée à l’éditeur classique. Voici quelques lignes directrices pour la création de sites Web et la gestion du contenu avec l’éditeur Gutenberg.

1. Ajouter un nouveau billet de blog ou une nouvelle page

La création de contenu pour votre site Web commence par l’ajout d’un nouvel article ou d’une nouvelle page à l’aide de l’éditeur de blocs Gutenberg.

Les articles de blog ont une date de publication et apparaissent généralement sur le site dans l’ordre chronologique inverse. D’autre part, les pages sont statiques et fournissent des informations intemporelles, telles que la politique de confidentialité et les pages de contact.

Si vous envisagez de créer un nouveau message, accédez à Messages -> Ajouter dans votre tableau de bord WordPress.

Une fois dans l’éditeur de contenu par défaut, vous verrez un brouillon vierge avec des espaces réservés pour le titre du message et le premier bloc de paragraphe. Ajoutez des titres de publication et de nouveaux blocs pour créer du contenu.

Un nouveau brouillon d'article WordPress dans l'éditeur

Trouvez les paramètres de publication dans la barre latérale de droite. Ici, vous pouvez configurer des auteurs, des modèles de publication, des permaliens et des catégories.

La création d’une nouvelle page est un processus similaire. Allez dans Pages -> Ajouter et vous verrez la même interface que lors de la création d’un article. La seule différence est le paramètre de propriété de la page dans la barre latérale droite, qui spécifie la page parent et l’ordre des pages. Les pages n’ont pas non plus de paramètres de catégorie ou de balise.

Un nouveau brouillon de page WordPress dans l'éditeur

2. Interface de style global

La version actuelle de l’éditeur WordPress possède une interface de style globale qui vous permet de personnaliser les couleurs, la typographie et la mise en page de l’ensemble de votre site sans utiliser une seule ligne de code.

Cependant, cette fonctionnalité n’est disponible que lors de l’utilisation de thèmes basés sur des blocs ou de thèmes enfants dans WordPress 5.9 ou version ultérieure.

Tout d’abord, accédez à l’éditeur de site en accédant à Apparence -> Éditeurs et cliquez sur l’icône de contraste noir et blanc dans le coin supérieur droit de l’écran. L’interface de style global apparaîtra sur le côté droit de la fenêtre.

Panneau de styles globaux dans l'éditeur de blocs WordPress

L’interface des styles globaux se compose de cinq parties : parcourir les styles, la typographie, les couleurs, les mises en page et les blocs.

Découvrez les variantes de style prédéfinies disponibles dans la section Parcourir les styles. En cliquant sur une variante, il est facile de changer l’apparence générale de votre site Web.

Options de style de thème dans le panneau des styles globaux

Après avoir choisi un style de thème, vous pouvez commencer à personnaliser d’autres aspects du thème. Gérez la famille de polices, la taille, la hauteur de ligne et l’apparence de la police pour le texte et les liens dans les paramètres de typographie.

Vous trouverez deux éléments principaux dans les paramètres de couleur : la palette et les éléments. La palette de couleurs montre les couleurs qui peuvent être utilisées pour les éléments du site Web. La palette du thème et les couleurs par défaut peuvent être utilisées sur tout le site. Le sélecteur de couleurs personnalisé vous permet d’ajouter des couleurs supplémentaires à la palette.

Lire Aussi...  Panneau WordPress: 11 paramètres clés et les ingrédients les plus importants que vous devez savoir
Réglages de couleur dans les styles globaux

La section Éléments pour la personnalisation des couleurs comprend trois zones : Arrière-plan, Texte et Liens. Cliquez sur l’un d’entre eux pour personnaliser sa couleur.

L’élément suivant du style global est la mise en page. Il vous permet de spécifier les propriétés de rembourrage pour chaque élément de votre site Web.

Le dernier élément de l’interface Styles globaux est l’onglet Blocs, qui vous permet de personnaliser des blocs spécifiques. Lorsque cette option est sélectionnée, une liste des blocs disponibles s’affiche. Sélectionnez un bloc pour commencer à le personnaliser. Selon le type de bloc, vous pouvez modifier sa disposition, sa couleur et sa typographie.

Paramètres de personnalisation de blocs dans les styles globaux

3. Mode d’édition de modèle

Le nouvel éditeur de blocs WordPress inclut un mode d’édition de modèles. La plupart des thèmes basés sur des blocs prennent en charge cette fonctionnalité, vous pouvez donc utiliser l’éditeur de blocs pour modifier les modèles de thème pour les publications, les pages ou les pages 404. Il vous permet même de créer un nouveau modèle.

Accédez à l’éditeur de site en accédant à Apparence -> Éditeurs. Ouvrez la barre latérale de navigation pliable en cliquant sur le logo WordPress dans le coin supérieur gauche de l’écran et en sélectionnant un modèle. Vous devriez voir une liste des modèles disponibles et un bouton Ajouter un nouveau modèle dans le coin supérieur droit.

Liste des modèles dans l'éditeur de blocs WordPress

4.Comment insérer plusieurs de blocs

Si vous n’avez pas le temps de personnaliser chaque bloc, vous pouvez construire avec des blocs intégrés. Cliquez sur le bouton « + » en haut de l’écran de l’éditeur et sélectionnez l’onglet Builds pour trouver plusieurs builds prédéfinis dans différents styles.

Cliquez sur le menu déroulant pour découvrir les modèles de blocs pour les boutons, les colonnes, les galeries et les en-têtes.

Menu des compositions de bloc

Une autre façon d’insérer des motifs de blocs consiste à utiliser l’outil Insérer. Cependant, cette méthode ne fonctionne qu’avec l’éditeur de site et l’outil d’insertion s’ouvre au niveau racine de la structure de contenu du bloc.

Survolez la zone de contenu et cliquez sur le bouton « + ». Une petite fenêtre pop-up apparaîtra montrant des suggestions de composition. Utilisez la barre de recherche dans la fenêtre contextuelle pour trouver des œuvres appropriées.

5. Comment ajouter un nouveau bloc

Les blocs sont la principale caractéristique de l’éditeur Gutenberg. Chaque bloc héberge un élément, ce qui rend la création de mises en page de contenu personnalisées pour vos publications et pages plus accessible.

Si vous ajoutez un nouvel article ou une nouvelle page, l’éditeur de blocs WordPress définira le bloc de paragraphe comme bloc de contenu par défaut. Cela facilite le démarrage du processus de création de contenu.

Bloc de paragraphe par défaut dans l'éditeur WordPress

Pour ajouter plus de blocs au contenu, appuyez sur Entrée et l’éditeur ajoutera automatiquement un autre bloc de paragraphe, ce qui est pratique lors de la saisie de texte long.

Cependant, vous pouvez ajouter d’autres éléments de bloc au texte. Pour ce faire, cliquez sur le bouton plus (+) dans le coin supérieur gauche de l’écran et sélectionnez ou recherchez le bloc souhaité.

Les options de blocs dans l'éditeur WordPress

Si vous cliquez sur le bouton plus dans la zone de contenu, une fenêtre contextuelle apparaîtra avec six blocs récemment utilisés, ce qui facilitera l’insertion de blocs fréquemment utilisés. Vous pouvez également utiliser la barre de recherche pour trouver des blocs spécifiques.

ajouter un nouveau bloc dans la zone de contenu.

6. Insérer des widgets

Les widgets sont maintenant intégrés à l’éditeur Gutenberg, donc l’ajout de widgets revient au même que l’ajout d’autres blocs.

Sur les anciennes versions du noyau WordPress, des personnalisateurs de pages et de thèmes spécifiques aux widgets étaient nécessaires pour les gérer.

Cliquez sur le bouton plus (+) en haut de l’écran de l’éditeur et sélectionnez l’onglet Blocs. Faites défiler jusqu’à la section des widgets pour trouver tous les blocs disponibles pour les widgets.

Blocs de widgets dans l'éditeur de blocs WordPress

7. Utilisez des blocs

Savoir utiliser les blocs Gutenberg améliorera votre expérience de blogging et accélérera votre flux de travail.

Le nouvel éditeur fournit une barre d’outils pour formater et aligner des éléments comme l’éditeur classique. Il apparaît au-dessus du bloc actuellement actif et se compose de différents outils, selon le type de bloc.

Par exemple, les blocs de paragraphe auront des options pour le gras, l’italique et l’ajustement de l’alignement du texte.

Barre d'outils du bloc dans l'éditeur WordPress

Les blocs d’image, quant à eux, permettent de modifier l’alignement de l’image et de passer à un autre type de bloc.

L'option de changement d'alignement de l'image dans la barre d'outils de l'éditeur de blocs

Les flèches haut et bas vous permettent de déplacer des blocs pour réorganiser l’ordre des blocs. Vous pouvez également cliquer sur l’icône d’affichage de liste en haut de l’écran. Il affiche tous les blocs de contenu dans l’ordre dans lequel ils apparaissent sur la page.

Faites glisser et déposez un bloc pour le déplacer vers une nouvelle position dans la liste. Cette fonctionnalité facilite la gestion de structures de contenu complexes, en particulier lorsqu’il existe plusieurs blocs imbriqués.

Vue en liste dans l'éditeur de blocs

Chaque bloc dispose également d’outils de conception différents, selon le type de bloc. Cliquez sur le bouton Paramètres dans le coin supérieur droit de l’écran et une barre latérale apparaîtra à droite.

Les réglages du bloc dans l'éditeur WordPress

Par exemple, les blocs d’image ont des champs pour saisir du texte alternatif, tandis que les blocs de navigation ont des paramètres de mise en page et d’affichage.

Des blocs peuvent également être ajoutés dans des blocs pour créer des structures de contenu uniques. Il fonctionne avec des blocs tels que groupe, ligne et colonne car ils agissent comme des conteneurs pour plusieurs blocs.

Utilisation de blocs de groupe pour combiner plusieurs blocs dans l'éditeur WordPress

8. Verrouiller un bloc

La fonction de verrouillage des blocs les empêche d’être déplacés ou supprimés accidentellement. Il existe deux manières de verrouiller les blocs : la barre d’outils et la vue en liste.

Pour verrouiller un bloc à partir de la barre d’outils, sélectionnez le bloc et cliquez sur l’icône à trois points dans la barre d’outils. Ensuite, dans le menu des options du bloc, sélectionnez Verrouiller.

L'option de verrouillage dans le menu de la barre d'outils du bloc

Une fenêtre contextuelle apparaîtra montrant les options pour les propriétés de verrouillage – Désactiver le mouvement et empêcher la suppression. Cochez les propriétés que vous souhaitez appliquer ou cochez l’option Verrouiller tout pour appliquer les deux propriétés. Cliquez ensuite sur Appliquer pour enregistrer vos préférences.

La fenêtre pop-up permettant de choisir les attributs de verrouillage du bloc.

Une autre façon de verrouiller les blocs consiste à utiliser un panneau d’affichage de liste. Trouvez le bloc que vous souhaitez verrouiller et cliquez sur l’icône à trois points à côté de celui-ci. Sélectionnez l’option Verrouiller et la même fenêtre contextuelle Propriétés de verrouillage apparaîtra.

Option de verrouillage des blocs dans la vue en liste

Les blocs verrouillés auront une icône de cadenas dans la barre d’outils des blocs et la vue de liste. Pour le déverrouiller, cliquez sur l’icône de verrouillage dans la barre d’outils et la fenêtre contextuelle des propriétés de verrouillage réapparaîtra. Décochez toutes les propriétés verrouillées et cliquez sur Appliquer pour enregistrer les paramètres.

Icône de verrouillage du bloc dans la barre d'outils d'un bloc verrouillé

9. Détails du contenu

Pour afficher les détails du contenu des publications et des pages dans l’éditeur de blocs WordPress, cliquez simplement sur le bouton Détails.

Détails du contenu de l'éditeur de blocs gutenberg wordpress

Vous verrez des informations sur le nombre de mots, de caractères, de titres et de blocs dans votre contenu, ce qui vous aidera à créer une longueur de contenu optimale.

Un autre élément qui apparaîtra est l’aperçu du document. Cette section n’est disponible que lors de l’utilisation de plusieurs en-têtes. Il montrera la structure de l’en-tête, vous aidera à organiser votre contenu et à améliorer le référencement WordPress.

Le support d’ancrage

Les liens étiquetés « ancre » aident les lecteurs à accéder à des parties spécifiques d’une page Web WordPress. Cette fonctionnalité facilite la compréhension des sites Web pour les visiteurs en mettant en évidence des sections de contenu spécifiques.

L’inclusion d’en-têtes avec des liens pertinents au début d’articles plus longs facilite la navigation. Le partage d’URL contenant un support d’ancrage permet aux utilisateurs d’accéder rapidement à des sections spécifiques.

Les ancres Gutenberg sont créées en suivant ces étapes.

Lire Aussi...  Comment créer et valider vos propres modèles HTML et CSS

Sélectionnez un bloc existant à modifier ou créez un nouveau bloc.
Des paramètres supplémentaires peuvent être affichés en cliquant sur Options dans la barre d’outils du bloc.
Dans le menu Blocage, sélectionnez l’option Avancé.
Dans la zone de texte Ancre HTML, vous pouvez ajouter un texte d’ancrage HTML.

Insertion d'une ancre HTML dans l'éditeur Gutenberg WordPress

Attacher l’ancre à un élément sélectionné est facile une fois que vous avez créé l’ancre.

Pour insérer une ancre, sélectionnez l’élément de contenu, tel qu’un bouton, une image ou un morceau de texte, à l’endroit où vous souhaitez qu’il apparaisse.
Cliquez sur le bouton Lien dans la barre d’outils du bloc pour afficher un lien.
Pour insérer un code d’ancrage HTML, saisissez un hashtag suivi du code entre parenthèses. Après avoir appuyé sur Entrée, le code apparaîtra.

Insertion d'une ancre HTML dans un lien dans l'éditeur gutenberg wordpress

Vous ne pouvez utiliser des liens d’ancrage que sur des publications ou des pages publiées.

La création d’une ancre dans le nouvel éditeur nécessite de se rappeler que :

Un concept unique est nécessaire.
La sensibilité à la casse fait partie de son nom.
Des symboles supplémentaires peuvent être inclus dans l’URL ; ceux-ci incluent les tirets, les traits de soulignement, les deux-points et les points. Aucun espace n’est autorisé dans l’URL.
Une lettre doit être la première chose qu’elle contient.
Les blocs d’images nécessitent du travail pour être utilisés.

L’éditeur de blocs de WordPress vous permet d’insérer des images dans votre contenu. Vous pouvez choisir de télécharger une image depuis votre ordinateur, d’en sélectionner une dans la médiathèque ou de créer un lien vers une URL d’image.

L’éditeur de contenu vous permet de glisser-déposer des images vers un nouvel emplacement sans créer de nouveau bloc pour elles.

Faire glisser un fichier image dans l’espace de travail Gutenberg utilise l’éditeur de blocs pour créer un bloc pour l’image. Vous pouvez ensuite personnaliser le bloc selon vos préférences.

Dans les paramètres de bloc, vous trouverez des options pour ajuster la taille des images et ajouter du texte alternatif pour les images.

Champ de texte alt pour le bloc image dans l'éditeur gutenberg WordPress

Gutenberg vous permet d’ajouter une légende à l’image en cliquant sur l’espace en dessous.

La barre d’outils du bloc d’image vous permet de définir des liens et des alignements d’images. De plus, il existe une fonction de bichromie qui vous permet de transformer la couleur d’une image avec l’un des préréglages disponibles.

Option de filtre duotone pour les images dans l'éditeur Gutenberg WordPress

L’ajout d’un groupe d’images à un bloc de galerie d’images est une autre façon de travailler avec des images. Il s’agit d’un bloc conteneur qui vous permet d’ajouter plusieurs photos à la suite. Vous pouvez également définir le nombre de colonnes dans le bloc de la galerie pour créer un affichage en forme de grille.

Bloc Galerie dans l'éditeur WordPress

Vous pouvez personnaliser chaque image dans une galerie avec un texte alternatif et des bordures uniques. Tous les blocs d’images sont traités comme des blocs individuels, ce qui permet cette polyvalence.

Les 12 blocs réutilisables étaient utiles pour fabriquer différentes choses.

L’éditeur de blocs de Gutenberg vous permet d’enregistrer des blocs et de les réutiliser dans d’autres articles et pages. Cela permet de gagner du temps si le même type de bloc est utilisé à plusieurs reprises au lieu d’avoir à le personnaliser à chaque fois.

Les blocs Gutenberg peuvent être sauvegardés et réutilisés en suivant ces étapes :

Cliquez sur Options sur le bloc que vous souhaitez enregistrer pour l’ajouter à une liste de blocs réutilisables.

Option Ajouter aux blocs réutilisables dans l'éditeur Gutenberg WordPress

2. Entrez un nom pour le bloc et cliquez sur Enregistrer.

Nommer le bloc réutilisable dans l'éditeur WordPress Gutenberg

Créez un nouveau bloc dans l’éditeur Gutenberg pour réutiliser un bloc précédemment utilisé.

L’onglet Réutilisables contient chaque bloc réutilisable, qui est accessible via le signe plus plus l’abréviation « + ».

Onglet réutilisable dans l'éditeur de blocs WordPress Gutenberg

Vous devez insérer le bloc que vous avez enregistré précédemment.

Le gestionnaire de blocs se trouve dans l’onglet Réutilisables. À l’aide de cet outil, vous pouvez modifier ou supprimer des blocs réutilisables.

.

Option Gérer les blocs réutilisables dans l'éditeur de blocs

La suppression d’une page ou d’un article où vous avez créé un bloc réutilisable entraînera des erreurs dans d’autres projets qui utilisent le bloc.

13. Bloc de tableau

Gutenberg améliore la fonctionnalité des tableaux de WordPress en introduisant des blocs de tableau, éliminant ainsi le besoin d’installer des plugins de tableau ou d’utiliser du code HTML personnalisé.

Voici comment créer un tableau à l’aide de l’éditeur de blocs Gutenberg.

Faites glisser et déposez des blocs de table du répertoire des blocs dans votre espace de travail Gutenberg.
Définissez le nombre de colonnes et de lignes et cliquez sur Créer une table.
Gutenberg créera une nouvelle table avec le bloc de colonne de réponse.

Exemple de bloc tableau dans l'éditeur WordPress

La barre d’outils de bloc comporte plusieurs options de personnalisation, notamment la mise en forme du texte, l’insertion de lignes et de colonnes et l’alignement du texte.

Deux styles prédéfinis sont disponibles dans le panneau des paramètres de bloc. De plus, ce bloc est livré avec des outils de conception pour personnaliser la couleur et le style des bordures.

Par défaut, les tableaux créés avec ce bloc auront des largeurs de colonne réactives. Cependant, vous pouvez modifier cette largeur dans les paramètres du tableau. Faites défiler le panneau Paramètres de bloc pour ouvrir la section Paramètres du tableau et activez l’option Cellules de tableau à largeur fixe.

Option de cellules de tableau à largeur fixe pour un tableau

14. Blocs de colonnes

Les blocs de colonnes permettent de diviser facilement le contenu en trois colonnes maximum. Cette fonctionnalité permet d’améliorer la lisibilité du contenu en ajoutant des éléments visuels à côté du texte.

Vous pouvez également utiliser ce nouveau bloc pour améliorer l’efficacité de l’espace de votre site, en affichant plusieurs types de contenu sans obliger vos visiteurs à trop défiler.

Les étapes suivantes vous montrent comment ajouter un nouveau bloc de colonnes à votre site.

1. Cliquez sur l’icône plus (+) et sélectionnez le bloc de colonnes.

Bloc de colonnes dans l'éditeur de blocs

2. Sélectionnez un modèle de colonne disponible.

Options de variation de colonne dans l'éditeur WordPress Gutenberg

3. L’éditeur Gutenberg générera un nouveau bloc basé sur le style sélectionné. Cliquez sur l’icône plus (+) pour ajouter de nouveaux éléments à ces blocs.

Options du bloc à ajouter à une colonne

Une grande utilité pour un bloc de colonnes est de créer une barre latérale. Choisissez la variante de colonne 30/70 ou 70/30 et insérez le bloc de boucle de requête dans la plus grande colonne. Utilisez des blocs de groupe dans des colonnes minimales pour inclure des blocs de widget de barre latérale.

Exemple de barre latérale créée avec le bloc colonne.

15. Blocs HTML en direct

Le nouvel éditeur de blocs WordPress a des blocs HTML en direct pour les aperçus de code. Cette fonctionnalité vous permet de vérifier que le code fonctionne correctement sur votre site WordPress sans basculer entre l’éditeur visuel et l’éditeur de texte.

Voici comment insérer du code personnalisé à l’aide du bloc HTML en direct de l’éditeur Gutenberg :

1. Cliquez sur l’icône plus (+) et recherchez les blocs HTML personnalisés.

Bloc HTML personnalisé dans l'éditeur Gutenberg

2. Insérez le code HTML personnalisé dans le bloc qui apparaît.

Exemple de code HTML personnalisé inséré dans un bloc

3. Cliquez sur Aperçu pour voir à quoi ressemblera le code sur votre site WordPress.

Aperçu du code HTML dans l'éditeur de blocs

16. Intégrer des éléments

L’ajout d’audio ou de vidéo à partir de votre médiathèque WordPress ou d’autres sites comme YouTube, Reddit et Twitter contribuera à rendre votre contenu plus attrayant.

L’éditeur de blocs facilite l’intégration de ces éléments dans le contenu, car il existe un grand nombre de blocs multimédias et de contenu intégré disponibles.

Intégration de fichiers multimédia

Les blocs médias vous permettent de télécharger et d’afficher divers fichiers sur votre site Web, offrant différents paramètres de bloc en fonction du média. Choisissez le morceau approprié en fonction du type de fichier que vous souhaitez télécharger.

Suivez les étapes ci-dessous pour insérer des blocs média :

Ouvrez l’outil d’insertion de bloc en cliquant sur l’icône plus (+).
Faites défiler jusqu’à la section Médias et sélectionnez le bloc approprié.

Options du bloc Média dans l'éditeur WordPress

Nous avons vu comment intégrer des images à l’aide de blocs d’images et de blocs de galerie. Examinons maintenant d’autres blocs de médias.

Lire Aussi...  Mettre à niveau WordPress - Devriez-vous cliquer sur le bouton ?

Vidéo – Vous permet d’intégrer un lecteur vidéo dans votre contenu, avec des paramètres configurables tels que les commandes de lecture, la lecture automatique et la boucle vidéo. Il vous permet également d’afficher une image d’affiche lorsque la vidéo n’est pas en cours de lecture.
Audio – Ajoute un lecteur audio avec une configuration simple pour la lecture automatique et la mise en boucle.
Couverture – Ajoutez une image ou une vidéo avec une superposition de texte. Ce bloc est utile pour créer des en-têtes ou des bannières avec des arrière-plans d’images ou de vidéos.
Fichiers – Ajoute un lien vers un fichier multimédia et inclut éventuellement un bouton de téléchargement. Ce bloc prend également en charge les visionneuses PDF, vous n’avez donc pas besoin d’un plug-in de visionneuse PDF pour intégrer des fichiers PDF.

Intégration de contenu externe

Le prochain ensemble de blocs, Embedded Content Blocks, vous permet d’intégrer du contenu à partir de sites Web externes tels que YouTube, Twitter et Spotify. L’utilisation d’un bloc de contenu intégré est facile car il vous suffit de copier et coller l’URL souhaitée.

1. Cliquez sur l’icône Plus (+) et faites défiler jusqu’à la section Contenu intégré.

Options du bloc contenus embarqués dans l'éditeur WordPress Gutenberg

2. Si le site ne figure pas dans la liste, utilisez un bloc de contenu intégré. Pour cet exemple, nous utiliserons des blocs YouTube.

3. Copiez et collez l’URL du média que vous souhaitez intégrer dans la zone de texte appropriée.

4. Cliquez sur Intégrer et le média apparaîtra sur la page ou la publication WordPress.

17. Boutons

Les boutons permettent aux visiteurs d’interagir avec le site, que ce soit pour naviguer ou effectuer une action spécifique. Ils aident également à augmenter les conversions en utilisant des boutons d’appel à l’action pour s’inscrire ou acheter des articles.

Le bloc Boutons vous permet d’insérer des boutons n’importe où sur votre site, y compris dans les articles. Voici comment insérer un bouton à l’aide de l’éditeur de blocs WordPress :

1. Ouvrez l’outil d’insertion de bloc en cliquant sur l’icône plus (+) et en sélectionnant le bloc Boutons.

Bloc boutons dans l'éditeur de blocs

2. Entrez l’étiquette dans le bloc de boutons. Par exemple, créons un bouton d’abonnement.

3. Cliquez sur l’icône de lien pour ajouter un lien au bouton. L’éditeur de blocs offre également la possibilité d’ouvrir le lien dans un nouvel onglet.

Comment utiliser le bloc bouton pour ajouter un bouton CTA au contenu

4. Appuyez sur Entrée pour enregistrer les modifications.

5. Pour ajouter d’autres boutons au groupe, cliquez sur l’icône plus dans le coin inférieur droit du groupe de blocs.

18. Principaux devis et blocs de devis

Avec Gutenberg, il est plus facile de créer des blocs de citations pour les citations provenant de sources externes. De plus, le nouveau bloc de citations en ligne permet de mettre en évidence des informations importantes sur une page ou un article WordPress.

Voici comment créer un devis avec WordPress Gutenberg :

1. Accédez à Block Catalog -> Highlight Quote.

Bloc citation en exergue dans l'éditeur Gutenberg

2. Écrivez la citation dans le bloc.

Exemple d'un bloc citation en exergue dans l'éditeur de blocs

3. Modifiez l’alignement de la citation citée pour qu’elle corresponde au reste du texte. En plus des paramètres standard, Gutenberg propose également un alignement pleine largeur et pleine largeur.

Les étapes d’ajout d’un bloc de référence sont similaires aux étapes d’ajout d’un bloc de référence en surbrillance. La seule différence est l’utilisation des blocs Quote.

Que pensons-nous de l’éditeur WordPress Gutenberg ?

L’éditeur WordPress Gutenberg va au-delà de l’éditeur WordPress classique en termes de personnalisation et de flexibilité. Cependant, l’éditeur Gutenberg a toujours ses avantages et ses inconvénients.

avantage
Codage minimal. Avec une interface de style global, il n’est pas nécessaire d’écrire du code pour personnaliser l’apparence de votre thème. Divers blocs de l’éditeur Gutenberg facilitent également la création et la modification de contenu.
Compatible avec les mobiles. Gutenberg offre une meilleure réactivité que l’éditeur WordPress classique. Pouvoir publier du contenu à tout moment, n’importe où peut améliorer votre flux de travail, surtout si vous voyagez beaucoup.
Moins de plugins. Certains blocs fournissent des fonctionnalités qui remplacent le besoin de plugins supplémentaires. Si vous pensez que les blocs par défaut ne suffisent pas, vous pouvez installer le plugin de bloc pour ajouter plus d’options.
Blocs personnalisés flexibles. Gutenberg permet aux développeurs de créer des blocs personnalisés pour les thèmes et les plugins, ajoutant de la valeur aux modules complémentaires et ouvrant davantage de possibilités de personnalisation.
Les boîtes méta sont prises en charge. Compatible avec la plupart des méta-boîtes, l’éditeur Gutenberg peut créer des champs personnalisés et ajouter des métadonnées aux publications.

défaut

courbe d’apprentissage. Les utilisateurs de WordPress sans expérience préalable en matière de création de pages ou plus habitués à l’ancien éditeur WordPress peuvent prendre un certain temps pour s’habituer à la nouvelle mise en page et au placement des outils.
Problèmes de compatibilité. L’éditeur de blocs n’est disponible que lors de l’utilisation d’un thème basé sur des blocs.

Bien que Gutenberg offre plus de liberté pour personnaliser votre projet, il ne s’agit pas d’un constructeur de pages. De toute évidence, les blocs WordPress manquent de certaines des options de conception proposées par la plupart des constructeurs de pages.

Heureusement, les plugins de blocs peuvent être utilisés pour étendre les fonctionnalités de Gutenberg. Voici quelques-uns des plugins de blocs les plus populaires qui méritent d’être pris en compte.

Empilable. Un plugin de création de page freemium qui fournit une conception de bloc et un kit d’interface utilisateur. Il vous permet de créer des animations de survol et de modifier les paramètres de typographie des blocs.
Quartier Gutenberg. Un autre plugin de bloc gratuit qui fournit des blocs pratiques pour vous aider à créer des tableaux, des taxonomies et des chronologies.
Renard en orbite. Il propose divers outils pour améliorer les taux de conversion, tels que la surveillance de la disponibilité, l’intégration de Google Analytics et le partage d’icônes.
Bloc PublierPress. Un plugin polyvalent gratuit qui fournit 20 nouveaux blocs et un contrôle d’accès aux blocs.

L’installation de plugins pour les blocs WordPress vous offrira une meilleure expérience utilisateur et un flux de travail plus rapide.

En conclusion

L’éditeur Gutenberg introduit une nouvelle façon d’éditer le contenu à l’aide de blocs. Réaliser une édition complète du site et améliorer l’expérience utilisateur fait partie des objectifs de WordPress.

Le nouvel éditeur de section est intégré au logiciel de base de WordPress 5.0 ou version ultérieure. Si vous utilisez toujours une ancienne version de WordPress, installez le plugin Gutenberg pour utiliser l’éditeur.

L’utilisation de blocs facilitera la personnalisation de votre site, car vous pourrez facilement le réorganiser en déplaçant les blocs. Les combinaisons de blocs disponibles vous permettent également de modifier instantanément la disposition.

Les blocs aident également à simplifier vos projets avec des fonctionnalités telles que les blocs réutilisables pour éviter la duplication du travail. De plus, le panneau de styles globaux vous permet de modifier la conception de l’ensemble du site Web sans aucun code CSS.

Enfin, n’hésitez pas à installer le plugin de bloc WordPress. Améliorez votre flux de travail en introduisant de nombreux nouveaux blocs WordPress qui ajouteront plus d’options de conception à votre éditeur.