> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/rich-text-elemente-auf-websites-und-funnels-formatieren.md).

# Rich-Text-Elemente auf Websites und Funnels formatieren

Formatiere längere Inhalte auf Websites und Funnels mit Überschriften, Zitaten, Hervorhebungen sowie ein- und mehrstufigen Listen.

## Was das Element für dich erledigt

Mit dem **Rich-Text-Element** schreibst und strukturierst du längere Inhalte direkt im Seiteneditor. Es vereint Absätze, Überschriften, Zitate, Hervorhebungen, Listen und Code-Darstellungen in einem einzigen Element.

Das ist praktisch für Leistungsbeschreibungen, Erklärungen, Anleitungen, häufige Fragen oder längere Seitenabschnitte. Du musst dafür keine eigene technische Textvorlage anlegen.

Ein normales Absatz-Element lässt sich nicht nachträglich in ein Rich-Text-Element umwandeln. Wenn du die erweiterten Formatierungen brauchst, füge ein neues Rich-Text-Element ein und übernimm den Text dorthin.

## Bevor du beginnst

* Öffne die gewünschte Website- oder Funnel-Seite im Editor.
* Überlege, welche Information Besucher schnell erfassen sollen. Verwende Überschriften für Themenwechsel, Listen für klare Schritte und Zitate nur für Aussagen, die bewusst hervorgehoben werden sollen.
* Prüfe nach der Bearbeitung immer die Vorschau auf Desktop, Tablet und Smartphone.

## Rich-Text-Element einfügen

1. Öffne im linken Bereich **Schnell hinzufügen**.
2. Wechsle dort zu den Text-Elementen.
3. Ziehe **Rich Text** in eine vorhandene Zeile oder Spalte.
4. Klicke einmal in das neue Element, um zu schreiben und den Bearbeitungsbalken zu öffnen.
5. Speichere die Seite.

In der Elementauswahl steht **Rich Text** neben anderen Text- und Listen-Elementen. Das eingefügte Element ist mit einer eigenen Markierung auf der Seite erkennbar. Erst wenn du in das Element klickst oder Text markierst, erscheinen die Werkzeuge für die Textformatierung.

## Die schwebende Werkzeugleiste verstehen

Wenn du im Rich-Text-Element arbeitest, erscheint direkt am Text eine schwebende Werkzeugleiste. Dort findest du unter anderem:

| Werkzeug                  | Wofür es gedacht ist                                                                                               |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| **Absatz-Menü**           | Wechselt den markierten Text zwischen Absatz und Überschriften H1 bis H6.                                          |
| **Listen-Werkzeuge**      | Erstellen Aufzählungen oder nummerierte Listen. Über das jeweilige Menü wählst du deren Zeichen oder Nummerierung. |
| **Farbauswahl**           | Hebt markierten Text mit einer Hintergrundfarbe hervor.                                                            |
| **Zitat-Darstellung**     | Setzt eine Aussage als abgesetztes Zitat.                                                                          |
| **Code-Darstellung**      | Stellt kurze technische Begriffe oder längere technische Beispiele getrennt dar.                                   |
| **Einrücken / Ausrücken** | Erstellt oder entfernt Ebenen innerhalb einer Liste.                                                               |

Die Werkzeuge beziehen sich auf den Cursor oder den aktuell markierten Text. Markiere deshalb zuerst genau die Textstelle, die du ändern möchtest.

## Absätze und Überschriften strukturieren

Überschriften helfen Besuchern, einen längeren Abschnitt schnell zu überblicken. Sie sind keine bloße Schriftgröße, sondern bilden die inhaltliche Gliederung der Seite.

1. Markiere die Zeile oder den Textabschnitt.
2. Öffne in der schwebenden Werkzeugleiste das **Absatz-Menü**. Dort steht zunächst meist **P** für Absatz.
3. Wähle **Überschrift 1** bis **Überschrift 6** oder **Absatz**.

Die sichtbare Auswahl zeigt die Stufen Überschrift 1 bis 6 sowie Absatz. Nutze eine klare Reihenfolge: Eine große Überschrift leitet einen Hauptbereich ein; darunter folgen kleinere Überschriften für Teilthemen. Wähle eine Überschrift nicht nur deshalb, weil sie optisch größer wirkt.

### Tastenkürzel für Überschriften

| Betriebssystem | Kürzel                               |
| -------------- | ------------------------------------ |
| Windows        | **Strg** + **Alt** + **1** bis **6** |
| Mac            | **⌘** + **Option** + **1** bis **6** |

Mit der Zahl wählst du die Überschriftenstufe. Prüfe danach in der Vorschau, ob der Text weiterhin gut lesbar ist.

## Zitate hervorheben

Ein Zitatblock eignet sich für eine Kundenstimme, eine wichtige Aussage oder einen kurzen Merksatz. Im Editor erscheint er sichtbar eingerückt beziehungsweise mit einer vertikalen Markierung.

So erstellst du ihn:

1. Setze den Cursor an den Anfang einer neuen Zeile.
2. Tippe **>** und anschließend ein Leerzeichen.
3. Schreibe den Inhalt des Zitats.

Falls die Darstellung noch nicht übernommen wird, bestätige die Zeile mit der Eingabetaste. Verwende Zitatblöcke sparsam: Sie sollen eine Aussage herausheben, nicht mehrere normale Absätze ersetzen.

## Kurze und längere technische Beispiele darstellen

Diese Funktionen sind nur sinnvoll, wenn deine Besucher tatsächlich eine technische Angabe übernehmen müssen, zum Beispiel einen kurzen Platzhalter, einen Link-Parameter oder eine Konfiguration.

### Kurz innerhalb eines Satzes

Setze vor und nach den gewünschten Begriff je ein umgekehrtes Anführungszeichen:

`beispiel`

Der Begriff wird als kurze, abgesetzte Code-Stelle dargestellt. Nutze sie für einzelne Werte oder kurze Begriffe, nicht für einen ganzen Absatz.

### Mehrere Zeilen getrennt darstellen

1. Tippe drei umgekehrte Anführungszeichen: \`\`\`
2. Drücke die Eingabetaste.
3. Füge den mehrzeiligen Inhalt ein.

Der Editor erstellt daraus einen eigenständigen Code-Block. Prüfe besonders auf Smartphone, ob lange Zeilen lesbar bleiben. Wenn du keine technische Angabe vermittelst, ist ein normaler Absatz für Erstanwender fast immer verständlicher.

## Listen und Unterlisten erstellen

Listen machen Abläufe und Voraussetzungen leichter lesbar. Es gibt zwei Wege:

* Tippe am Zeilenanfang ein Sternchen \*\*\*\*\* und danach ein Leerzeichen.
* Markiere vorhandenen Text und wähle in der Werkzeugleiste **Aufzählung** oder **Nummerierte Liste**.

### Listenart wählen

Öffne das kleine Menü neben dem jeweiligen Listenwerkzeug.

| Listenart  | Verfügbare Darstellung                                                                     |
| ---------- | ------------------------------------------------------------------------------------------ |
| Aufzählung | Punkt, Kreis oder Quadrat                                                                  |
| Nummeriert | Zahlen, Kleinbuchstaben, Großbuchstaben, kleine römische Zahlen oder große römische Zahlen |

Wähle eine Aufzählung, wenn die Reihenfolge nicht wichtig ist. Wähle eine Nummerierung, wenn Besucher die Schritte in genau dieser Reihenfolge ausführen sollen.

### Unterliste erstellen oder zurücknehmen

1. Setze den Cursor in den Listeneintrag.
2. Drücke **Tab**, um den Eintrag eine Ebene weiter einzurücken.
3. Drücke **Umschalt** + **Tab**, um ihn wieder eine Ebene zurückzunehmen.

So kannst du zum Beispiel einen Hauptschritt und die dazugehörigen Unterlagen sauber voneinander trennen. Achte darauf, nicht zu viele Ebenen anzulegen: Auf einem Smartphone werden tief verschachtelte Listen schnell unübersichtlich.

## Listeneinträge mit dem richtigen Abstand darstellen

Der Stilbereich enthält für **Rich Text** und **Bullet List** die Einstellung **Listenabstand**. Sie steht neben **Zeilenhöhe**.

| Einstellung       | Was sie verändert                                                         |
| ----------------- | ------------------------------------------------------------------------- |
| **Zeilenhöhe**    | Abstand zwischen Zeilen innerhalb desselben Listeneintrags oder Absatzes. |
| **Listenabstand** | Vertikaler Abstand zwischen zwei getrennten Listeneinträgen.              |

So passt du den Listenabstand an:

1. Wähle das Rich-Text-Element oder ein Bullet-List-Element auf der Seite.
2. Öffne den Bereich **Stile**.
3. Suche **Listenabstand** neben **Zeilenhöhe**.
4. Ziehe den Regler oder trage einen Wert ein.
5. Prüfe die Änderung auf Desktop, Tablet und Smartphone.

Erhöhe den Listenabstand bei längeren Einträgen, damit sie nicht ineinanderlaufen. Verändere nicht nur die Zeilenhöhe, wenn eigentlich der Abstand zwischen zwei Punkten zu klein ist.

## Text mit Hintergrundfarbe hervorheben

Eine Hervorhebung lenkt den Blick auf einen Begriff, eine Voraussetzung oder einen wichtigen Hinweis.

1. Markiere die gewünschte Textstelle.
2. Klicke in der schwebenden Werkzeugleiste auf das Symbol für die **Farbauswahl**.
3. Wähle die gewünschte Farbe.

Die sichtbare Farbauswahl kann zentral definierte Farben, Standardfarben und eigene Farben enthalten. Verwende eine Hervorhebung nur für kurze Textstellen. Ganze Sätze oder Absätze in vielen Farben erschweren das Lesen und können auf kleinen Bildschirmen unruhig wirken.

## Gestaltung im rechten Stilbereich

Das Rich-Text-Element verwendet denselben Stilbereich wie ein normales Absatz-Element. Dadurch bleiben Schrift und Aufbau auf der Seite einheitlich.

| Bereich                      | Wofür du ihn verwenden kannst                                                                                             |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **Typografie**               | Schriftart, Schriftschnitt, Schriftgröße und Zeilenhöhe.                                                                  |
| **Abstände**                 | Außenabstand und Innenabstand getrennt für Desktop, Tablet und Smartphone.                                                |
| **Schatten und Animationen** | Dezente visuelle Betonung oder ein Einblende-Effekt.                                                                      |
| **Sichtbarkeit**             | Das Element auf einzelnen Gerätetypen ein- oder ausblenden.                                                               |
| **Erweitert**                | Eine eigene CSS-Klasse für zentrale Designregeln. Nutze dies nur, wenn dein Team solche Regeln bereits bewusst verwendet. |

Zentral hinterlegte Schriften und Farben werden für das Element übernommen. Passe sie nur dort abweichend an, wo die besondere Textfunktion es wirklich erfordert.

## Darstellung auf verschiedenen Geräten prüfen

1. Speichere die Seite.
2. Wechsle im Editor nacheinander in die Ansicht für Desktop, Tablet und Smartphone.
3. Kontrolliere lange Überschriften, eingerückte Zitate, Unterlisten und Code-Blöcke.
4. Prüfe bei Listen, ob **Zeilenhöhe** und **Listenabstand** gemeinsam noch angenehm lesbar sind.
5. Öffne die veröffentlichte oder Vorschau-Seite in einem privaten Browserfenster.

Achte besonders darauf, dass ein ausgeblendetes Rich-Text-Element auf dem gewünschten Gerät wirklich sichtbar ist und dass keine Überschrift oder lange technische Angabe abgeschnitten wird.

## Praxisbeispiel: Ablauf für ein Erstgespräch erklären

Eine Beratungsseite soll in wenigen Minuten erklären, wie ein Erstgespräch abläuft.

1. Das Team fügt ein Rich-Text-Element über **Schnell hinzufügen** ein.
2. Es gliedert den Abschnitt mit einer Überschrift und drei kleineren Zwischenüberschriften.
3. Die drei Gesprächsschritte werden als nummerierte Liste angelegt.
4. Benötigte Unterlagen werden mit **Tab** als Unterliste zum passenden Schritt eingerückt.
5. Ein kurzer Merksatz wird als Zitatblock abgesetzt.
6. Die Frist für eine Rückmeldung wird mit einer dezenten Hintergrundfarbe hervorgehoben.
7. Zum Schluss prüft das Team die Liste und das Zitat in der Smartphone-Ansicht und vergrößert bei Bedarf den **Listenabstand**.

Besucher erkennen so die Reihenfolge sofort, während wichtige Hinweise sichtbar bleiben, ohne die Seite zu überladen.

## Häufige Fragen und Fehler

### Ich sehe keine erweiterten Formatierungswerkzeuge

Prüfe, ob du wirklich ein **Rich Text**-Element bearbeitest. Ein normales Absatz-Element bietet nicht dieselben erweiterten Funktionen. Füge bei Bedarf ein neues Rich-Text-Element ein und übernimm den Text.

### Ein vorhandener Absatz lässt sich nicht umwandeln

Das ist erwartetes Verhalten. Kopiere den Inhalt in ein neu eingefügtes Rich-Text-Element. Formatiere danach die einzelnen Abschnitte über die schwebende Werkzeugleiste.

### Die Zeichen für Zitat oder Code bleiben sichtbar

Für ein Zitat muss **>** am Anfang einer neuen Zeile stehen und von einem Leerzeichen gefolgt werden. Für einen mehrzeiligen Code-Block müssen drei umgekehrte Anführungszeichen eingegeben und mit der Eingabetaste bestätigt werden. Prüfe, ob der Cursor wirklich im Rich-Text-Element steht.

### Die Unterliste wird nicht erstellt

Setze den Cursor in den Listeneintrag, nicht hinter die Liste. Drücke dann **Tab**. Mit **Umschalt** + **Tab** nimmst du die Einrückung wieder zurück.

### Die Liste wirkt auf dem Smartphone zu gedrängt

Öffne den Stilbereich und erhöhe **Listenabstand**. Diese Einstellung trennt einzelne Punkte voneinander; die **Zeilenhöhe** verändert dagegen nur den Abstand innerhalb eines einzelnen Punkts.

### Eine Hervorhebung sieht zu unruhig aus

Beschränke die Hintergrundfarbe auf einzelne Begriffe oder kurze Hinweise. Verwende bevorzugt eine bestehende zentrale Farbe und prüfe den Kontrast in der Vorschau.

## Kurzcheck vor der Veröffentlichung

* [ ] Das Rich-Text-Element wurde statt eines normalen Absatz-Elements verwendet.
* [ ] Überschriften bilden eine verständliche Reihenfolge.
* [ ] Nummerierte Listen werden nur für echte Schrittfolgen verwendet.
* [ ] Unterlisten sind nicht unnötig tief verschachtelt.
* [ ] Listenabstand und Zeilenhöhe wurden getrennt geprüft.
* [ ] Zitate, Hervorhebungen und technische Beispiele sind sparsam eingesetzt.
* [ ] Desktop-, Tablet- und Smartphone-Ansicht wurden kontrolliert.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/rich-text-elemente-auf-websites-und-funnels-formatieren.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.