Mise en page avancée : les shortcodes pour créer des colonnes

Définition : Les shortcodes sont des balises de code pré-définies permettant d’insérer des éléments sur un site.

Les balises de code sont insérées dans l’éditeur de texte.

Les shortcodes proposés dans l’éditeur de texte d’un site 6temFlex, permettent d’enrichir la mise en page de votre contenu en créant par exemple des colonnes.

Accès aux shortcodes des colonnes dans l'éditeur de texte

Pour insérer des colonnes, cliquez tout d’abord sur le bouton Shortcodes puis sélectionnez Colonnes parmi les différentes mises en page disponibles.

Vous pouvez alors créer différents types de colonnes :

• 2 colonnes de même largeur
• 3 colonnes de même largeur
• 4 colonnes de même largeur
• 2 colonnes, une sur un tiers et l’autre sur deux tiers
• 2 colonnes, une sur deux tiers et l’autre sur un tiers

Insertion du shortcode

Si vous cliquez sur le bouton Shortcodes puis sur Colonnes et enfin sur 2 colonnes, le shortcode est alors automatiquement ajouté à l’endroit où votre curseur est positionné dans le contenu de l’éditeur de texte. Sa forme est la suivante :

[colonnes]
[colonne longueur="1demi"]
Contenu de la colonne 1
[/colonne]
[colonne longueur="1demi"]
Contenu de la colonne 2
[/colonne]
[/colonnes]

Voici l’explication de sa construction :

1. [colonnes] ouvre le shortcode des colonnes.
2. [colonne longueur="1demi"] ouvre ensuite la 1ère colonne dont la taille est « 1demi », soit la moitié de la page en largeur.
3. « Contenu de la colonne 1 » représente le contenu de la 1ère colonne.
4. [/colonne] ferme enfin la 1ère colonne.
5. [colonne longueur="1demi"] ouvre ensuite la 2ème colonne dont la taille est « 1demi », soit la moitié de la page en largeur.
6. « Contenu de la colonne 2 » représente le contenu de la 2ème colonne.
7. [/colonne] ferme ensuite la 1ère colonne.
8. [/colonnes] ferme le shortcode des colonnes.

Le principe est exactement le même pour les autres shortcodes de colonnes.

Exemple d’utilisation

Nous allons créer 3 colonnes. La 1ère contiendra un texte de Voltaire, la 2ème une galerie photo et la 3ème une vidéo.

Le shortcode va donc se présenter de cette façon :

[colonnes]
[colonne longueur="1tiers"]
Le texte
[/colonne]
[colonne longueur="1tiers"]
La galerie photo
[/colonne]
[colonne longueur="1tiers"]
La vidéo
[/colonne]
[/colonnes]

Et voici le résultat !

Tout d’abord, il y avait en Westphalie, dans le château de M. le baron de Thunder-ten-tronckh, un jeune garçon à qui la nature avait donné les moeurs les plus douces. Sa physionomie annonçait son âme. Il avait le jugement assez droit, avec l’esprit le plus simple ; c’est, je crois, pour cette raison qu’on le nommait Candide. Les anciens domestiques de la maison soupçonnaient qu’il était fils de la soeur de monsieur le baron et d’un bon et honnête gentilhomme du voisinage, que cette demoiselle ne voulut jamais épouser parce qu’il n’avait pu prouver que soixante et onze quartiers, et que le reste de son arbre généalogique avait été perdu par l’injure du temps.

Voltaire, Candide.