Comment ajouter plusieurs colonnes dans WordPress (2 méthodes)

La pratique consistant à organiser le contenu en colonnes remonte aux premiers jours de l'imprimerie. Ce format peut être un moyen polyvalent d'organiser votre texte, vos images, etc. Cependant, ajouter plusieurs colonnes dans WordPress et obtenir leur bon placement peut être un peu délicat.

Heureusement, il n'a pas à être ainsi. Vous pouvez maintenant utiliser l'éditeur de blocs pour ajouter facilement plusieurs colonnes à vos articles et pages WordPress en quelques étapes courtes.

Vous pouvez également réaliser cette mise en page en utilisant l'éditeur classique et un plugin de création de page.

Dans ce didacticiel, nous verrons comment ajouter plusieurs colonnes dans WordPress.

Commençons!

Pourquoi utiliser une mise en page multi-colonnes

Du choix du bon thème à l'ajout de polices personnalisées, la personnalisation de la conception de votre site est essentielle pour établir votre marque. Vos présentations de publication et de page font également partie de ce puzzle. Expérimenter différentes options de mise en forme peut être un moyen intéressant d'ajouter une variété structurelle à votre contenu.

Puisqu'il n'y a pas de format unique qui soit le meilleur pour la lisibilité, vous pouvez faire preuve de créativité et trouver un look qui vous convient. Vous pouvez le changer de page en page pour l'adapter à différents types de contenu et créer un site WordPress composé de pages avec différentes mises en page, comme dans cette démo :

Les colonnes sont un format particulièrement polyvalent. Si vous cherchez à utiliser votre espace de manière économique, ils constituent un moyen simple de segmenter votre texte.

Vous pouvez également utiliser des colonnes pour associer différents widgets de manière cohérente, comme le montre le thème BuddyBoss :

Ou, vous pourriez simplement être intéressé par l'utilisation d'un format flexible qui peut être supprimé ou remodelé en fonction de vos besoins. Quel que soit votre raisonnement, les colonnes peuvent ajouter de la variété et de l'organisation à votre site.

Comment ajouter plusieurs colonnes dans WordPress (2 méthodes simples)

Au début de WordPress, les utilisateurs devaient avoir une connaissance pratique du HTML et être capables de modifier leur code en toute confiance pour ajouter des colonnes à leurs publications. À l'époque, la rédaction et l'édition de contenu n'étaient pas l'expérience la plus conviviale.

Heureusement, il existe maintenant deux méthodes simples pour ajouter des colonnes dans WordPress - aucun code HTML requis.

L'éditeur de blocs est livré avec une fonction de colonne intégrée intuitive, et ceux qui préfèrent l'éditeur classique seront heureux d'apprendre que vous pouvez toujours éviter de coder manuellement les colonnes à l'aide d'un plugin.

Voyons maintenant les deux méthodes.

Première méthode : utiliser la fonctionnalité native de l'éditeur de blocs

Nous allons commencer par ajouter plusieurs colonnes à l'aide de l'éditeur de blocs (Gutenberg). La nouvelle interface de création de contenu WordPress par défaut offre une multitude de fonctionnalités utiles, toutes axées sur des blocs de contenu faciles à déplacer.

L'une de ces fonctionnalités est le bloc Columns, qui porte bien son nom, qui vous aide à créer autant de colonnes que vous le souhaitez.

Pour commencer, saisissez « colonnes » dans la zone de recherche de l'éditeur de blocs que vous pouvez ouvrir en cliquant sur le bouton +. Alternativement, vous pouvez simplement cliquer sur l'écran et commencer à taper "/ colonnes" pour afficher la même option.

Cela appellera une fenêtre dans laquelle vous pourrez choisir une disposition de colonne :

Commencer avec les deux colonnes par défaut et ajuster les paramètres ultérieurement est également une option.

Une fois que vous avez spécifié combien de sections vous voulez et comment vous voulez les diviser, vous pouvez faire glisser et déposer le bloc où vous le souhaitez.

Ensuite, vous pouvez imbriquer d'autres blocs dans le bloc Colonnes. Ils peuvent tous être des blocs de texte, ou vous pouvez le secouer. Essayez d'améliorer une colonne de texte en la plaçant à côté d'une colonne d'image ou de calendrier pour la faire ressortir :

N'ayez pas peur de profiter de la flexibilité de l'éditeur en mélangeant et en faisant correspondre les éléments.

Après cela, vous pouvez revenir aux paramètres du bloc Colonnes et ajuster le rapport de largeur en fonction de vos besoins. Chaque colonne individuelle peut être ajustée en fonction du type de look que vous recherchez.

Grâce à l'interface visuelle de l'éditeur de blocs, votre travail sur le backend se traduira assez directement sur le frontend. Pour référence, voici à quoi ressemble notre exemple après sa publication :

Une fois que vous maîtrisez les bases, il y a plus à explorer avec les colonnes.

Si vous recherchez plus de fonctionnalités avec l'éditeur de blocs, vous pouvez envisager de télécharger un plug-in de bloc d'amélioration des fonctionnalités et d'expérimenter de nouvelles combinaisons de contenu.

Deuxième méthode : utiliser l'éditeur classique et le générateur de pages de SiteOrigin

Si vous êtes plutôt traditionaliste et que vous utilisez toujours l'éditeur classique, vous pouvez également ajouter plusieurs colonnes à vos articles et pages sans code. Tout ce dont vous aurez besoin est un plugin. Il y a beaucoup d'options qui peuvent faire le travail, donc la première chose que vous devrez faire est d'en choisir une.

Comme je suis un grand fan du plugin Page Builder by SiteOrigin, je vais utiliser celui-ci pour créer une mise en page multi-colonnes dans l'éditeur classique :

Page Builder est une option gratuite solide qui utilise une interface intuitive par glisser-déposer et compte plus d'un million d'installations actives.

Une fois que vous avez installé et activé le plugin sur votre site, accédez à sa page de paramètres en cliquant sur le menu Paramètres > Page Builder dans la barre latérale gauche.

Ici, sélectionnez l'onglet Général et cochez l'option Utiliser l'éditeur classique pour les nouveaux articles :

Notez que vous devez également avoir installé et activé le plugin Classic Editor sur votre site pour que cette option fonctionne.

Désormais, vous pouvez ajouter des colonnes en ouvrant une publication existante ou en en créant une nouvelle et en accédant à l'onglet Page Builder dans le coin supérieur droit :

Ici, cliquez sur le bouton Ajouter une ligne qui créera une nouvelle ligne où vous pourrez ajouter vos colonnes :

Cela ouvrira une interface dans laquelle vous pourrez ajuster certains paramètres initiaux, notamment le nombre, le ratio et la direction de vos colonnes :

Spécifiez le nombre de colonnes et décidez quels seront leurs ratios. Ensuite, cliquez sur Insérer pour les placer dans votre message.

Semblable à l'éditeur de blocs, le plugin Page Builder by SiteOrigin vous permet d'insérer différents widgets dans la structure des colonnes.

Sélectionnez la colonne à laquelle vous souhaitez ajouter le widget, puis cliquez sur le bouton Ajouter un widget , ce qui fera apparaître le panneau suivant :

Choisissez l'élément que vous souhaitez incorporer et remplissez-le avec votre contenu.

Le backend de votre message devrait maintenant ressembler à ceci :

Finalisez vos modifications.

Cela se traduira par un résultat sur le frontend qui ressemblera à ceci :

Essayez de jouer avec différentes combinaisons de widgets pour obtenir un look unique pour votre site. C'est un processus facile que vous pouvez inverser à tout moment, alors n'ayez pas peur de casser le moule et de faire preuve de créativité.

Conclusion

L'ajout de colonnes à votre site WordPress peut aider à garder votre mise en page fraîche et attrayante. Bien que le processus puisse parfois être un peu difficile, il existe des méthodes simples que vous pouvez utiliser pour le rendre plus facile.

Dans ce didacticiel, nous avons couvert deux méthodes étape par étape pour ajouter plusieurs colonnes dans WordPress :

1. Utilisation du bloc Colonnes intégré de l'éditeur de blocs
2. Installer un plugin tel que Page Builder pour l'utiliser avec l'éditeur classique

Quelle est votre façon préférée d'ajouter des colonnes dans WordPress ? Faites-nous savoir dans la section commentaires ci-dessous!