La création de mises en page en plusieurs colonnes nécessitait auparavant des connaissances en HTML ou l'aide d'un développeur, mais ce n'est plus le cas. ✨
Grâce à nos tests des fonctionnalités d'édition de contenu de WordPress, nous avons trouvé un moyen convivial de diviser votre contenu en colonnes sans toucher à aucun code.
Ces mises en page peuvent rendre vos articles plus faciles à lire et plus attrayants visuellement, surtout lorsque vous comparez des fonctionnalités, listez des avantages et des inconvénients, ou organisez de grands blocs de texte.
Dans ce guide, nous partagerons les méthodes les plus simples que nous avons découvertes pour ajouter du contenu multicolonne à vos articles WordPress.
💡 Réponse rapide : Comment ajouter du contenu multicolonne dans WordPress
Voici un aperçu rapide des méthodes que nous allons aborder pour ajouter des colonnes à vos articles et pages WordPress.
- Utilisation de l'éditeur de blocs : La méthode la plus simple consiste à utiliser le bloc intégré « Colonnes » pour créer des mises en page sans aucun plugin.
- Utilisation de l'éditeur classique : Pour les utilisateurs qui utilisent encore l'ancien éditeur, nous vous montrerons comment utiliser le plugin Column Shortcodes pour ajouter une mise en page en grille.
Pourquoi ajouter du contenu en plusieurs colonnes dans WordPress ?
La principale raison d'ajouter du contenu multicolonne est de rendre vos articles plus faciles à parcourir et visuellement organisés, ce qui aide à maintenir l'engagement des lecteurs.
Bien que les mises en page à colonne unique soient courantes en ligne, les mises en page en grille sont un outil puissant pour améliorer l'expérience utilisateur. Voici les principaux avantages de l'utilisation d'une mise en page multicolonne dans WordPress :
- Améliore la lisibilité : Tout comme les journaux et les magazines, les colonnes divisent les longues lignes de texte, rendant votre contenu plus facile à lire et à parcourir rapidement pour les visiteurs.
- Meilleure organisation : Elles sont parfaites pour organiser les informations côte à côte. C'est idéal pour les comparaisons de produits, les listes d'avantages et d'inconvénients, ou pour afficher des images à côté de descriptions textuelles.
- Met en évidence les informations clés : Vous pouvez utiliser une mise en page en colonnes pour attirer l'attention du lecteur sur les parties les plus importantes de votre article.
- Améliore l'engagement : En rendant votre contenu plus facile à assimiler, vous créez une meilleure expérience utilisateur. Cela peut encourager les visiteurs à passer plus de temps sur votre site.
Cela dit, voyons comment vous pouvez ajouter du contenu multi-colonnes dans l'éditeur de blocs et l'éditeur classique. Vous pouvez simplement cliquer sur les liens ci-dessous pour accéder à la méthode que vous souhaitez utiliser :
- Ajouter du contenu multi-colonnes dans l'éditeur de blocs WordPress – La méthode facile
- Ajouter plusieurs colonnes dans l'ancien éditeur classique de WordPress
- Foire aux questions sur l'ajout de contenu multi-colonnes dans WordPress
Ajouter du contenu multi-colonnes dans l'éditeur de blocs WordPress – La méthode facile
La création de contenu multi-colonnes, également connu sous le nom de contenu en colonnes de grille dans WordPress, est désormais facile car il s'agit d'une fonctionnalité par défaut. L'éditeur de blocs WordPress inclut un bloc Colonnes.
Pour ajouter une mise en page multi-colonnes, vous devez créer un nouvel article ou modifier un article existant. Une fois dans l'éditeur de contenu, cliquez sur l'icône '+' en haut pour ajouter un bloc.
Ensuite, vous devez sélectionner le bloc Colonnes dans l'onglet « Design ».
Ensuite, vous devrez sélectionner le nombre de colonnes et les mises en page que vous souhaitez utiliser pour votre article de blog.
WordPress vous présentera différentes options parmi lesquelles choisir. Par exemple, vous pouvez choisir une mise en page en colonnes 50/50, utiliser une mise en page 33/66, et plus encore.
Après avoir choisi une mise en page, vous pouvez ajouter des blocs à vos colonnes. Le bloc Colonnes vous permet d'ajouter des blocs à l'intérieur de chaque colonne.
Par exemple, vous pouvez sélectionner le bloc Paragraphe et y ajouter du contenu.
Vous pourrez également voir les paramètres du bloc dans la colonne de droite de l'écran d'édition de l'article dans le panneau des réglages. Ici, vous pouvez modifier la largeur des colonnes.
En plus du texte, vous pouvez également ajouter des images et intégrer des vidéos dans les colonnes WordPress.
Placez simplement la souris sur l'une des colonnes et cliquez sur le bouton « + » pour ajouter un bloc. Vous pouvez également ajouter un bloc en tapant « / » suivi du nom du bloc.
Par exemple, nous avons ajouté une image dans une colonne et du texte dans l'autre colonne.
Ajouter plusieurs colonnes dans l'ancien éditeur classique de WordPress
Si vous n'avez pas mis à jour votre WordPress vers Gutenberg et que vous utilisez toujours l'éditeur classique, vous devrez alors installer un plugin séparé pour créer une mise en page en colonnes de grille.
Tout d'abord, installez et activez le plugin Column Shortcodes. Pour des instructions détaillées, suivez notre guide étape par étape sur comment installer un plugin dans WordPress.
📌 Avis de non-responsabilité : Gardez à l'esprit que le plugin n'a pas été testé avec la dernière version de WordPress. Cependant, lorsque nous l'avons testé sur notre site de démonstration, il a bien fonctionné. Si vous n'êtes toujours pas sûr, consultez notre guide pour débutants sur l'utilisation de plugins obsolètes.
Après l'activation, vous pouvez créer un nouvel article ou modifier un ancien. Une fois dans l'éditeur classique, cliquez simplement sur le bouton « [ ] » dans la barre d'outils.
Le plugin vous présentera maintenant une liste de shortcodes de colonnes pour votre article de blog.
Vous pouvez choisir la mise en page que vous souhaitez ajouter à votre blog WordPress. Il existe également des options pour modifier le remplissage des colonnes.
Une fois que vous avez sélectionné un shortcode, il apparaîtra automatiquement dans l'éditeur classique. Par exemple, nous avons choisi le shortcode « one half » pour ce tutoriel.
Vous pouvez ensuite saisir votre contenu entre les shortcodes.
Ensuite, vous pouvez cliquer à nouveau sur l'icône de shortcode « [ ] » pour ajouter un autre shortcode de colonne.
Ajoutons le shortcode « one half (last) » pour afficher deux colonnes côte à côte. À partir de là, il vous suffit d'ajouter votre contenu à l'autre colonne.
Après cela, vous pouvez prévisualiser votre article et le publier.
Voici à quoi cela ressemblait sur notre site de test.
Foire aux questions sur l'ajout de contenu multi-colonnes dans WordPress
Voici quelques questions que nos lecteurs nous ont fréquemment posées concernant l'ajout de contenu multi-colonnes sur leurs sites web :
Comment les colonnes WordPress s'affichent-elles sur les appareils mobiles ?
WordPress s'en charge automatiquement pour vous. Sur les écrans plus petits comme les téléphones portables, les colonnes s'empileront verticalement les unes sur les autres.
Cette conception réactive garantit que votre contenu est toujours lisible et convivial, quel que soit l'appareil.
Puis-je ajuster la largeur d'un bloc de colonne WordPress individuel ?
Oui. Pour ajuster la largeur, cliquez pour sélectionner un bloc Colonne individuel (pas le conteneur parent « Colonnes »). Dans la barre latérale des paramètres du bloc à droite, vous pouvez spécifier une valeur de largeur.
Vous pouvez utiliser des pourcentages (%), des pixels (px) et d'autres unités web pour un contrôle précis.
Que faire si j'ai besoin d'options de mise en page plus avancées ?
Le bloc Colonnes par défaut est excellent pour la plupart des mises en page simples. Cependant, si vous avez besoin d'un contrôle plus avancé sur l'espacement, l'alignement, les paramètres réactifs, ou si vous souhaitez créer des conceptions de grille plus complexes, un plugin de constructeur de pages est la meilleure solution.
Nous vous recommandons d'utiliser un outil comme SeedProd pour une liberté de conception complète par glisser-déposer.
Nous espérons que cet article vous a aidé à apprendre comment ajouter du contenu en plusieurs colonnes dans les articles et les pages WordPress. Vous voudrez peut-être aussi consulter notre guide simple sur comment ajouter une liste de contrôle d'articles de blog dans l'éditeur WordPress et notre tutoriel sur comment ajouter des modèles de contenu dans WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Jiří Vaněk
Super, enfin je sais comment faire dans Gutenberg aussi. C'est d'ailleurs pour ça que j'étais passé à Elementor car je trouvais Gutenberg pas très intuitif. Peut-être que j'étais juste trop paresseux pour l'apprendre. Cependant, dans Elementor, j'ai compris et trouvé cette fonctionnalité tout de suite. Maintenant, je sais comment gérer Gutenberg aussi :). Merci !
Ralph
Merci ! C'était vraiment simple avec votre guide. Utiliser 3 colonnes rendra certainement une partie de mon contenu plus attrayante qu'un mur de texte ennuyeux.
Support WPBeginner
Nous sommes heureux que notre guide ait pu vous aider !
Admin
Nishant Kumar
Vraiment très utile. Je ne savais pas comment ajouter une section de colonnes dans le blog WordPress. Maintenant, j'ai compris.
Support WPBeginner
Glad our guide could help
Admin
Matt
Salut – merci pour cet article vraiment utile. Une question rapide – le texte est-il automatiquement attribué à chacune des (deux) colonnes pour assurer que les colonnes aient la même hauteur sur la page, ou est-ce quelque chose que vous devez tester/gérer lors de la saisie du texte ?
Support WPBeginner
Vous devriez manuellement vous assurer que votre contenu a une longueur identique ou similaire si vous le souhaitiez.
Admin
Sir Newton
S'il vous plaît, comment puis-je faire en sorte que mon site Web de commerce électronique affiche une vue de produit en deux colonnes sur mobile.
Merci
Support WPBeginner
Vous devriez vérifier auprès du support de votre thème ou du plugin e-commerce que vous utilisez pour modifier le style de votre page de magasin.
Admin
Stuart
Bonjour – J'ai besoin de 11 colonnes. Y a-t-il un moyen de dépasser ce que je prévois comme maximum (10) ?
Support WPBeginner
Nous n'avons pas de méthode recommandée pour aller jusqu'à 11 colonnes de large pour le moment. Selon ce que vous souhaitez afficher, vous pourriez envisager de créer un tableau au lieu de colonnes.
Admin
Caite Adamek
Y a-t-il un moyen de transférer automatiquement les colonnes ? Lorsque j'ai configuré mes 2 colonnes, j'ai mis les images dans la 1ère colonne, puis le texte dans la 2ème. J'ai remarqué que la version mobile ne peut pas afficher les 2 colonnes côte à côte, donc les images sont affichées en premier, puis le texte. Je voudrais que le texte soit affiché en premier, puis les images. Dois-je tout retaper, ou y a-t-il un moyen astucieux de changer le contenu des 2 colonnes ?
Support WPBeginner
Pas pour le moment, vous pourriez créer une zone de 2 colonnes sous l'endroit où vous l'avez actuellement et y placer le contenu comme vous le souhaitez, puis supprimer l'original.
Admin
Kimberly Kelley
En utilisant les colonnes multiples (2), les vidéos se chevauchent. Y a-t-il un moyen d'ajuster la largeur maximale des vidéos puisque la seule façon de les ajouter semble être par URL, pas par code d'intégration ?
Support WPBeginner
Vous pourriez vérifier si les vidéos se chevauchent lors de la visualisation en dehors de l'éditeur, sinon, vous pourriez regarder dans la section CSS avancée et définir la largeur en utilisant ce sélecteur : https://014.leahstevensyj.workers.dev/glossary/css/
Admin
Nicole
Y a-t-il un moyen de centrer verticalement les éléments dans une colonne avec les nouveaux blocs/l'éditeur Gutenberg ? Par exemple, je voudrais une image centrée verticalement à gauche et du texte à droite. Disons 30 lignes de texte et une image de 200 px de hauteur – y a-t-il un moyen plus simple que d'insérer et de dimensionner manuellement des blocs d'espacement ?
Support WPBeginner
Pour ce que vous semblez vouloir, vous pourriez utiliser le bloc média et texte plutôt que le bloc colonnes.
Admin
Rob Tait
Salut
Comment puis-je écrire en 1 colonne, puis en 2 colonnes pour le paragraphe suivant, puis revenir à 1 colonne pour le 3ème paragraphe ?
Toute aide serait grandement appréciée ?
Merci
Rob
Ashish
Pourquoi ne pouvons-nous pas simplement utiliser Elementor ou un autre plugin de constructeur de pages similaire ? C'est beaucoup plus facile à utiliser avec tellement de fonctionnalités supplémentaires.
dimiter kirov
Ce plugin n'a pas été mis à jour depuis 3 ans et, pour couronner le tout, il ne fonctionne pas avec le plugin Gutenberg.
Jenny
Bonjour,
J'ai essayé d'ajouter des colonnes à l'une de mes pages et le bouton Colonne avancée n'est pas apparu. J'ai vérifié mes plugins et il était indiqué qu'il était installé. Savez-vous quel pourrait être le problème ?
Merci !
Jenny
Rob Tait
Vous devez installer un éditeur visuel avancé tel que TIny MCE afin de voir le bouton. Il ne s'affichera pas sur l'éditeur visuel standard par défaut. J'ai eu le même problème mais il s'affiche maintenant après avoir installé ce qui précède, qui est gratuit.
J'espère que cela vous aidera
Rob
Dennis
Super. Juste ce que je cherchais et enfin, quelqu'un qui peut tout expliquer étape par étape.
Heather
J'ai installé le plugin et l'ai activé. Il s'affiche comme « activé ». Pourtant, il n'y a pas de bouton. Comment puis-je résoudre ce problème ; je sais déjà comment installer un plugin, donc cette solution n'est pas applicable.
Kirk
J'ai installé le plugin avec un thème gratuit de base, et le bouton de colonne n'est jamais apparu dans mon éditeur de Pages. Je sais que vous n'êtes pas le créateur du plugin, je voulais juste partager notre expérience
om zho
en collant depuis text edit, l'espacement du texte est étrange car il n'y a pas de sélection « format propre » pour les colonnes WP avancées... comment pouvez-vous résoudre ce problème ?
Martine S.
Salut, ça a l'air super ! Mais comment ça rendra sur les téléphones ? J'utilise un plugin similaire pour avoir deux colonnes, une pour le norvégien et une pour l'anglais. Mais quand les gens lisent mon blog via leur téléphone, la deuxième colonne vient juste après la première colonne, donc ça ressemble à un texte complet – dans deux langues différentes !
Joe Nelo
Quel plugin utilisez-vous pour afficher deux colonnes de texte ? J'essaie de faire la même chose pour l'anglais et l'espéranto.
Elizabeth
Comment activez-vous le plugin ??
Support WPBeginner
Salut Elizabeth,
Veuillez consulter notre guide étape par étape sur comment installer un plugin WordPress.
Admin
PB
Y a-t-il un moyen de s'assurer que le texte dans ces colonnes s'affiche comme une liste, c'est-à-dire avec des sauts de ligne forcés entre les éléments plutôt que comme un seul bloc de texte continu ?
Merci d'avance pour vos conseils
Steve Elliott
Y a-t-il un moyen de donner une couleur de fond à ces colonnes ?
Bhagyashree barlingay
Je ne peux pas copier/coller du matériel que j'ai déjà tapé, dans ces colonnes.
Naveed
j'utilise la version 4.5 de wordpress, mais ce plugin n'est pas compatible avec mon thème, puis-je utiliser ce plugin pour mon thème ??
ik
Pouvez-vous ajouter des images à chaque colonne ? Ou pouvez-vous ajouter des boutons d'action à chaque colonne ?
Support WPBeginner
Oui.
Admin
Kate
Les colonnes fonctionnent mais lorsque j'essaie d'intégrer une VIDÉO dans les colonnes, seul le texte du code s'affiche...
Daniel Speraw
Ça a l'air bien quand des colonnes sont ajoutées à la publication, mais quand je la regarde publiée, elle est revenue à 1 colonne centrée. Je l'ai essayé plusieurs fois et dans deux navigateurs. Des idées ?
C'est de loin le plugin le plus simple. Je veux VRAIMENT l'utiliser.
Merci beaucoup,
Daniel
Meshellklip
Pouvez-vous ajouter des images à chaque colonne ? Ou pouvez-vous ajouter des boutons d'action à chaque colonne ?
Sri Harsha Chilakapati
Bonjour,
Mon site utilise le thème Customizr réactif, et je ne veux pas perdre cette réactivité. Puis-je ajouter des colonnes réactives en utilisant ce plugin ?
Chris Xphstos
Ηι!
Y a-t-il un moyen de présenter une mise en page avec des colonnes mais pas une seule publication avec 2-3-4 colonnes, etc. ?
Chaque colonne au sein d'une page sera une publication séparée. Quelque chose comme la mise en page de blog de Joomla...
Support WPBeginner
Pour cela, vous devriez regarder du côté des thèmes WordPress multicolonnes, il existe de nombreux thèmes de ce type.
Admin
Karen
Merci ! Je voulais apprendre à faire ça depuis un moment – tout va bien maintenant ! xx
Debra Torres
C'est exactement ce dont j'avais besoin ! J'essayais d'utiliser des tableaux pour les colonnes et j'étais tellement frustré. Merci, merci, merci !
Mark Corder
Je dois dire – si vous avez besoin d'utiliser plusieurs colonnes régulièrement, cela semble être une excellente solution même si vous CONNAISSEZ le HTML/CSS ! J'adore le fait qu'ils aient inclus un point d'arrêt dans les Options pour s'adapter aux conceptions réactives…