11

Gérer vos textes enrichis

Chapitre 11
6 min
Frédéric Lemercier

01. Ajouter et mettre en forme du contenu textuel

Vous pouvez commencer à taper dans le RTE, puis ajouter une mise en forme au texte pour créer des en-têtes, des blocs de guillemets, du texte en gras ou en italique et des liens.

02. Ajouter des paragraphes

Comme tout autre éditeur de texte, appuyer sur Entrée créera un nouveau paragraphe sur une nouvelle ligne où vous pourrez continuer à taper. Pour ajouter plusieurs paragraphes, appuyez simplement sur Entrée à la fin d'un paragraphe.

03. Ajouter des en-têtes et bloquer les guillemets

Pour créer un titre, il vous suffit de sélectionner n'importe quel texte à l'intérieur d'un paragraphe et de choisir une option d'en-tête (H1-H6).

Il en va de même pour la création de bloc de citation

04. Mettre en forme du texte et ajouter des liens

Toute partie d'un élément de texte (par exemple, titres, paragraphes, légendes, etc.) peut être mise en forme avec du gras, de l'italique et des liens. Sélectionnez simplement une partie du texte et appliquez une ou plusieurs options de mise en forme.

Lorsqu'un lien est ajouté à un texte, vous avez la possibilité de choisir une URL, une page, une section de page, un e-mail ou un numéro de téléphone.

05. Ajouter du contenu multimédia, du code personnalisé et des listes

Lorsque votre curseur de texte est sur une nouvelle ligne, un bouton plus apparaît. Cliquez sur ce bouton pour afficher un menu d'insertion avec des options pour ajouter des images, des vidéos, d'autres contenus multimédias riches, du code personnalisé et des listes à puces ou numérotées.

06. Ajouter des images, des vidéos et du contenu multimédia

Tous les éléments multimédias du RTE sont réactifs et respecteront les proportions du contenu. Voici une liste de certains des types "Rich Media" pris en charge:

  • Youtube
  • Vimeo
  • Post Instagram
  • Message Facebook
  • DailyMotion
  • Kickstarter
  • TEDWistia
  • Direct
  • Tic
  • Hulu
  • Albums Imgur
  • Google Maps
  • JSFiddle
  • Codepen
  • Scribd
  • SlideShare
  • Listes de lecture et graphiques Spotify
  • Giphy
  • SoundCloud
  • Et d'autres...

07. Paramètres des médias

Chaque élément multimédia peut être dimensionné à l'aide des préréglages ou peut être dimensionné selon une valeur de pixel ou de pourcentage spécifique dans les paramètres. Une légende facultative peut également être ajoutée sous les images.

08. Ajouter un code personnalisé

Le menu d'insertion comprend également un bouton pour ajouter un code personnalisé.

Utilisez-le pour insérer du code directement dans votre contenu de texte enrichi afin de maximiser le contenu de longue durée avec des intégrations tierces (HTML, CSS ou même JavaScript).

09. Engagez votre public avec des intégrations plus interactives

Des Tweets intégrables aux graphiques Google, vous pouvez créer des expériences plus interactives avec du contenu tiers. Vous pouvez utiliser l'élément incorporé avec des incorporations à partir de:

  • Twitter
  • Instagram
  • Google Sheets
  • Airtable
  • Mailchimp
  • SurveyMonkey
  • Gleam.io
  • et beaucoup plus

10. Créez des tableaux, des séparateurs et plus encore avec du HTML simple

Utilisez du code HTML pour mieux formater et afficher votre contenu.Vous avez la possibilité de créer des tableaux, des lignes de séparation ou même de formater correctement (et de mettre en évidence !) Des extraits de code. Vous pouvez le faire en 3 étapes:

  • Placez votre curseur là où vous souhaitez ajouter le tableau, le séparateur, etc.
  • Cliquez sur le signe plus pour ouvrir le menu d'insertion et cliquez sur le bouton de code personnalisé "< >"
  • Ajoutez votre code‍

11. Soyez précis avec votre CSS

Stylisez des parties spécifiques de votre contenu de texte enrichi avec du CSS ciblé. Faites référence à tous les styles déjà présentés sur votre site.

Voici comment :

  • Placez votre curseur là où vous souhaitez ajouter le CSS
  • Cliquez sur le signe plus pour ouvrir le menu d'insertion et cliquez sur le bouton de code personnalisé "< >"
  • Ajoutez votre CSS

12. Développez les fonctionnalités avec JavaScript

Ajoutez des extraits de code JavaScript personnalisés, comme des annonces Google Adsense, un widget AddThis ou une carte Google personnalisée.

Voici comment :

  • Placez votre curseur là où vous souhaitez ajouter l'extrait de code JavaScript
  • Cliquez sur le signe plus pour ouvrir le menu d'insertion et cliquez sur le bouton de code personnalisé "< >"
  • Ajoutez votre extrait de code Javascript

13. Ajouter des listes

Le menu d'insertion comprend des options pour ajouter des listes.

Le moyen le plus rapide d'ajouter une liste à puces consiste simplement à saisir un tiret (-) suivi d'un espace.

Le moyen le plus rapide d'ajouter une liste numérotée est de taper un chiffre entier suivi d'un point (par exemple 1., 3. ou 10.) suivi d'un espace. Ceci est particulièrement utile lorsque vous souhaitez continuer une liste numérotée après avoir ajouté des médias entre les éléments de la liste. Tapez simplement le chiffre suivant (par exemple 4.) suivi d'un point et d'un espace.

14. Coller du contenu riche

Vous pouvez coller du contenu enrichi à partir d'autres sites ou à partir d'un traitement de texte comme Google Docs. Tous les formats et liens seront collés dans l'élément de texte enrichi. Les images seront également importées lors du collage dans un élément de texte enrichi.

15. Coller du texte non formaté

Coller du contenu enrichi à partir d'autres sources peut entraîner une mise en forme indésirable telle que la couleur d'arrière-plan qui peut sembler étrange sur votre site. Soyez donc attentif lorsque vous collez du texte enrichi à partir d'autres sources.

Pour vous assurer qu'aucune mise en forme indésirable n'est collée, utilisez le raccourci clavier pour coller du texte non formaté (CMD + MAJ + V sur Mac | CTRL + MAJ + V sur Windows). Cela supprimera le texte de toute mise en forme, y compris le gras et l'italique.

Attention cependant, cela supprime également les liens.

16. Contenu de style

Le style des éléments à l'intérieur du RTE fonctionne différemment, c'est parce que le texte et les éléments multimédias à l'intérieur d'un RTE peuvent être créés ou supprimés par des collaborateurs à tout moment.

Besoin d'aide ? Demandez-nous !

Nous contacter

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.