Afin de rythmer la mise en page et d’organiser au mieux les informations dans la page, installer un plugin offrant la fonctionnalité « colonne » devient vite indispensable pour aller plus loin avec WordPress.

Plusieurs solutions existent sur le marché, gratuites ou non. En voici trois.

Le plugin autorise quelques customisations dans Réglages > Advanced WP Columns mais reste assez limité. On peut choisir entre autres la largeur maximale totale, la structure initiale (une, deux, trois colonnes…) pour gagner du temps en cas de mise en page répétitive et activer le mode responsive.

wp-column-1-795x426
wp-column

Une fois le plugin installé et activé, il apparaît donc dans la barre d’outils. C’est le moment de choisir la structure générale soit le nombre de colonnes et d’ajuster les espaces simplement en tirant les marqueurs.

Des options de mise en page basiques sont proposées, quelques styles de texte et les alignements de rigueur. Lien et image. Pour quelque chose de plus travaillé, il vaut mieux travailler sa mise en page dans un article-brouillon et copier-coller le contenu directement.

wp-column-2-795x452
wp-column-3-795x453

Il faudra héberger ses images au préalable, on ne peut pas accéder à l’option ‘insertion de médias’. En le testant plus longtemps, j’ai remarqué qu’en ajoutant beaucoup de colonnes les unes en dessous des autres, pour une mise en page en grille par exemple, il pouvait se créer certains décalages.

wp-column-4-795x723

Ce plugin permet d’ajouter des colonnes mais aussi bien d’autres fonctionnalités au passage : menu en accordéon, barres de progression, tableaux, boutons, badges… Il existe en version pro avec des options vraiment étendues à partir de 15€/site. Ce qui nous intéresse aujourd’hui est compris dans la version gratuite.

easy-bootstrap-shortcode-1

Le plugin ajoute une barre de fonctionnalités dans l’éditeur WordPress. Il suffit de cliquer sur l’icône « colonne » et de choisir le nombre désiré, le code se crée alors instantanément. Un exemple « test » est là pour vous indiquer où écrire votre contenu.

easy-bootstrap-shortcode-2
easy-bootstrap-shortcode-3

La prise en main est facile et rapide. Ci-contre un exemple de page avec une des releases d’Hands in the Dark.
_
ATTENTION
Il est possible de faire la mise en page générale dans l’éditeur visuel mais il vous faudra vérifier la partie « code » avant toute publication. Il ne doit pas y avoir de saut de ligne sinon la mise en page peut sauter.
On utilise donc au besoin la balise < br > pour gérer les sauts de ligne.

Hands-In-The-Dark-(20141013)

Une solution payante du côté de CodeCanyon au prix de 9$. L’éditeur du plugin Right Here propose de le tester avant de l’acheter.

La mise en page est responsive, les largeurs s’affichent donc en pourcentage et non en pixels, ce qui rend la manipulation plus aisée. il peut se gérer dans l’éditeur visuel à l’aide d’icônes simples (aouter/supprimer/agrandir une colonne…) ou simplement avec le code.
Permettant de créer de 1 à 12 colonnes, cela couvre tous les esprits de mise en page et devrait convenir au plus grand nombre.

visual-columns-insert-columns
visual-columns-fluid-grid12columns