Créer une grille / un tableau / une ancre dans un éditeur de texte

DANS CET ARTICLE

Ajouter une grille avec l'éditeur de texte

Les grilles permettent de mettre en page du contenu grâce à un système de colonnes et de lignes similaires à un tableau. Les grilles n'ont pas de bordure et respectent une position fixe. Elles sont également responsive par défaut.

Nouvel éditeur (étapes d'un projet, articles, événements...) : 

Dans le nouvel éditeur, il vous suffit de cliquer sur l'option d'ajout de tableau, puis de sélectionner la forme du tableau que vous souhaitez (nombre de cellulles, nombre de lignes) et vous pouvez enfin remplir les cellules et les mettre en forme. Par défaut la grille sera donc transparente. Si vous souhaitez en faire un tableau (lignes visibles), il suffira d'utiliser l'option couleur de bordure sur les cellules) : 

La largeur des colonnes se modifie simplement en déplaçant le séparateur entre les cellules.

Ancien éditeur (pages personnalisées, sections et en-tête de la page d'accueil...) :

Cliquez sur le bouton Grille.

Définissez un nombre de colonnes et de lignes.

Remplissez les cases. Dans l'exemple ci-dessous, la page est divisé en trois colonnes sur deux lignes. Quel que soit le contenu, les cases auront toujours la même largeur.

Une page web est divisée en 12 colonnes. C'est pourquoi il est possible d'avoir sur la même ligne d'une grille 2, 3, 4, 6 ou 12 colonnes => Pour une grille avec un nombre impair de colonnes, voir la section suivante.

Cliquez sur le bouton vert Mettre à jour pour enregistrer les modifications.

Pour ajouter des images : optez pour des images de petite taille si vous désirez conserver un espace entre les colonnes.

Modifier la largeur des colonnes

Pour modifier la largeur des colonnes, il est nécessaire d'aller modifier le code de la grille à la source. Pour cela, cliquez sur le bouton Source.

On peut voir que la grille se divise en 6 "paragraphes", chacun représentant une cellule : 3 sur la ligne 1 (row-1) et 3 sur la ligne 2 (row-2).

Chaque cellule est définie entre autre par la ligne suivante : 

Le chiffre 4 correspond à la largeur de la case. La largeur des 3 colonnes est égale à 12 (3x4). Ainsi, il est possible de modifier la largeur de chaque colonne tant que le total est égal à 12. 

Dans l'exemple ci-dessous, j'ai modifié les chiffres afin que :

la première ligne soit composée d'une case d'une largeur de 2/12, une deuxième de 6/12 et une troisième de 4/12. La deuxième ligne est composée d'une case d'une largeur de 3/12, puis 3/12 et enfin 6/12.

Dans l'éditeur de texte, la visualisation de la grille s'adapte automatiquement :

Une fois le texte mis à jour, les largeurs des colonnes sont modifiées sur la plateforme :

Ajouter un espacement entre des images  

 Dans l'éditeur de texte, double-cliquer sur l'image pour ouvrir l'encart d'édition.

 Indiquer un nombre dans le champ "espacement horizontal", puis cliquer sur "OK".

Créer une grille avec un nombre de colonnes impair   

   Dans un éditeur de texte, cliquer sur le bouton " Tableau". 

Dans la modale qui s'ouvre, indiquer "0" dans le champ "taille de la bordure", afin que les bordures n'apparaissent pas. 

Si besoin de centrer les colonnes, aller dans "Source" et indiquer <center> au début du tableau et </center> à la fin. 

Ajouter un tableau

Nouvel éditeur : 

Pour ajouter un tableau, il faut cliquer sur la même icône que pour l'ajout de grille et choisir la taille du tableau.

Comme l'usage par défaut de l'option tableau de l'éditeur est adapté aux grilles transparentes (pour de la mise en page), il faut indiquer à la grille qu'il s'agit d'un tableau afin que les propriétés du tableau soient appliquées. 
Pour cela, il faut aller dans la vue "Mode wysiwyg <-> html" de l'éditeur après avoir créé votre tableau : 

Et ajouter  class="table" comme ci-dessous : 



Les propriétés du tableau seront alors appliquées (contours des cellules en noir, alignement des colonnes et des cellules, largeur automatique fixe).

Ancien éditeur : 

Il suffit de cliquer sur l'icône de tableau : 

Et indiquer dans la fenêtre qui s'ouvre le nombre de lignes et de colonnes souhaités ainsi que les paramètres supplémentaires de largeur (en pixels) et d'espacement.

Ajouter une ancre

Vous pouvez ajouter une ancre dans votre texte. Ainsi, en cliquant sur le texte sur lequel se trouve l’ancre, le visiteur sera dirigé vers une partie spécifique de votre page.

Pour cela, vous devez aller dans la vue Source. 

Nouvel éditeur : 

Ancien éditeur : 

Dans le texte initial on mettra ceci : 

<p><a href="#titre1" name="titre1">TEXTE INITIAL</a></p>

Ensuite, au niveau du texte vers lequel on veut aller quand on clique sur le texte initial, il faut mettre le code suivant :

<p id="titre1">TEXTE DESTINATION DE L'ANCRE</p>

Lorsqu'ils cliqueront sur Texte initial, les visiteurs seront redirigés vers la partie Texte destination de l'ancre.