Comment afficher les widgets WordPress en colonnes

Les widgets vous permettent d'ajouter du contenu dynamique à des zones que vous ne pouvez pas modifier avec l'éditeur de contenu WordPress standard. Les utilisateurs ajoutent souvent des widgets à la barre latérale, mais vous pouvez les afficher dans d'autres zones en plusieurs colonnes.

Cette approche vous permet d'organiser et de présenter le contenu plus efficacement, rendant votre site Web visuellement attrayant et plus facile à naviguer.

Chez WPBeginner, nous avons utilisé le pied de page de notre site Web pour améliorer l'expérience utilisateur et stimuler l'engagement. En organisant soigneusement plusieurs widgets en colonnes, nous pouvons présenter nos marques, offrir un accès facile à des outils gratuits, fournir des liens vers des ressources importantes et encourager l'exploration de notre site Web.

Dans cet article, nous vous montrerons comment afficher facilement des widgets WordPress en colonnes.

Pourquoi afficher des widgets WordPress en colonnes ?

Les widgets sont un excellent moyen d'ajouter des galeries d'images, des flux de médias sociaux, des calendriers, des citations aléatoires, des articles populaires et d'autres contenus dynamiques à votre site Web WordPress.

Cependant, si vous ajoutez beaucoup de widgets, cela peut devenir confus et encombré.

Si cela se produit, nous vous recommandons d'organiser vos widgets en colonnes. Cela vous permet d'afficher beaucoup de contenu de manière structurée. Vous pouvez même ajouter des sous-titres aux colonnes pour aider les visiteurs à trouver plus rapidement ce qu'ils recherchent.

Dans cette optique, voyons comment vous pouvez afficher les widgets en colonnes. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Vérifiez si votre thème WordPress possède un pied de page prêt pour les widgets

Certains thèmes WordPress ont plusieurs zones prêtes pour les widgets dans le pied de page. Dans ce cas, chaque zone apparaîtra comme une colonne distincte.

C'est parfait si vous souhaitez lister des informations ou des liens dans le pied de page de votre site Web. Par exemple, vous pourriez afficher vos coordonnées, une liste de tous les produits de votre boutique WooCommerce, ou les liens les plus importants de votre site Web.

Pour plus d'idées, veuillez consulter notre liste de contrôle des éléments à ajouter à la zone de pied de page WordPress.

Pour vérifier si votre thème possède plusieurs zones prêtes pour les widgets dans le pied de page, accédez à Apparence » Widgets dans le tableau de bord WordPress.

Ici, recherchez les zones étiquetées « Pied de page » ou similaire.

Le thème ci-dessus a deux zones prêtes pour les widgets, nous pouvons donc les utiliser pour afficher les widgets en colonnes.

Cliquez simplement pour développer l'une de ces zones et commencez à ajouter les widgets que vous souhaitez afficher. Pour des instructions plus détaillées, veuillez consulter notre guide sur la façon d'ajouter et d'utiliser des widgets dans WordPress.

Une fois cela fait, cliquez pour développer la zone de pied de page prête pour les widgets suivante, puis ajoutez les widgets que vous souhaitez afficher dans cette colonne.

Répétez simplement ces étapes pour chaque zone de pied de page.

Lorsque vous avez terminé d'ajouter des widgets, n'oubliez pas de cliquer sur le bouton « Mettre à jour » pour enregistrer vos modifications. Vous pouvez maintenant visiter votre site web WordPress et faire défiler jusqu'au pied de page pour voir vos widgets organisés en colonnes.

Méthode 2 : Utilisez l'éditeur de pages et d'articles (fonctionne avec tous les thèmes)

Une autre option consiste à utiliser l'éditeur de blocs WordPress par défaut pour ajouter des colonnes à vos pages et articles. Cela vous permet de contrôler exactement où les widgets apparaissent sur votre site, y compris à l'intérieur du contenu de l'article.

C'est aussi une bonne option si vous souhaitez afficher des widgets uniques sur chaque page.

Cependant, vous devrez ajouter manuellement les widgets à chaque page et article. Cela dit, cette méthode peut prendre beaucoup de temps, surtout si vous souhaitez afficher les mêmes widgets sur chaque page.

Pour utiliser cette méthode, ouvrez la page ou l'article où vous souhaitez ajouter des widgets en colonnes. Ensuite, cliquez sur le bouton « + » et tapez « Colonnes ».

Lorsque le bon bloc apparaît, faites-le glisser et déposez-le sur votre mise en page.

Vous pouvez maintenant choisir le nombre de colonnes que vous souhaitez afficher et l'espace que chaque colonne doit occuper.

Par exemple, dans l'image suivante, nous créons trois colonnes qui occupent chacune 33 % de l'espace disponible.

Une fois cela fait, cliquez sur l'icône « + » dans la première colonne.

Dans la fenêtre contextuelle qui apparaît, sélectionnez le widget que vous souhaitez ajouter à cette colonne.

Vous pouvez personnaliser le widget à l'aide des paramètres du menu de droite. Par exemple, vous pourriez changer la couleur d'arrière-plan, ajouter des liens ou changer la taille de la police.

Vous pouvez également utiliser des blocs pour créer des sous-titres, des listes et d'autres contenus. Cela peut ajouter une structure et un contexte supplémentaires à vos widgets.

Répétez simplement ces étapes pour ajouter d'autres widgets aux colonnes.

Lorsque vous êtes satisfait de la configuration des colonnes, cliquez sur « Mettre à jour » ou « Publier » pour rendre les colonnes et les widgets actifs.

Méthode 3 : Créez un thème WordPress personnalisé (entièrement personnalisable)

Bien qu'il soit possible d'organiser et d'afficher des widgets en plusieurs colonnes à l'aide des outils intégrés de WordPress, vous pourriez parfois avoir besoin de plus de contrôle sur la mise en page.

Vous pourriez également vouloir ajouter des colonnes à de belles pages de destination ou pages de vente qui ont un design entièrement personnalisé.

Dans ce cas, nous vous recommandons d'utiliser SeedProd.

SeedProd est le meilleur plugin de création de pages WordPress du marché et vous permet de concevoir votre thème sans écrire une seule ligne de code. Cela signifie que vous pouvez ajouter autant de colonnes et de widgets que vous le souhaitez à n'importe quelle zone de votre site web.

SeedProd dispose également d'une bibliothèque croissante de kits de sites modèles professionnels que vous pouvez ajouter à votre site en un seul clic.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Note : Il existe une version gratuite de SeedProd qui vous permet de créer des pages personnalisées, y compris des pages de maintenance et de bientôt disponibles, quel que soit votre budget. Cependant, dans ce guide, nous utiliserons le plugin premium car il est livré avec le constructeur de thèmes. Sachez simplement que vous aurez besoin du plan SeedProd Pro ou supérieur pour utiliser le constructeur de thèmes.

Après l'activation, rendez-vous sur SeedProd » Paramètres et entrez votre clé de licence.

Vous pouvez trouver ces informations dans votre compte sur le site Web de SeedProd. Après cela, cliquez sur le bouton « Vérifier la clé ».

Une fois cela fait, rendez-vous sur la page SeedProd » Constructeur de thèmes et cliquez sur le bouton « Kits de modèles de thèmes ».

Vous verrez maintenant la bibliothèque de kits de sites Web de SeedProd.

Pour jeter un coup d'œil plus approfondi à n'importe quel modèle, survolez-le simplement avec votre souris, puis cliquez sur l'icône de la loupe lorsqu'elle apparaît.

Cela ouvre le kit de modèles dans un nouvel onglet.

Comme il s'agit d'un kit de site Web complet, vous pouvez voir plus de pages et de conceptions en cliquant sur les différents liens, boutons et éléments de menu.

SeedProd propose des kits de modèles pour différentes industries et niches comme les sites Web de restaurants, les blogs de voyage, les sociétés de conseil en marketing, et plus encore.

Lorsque vous trouvez un kit de modèles que vous souhaitez utiliser, survolez-le simplement, puis cliquez sur l'icône de coche lorsqu'elle apparaît.

SeedProd ajoutera maintenant tous les différents modèles au tableau de bord WordPress.

Pour jeter un coup d'œil plus approfondi, allez sur SeedProd » Constructeur de thèmes. Vous pourriez voir des options légèrement différentes en fonction du kit que vous utilisez.

Survolez simplement le modèle où vous souhaitez ajouter les colonnes de widgets, puis cliquez sur le lien « Modifier la conception ».

Par exemple, si vous vouliez afficher des colonnes de widgets dans la zone du pied de page, vous devriez alors modifier le modèle du pied de page.

Cela charge l'éditeur SeedProd avec le modèle à droite de l'écran.

Sur le côté gauche, vous verrez un menu avec différentes options.

La plupart des kits sont déjà livrés avec des blocs intégrés. Pour personnaliser un bloc, cliquez simplement pour le sélectionner dans l'aperçu de la page, puis apportez les modifications dans le menu de gauche.

Par exemple, si vous vouliez remplacer un espace réservé, vous devriez sélectionner le bloc Texte ou Titre, puis taper dans le petit éditeur de texte.

Vous pouvez également modifier complètement l'apparence du kit en utilisant les paramètres du menu de gauche, y compris la modification du schéma de couleurs, du choix de la police, de la couleur des liens, des boutons, et plus encore.

La plupart de ces paramètres sont assez explicites, il vaut donc la peine de sélectionner différents blocs dans votre mise en page, puis de parcourir les paramètres.

Pour créer vos colonnes, faites défiler jusqu'à la section « Standard » dans le menu de gauche.

Ici, trouvez le bloc « Colonne » et faites-le glisser dans la zone où vous souhaitez organiser les widgets en colonnes.

Vous pouvez maintenant choisir le nombre de colonnes que vous souhaitez créer et la quantité d'espace que chaque colonne doit occuper.

Pour ce faire, cliquez simplement sur la mise en page que vous souhaitez utiliser.

Vous pouvez maintenant commencer à ajouter des widgets à vos colonnes.

Dans le menu de gauche, trouvez chaque widget, puis faites-le glisser dans la colonne où vous souhaitez afficher ce widget.

Après avoir ajouté un widget, cliquez dessus pour le sélectionner dans l'aperçu en direct.

Vous pouvez ensuite utiliser les paramètres du menu de gauche pour personnaliser ce widget. Pour voir encore plus de paramètres de personnalisation, cliquez sur l'onglet « Avancé ».

Ici, vous pouvez ajouter des animations CSS, modifier l'espacement, ajouter une bordure, et plus encore.

Répétez simplement ces étapes pour ajouter d'autres widgets à vos colonnes. Lorsque vous êtes satisfait de l'apparence de la page, cliquez sur le bouton « Enregistrer » pour sauvegarder vos modifications.

Vous pouvez maintenant continuer à modifier le reste de votre thème WordPress. Pour plus de détails, consultez notre guide complet sur comment créer un thème WordPress personnalisé pour les débutants.

Lorsque vous êtes satisfait de la configuration des modèles, il est temps de rendre le kit public.

Dans le tableau de bord WordPress, allez à SeedProd » Theme Builder et cliquez sur le bouton « Activer le thème SeedProd » pour qu'il affiche « Oui ».

Vous pouvez maintenant visiter votre blog WordPress ou votre site Web pour voir le nouveau thème personnalisé en action.

Méthode 4 : Utilisez l'éditeur complet du site (thèmes basés sur des blocs uniquement)

Si vous utilisez un thème WordPress compatible avec les blocs, vous pouvez ajouter des colonnes à n'importe quelle zone de votre site Web à l'aide de l'éditeur complet du site.

Vous pouvez même modifier des zones que vous ne pouvez pas modifier avec l'éditeur de contenu WordPress standard. Par exemple, vous pouvez ajouter des widgets et des colonnes à votre modèle de page 404.

Pour commencer, rendez-vous dans Apparence » Éditeur dans le tableau de bord WordPress.

Par défaut, l'éditeur complet du site affiche le modèle d'accueil de votre thème, mais vous pouvez ajouter des colonnes et des widgets à n'importe quelle zone.

Pour voir toutes les options disponibles, sélectionnez simplement « Modèles » ou « Parties de modèles ».

Vous pouvez maintenant cliquer sur le modèle ou la partie de modèle que vous souhaitez modifier.

WordPress affichera maintenant un aperçu du design. Pour continuer et modifier ce modèle, cliquez sur la petite icône en forme de crayon.

Une fois cela fait, cliquez sur l'icône bleue « + » et tapez « Colonnes ».

Lorsque le bon bloc apparaît, faites-le glisser et déposez-le sur la conception de votre page.

Vous pouvez maintenant choisir la mise en page que vous souhaitez utiliser.

Par exemple, dans nos images, nous utilisons la mise en page 33/33/33, qui crée trois colonnes occupant chacune 33 % de la largeur disponible.

Une fois cela fait, cliquez sur l'icône bleue « + », puis trouvez le premier widget que vous souhaitez utiliser.

Vous pouvez ensuite simplement faire glisser et déposer ce widget dans la colonne où vous souhaitez l'afficher.

Si nécessaire, vous pouvez affiner chaque bloc à l'aide des paramètres du menu de droite.

Répétez simplement ces étapes pour ajouter d'autres widgets à vos colonnes.

Lorsque vous êtes satisfait des modifications, cliquez sur « Enregistrer » pour les rendre publiques. Maintenant, si vous visitez votre site Web WordPress, vous verrez les nouveaux widgets et colonnes en action.

Bonus : Affichez des photos WordPress en colonnes

Si vous avez un site de photographie, vous voudrez peut-être également afficher toutes vos photographies dans des colonnes et des rangées soignées.

Pour ce faire, vous pouvez utiliser Envira Gallery, qui est le meilleur plugin de galerie WordPress du marché. Il vous permet de créer une galerie attrayante où toutes les images sont organisées en lignes et en colonnes pour un aspect visuellement agréable.

De plus, il offre d'autres fonctionnalités comme des popups lightbox, des filigranes, du texte alternatif pour les images, et plus encore.

Après l'activation du plugin, visitez simplement la page Envira Gallery » Ajouter une nouvelle et cliquez sur le bouton « Sélectionner les fichiers depuis d'autres sources » pour télécharger toutes vos images depuis la médiathèque.

Une fois que vous avez fait cela, faites défiler vers le bas jusqu'à la section « Actuellement dans votre galerie » et passez à l'onglet « Configuration ».

Ici, vous pouvez choisir différentes mises en page et le nombre de colonnes pour les images de votre galerie selon vos préférences.

Une fois que vous avez terminé, cliquez sur le bouton « Publier » en haut pour enregistrer vos paramètres. Ensuite, vous devez ouvrir l'article où vous souhaitez ajouter vos images en lignes et en colonnes et cliquer sur le bouton « Ajouter un bloc » (+).

Cela ouvrira le menu des blocs. Maintenant, faites simplement glisser et déposez le bloc Envira Gallery, puis choisissez la galerie d'images que vous avez créée dans le menu déroulant du bloc.

Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos paramètres. Vous pouvez maintenant visiter votre site WordPress pour voir les images en lignes et en colonnes.

Pour plus d'informations, veuillez consulter notre tutoriel sur comment afficher les photos WordPress en colonnes et en lignes.

Nous espérons que cet article vous a aidé à apprendre comment afficher des widgets WordPress en colonnes. Vous voudrez peut-être aussi consulter notre guide sur comment afficher vos meilleurs commentateurs dans la barre latérale WordPress ou nos sélections d'experts des meilleurs thèmes compatibles Gutenberg pour WordPress.

Si cet article vous a plu, alors abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.