skip to Main Content

Comment ajouter plusieurs colonnes sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 554.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Lorsque l’on veut éviter d’écrire des articles trop longs, il faut utiliser des colonnes. C’est généralement cette technique qui est employée dans les journaux. 

Pour vos lecteurs, cette technique d’écriture sera forcément bénéfique, puisqu’ils n’auront pas nécessairement besoin de faire défiler la page pour lire vos articles, ce qui vous donne la possibilité de créer des blocs sur vos pages. 

Dans ce tutoriel, nous vous présenterons un plugin WordPress qui vous permettra de présenter votre contenu sur plusieurs colonnes. N’oubliez pas, vous pouvez nous contactez en cas de soucis ou partager cet article si vous le trouvez intéressant.

Bonne lecture.

journal-création-de-colonne-sur-Wordpress

Téléchargez et installez le plugin Advanced WP Columns

Advanced WP Columns est le plugin qui sera utilisé pour créer des colonnes. Il est disponible sur WordPress.org. Comme il est généralement dit en anglais, c’est un plugin « out-of-the-box », pour dire qu’il n’a pas besoin de configuration, ou est immédiatement opérationnel après installation.

Après installation et activation du plugin, un nouveau bouton s’affichera sur votre éditeur visuel.

présentation-du-plugin-advanced-wp-columns

En cliquant dessus, vous verrez une nouvelle fenêtre s’afficher. Sur cette fenêtre, vous verrez 3 boutons regroupés : « + add » ou « ajouter », « – Remove » ou « retirer » ainsi qu’une liste déroulante « Empty » ou « Vide », qui vous permet de choisir une configuration rapide de colonnes à ajouter.

Pour commencer, nous allons créer deux colonnes. Pour cela, cliquez sur la liste déroulante et choisissez l’option « two columns » (2 colonnes). Vous remarquerez qu’il y a plus d’options, ainsi « three columns » en créera 3, « four columns » pour 4.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Remarque : nous n’avons pas besoin de créer une colonne, pour la simple raison que vous n’avez pas besoin de ce plugin pour ça, car l’éditeur à lui seul joue déjà ce rôle.

example-de-double-colonnes-advanced-wp-columns

Les flèches grises représentent les marges de chaque colonne et la distance qui les sépare.

Les flèches bleues représentent la largeur de chaque colonne. Vous pouvez modifier une colonne, qui est représentée par une ligne bleue ayant aux extrémités deux boutons d’extensibilité qui vous permettent d’ailleurs d’agrandir ou de réduire la taille d’une colonne.

présentation-des-boutons-d-extensibilité

Les flèches bleues représentent les boutons d’extensibilité de chaque colonne.

Comment ajouter une nouvelle colonne

Sur l’image précédente, les flèches grises indiquent la marge d’une colonne et l’espace qui sépare deux colonnes, mais ce que l’on ne dit pas, c’est que ces espaces peuvent également être utilisés pour ajouter une nouvelle colonne. Pour cela rien de plus simple, glissez et déposez le bouton « + Add » sur ces espaces.

comment-ajouter-une-nouvelle-colonne

Comment supprimer une colonne

Pour supprimer une colonne, il vous suffit de glisser et de déposer le bouton « – Remove » sur la ligne bleue qui représente la colonne que vous souhaitez retirer.

comment-supprimer-une-colonne


Il vous sera bien évidement demandé de confirmer votre action : « Are you sure you want to remove this column ? » « êtes-vous sur de vouloir retirer cette colonne ? ». Cliquez sur « Ok » pour confirmer votre action. Une fois que se sera fait, vous pourrez voir que la colonne a disparut, laissant un grand espace vide.

PEARL : Le meilleur Thème WordPress pour votre entreprise

Remarque : Si vous souhaitez démarrer avec un nombre de colonnes par défaut, vous pouvez toujours choisir le nombre de colonnes sur la liste des options, en dessous des boutons « + Add » et « – Remove ». Mais en choisissant une nouvelle option, cela supprimera toutes vos modifications.

En dessous de chaque ligne bleue (qui représente une colonne), il y a un champ de texte dans lequel nous vous recommandons d’ajouter un texte qui vous servira de repère une fois revenu sur l’éditeur visuel.

Vous pouvez faire usage des options sur la typographie offerte, si vous le souhaitez (notamment en modifiant le police et sa taille, ainsi de suite).

comment-ajouter-un-repère

Lorsque vous avez terminé, cliquez sur le bouton « + Add Columns » et vous verrez les nouvelles colonnes sur l’éditeur visuel.

présentation-des-colonnes-sur-l-éditeur-visuel

Allez, juste pour le bonheur des yeux, et pour voir ce qui est possible de faire avec ce plugin, voici ce que j’ai réussi à faire chez moi.

résultat-recherché-advanced-wp-columns

Alors la balle est dans votre camp.

Avant de nous quitter

Ce plugin offre des réglages, vous n’êtes pas obligé d’y accéder, car vous l’aurez remarqué, tout peut être fait sans réglages. Mais nous n’aurons pas fait une analyse complète sans y faire un tour.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Pour cela, accédez à l’interface « Réglages >> Advanced Wp Columns ».

réglages-avancées-du-plugin

Ces réglages vous permettent de définir les options par défaut, mais laissez-moi insister, vous pouvez vous en passer. Cependant, je vous présenterai les options les plus utilisées. Pour augmenter votre productivité, vous pouvez notamment :

  • Modifier la largeur du parent qui contient les différentes colonnes. Par défaut, cette valeur vaut 960 (Container Width)
  • Modifier la structure initiale, qui vaut par défaut « Empty », vous pouvoir choisir « two », « three » ou « four columns » pour 2, 3 ou 4 colonnes
  • Activer l’adaptabilité des colonnes aux appareils mobiles en cochant la case de l’option « Responsive Layout ».
  • En ce qui concerne les autres options, elles nécessitent une maitrise du langage HTML.

Merci de m’avoir lu et n’hésitez pas à nous contactez en cas de soucis ou à partager l’article.

Cet article comporte 18 commentaires
  1. bonjour j’ai installé advanced wp columns.
    mais quand je regarde sur la page j’ai un carré blanc présent en haut à gauche de chaque colonne ? pouvez vous m’aider. merci

    1. Bonjour,

      Nous ne pouvons pas vraiment vous aider si vous ne donnez pas plus de détails sur comment vous faites pour avoir un carré blanc.

      Merci.

  2. Je n’ai qu’un mot à dire Génial! Je l’ai installé et après deux trois corrections, j’ai réussi à faire des colonnes, merci!

      1. J’ai copier du texte et tenté un coller par CRTL+V, sans succès. Le menu contextuel avec le clic droit ne propose pas de coller.
        Je n’ai pas trouvé d’autre solution que tout retaper…

        1. Désolé pour la réponse tardive.
          Pouvez vous assurer qu’en effectuant un clic droit sur un autre élément de la page, le menu contextuel s’affiche ? Si tel est le cas, alors probablement un problème JavaScript se pose sur votre hébergement.
          Si vous êtes sur Google Chrome, alors accédez à la page en question où vous rencontrez le problème, ensuite, taper sur la touche « F12 » (une fenêtre s’ouvrira ou sera attaché à la page) puis choisissez l’onglet « Console ». Faites une capture d’écran de cet onglet et je vous dirait s’il y a une problème.

          1. Bonjour,
            Merci pour votre réponse.
            Mon site étant hébergé chez Free, il est possible qu’il y ait un problème de javascript.
            Pouvez-vous me dire comment vous transmettre capture d’écran que j’ai faite ?
            Cordialement

          2. Comme j’ai installé une version bridée pour Free, je pense que le problème vient de là.
            Je vais tenter l’installation d’une autre version…

      2. J’ai copié un texte et j’ai tenté de le coller dans une colonne dans le plugin. Impossible, ni avec la raccourci clavier CTRL+V, ni dans le menu contextuel du clic droit qui ne propose pas cette fonction.
        Y a-t-il une autre solution que de tout retaper ?

  3. Salut, j’ai ce plug-in …. mais ça ne marche pas bien, ça arrive:

    Je crée deux colonnes, une plus petite pour la photo, une autre plus grande pour le texte, alors le texte est seulement 2 lignes, non dans toute la hauteur de la colonne, une fois sauvegardé le texte JUMP sous la photo, plutôt que de rester accano, voir cela disparaît une colonne …..
    Qu’est-ce que je fais? pourquoi cela arrive-t-il, il y a un autre plg-in meilleur et plus simple que ceci ici?
    Merci, je serais reconnaissant pour l’aide!

    1. Bonjour Irina,

      Essayez d’activer le thème par défaut de WordPress, si tout marche bien, alors c’est que le problème vient de votre thème WordPress actuel.

      Vérifiez aussi que vous avez fait les mises à jour de plugins.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
10 Partages
Partagez8
Tweetez1
Enregistrer1
WhatsApp