Plusieurs personnes aiment l’apparence d’un texte réparti sur plusieurs colonnes. Ce format ressemble à un journal et il y a plusieurs raisons pour lesquelles vous pourriez configurer votre blogue WordPress de cette manière. Cependant, ce n’est pas exactement facile à faire. Il est possible de trouver des thèmes spécifiques ou d’acheter des extensions couteuses qui accompliront cette tâche à votre place, mais voulez-vous vraiment procéder de cette façon? La plupart des gens qui créent des sites WordPress s’en servent pour leur blogue personnel ou comme un site Web pour leur petite entreprise. Ils ne veulent ou ne peuvent pas se permettre de dépenser beaucoup d’argent sur leur site. Heureusement, ce tutoriel sur WordPress vous montrera les étapes nécessaires à la création d’une disposition en colonnes.

La création de ces colonnes implique un travail dans le code HTML pour chacun de vos blogues WordPress. Heureusement, cette tache est assez facile à exécuter. Cliquez tout simplement sur l’éditeur de texte et saisissez le bon code. Si vous souhaitez créer un blogue à trois colonnes, voici le code :

<div style = “width:33%; padding:0 10px 0 0;float:left;”>

Puis tapez votre contenu de la colonne 1. Lorsque vous aurez terminé, finissez à la dernière ligne de contenu avec </div >.

Puis ajoutez cette ligne :

<div style = “width:33%; padding:0 10px 0 0;float:left;”>

Ce code créera la colonne du milieu. Encore une fois, finissez à la dernière ligne du contenu avec </div >.

Pour la troisième colonne :

<div style = “width:33%; padding:0 10px 0 0;float:right;”>

Cela créera la troisième colonne et alignera tout à droite. Ainsi, vous aurez quelque chose qui ressemblera à ceci :

Column 1                            Column 2                            Column 3

Les deux premières colonnes seront alignées à gauche tandis que la troisième sera alignée à droite.

Vous pouvez modifier l’apparence des colonnes en modifiant le code. Voyons en détail ce que fait cette ligne de code HTML.

<div style = “width:33%; padding:0 10px 0 0;float:left;”>

div style – il s’agit de la commande qui indique à WordPress que vous créez une division de texte, qui peut être un paragraphe, une colonne, voire une phrase.

width: 33% – il s’agit de la largeur de la colonne. Pour les trois colonnes qui ont toutes la même largeur, vous diviserez toute la zone par trois. Donc 100 % de la largeur divisé par 3 colonnes signifie que chaque colonne mesurera environ 33 % de la taille totale.

padding: 0 10px 0 0; – il s’agit de la quantité d’espacement entre les colonnes et le reste de la page. Les quatre chiffres correspondent à l’espace vierge en haut, à droite, en bas et à gauche de la colonne. Dans ce cas, il y a 0 d’espacement en haut de la page, une valeur de 10 pixels (px) d’espacement à droite, 0 d’espacement en bas et 0 d’espacement à gauche. L’espacement à droite de 10px s’assure qu’il y ait un peu d’espace entre vos colonnes. Vous pouvez augmenter ou diminuer cet espace si vous le souhaitez. Si vous souhaitez que les colonnes se démarquent du contenu placé au-dessus et en dessous d’elles, vous pouvez ajouter un espacement en haut et en bas.

float:left; – Il s’agit de l’alignement du texte. Vous pouvez le modifier en précisant droite ou centre si vous le souhaitez.

Cette méthode vous donne un contrôle total sur l’apparence de vos colonnes, et c’est complètement gratuit.