skip to Main Content

Comment faire des colonnes sur WordPress sans plugins

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

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

Avec plus de 600.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 vous configurez votre site web WordPress ou créez du contenu, vous avez différents styles et formats à prendre en considération. Certains styles pourront correspondre à un certain type de contenu, et en fonction de ce que vous écrivez, vous souhaiterez l’ajuster.

La meilleure solution est de voir un contenu d’actualité donner l’impression d’être imprimé sur du papier journal ou d’organiser votre contenu d’une manière différente avec les colonnes.

Nous allons vous montrer comment ajouter des colonnes à votre site web sans avoir à utiliser des plugins, ce qui réduira les temps de chargement et vous épargnera des soucis avec les mises à jour.

Voici quelques manières pour y arriver.

Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là.

Utiliser du code pour les colonnes

Vous pourrez penser à utiliser du HTML/CSS pour créer des colonnes sur votre blog WordPress. Ce n’est pas aussi difficile que certains pourraient le faire croire, et vous pouvez accomplir cela en utilisant une balise paire « <div> » avec un style comme attribut.

Allez plus loin dans la personnalisation en découvrant Comment personnaliser le CSS de votre site web WordPress

<div style="float:left; width: 50%">
Votre contenu ici
</div>
<div style="float:left; width: 50%">
Votre contenu ici
</div>
<div style="clear:both"></div>

Nous avons inclus un exemple plus détaillé, qui vous permettra de voir les différentes possibilités qui s’offrent à vous.

<div style=”width:30%;padding:0 10pt 0 0;float:left;”>
Colonne 1
Colonne 1
</div>
<div style=”width:30%;padding:0 10pt 0 0;float:center;”>
Colonne 2
Colonne 2
</div>
<div style=”width:30%;padding:0 10pt 0 0;float:right;”>
Colonne 3
Colonne 3
</div>

Il est possible de modifier l’espace entre les colonnes et la taille des colonnes en ajustant la marge intérieure ou la valeur de la largeur dans le code. Par exemple, vous pourrez changer la largeur pour 50% ou 30%. Vous pourrez même vouloir rendre une colonne plus large qu’une autre. En faisant ceci, vous pourrez avoir une colonne principale avec du texte et les autres colonnes sur le côté. 

Les cookies et WordPress : Comment en créer, récupérer et supprimer

Alors la première colonne devrait avoir une taille de 40%, la seconde une taille de 50% et la troisième une taille de 30%. Comme vous pouvez le remarquer le codage n’est pas particulièrement fastidieux. Même si cela peut prendre un peu de temps pour s’y habituer, surtout si vous n’avez jamais fait ça avant.

Si vous ne voulez pas le faire en codant, il y a d’autres solutions qui s’offrent à vous.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Choisir un thème avec la prise en charge de colonnes

Si vous utilisez les colonnes pour donner une look « magazine » à votre blog WordPress, vous pourrez souhaitez utiliser un des thèmes que WordPress propose.

Par exemple le thème Duet Theme

Vous pourrez aussi consulter des thèmes WordPress premium en consultant ce lien.

aperçu thème wordpress.png

Ce dernier vous propose deux colonnes qui fonctionnent avec votre contenu et propose un look classique d’un magazine. C’est très stylé. Cependant, vous aurez à payer pour cette fonctionnalité. Ce thème WordPress coûte approximativement 90$.

Découvrez Comment corriger l’erreur de connexion avec la base de données WordPress

Utiliser des tableaux pour des colonnes

Vous pouvez aussi utiliser des tableaux pour créer des colonnes sur votre contenu WordPress. Vous pourrez le faire en créant une nouvelle page.

créer une nouvelle page avec un tableau sur WordPress.png

Vous pourrez donc utiliser le code suivant :

<table style=”text-align: center; height: 152px;” border=”1″ cellspacing=”0″ cellpadding=”0″ width=”390″>
<tbody>
<tr style=”background-color: #e9e9e9; font-weight:bolder;”><td>Title 1 </td>
<td>Title 2</td>
<td>Title 3</td>
<td>Title 4</td>
</tr>
<tr>
<td>Detail One</td>
<td>Detail Two</td>
<td>Detail Three</td>
<td>Detail Four</td>
</tr>
<tr>
<td>Detail One A</td>
<td>Detail Two A</td>
<td>Detail Three A</td>
<td>Detail Four A</td>
</tr>
</tbody>

Sublimer vos tableaux en consultant Comment insérer un tableau sur WordPress avec le plugin TablePress

Une fois que vous avez ajouter le tableau, vous serez en mesure d’ajuster la taille, l’espace entre les colonnes. Vous pouvez aussi retirer les bordures, pour donner un look plus naturel, durant le formatage.

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]

Voici quelques méthodes qui vous permettront de créer des colonnes sur WordPress.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. HTML5 Video Player

Il s’agit d’un plugin WordPress mettant à la disposition de votre blog 3 types de lecteurs vidéos. On a notamment un lecteur vidéo avec playlist à droite, un lecteur vidéo avec playlist en bas, et un lecteur vidéo sans playlist.

html5-video-player

Ce plugin propose toutefois des fonctionnalités communes aux trois lecteurs. Ses fonctionnalités sont entre autres : une mise en page responsive, 5 modèles au choix pour chaque lecteur, la possibilité d’ajouter un lecteur plusieurs fois sur une même page avec le même style ou en utilisant un style différent, la prise en charge des fichiers vidéos MP4 et WEBM, et autres.

Télécharger | DémoHébergement Web

2. WordPress Pro Event Calendar

WordPress Pro Event Calendar a pour rôle d’ajouter un calendrier professionnel et élégant dans vos articles ou pages. Il est 100% responsive, et peut aussi être utilisé à travers un widget sur n’importe quel type de blog ou site web de WordPress.

Ses fonctionnalités sont entre autres : un design élégant et professionnel, la mise en page responsive, la gestion facile des événements, la possibilité de soumettre les événements sur le front-end, l’ajout des dates spéciales à votre calendrier comme les vacances par exemple, la limitation sur le nombre de réservation pour un événement, les supports du RTL et de Google Map, etc…

Télécharger Démo Hébergement Web

3. Restrict KB Access by User Role Addon

Il s’agit d’un moyen facile de gérer et de restreindre l’accès à KNOWLEDGEBASE en fonction des rôles d’utilisateur. Cette extension fournit des options utiles pour sécuriser la base de connaissances à partir d’un accès global.restrict-kb-access-by-user-role-addon-plugin-wordpress-pour-roles-utilisateur

Ses autres fonctionnalités sont : aucune configuration à faire, la possibilité de verrouiller les contenus de la base de connaissances en fonction des rôles d’utilisateur, une apparence entièrement personnalisable, le verrouillage de simples articles, d’articles  similaires ou de widgets d’articles, un panneau de configuration étendue, une traduction fonctionnelle, et autres.

Télécharger | Démo | Hébergement Web

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. [Recommandé]

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Voilà ! C’est tout pour ce tutoriel. Nous espérons que vous parviendrez à créer des colonnes sur WordPress sans coder. N’hésitez pas à partager ce tutoriel  avec vos amis sur vos réseaux sociaux préférés

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

Si vous avez des suggestions ou des remarques, laissez-les dans notre section commentaires.

…  

Cet article comporte 0 commentaires

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
7 Partages
Partagez4
Tweetez1
Enregistrer2