Comment faire des colonnes dans WordPress sans plugin

Organiser le contenu en colonnes est un jeu d'enfant grâce au bloc WordPress Columns. Ce bloc appartient aux blocs de base qui peuvent être utilisés dans chaque thème WP. Le bloc de colonnes peut avoir jusqu'à 6 colonnes. Vous pouvez donc avoir 6 contenus différents côte à côte.

Aujourd'hui, nous allons vous montrer comment créer des colonnes dans WordPress sans plugin - en utilisant le bloc Colonnes. Nous vous apportons également un résumé de dernières fonctionnalités de la version WP 5.3 mise à jour.

Dans ce tutoriel, vous trouverez des informations sur :

• A quoi servent les colonnes
• Fonctionnement des colonnes dans l'ancien éditeur
• Comment faire des colonnes dans WordPress sans plugin (dans l'éditeur de blocs)
• Paramètres de bloc de colonnes de base
• Comment travailler avec le bloc de colonnes WordPress
• Comment modifier des blocs imbriqués
• Avantages du bloc de colonnes

A quoi servent les colonnes

Les colonnes sur le site Web peuvent avoir plusieurs applications. Tout d'abord, ils peuvent rendre le contenu bien organisé, plus lisible et plus facile à parcourir. En organisant le contenu en colonnes, vous pouvez mettre en évidence des informations ou des paramètres importants.

Par exemple, vous pouvez utiliser la mise en page multi-colonnes pour présenter vos services. Ajoutez-y une image illustrative, une description ou un bouton. Vous pouvez bien sûr rendre l'image cliquable.

Comme pour les services, vous pouvez utiliser des colonnes sur WordPress pour afficher des produits ou des catégories de produits. C'est idéal si vous avez un site Web d'entreprise simple.

Dans les articles de blog, vous pouvez utiliser des colonnes pour séparer le contenu. Vous pouvez placer du texte, des puces ou des images côte à côte.

Fonctionnement des colonnes dans l'ancien éditeur

Avant WordPress 5+, si vous vouliez créer du contenu multi-colonnes, vous deviez utiliser des tableaux. C'était beaucoup plus difficile que dans le nouvel éditeur. De plus, il y avait généralement un problème avec les styles et l'affichage des tableaux sur les appareils mobiles. Comment ça fonctionnait avant ?

Vous avez eu plusieurs options sur la façon de créer des colonnes sur le site Web WordPress :

1. Insérez manuellement le code HTML dans l'éditeur de texte

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Cette approche était principalement utilisée par les développeurs, qui pouvaient rapidement créer une table ou une colonne en fonction de leurs besoins. L'inconvénient était que tous les thèmes WordPress ne pouvaient pas bien gérer les colonnes. Les tableaux n'étaient généralement pas parfaits et l'utilisateur moyen ne pouvait pas facilement résoudre tous les problèmes possibles.

2. Autoriser les tableaux dans l'éditeur WordPress

Étant donné que WordPress utilisait l'éditeur TinyMCE, il était possible d'autoriser les fonctions à modifier les tableaux. Si vous souhaitez en savoir plus, vous pouvez trouver tous les détails dans ce forum. Si vous faites la même chose pour nos thèmes AIT, les tableaux fonctionneront correctement.

3. Utilisation de l'élément Columns dans les thèmes AIT

Si vous utilisez l'un de nos anciens thèmes WordPress, vous connaissez certainement notre élément Columns. Cet élément peut être utilisé pour ajouter des colonnes à l'intérieur des pages. C'est un élément commandable, ce qui signifie que vous pouvez le placer partout où vous en avez besoin. L'avantage est sa variabilité à l'intérieur des pages.

4. Téléchargez le plugin tiers pour gérer les tables

Une autre solution pour créer des colonnes dans les publications et les pages WordPress consistait à télécharger l'un des plugins disponibles pour créer des tableaux. Ces plugins permettent d'ajouter des colonnes/tables en quelques clics sans aucun codage. Il était également possible de l'utiliser par des utilisateurs moins expérimentés.

Comment faire des colonnes dans WordPress sans plugin (dans l'éditeur de blocs)

Grâce au nouvel éditeur de blocs, la création de colonnes est devenue extrêmement facile. Si vous utilisez toujours l'ancien WordPress, c'est maintenant le bon moment pour mettre à jour vers la dernière version. Vous pourrez ajouter et gérer des colonnes simplement, en quelques clics grâce au bloc Colonnes.

Ce bloc est un changement bienvenu pour tous ceux qui veulent travailler avec du contenu multi-colonnes, présenter des produits ou écrire un blog et qui n'ont pas d'expérience en programmation.

Voyons comment ajouter un bloc Columns et comment créer des colonnes dans WordPress sans plugin :

• La première option consiste à cliquer sur "+" dans la barre supérieure et à sélectionner le bloc de colonnes parmi les blocs disponibles.
• La deuxième option consiste à cliquer sur "+" n'importe où dans l'éditeur.

Dispositions prédéfinies du bloc de colonnes WordPress (NOUVEAU à partir de WP 5.3)

La dernière version a apporté d'énormes améliorations dans les paramètres des colonnes. Tout d'abord, des styles de mise en page par défaut sont disponibles. Qu'est-ce que ça veut dire?

Les utilisateurs peuvent choisir leur mise en page et leur style d'alignement lors du processus d'ajout d'un nouveau bloc à la zone de contenu. Les mises en page prédéfinies peuvent être très utiles, en particulier pour les utilisateurs qui n'ont pas de compétences WordPress avancées. Cette fonctionnalité représente comment nous imaginons la manière de créer des colonnes dans WordPress (sans plugin ni aucun autre module complémentaire).

 

Si vous ne souhaitez pas choisir la mise en page prédéfinie dans le bloc de colonnes WordPress, ignorez-le simplement. Après avoir sauté cette étape, le contenu sera séparé en 2 parties identiques/deux colonnes individuelles pouvant être modifiées.

Colonnes Bloquer les paramètres de base

Le bloc de colonnes WordPress lui-même n'a pas beaucoup d'options. Pourquoi est-ce comme ça, nous vous expliquerons plus tard. Dans la barre supérieure, vous pouvez modifier l'alignement en large ou pleine largeur. Vous pouvez modifier cet alignement s'il est pris en charge par votre thème actif.

Le paramètre de bloc de colonnes le plus important est le nombre de colonnes dans la barre latérale de l'inspecteur sur le côté droit. Par défaut, il y a 2 colonnes, mais vous pouvez augmenter ce nombre à 6. Vous pouvez le modifier à l'aide de la souris ou saisir un nombre. À quoi cela ressemble, vous le verrez immédiatement après avoir augmenté ou diminué les colonnes. Le bloc se change dynamiquement en fonction du curseur.

C'est très pratique car vous modifiez littéralement le nombre de colonnes en quelques secondes sans aucune modification difficile des paramètres ou du codage.

Comme pour les autres blocs de l'éditeur WordPress, vous pouvez également insérer une classe CSS personnalisée dans le bloc Colonnes.

Appender de blocs pour un travail plus fluide avec les blocs

Le bloc de colonnes est spécial car vous pouvez créer plusieurs blocs avec. Jusqu'à la sortie de la nouvelle version, il était assez difficile de travailler avec des blocs individuels. Lorsque vous vouliez ajouter un bloc, vous ne saviez pas exactement où cliquer. Grâce à Block appender (et sa différenciation par la couleur d'arrière-plan), il est plus facile d'insérer du contenu dans la bonne colonne.

Comment travailler avec le bloc de colonnes WordPress

Le bloc Beauty of Columns est que chaque colonne peut imbriquer d'autres blocs. Il peut s'agir d'un paragraphe, d'un bloc d'images ou d'un bloc de boutons. Le nombre maximum de colonnes est de 6, vous pouvez donc créer du contenu multi-colonnes selon vos besoins. Comme mentionné précédemment, pour présenter les produits, vous pouvez ajouter l'image du produit, le nom, le prix et le bouton côte à côte.

Vous pouvez également utiliser plusieurs blocs de colonnes les uns sous les autres pour créer une grille. Vous pouvez l'utiliser pour présenter vos services ou promouvoir des fonctionnalités importantes.

Modification des blocs imbriqués

Comme nous l'avons déjà mentionné, vous pouvez imbriquer d'autres blocs dans des colonnes. Chaque bloc imbriqué a tous ses paramètres disponibles. Cela signifie que si vous ajoutez un bloc Image dans la colonne, vous pouvez le modifier exactement de la même manière qu'en mode autonome. Bloc d'images.

Conclusion : les avantages du bloc de colonnes

La sortie de l'éditeur de blocs WordPress et la disponibilité de l'utilisation de colonnes dans les pages et les publications ont considérablement simplifié la façon dont les utilisateurs peuvent travailler avec le contenu. Grâce au bloc de colonnes WordPress, il n'est plus important d'utiliser des solutions tierces ou d'écrire du code HTML. L'ajout ou la suppression de colonnes est possible en quelques clics. Tout est très intuitif et rapide aussi pour les utilisateurs moins technophiles.

Votre contenu dans la disposition multi-colonnes sera bien aligné dans la grille. Il aura également fière allure dans la version réactive tout de suite.

Nous travaillions dur sur le nouveau thème WordPress Citadela, spécialement développé pour l'éditeur de blocs WordPress. En savoir plus sur le thème Citadela et les packs de mise en page disponibles.