Überblick über das Rich-Text-Element - Webflow Hilfe
Verwenden Sie ein Rich-Text-Element (RTE), um lange Inhalte zu erstellen.
Ein Rich-Text-Element (RTE) ist das perfekte Element, um lange Inhalte wie Blogbeiträge, Über-Seiten, Biografien usw. zu erstellen. Anstatt einzelne Überschriften-, Absatz-, Listen- oder Bildelemente hinzuzufügen, können Sie in ein Rich-Text-Element doppelklicken, um Text, benutzerdefinierten Code und Medienelemente zu erstellen und zu formatieren.
So fügen Sie ein Rich-Text-Element zu Ihrer Website hinzu
Sie können ein Rich-Text-Element hinzufügen, indem Sie es aus dem Hinzufügen-Panel (A) auf die Designer-Leinwand ziehen. Um den Inhalt hinzuzufügen oder zu bearbeiten, doppelklicken Sie auf das Rich-Text-Element oder wählen Sie das Element aus und drücken Sie Enter oder Return auf Ihrer Tastatur.
Sie können die folgenden Elemente innerhalb von Rich-Text-Elementen hinzufügen:
- Absätze
- Überschriften (H1-H6)
- Bilder
- Bildunterschriften
- Bild-alt-Attribute
- Benutzerdefinierter Code
- Blockzitate
- Ungeordnete Listen (Aufzählungszeichen)
- Geordnete Listen (nummeriert)
- Videos (YouTube, Vimeo)
- Rich Media (Google Maps, SoundCloud, Imgur, Giphy, Codepen und mehr)
Sie können auch zusätzliche Formatierungen zu Textelementen hinzufügen:
- Links (URL, Seite, E-Mail usw.)
- Fettschrift
- Kursivschrift
- Hoch- und Tiefgestellt
- Code
Slash-Befehle
Wenn Sie Inhalte in einem RTE bearbeiten, können Sie Slash-Befehle verwenden, um schnell Text mit dem Webflow AI Assistant zu generieren oder neue Inhaltselemente hinzuzufügen. Um Slash-Befehle zu verwenden, drücken Sie / (Schrägstrich) auf Ihrer Tastatur und klicken Sie auf Mehr Text generieren, um kontextbezogenen Text mit dem AI Assistant hinzuzufügen, wählen Sie das gewünschte Element aus dem Hinzufügen-Menü aus oder beginnen Sie zu tippen, um die Liste der Elemente zu filtern:
- Überschrift (H1–H6)
- Nummerierte Liste
- Aufzählungsliste
- Absatz
- Blockzitat
- Bild
- Video
- Rich Content
- HTML-Einbettung
- Codeblock
Wie man Textinhalte hinzufügt und formatiert
Sie können im RTE zu tippen beginnen und dann Formatierungen hinzufügen, um Überschriften, Blockzitate, fett oder kursiv gedruckten Text, Hoch- oder Tiefgestellt und Links zu erstellen.
Textinhalte mit dem Webflow AI Assistant generieren
Um schnell kontextuell relevante Texte zu einem RTE mit dem AI Assistant hinzuzufügen:
- Rechtsklicken Sie auf das RTE
- Wählen Sie Kopie ändern aus dem Kontextmenü
- (Optional) Geben Sie eine Eingabeaufforderung ein, die die zu generierende Kopie beschreibt
- Klicken Sie auf das Symbol "Eingabeaufforderung senden"
- Klicken Sie auf Fertig, um die generierte Kopie zu akzeptieren
Wie man Absätze hinzufügt
Wie in jedem anderen Texteditor erstellt das Drücken von Enter auf Ihrer Tastatur einen neuen Absatz in einer neuen Zeile, in der Sie weiterschreiben können. Um mehrere Absätze hinzuzufügen, drücken Sie Enter am Ende eines Absatzes. Sie können auch den Webflow AI Assistant verwenden, um Text für Sie hinzuzufügen und zu verfeinern.
Wie man Überschriften und Blockzitate hinzufügt
Um eine Überschrift zu erstellen, wählen Sie einen beliebigen Text innerhalb eines Absatzes aus und wählen Sie eine Überschrift (H1-H6) Option. Dasselbe gilt für das Erstellen von Blockzitaten.
Wie man Text formatiert und Links hinzufügt
Jeder Teil eines Textelements (z.B. Überschriften, Absätze, Bildunterschriften, etc.) kann mit fett, kursiv, hochgestellt, tiefgestellt und Links formatiert werden, indem Sie einen Teil des Textes auswählen und Ihre gewünschten Formatierungsoptionen anwenden. Erfahren Sie mehr über die Inline-Textformatierung.
Wenn Sie innerhalb eines RTE einen Link erstellen, haben Sie die Möglichkeit, eine URL, Seite, Seitenabschnitt, E-Mail oder Telefonnummer auszuwählen.
Tastenkombinationen
Diese Tastenkombinationen helfen Ihnen, Rich-Text-Inhalte schnell zu formatieren:
- Geschütztes Leerzeichen einfügen: Shift + Space
- Zeilenumbruch einfügen: Shift + Enter
- Text fett formatieren: Command + B (Control + B auf Windows)
- Text kursiv formatieren: Command + I (Control + I auf Windows)
- Hyperlink einfügen: Command + K (Control + K auf Windows)
Während der Bearbeitung im RTE können Sie den Slash-Befehl („/**“) verwenden, um schnell Inhaltselemente hinzuzufügen. Sie können auch Markdown-Abkürzungen verwenden:
- Text kursiv formatieren:
*text*oder_text_ - Text fett formatieren:
**text**oder__text__ - Fett & kursiv:
***text***oder___text___ - Hyperlink einfügen:
[Hyperlink-Text](https://www.url.com) - Überschrift 1:
#+ Space - Überschrift 2:
##+ Space - Überschrift 3:
###+ Space - Überschrift 4:
####+ Space - Überschrift 5:
#####+ Space - Überschrift 6:
######+ Space - Blockzitat:
>+ Space - Ungeordnete Liste:
-+ Space - Geordnete Liste:
1.+ Space
Wie man Medieninhalte, benutzerdefinierten Code und Listen hinzufügt
Wenn sich der Textcursor in einer neuen Zeile befindet, erscheint ein „Plus“-Button. Durch Klicken auf diesen Button wird ein Einfüge-Menü angezeigt, mit dem Sie Bilder, Videos, andere Rich-Media, benutzerdefinierten Code sowie Aufzählungs- oder nummerierte Listen hinzufügen können.
Bilder, Videos und Rich-Media hinzufügen
Alle Medienelemente im RTE sind responsiv und respektieren das Seitenverhältnis des Inhalts. Die Unterstützung für YouTube-, Vimeo- und Dailymotion-Videos wurde verbessert, um benutzerdefinierte Startzeiten zu ermöglichen. Hier ist eine Liste einiger unterstützter Rich-Media-Typen:
- YouTube
- Vimeo
- Instagram-Beitrag
- Facebook-Beitrag
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Imgur-Alben
- Google Maps
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Spotify-Playlists und -Charts
- Giphy
- SoundCloud
- Und mehr!
Medieneinstellungen
Jedes Medienelement kann mit den Voreinstellungen in den Bildeinstellungen oder durch Klicken auf das „Schraubenschlüssel“-Symbol in der Symbolleiste auf einen bestimmten Pixel- oder Prozentwert eingestellt werden. Eine optionale Bildunterschrift kann ebenfalls unter Bildern hinzugefügt werden.
Alt-Text
Um Alt-Text zu Bildern hinzuzufügen, wählen Sie das Bild aus, klicken Sie auf das „Schraubenschlüssel“-Symbol und geben Sie dann Ihren Alt-Text ein. Erfahren Sie mehr über das Schreiben von beschreibendem Alt-Text.
So fügen Sie benutzerdefinierten Code hinzu
Das Einfügen-Menü enthält eine Schaltfläche zum Hinzufügen von benutzerdefiniertem Code. Sie können benutzerdefinierten Code verwenden, um Tabellen und Trennlinien mit HTML zu erstellen, Teile Ihres Inhalts mit CSS zu gestalten, die Funktionalität Ihrer Website mit JavaScript zu erweitern und Inhalte von Drittanbietern einzubetten.
Schritte:
- Platzieren Sie den Cursor dort, wo Sie Code hinzufügen möchten
- Klicken Sie auf das „Plus“-Symbol, um das Einfügen-Menü zu öffnen, und klicken Sie auf die Schaltfläche für benutzerdefinierten Code
- Fügen Sie Ihren Code hinzu
So fügen Sie Listen hinzu
Das Einfügen-Menü bietet Optionen zum Hinzufügen von ungeordneten (Aufzählungs-) und geordneten (nummerierten) Listen. Sie können auch Listen verschachteln oder entverschachteln.
- Aufzählungsliste: Verwenden Sie das Einfügen-Menü oder tippen Sie ein Minuszeichen
-gefolgt von einem Leerzeichen. - Nummerierte Liste: Verwenden Sie das Einfügen-Menü oder tippen Sie eine Zahl gefolgt von einem Punkt und einem Leerzeichen.
- Liste verschachteln: Element auswählen und Tab drücken. Entverschachteln: Auswählen und Shift + Tab drücken.
So fügen Sie Rich-Text-Inhalte aus anderen Quellen hinzu
Sie können Rich-Text von anderen Websites oder Textverarbeitungsprogrammen (wie Google Docs) einfügen. Formatierungen, Links und Bilder bleiben erhalten, wenn sie im Designer oder CMS-Rich-Text-Feld eingefügt werden.
Wie man Elemente neu anordnet und löscht
Elemente in einem Rich-Text-Element können per Drag-and-Drop auf die Leinwand oder den Navigator neu angeordnet werden oder über Tastenkombinationen. Elemente können gelöscht werden, indem man sie auswählt und Rücktaste oder Command + X (Control + X auf Windows) drückt.
Wie man RTE-Inhalte stylt
Styling einzelner Elemente innerhalb eines Rich-Text-Elements
Stilelemente innerhalb des Rich-Text-Elements wie jedes Webflow-Element: auf der Leinwand auswählen, zum Stil-Panel gehen, eine Klasse anwenden oder erstellen und stylen.
Styling von Elementen innerhalb eines Rich-Text-Elements mit HTML-Tags
RTE-Elemente erben Stile von HTML-Tags. Sie können über verschachtelte Selektoren stylen, um Standardstile auf RTEs mit derselben Klasse zu beschränken.
Schritte:
- RTE auf der Leinwand auswählen
- RTE eine Klasse geben
- Element im RTE auswählen
- Zum Stil-Panel (S) gehen
- In das Selektor-Feld klicken
- HTML-Tag auswählen
- Selektor innerhalb von „Klassenname“ verschachteln klicken
- Nach Wunsch stylen
Wie man dynamischen Rich-Text stylt
Rich-Text-Elemente können an Rich-Text-Felder in einer Sammlung gebunden werden. Das Styling erfolgt am besten durch Trennen, Stylen und erneutes Binden – oder durch Anwenden einer Klasse, Stylen und verbunden halten. Erfahren Sie mehr über dynamischen Rich-Text.