Aperçu de l'élément de texte enrichi - Aide Webflow
Utilisez un élément de texte enrichi (RTE) pour créer du contenu long.
Un élément de texte enrichi (RTE) est l'élément parfait pour créer du contenu long comme des articles de blog, des pages "À propos", des biographies, etc. Au lieu d'ajouter des éléments individuels de titre, paragraphe, liste ou image, vous pouvez double-cliquer sur un élément de texte enrichi pour créer et formater du texte, du code personnalisé et des éléments multimédias.
Comment ajouter un élément de texte enrichi à votre site
Vous pouvez ajouter un élément de texte enrichi en le faisant glisser depuis le panneau Ajouter (A) vers la zone de conception. Pour ajouter ou modifier le contenu à l'intérieur, double-cliquez sur l'élément de texte enrichi ou sélectionnez l'élément et appuyez sur Entrée ou Retour sur votre clavier.
Vous pouvez ajouter les éléments suivants dans les éléments de texte enrichi :
- Paragraphes
- Titres (H1-H6)
- Images
- Légendes d'images
- Attributs alt des images
- Code personnalisé
- Citations
- Listes non ordonnées (à puces)
- Listes ordonnées (numérotées)
- Vidéos (YouTube, Vimeo)
- Médias enrichis (Google Maps, SoundCloud, Imgur, Giphy, Codepen, et plus)
Vous pouvez également ajouter un formatage supplémentaire aux éléments de texte :
- Liens (URL, page, email, etc.)
- Texte en gras
- Texte en italique
- Texte en exposant et indice
- Code
Commandes slash
Lorsque vous éditez du contenu dans un RTE, vous pouvez utiliser des commandes slash pour générer rapidement du texte avec l'assistant AI de Webflow ou ajouter de nouveaux éléments de contenu. Pour utiliser les commandes slash, appuyez sur / (barre oblique) sur votre clavier et cliquez sur Générer plus de texte pour ajouter du texte contextuellement pertinent à l'aide de l'assistant AI, sélectionnez l'élément souhaité dans le menu Ajouter, ou commencez à taper pour filtrer la liste des éléments :
- Titre (H1–H6)
- Liste numérotée
- Liste à puces
- Paragraphe
- Citation
- Image
- Vidéo
- Contenu enrichi
- Intégration HTML
- Bloc de code
Comment ajouter et formater du contenu textuel
Vous pouvez commencer à taper dans le RTE, puis ajouter du formatage au texte pour créer des titres, des citations, du texte en gras ou en italique, du texte en exposant ou en indice, et des liens.
Générer du contenu textuel avec l'assistant AI de Webflow
Pour ajouter rapidement un texte contextuellement pertinent à un RTE en utilisant l'assistant AI :
- Cliquez droit sur le RTE
- Choisissez Modifier le texte dans le menu contextuel
- (Optionnel) Entrez une invite décrivant le texte que vous souhaitez générer
- Cliquez sur l'icône "Soumettre l'invite"
- Cliquez sur Terminé pour accepter le texte généré
En savoir plus sur l'utilisation de l'assistant AI de Webflow pour générer et éditer du contenu.
Comment ajouter des paragraphes
Comme dans tout autre éditeur de texte, appuyer sur Entrée sur votre clavier créera un nouveau paragraphe sur une nouvelle ligne où vous pourrez continuer à taper. Pour ajouter plusieurs paragraphes, appuyez sur Entrée à la fin d'un paragraphe. Vous pouvez également utiliser l'assistant AI de Webflow pour ajouter et affiner le texte pour vous.
Comment ajouter des titres et des citations
Pour créer un titre, sélectionnez n'importe quel texte à l'intérieur d'un paragraphe et choisissez une option de titre (H1-H6). Il en va de même pour créer des citations.
Comment formater du texte et ajouter des liens
Toute partie de n'importe quel élément de texte (par exemple, titres, paragraphes, légendes, etc.) peut être formatée en gras, italique, exposant, indice et liens en sélectionnant une partie du texte et en appliquant vos options de formatage souhaitées. En savoir plus sur le formatage de texte en ligne.
Lorsque vous créez un lien dans un RTE, vous avez la possibilité de choisir une URL, une page, une section de page, un email ou un numéro de téléphone.
Raccourcis clavier
Ces raccourcis clavier peuvent vous aider à formater rapidement le contenu en texte enrichi :
- Insérer un espace insécable : Shift + Espace
- Insérer un saut de ligne : Shift + Entrée
- Texte en gras : Commande + B (Contrôle + B sur Windows)
- Texte en italique : Commande + I (Contrôle + I sur Windows)
- Insérer un hyperlien : Commande + K (Contrôle + K sur Windows)
Lors de l'édition dans le RTE, vous pouvez utiliser le raccourci de commande slash (“/**”) pour ajouter rapidement des éléments de contenu. Vous pouvez également utiliser les raccourcis Markdown :
- Texte en italique :
*texte*ou_texte_ - Texte en gras :
**texte**ou__texte__ - Gras & italique :
***texte***ou___texte___ - Insérer un hyperlien :
[texte du lien](https://www.url.com) - Titre 1 :
#+ Espace - Titre 2 :
##+ Espace - Titre 3 :
###+ Espace - Titre 4 :
####+ Espace - Titre 5 :
#####+ Espace - Titre 6 :
######+ Espace - Bloc de citation :
>+ Espace - Liste non ordonnée :
-+ Espace - Liste ordonnée :
1.+ Espace
Comment 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. En cliquant sur ce bouton, un menu d'insertion s'affiche avec des options pour ajouter des images, des vidéos, d'autres médias enrichis, du code personnalisé et des listes à puces ou numérotées.
Ajouter des images, vidéos et médias enrichis
Tous les éléments multimédias dans le RTE sont réactifs et respecteront le ratio d'aspect du contenu. Le support vidéo YouTube, Vimeo et Dailymotion a été amélioré pour permettre des temps de démarrage personnalisés. Voici une liste de certains types de médias enrichis pris en charge :
- YouTube
- Vimeo
- Publication Instagram
- Publication Facebook
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Albums Imgur
- Google Maps
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Playlists et charts Spotify
- Giphy
- SoundCloud
- Et plus encore !
Paramètres des médias
Chaque élément multimédia peut être dimensionné à l'aide des préréglages dans les paramètres d'image ou défini à une valeur spécifique en pixels ou en pourcentage en cliquant sur l'icône "clé" dans la barre d'outils. Une légende optionnelle peut également être ajoutée sous les images.
Texte alternatif
Pour ajouter du texte alternatif aux images, sélectionnez l'image, cliquez sur l'icône "clé", puis saisissez votre texte alternatif. En savoir plus sur l'écriture de texte alternatif descriptif.
Comment ajouter du code personnalisé
Le menu d'insertion comprend un bouton pour ajouter du code personnalisé. Vous pouvez utiliser du code personnalisé pour créer des tableaux et des séparateurs avec HTML, styliser des parties de votre contenu avec CSS, étendre les fonctionnalités de votre site avec JavaScript et intégrer du contenu tiers.
Étapes :
- Placez votre curseur à l'endroit où vous souhaitez ajouter du code
- Cliquez sur l'icône "plus" pour ouvrir le menu d'insertion et cliquez sur le bouton de code personnalisé
- Ajoutez votre code
Comment ajouter des listes
Le menu d'insertion offre des options pour ajouter des listes non ordonnées (à puces) et ordonnées (numérotées). Vous pouvez également imbriquer ou désimbriquer des listes.
- Liste à puces : utilisez le menu d'insertion ou tapez un tiret
-suivi d'un espace. - Liste numérotée : utilisez le menu d'insertion ou tapez un entier suivi d'un point et d'un espace.
- Imbriquer une liste : sélectionnez l'élément et appuyez sur Tab. Désimbriquer : sélectionnez et appuyez sur Shift + Tab.
Comment ajouter du contenu texte enrichi à partir d'autres sources
Vous pouvez coller du texte enrichi à partir d'autres sites ou de traitements de texte (comme Google Docs). La mise en forme, les liens et les images seront conservés si collés dans le champ de texte enrichi du Designer ou du CMS.
Comment réorganiser et supprimer des éléments
Les éléments dans un élément de texte enrichi peuvent être réorganisés par glisser-déposer sur le canevas ou le Navigateur, ou via des raccourcis clavier. Les éléments peuvent être supprimés en sélectionnant et en appuyant sur Retour arrière ou Commande + X (Contrôle + X sur Windows).
Comment styliser le contenu RTE
Styliser des éléments individuels dans un élément de texte enrichi
Stylisez les éléments dans l'élément de texte enrichi comme tout élément Webflow : sélectionnez sur le canevas, allez au panneau de style, appliquez ou créez une classe, et stylisez.
Styliser des éléments dans un élément de texte enrichi avec des balises HTML
Les éléments RTE héritent des styles des balises HTML. Vous pouvez styliser via des sélecteurs imbriqués, limitant les styles par défaut aux RTE avec la même classe.
Étapes :
- Sélectionnez le RTE sur le canevas
- Donnez une classe au RTE
- Sélectionnez l'élément dans le RTE
- Allez au panneau de style (S)
- Cliquez dans le champ Sélecteur
- Sélectionnez la balise HTML
- Cliquez sur Imbriquer le sélecteur dans “nom de la classe”
- Stylisez comme désiré
Comment styliser du texte enrichi dynamique
Les éléments de texte enrichi peuvent se lier à des champs de texte enrichi dans une Collection. La stylisation est mieux réalisée en déconnectant, stylisant, et reconnectant—ou en appliquant une classe, stylisant, et en gardant connecté. En savoir plus sur le texte enrichi dynamique.