Créer une grille et ajouter 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.

Dans un éditeur de texte, 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.

5

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 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.

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.