skip to Main Content

Comment ajouter plusieurs colonnes sur WordPress sans utiliser de plugin

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]

Voulez-vous ajouter un contenu multi-colonne dans vos publications WordPress? Les colonnes peuvent être utilisées pour créer des mises en page attrayantes pour vos publications et vos pages.

Les médias imprimés traditionnels, tels que les journaux et les magazines, utilisent une mise en page multi-colonne depuis les tout débuts de l’impression. Leur objectif était de permettre aux utilisateurs de lire plus facilement un texte plus petit tout en utilisant l’espace disponible de manière économique.

Les mises en page à une seule colonne sont plus couramment utilisées sur le Web. Cependant, les grilles à plusieurs colonnes restent utiles pour mettre en évidence le contenu et faciliter la lecture et l’analyse.

Dans ce tutoriel, nous allons vous montrer comment ajouter facilement du contenu multi-colonnes à vos publications WordPress sans écrire de code HTML.

Ajout de contenu multi-colonne dans WordPress – La solution facile

La création de contenu multi-colonnes, également appelé contenu en grille sur WordPress, est désormais simple car il s’agit d’une fonctionnalité par défaut. Le nouvel éditeur de blocs de WordPress Gutenberg comprend un bloc de colonnes.

Pour ajouter une mise en page à plusieurs colonnes, vous devez créer un nouvel article ou en modifier un. Une fois dans la zone d’édition, cliquez sur l’icône « Ajouter » en haut pour ajouter un bloc.

Ensuite, vous devez sélectionner le bloc « Colonnes » situé sous l’onglet « Eléments de mise en page ».

Vous verrez maintenant le curseur de la souris sauter dans la colonne de gauche et un espace réservé pour le texte apparaîtra dans la colonne de droite.

Comme vous pouvez le voir dans la capture d’écran ci-dessus, le bloc Colonne semble tout d’abord une zone vide. Si vous passez la souris à gauche, vous pouvez voir la bordure du bloc en surbrillance.

Vous pourrez également voir les paramètres de blocage dans la colonne de droite de l’écran de post-édition.

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é ]

Par défaut, le bloc de colonnes ajoute deux colonnes. Vous pouvez augmenter le nombre de colonnes que vous souhaitez ajouter à partir des paramètres de bloc situés à droite. Cela vous permet d’ajouter jusqu’à six colonnes sur une seule ligne.

Cliquez simplement sur une colonne et commencez à taper pour ajouter du contenu. Vous pouvez utiliser la touche de tabulation de votre clavier pour passer à la colonne suivante.

Ajout de contenu multimédia et autre dans vos colonnes

En plus du contenu du texte, vous pouvez également ajouter des images et incorporer des vidéos dans des colonnes WordPress.

Le bloc de colonnes vous permet d’ajouter des blocs à l’intérieur de chaque colonne. Placez simplement la souris sur une colonne et vous remarquerez l’icône «Ajouter un nouveau bloc» à l’intérieur. Vous pouvez également ajouter un bloc en tapant / puis le nom du bloc.

Votre bloc sélectionné apparaîtra maintenant dans la colonne. Vous pouvez maintenant y aller et ajouter du contenu.

Voici à quoi pourrait ressembler votre nouvelle colonne dans le thème par défaut Twenty Nineteen. Dans cet exemple, nous utilisons trois colonnes et la dernière colonne contient une image.

Si vous souhaitez uniquement ajouter une image et du texte à côté, vous pouvez également utiliser le bloc « Média et texte » au lieu de colonnes. Ce bloc est spécialement conçu pour afficher des médias tels que des images et des vidéos à côté de texte.

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]

Ajout de plusieurs colonnes dans l’ancien éditeur WordPress Classic

Si vous n’avez pas mis à niveau votre WordPress vers Gutenberg et utilisez toujours l’éditeur classique, vous devez installer un plugin séparé pour créer une présentation de colonne de grille.

Commencez par installer et activer le plugin Lightweight Grid Columns. Pour des instructions détaillées, suivez notre guide étape par étape sur la façon d’installer un plugin dans WordPress.

Lors de l’activation, vous pouvez créer un nouveau message ou ouvrir un ancien message à modifier. Ensuite, cliquez sur le bouton « Ajouter des colonnes » dans la barre d’outils de l’éditeur visuel.

Vous verrez maintenant une fenêtre popup pour ajouter votre première colonne. Vous pouvez choisir la superficie que votre colonne peut couvrir, sur des ordinateurs de bureau, des tablettes et des appareils mobiles différemment.

Par exemple, si vous définissez le pourcentage de grille de bureau de 50%, votre colonne couvrira la demi-ligne.

Il existe de nombreuses options pour définir la largeur de votre colonne, de 5% à 100% dans l’intervalle de 5. Vous pouvez en choisir une en cliquant sur le menu déroulant.

Ensuite, vous devez ajouter le contenu de votre colonne dans la zone « Contenu », puis cliquer sur le bouton « OK » pour l’insérer dans votre message.

Le plugin va maintenant générer le shortcode requis avec votre contenu et l’ajouter à votre éditeur de publication.

Maintenant que votre première colonne est ajoutée, vous pouvez répéter le processus pour ajouter plus de colonnes. Pour la dernière colonne en ligne, n’oubliez pas de cocher la case ‘Dernière colonne en ligne’.

Après cela, vous pouvez enregistrer votre message et le prévisualiser. Voici à quoi cela ressemblait sur notre site de test avec le thème Twenty Seventeen.

Nous espérons que cet article vous a aidé à apprendre à ajouter des colonnes dans vos publications et pages WordPress.

Cet article comporte 18 commentaires
  1. 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.

      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 ?

  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!

  3. 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.

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