Dans ce tutoriel, vous trouverez des informations sur\u00a0:<\/p>\n\n\n\n
- A quoi servent les colonnes<\/a><\/li>
- Fonctionnement des colonnes dans l'ancien \u00e9diteur<\/a><\/li>
- Comment faire des colonnes dans WordPress sans plugin (dans l'\u00e9diteur de blocs)<\/a><\/li>
- Param\u00e8tres de bloc de colonnes de base<\/a><\/li>
- Comment travailler avec le bloc de colonnes WordPress<\/a><\/li>
- Comment modifier des blocs imbriqu\u00e9s<\/a><\/li>
- Avantages du bloc de colonnes<\/a><\/li><\/ul>\n\n\n\n
<\/span><\/a>A quoi servent les colonnes<\/span><\/h3>\n\n\n\n
Les colonnes sur le site Web peuvent avoir plusieurs applications. Tout d'abord, ils peuvent rendre le contenu bien organis\u00e9, plus lisible et plus facile \u00e0 parcourir. En organisant le contenu en colonnes, vous pouvez mettre en \u00e9vidence des informations ou des param\u00e8tres importants.<\/p>\n\n\n\n
Par exemple, vous pouvez utiliser la mise en page multi-colonnes pour pr\u00e9senter vos services. Ajoutez-y une image illustrative, une description ou un bouton. Vous pouvez bien s\u00fbr rendre l'image cliquable.<\/p>\n\n\n\n
![\"Mise](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-services.png\")
<\/a>Mise en page multi-colonnes avec services<\/figcaption><\/figure><\/div>\n\n\n\n Comme pour les services, vous pouvez utiliser des colonnes sur WordPress pour afficher des produits ou des cat\u00e9gories de produits. C'est id\u00e9al si vous avez un site Web d'entreprise simple.<\/p>\n\n\n\n
![\"Mise](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shop-cat.png\")
<\/a>Colonnes utilis\u00e9es pour afficher les produits et les cat\u00e9gories<\/figcaption><\/figure><\/div>\n\n\n\n Dans les articles de blog, vous pouvez utiliser des colonnes pour s\u00e9parer le contenu. Vous pouvez placer du texte, des puces ou des images c\u00f4te \u00e0 c\u00f4te.<\/p>\n\n\n\n
![\"Contenu](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-post-example.png\")
<\/a>Utiliser des colonnes pour s\u00e9parer le contenu<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Fonctionnement des colonnes dans l'ancien \u00e9diteur<\/span><\/h3>\n\n\n\n
Avant WordPress 5+, si vous vouliez cr\u00e9er du contenu multi-colonnes, vous deviez utiliser des tableaux. C'\u00e9tait beaucoup plus difficile que dans le nouvel \u00e9diteur. De plus, il y avait g\u00e9n\u00e9ralement un probl\u00e8me avec les styles et l'affichage des tableaux sur les appareils mobiles. Comment \u00e7a fonctionnait avant ?<\/p>\n\n\n\n
Vous avez eu plusieurs options sur la fa\u00e7on de cr\u00e9er des colonnes sur le site Web WordPress\u00a0:<\/p>\n\n\n\n
1. Ins\u00e9rez manuellement le code HTML dans l'\u00e9diteur de texte<\/b><\/p>\n\n\n\n
<table>\n <tr>\n <td><\/td>\n <td><\/td>\n <\/tr>\n<\/table><\/pre>\n\n\n\n
Cette approche \u00e9tait principalement utilis\u00e9e par les d\u00e9veloppeurs, qui pouvaient rapidement cr\u00e9er une table ou une colonne en fonction de leurs besoins. L'inconv\u00e9nient \u00e9tait que tous les th\u00e8mes WordPress ne pouvaient pas bien g\u00e9rer les colonnes. Les tableaux n'\u00e9taient g\u00e9n\u00e9ralement pas parfaits et l'utilisateur moyen ne pouvait pas facilement r\u00e9soudre tous les probl\u00e8mes possibles.<\/p>\n\n\n\n
2. Autoriser les tableaux dans l'\u00e9diteur WordPress<\/b><\/p>\n\n\n\n
\u00c9tant donn\u00e9 que WordPress utilisait l'\u00e9diteur TinyMCE, il \u00e9tait possible d'autoriser les fonctions \u00e0 modifier les tableaux. Si vous souhaitez en savoir plus, vous pouvez trouver tous les d\u00e9tails dans ce forum<\/a>. Si vous faites la m\u00eame chose pour nos th\u00e8mes AIT, les tableaux fonctionneront correctement.<\/p>\n\n\n\n
3. Utilisation de l'\u00e9l\u00e9ment Columns dans les th\u00e8mes AIT<\/b><\/p>\n\n\n\n
Si vous utilisez l'un de nos anciens th\u00e8mes WordPress, vous connaissez certainement notre \u00e9l\u00e9ment Columns. Cet \u00e9l\u00e9ment peut \u00eatre utilis\u00e9 pour ajouter des colonnes \u00e0 l'int\u00e9rieur des pages. C'est un \u00e9l\u00e9ment commandable, ce qui signifie que vous pouvez le placer partout o\u00f9 vous en avez besoin. L'avantage est sa variabilit\u00e9 \u00e0 l'int\u00e9rieur des pages.<\/p>\n\n\n\n
![\"\u00c9l\u00e9ment](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/ait-columns-element.png\")
<\/a>Colonnes d'\u00e9l\u00e9ments commandables - vous pouvez l'utiliser dans n'importe quel th\u00e8me AIT<\/figcaption><\/figure><\/div>\n\n\n\n 4. T\u00e9l\u00e9chargez le plugin tiers pour g\u00e9rer les tables<\/b><\/p>\n\n\n\n
Une autre solution pour cr\u00e9er des colonnes dans les publications et les pages WordPress consistait \u00e0 t\u00e9l\u00e9charger l'un des plugins disponibles pour cr\u00e9er des tableaux. Ces plugins permettent d'ajouter des colonnes\/tables en quelques clics sans aucun codage. Il \u00e9tait \u00e9galement possible de l'utiliser par des utilisateurs moins exp\u00e9riment\u00e9s.<\/p>\n\n\n\n
<\/span><\/a>Comment faire des colonnes dans WordPress sans plugin (dans l'\u00e9diteur de blocs)<\/span><\/h3>\n\n\n\n
Gr\u00e2ce au nouvel \u00e9diteur de blocs, la cr\u00e9ation de colonnes est devenue extr\u00eamement facile. Si vous utilisez toujours l'ancien WordPress, c'est maintenant le bon moment pour mettre \u00e0 jour vers la derni\u00e8re version. Vous pourrez ajouter et g\u00e9rer des colonnes simplement, en quelques clics gr\u00e2ce au bloc Colonnes.<\/p>\n\n\n\n
Ce bloc est un changement bienvenu pour tous ceux qui veulent travailler avec du contenu multi-colonnes, pr\u00e9senter des produits ou \u00e9crire un blog et qui n'ont pas d'exp\u00e9rience en programmation.<\/p>\n\n\n\n
Voyons comment ajouter un bloc Columns et comment cr\u00e9er des colonnes dans WordPress sans plugin :<\/p>\n\n\n\n
- La premi\u00e8re option consiste \u00e0 cliquer sur "+" dans la barre sup\u00e9rieure et \u00e0 s\u00e9lectionner le bloc de colonnes parmi les blocs disponibles.<\/li>
- La deuxi\u00e8me option consiste \u00e0 cliquer sur "+" n'importe o\u00f9 dans l'\u00e9diteur.\n<\/li><\/ul>\n\n\n\n
![\"Ajoutez](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-add.png\")
<\/a>Ajout de colonnes dans WordPress en cliquant sur \u00ab + \u00bb<\/figcaption><\/figure><\/div>\n\n\n\n ![\"Ajouter](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shortcut.gif\")
<\/a>Ajout de colonnes dans WordPress \u00e0 l'aide de la barre oblique "\/"<\/figcaption><\/figure><\/div>\n\n\n\n <\/span>Dispositions pr\u00e9d\u00e9finies du bloc de colonnes WordPress (NOUVEAU \u00e0 partir de WP 5.3)<\/span><\/h4>\n\n\n\n
La derni\u00e8re version a apport\u00e9 d'\u00e9normes am\u00e9liorations dans les param\u00e8tres des colonnes. Tout d'abord, des styles de mise en page par d\u00e9faut sont disponibles. Qu'est-ce que \u00e7a veut dire?<\/p>\n\n\n\n
Les utilisateurs peuvent choisir leur mise en page et leur style d'alignement lors du processus d'ajout d'un nouveau bloc \u00e0 la zone de contenu. Les mises en page pr\u00e9d\u00e9finies peuvent \u00eatre tr\u00e8s utiles, en particulier pour les utilisateurs qui n'ont pas de comp\u00e9tences WordPress avanc\u00e9es. Cette fonctionnalit\u00e9 repr\u00e9sente comment nous imaginons la mani\u00e8re de cr\u00e9er des colonnes dans WordPress (sans plugin ni aucun autre module compl\u00e9mentaire).<\/p>\n\n\n\n
![\"Dispositions](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wordpress-columns.jpg\")
Options de mise en page pr\u00e9d\u00e9finies<\/figcaption><\/figure>\n\n\n\n <\/span><\/p>\n\n\n\n
Si vous ne souhaitez pas choisir la mise en page pr\u00e9d\u00e9finie dans le bloc de colonnes WordPress, ignorez-le simplement. Apr\u00e8s avoir saut\u00e9 cette \u00e9tape, le contenu sera s\u00e9par\u00e9 en 2 parties identiques\/deux colonnes individuelles pouvant \u00eatre modifi\u00e9es.<\/p>\n\n\n\n
![\"Bloc](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns.png\")
<\/a>Bloc de colonnes avec 2 zones par d\u00e9faut (colonnes) que vous pouvez modifier<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Colonnes Bloquer les param\u00e8tres de base<\/span><\/h4>\n\n\n\n
Le bloc de colonnes WordPress lui-m\u00eame n'a pas beaucoup d'options. Pourquoi est-ce comme \u00e7a, nous vous expliquerons plus tard. Dans la barre sup\u00e9rieure, vous pouvez modifier l'alignement en large ou pleine largeur. Vous pouvez modifier cet alignement s'il est pris en charge par votre th\u00e8me actif.<\/p>\n\n\n\n
![\"Barre](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-toolbar.png\")
<\/a>Barre d'outils sup\u00e9rieure avec options d'alignement<\/figcaption><\/figure><\/div>\n\n\n\n Le param\u00e8tre de bloc de colonnes le plus important est le nombre de colonnes dans la barre lat\u00e9rale de l'inspecteur sur le c\u00f4t\u00e9 droit. Par d\u00e9faut, il y a 2 colonnes, mais vous pouvez augmenter ce nombre \u00e0 6. Vous pouvez le modifier \u00e0 l'aide de la souris ou saisir un nombre. \u00c0 quoi cela ressemble, vous le verrez imm\u00e9diatement apr\u00e8s avoir augment\u00e9 ou diminu\u00e9 les colonnes. Le bloc se change dynamiquement en fonction du curseur.<\/p>\n\n\n\n
![\"Modification](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-count.gif\")
<\/a>D\u00e9placez-vous avec le curseur pour modifier le nombre de colonnes selon vos besoins<\/figcaption><\/figure><\/div>\n\n\n\n C'est tr\u00e8s pratique car vous modifiez litt\u00e9ralement le nombre de colonnes en quelques secondes sans aucune modification difficile des param\u00e8tres ou du codage.<\/p>\n\n\n\n
Comme pour les autres blocs de l'\u00e9diteur WordPress, vous pouvez \u00e9galement ins\u00e9rer une classe CSS personnalis\u00e9e dans le bloc Colonnes.<\/p>\n\n\n\n
<\/span>Appender de blocs pour un travail plus fluide avec les blocs<\/span><\/h4>\n\n\n\n
Le bloc de colonnes est sp\u00e9cial car vous pouvez cr\u00e9er plusieurs blocs avec. Jusqu'\u00e0 la sortie de la nouvelle version, il \u00e9tait assez difficile de travailler avec des blocs individuels. Lorsque vous vouliez ajouter un bloc, vous ne saviez pas exactement o\u00f9 cliquer. Gr\u00e2ce \u00e0 Block appender (et sa diff\u00e9renciation par la couleur d'arri\u00e8re-plan), il est plus facile d'ins\u00e9rer du contenu dans la bonne colonne.<\/p>\n\n\n\n
![\"Bloquer](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wp-columns-block-appender.jpg\")
Bloquer l'annexeur avec la couleur d'arri\u00e8re-plan<\/figcaption><\/figure>\n\n\n\n <\/span><\/a>Comment travailler avec le bloc de colonnes WordPress<\/span><\/h3>\n\n\n\n
Le bloc Beauty of Columns est que chaque colonne peut imbriquer d'autres blocs. Il peut s'agir d'un paragraphe, d'un bloc d'images ou d'un bloc de boutons. Le nombre maximum de colonnes est de 6, vous pouvez donc cr\u00e9er du contenu multi-colonnes selon vos besoins. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, pour pr\u00e9senter les produits, vous pouvez ajouter l'image du produit, le nom, le prix et le bouton c\u00f4te \u00e0 c\u00f4te.<\/p>\n\n\n\n
![\"Diff\u00e9rents](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-blocks.png\")
<\/a>Avec le bloc Colonnes, vous pouvez pr\u00e9senter diff\u00e9rents types de contenu c\u00f4te \u00e0 c\u00f4te<\/figcaption><\/figure><\/div>\n\n\n\n Vous pouvez \u00e9galement utiliser plusieurs blocs de colonnes les uns sous les autres pour cr\u00e9er une grille. Vous pouvez l'utiliser pour pr\u00e9senter vos services ou promouvoir des fonctionnalit\u00e9s importantes.<\/p>\n\n\n\n
![\"Effet](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-features.png\")
<\/a>Effet de grille des blocs Colonnes plac\u00e9s les uns sous les autres<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Modification des blocs imbriqu\u00e9s<\/span><\/h4>\n\n\n\n
Comme nous l'avons d\u00e9j\u00e0 mentionn\u00e9, vous pouvez imbriquer d'autres blocs dans des colonnes. Chaque bloc imbriqu\u00e9 a tous ses param\u00e8tres disponibles. Cela signifie que si vous ajoutez un bloc Image dans la colonne, vous pouvez le modifier exactement de la m\u00eame mani\u00e8re qu'en mode autonome. Bloc d'images<\/a>.<\/p>\n\n\n\n
![\"Modification](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-image-block.png\")
<\/a>Param\u00e8tres disponibles pour le bloc Image imbriqu\u00e9 dans le bloc Colonnes<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Conclusion\u00a0: les avantages du bloc de colonnes<\/span><\/h3>\n\n\n\n
La sortie de l'\u00e9diteur de blocs WordPress et la disponibilit\u00e9 de l'utilisation de colonnes dans les pages et les publications ont consid\u00e9rablement simplifi\u00e9 la fa\u00e7on dont les utilisateurs peuvent travailler avec le contenu. Gr\u00e2ce au bloc de colonnes WordPress, il n'est plus important d'utiliser des solutions tierces ou d'\u00e9crire du code HTML. L'ajout ou la suppression de colonnes est possible en quelques clics. Tout est tr\u00e8s intuitif et rapide aussi pour les utilisateurs moins technophiles.<\/p>\n\n\n\n
Votre contenu dans la disposition multi-colonnes sera bien align\u00e9 dans la grille. Il aura \u00e9galement fi\u00e8re allure dans la version r\u00e9active tout de suite.<\/p>\n\n\n\n
Nous travaillions dur sur le nouveau th\u00e8me WordPress Citadela, sp\u00e9cialement d\u00e9velopp\u00e9 pour l'\u00e9diteur de blocs WordPress. En savoir plus sur le th\u00e8me Citadela et les packs de mise en page disponibles.<\/p>\n
\n\nTable des mati\u00e8res<\/p>\n<\/span><\/div>\n
- Fonctionnement des colonnes dans l'ancien \u00e9diteur<\/a><\/li>