Mettre en forme le contenu de votre site avec l'éditeur de texte

L'éditeur de texte sert à rédiger et à mettre en forme le contenu de votre site web : titres, listes, images, liens, tableaux. Il fonctionne comme un traitement de texte et génère le code HTML pour vous. Vous voyez le résultat pendant la saisie, sans connaître le code.

Dans cet article

• Où trouver l'éditeur
• La barre d'outils
• Coller un texte sans sa mise en forme
• Ajouter une image
• Ajouter un lien ou un fichier
• Créer un lien vers une section d'une page
• Modifier le code HTML

Où trouver l'éditeur

Sur votre site web, l'éditeur s'affiche notamment dans :

• les champs Introduction et Contenu d'un article. Voir l'article Créer des articles pour son site web ;
• le module Contenu personnalisé, qui affiche un texte libre directement dans une zone de page.

La barre d'outils

Survolez un bouton pour afficher son nom. Les principaux boutons sont :

• Source : affiche et modifie le code HTML du contenu.
• Coller comme texte brut et Coller depuis Word : collent un texte copié ailleurs sans sa mise en forme.
• Annuler et Rétablir : corrigent une erreur.
• Gras, Italique, Souligné, Barré, Indice et Exposant : mettent en forme le texte sélectionné.
• Supprimer la mise en forme : retire les styles du texte sélectionné sans effacer le texte.
• Listes numérotées et à puces, Diminuer le retrait et Augmenter le retrait : créent des listes, y compris des sous-listes.
• Aligner à gauche, Centrer, Aligner à droite et Justifier.
• Lien et Supprimer le lien.
• Image, Tableau et Ligne horizontale.
• Format de paragraphe : applique un titre (Titre 1 à Titre 6) ou un paragraphe normal.
• Taille de police, Couleur du texte et Couleur d'arrière-plan.
• Agrandir : affiche l'éditeur en plein écran.

Coller un texte sans sa mise en forme

Un texte copié depuis Word, un courriel ou un autre site apporte souvent sa propre mise en forme (police, couleurs, espacements), qui entre en conflit avec le style de votre site.

• Pour un texte provenant d'un site web ou d'un courriel, cliquez sur Coller comme texte brut.
• Pour un texte provenant de Word, cliquez sur Coller depuis Word.
• Si le texte est déjà collé, sélectionnez-le et cliquez sur Supprimer la mise en forme.

Ajouter une image

1. Placez le curseur à l'endroit voulu, puis cliquez sur Image.
2. Dans la fenêtre Propriétés de l'image, cliquez sur Parcourir le serveur, téléversez votre image ou choisissez une image déjà présente, puis double-cliquez dessus.
3. Remplissez le Texte alternatif, qui décrit l'image aux lecteurs d'écran et aux moteurs de recherche. Ajustez au besoin la Largeur et l'Alignement, puis cliquez sur OK.

Les étapes détaillées sont dans l'article Ajouter une image avec l'éditeur de texte.

Ajouter un lien ou un fichier

1. Sélectionnez le texte ou l'image à rendre cliquable, puis cliquez sur Lien.
2. Dans Type de lien, choisissez URL pour une page web ou Courriel pour une adresse courriel, puis saisissez l'adresse.
3. Pour ouvrir le lien dans un nouvel onglet, ouvrez l'onglet Cible et choisissez Nouvelle fenêtre (_blank).
4. Cliquez sur OK.

Pour proposer un document à télécharger (PDF, formulaire, rapport), consultez l'article Héberger des fichiers et créer des liens de téléchargement.

Créer un lien vers une section d'une page

Un lien peut mener directement à une section précise d'une page, par exemple pour créer une table des matières en haut d'une FAQ. Le lien cible alors la zone de la page qui contient la section.

1. Placez chaque section dans sa propre zone, par exemple avec un module Article unique par question.
2. Ouvrez la page publiée dans votre navigateur, faites un clic droit sur la section, puis choisissez Inspecter.
3. Dans le code affiché, repérez l'élément div qui englobe la section et dont la classe commence par zone-, puis copiez la valeur de son attribut id.
4. Dans l'éditeur, créez un lien de type URL vers # suivi de cet identifiant. Si la section se trouve sur une autre page, ajoutez #identifiant à la fin de l'adresse de cette page.

Modifier le code HTML

Le bouton Source affiche le code HTML généré par l'éditeur. Il sert à corriger une mise en forme rebelle ou à coller un code d'intégration (vidéo, formulaire, carte). Cliquez de nouveau sur Source pour revenir à l'affichage normal avant d'enregistrer.