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 placement correct peut être un peu délicat.
Heureusement, il ne doit pas en être ainsi. Vous pouvez désormais 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 à l’aide de l’éditeur classique et d’un plugin de création de page.
Dans ce tutoriel, nous verrons comment ajouter plusieurs colonnes dans WordPress.
Commençons!
Pourquoi utiliser une mise en page à plusieurs 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 mises en page de publication et de page font également partie de ce puzzle. Expérimenter différentes options de formatage peut être un moyen intéressant d’ajouter de la variété structurelle à votre contenu.
Puisqu’il n’y a pas de format unique qui soit meilleur pour la lisibilité, vous pouvez faire preuve de créativité et trouver un look qui vous convient. Vous pouvez passer d’une page à l’autre 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 facile 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 en toute confiance leur code 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 désormais 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 le codage manuel des colonnes à l’aide d’un plugin.
Voyons maintenant les deux méthodes.
Première méthode : utilisez 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 toute une série de fonctionnalités utiles, tous axés sur des blocs de contenu faciles à déplacer.
L’une de ces fonctionnalités est le bloc bien nommé Columns, qui vous aide à créer autant de colonnes que vous le souhaitez.
Pour commencer, entrez « Colonnes » dans le champ 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 colonnes :
Commencer par les deux colonnes par défaut et ajuster les paramètres ultérieurement est également une option.
Une fois que vous avez spécifié le nombre de sections que vous souhaitez et comment vous souhaitez 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 image ou d’une colonne 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 des éléments.
Après cela, vous pouvez revenir aux paramètres du bloc Colonnes et ajuster le rapport de largeur pour l’adapter à 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 par 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 améliorant les fonctionnalités et d’expérimenter de nouvelles combinaisons de contenu.
Deuxième méthode : utilisez l’éditeur classique et le générateur de pages de SiteOrigin
Si vous êtes plutôt traditionaliste et 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 de Générateur de pages par SiteOrigin plugin, 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, rendez-vous sur sa page de paramètres en cliquant sur le bouton Paramètres > Générateur de pages menu dans la barre latérale gauche.
Ici, sélectionnez le Général onglet et vérifiez le Utiliser l’éditeur classique pour les nouveaux articles option:
Notez que vous devez également avoir le Éditeur classique plugin installé et activé sur votre site pour que cette option fonctionne.
Maintenant, vous pouvez ajouter des colonnes en ouvrant un article existant ou en en créant un nouveau et en naviguant vers le Générateur de pages onglet en haut à droite :
Ici, cliquez sur le Ajouter une rangée bouton 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 rapport 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 bouton, 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 front-end qui ressemble à ceci :
Essayez de jouer avec différents appariements 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 briser le moule et de faire preuve de créativité.
Conclusion
L’ajout de colonnes à votre site WordPress peut vous 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 :
- Utilisation du bloc Colonnes intégré de l’éditeur de blocs
- Installer un plugin tel que Générateur de pages 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!
