> 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/verlaufe-und-hintergrundunscharfe-im-seiteneditor-verwenden.md).

# Verläufe und Hintergrundunschärfe im Seiteneditor verwenden

Gestalte Bereiche, Zeilen und Spalten im Seiteneditor mit Farbverläufen und Hintergrundunschärfe, ohne Lesbarkeit und mobile Ansicht aus dem Blick zu verlieren.

Farbverläufe und Hintergrundunschärfe helfen dir, wichtige Inhalte auf einer Website oder in einem Funnel klar vom Hintergrund abzuheben. Das ist besonders nützlich für einen Textblock über einem Bild oder für einen auffälligen Einstiegsbereich. Die Effekte ersetzen aber keine gute Lesbarkeit: Überschrift, Text, Schaltfläche und Eingabefelder müssen weiterhin deutlich erkennbar sein.

## Was du vorher brauchst

Du brauchst eine Website oder einen Funnel, den du im Seiteneditor bearbeiten kannst. Lege vor der Änderung fest, **welcher Container** gestaltet werden soll:

* **Bereich**: für einen breiten Abschnitt, etwa den ersten sichtbaren Bereich einer Seite.
* **Zeile**: für einen waagerechten Streifen, der mehrere Spalten umfasst.
* **Spalte**: wenn nur ein einzelner Text- oder Inhaltsblock hervorgehoben werden soll.

Der gewählte Container bestimmt, wo der Effekt sichtbar ist. Prüfe deshalb zuerst, ob die Auswahl den gesamten Bereich, nur die Zeile oder lediglich die Spalte markiert.

## Einen Farbverlauf anlegen

1. Öffne **Websites** und wähle die Website oder den Funnel aus.
2. Öffne die Seite im Seiteneditor.
3. Klicke auf den gewünschten Bereich, die Zeile oder die Spalte.
4. Scrolle in der rechten Seitenleiste zum Abschnitt **Hintergrund**.
5. Öffne dort den Reiter **Farbe**.
6. Aktiviere **Farbverlauf**.
7. Wähle bei **Typ** die gewünschte Verlaufsart.
8. Lege Farben und ihre Positionen fest. Speichere die Seite und prüfe anschließend die Vorschau.

Im Reiter **Farbe** bleibt die Gestaltung übersichtlich an einer Stelle. Dort kannst du zwischen einer einfarbigen Fläche, einem Bild oder einem Video als Hintergrund wechseln. Bereits vorhandene Bild- und Videohintergründe werden durch die neuen Optionen nicht automatisch verändert.

### Verlaufsarten und Einstellungen

| Einstellung   | Bedeutung                                              | Wann sinnvoll                                                                                                  |
| ------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| **Linear**    | Die Farben laufen in eine Richtung über den Container. | Für ruhige, klare Übergänge hinter Text oder in einem breiten Einstiegsbereich.                                |
| **Angular**   | Die Farben drehen sich um einen Mittelpunkt.           | Für eine bewusst auffällige, kreisende Wirkung. Prüfe dabei die Lesbarkeit besonders sorgfältig.               |
| **Radial**    | Die Farben gehen von einem Mittelpunkt nach außen.     | Wenn ein zentraler Inhalt oder ein Bildmotiv betont werden soll.                                               |
| **Farbpunkt** | Eine Farbe an einer bestimmten Stelle des Verlaufs.    | Zum Festlegen, wo eine Farbe beginnt, endet oder weich in die nächste übergeht.                                |
| **Winkel**    | Die Richtung des Verlaufs.                             | Nur bei **Linear** und **Angular** verfügbar. Verschiebe ihn, bis Text und Schaltflächen ruhig lesbar bleiben. |

Klicke auf **Farbe hinzufügen** oder direkt auf die Verlaufsleiste, um einen weiteren Farbpunkt anzulegen. Mit dem Farbwähler bestimmst du die genaue Farbe; mit der Verlaufsleiste verschiebst du ihre Position. Bis zu zehn Farbpunkte sind möglich. Für den Einstieg reichen meist zwei oder drei gut zueinander passende Farben.

### Farbverlauf zurücknehmen oder verbessern

Um einen einzelnen Farbpunkt zu entfernen, klicke auf das **X** neben diesem Punkt. Möchtest du wieder eine einfarbige Fläche verwenden, deaktiviere **Farbverlauf** und wähle im Reiter **Farbe** nur eine Hintergrundfarbe.

Siehst du sichtbare Streifen zwischen den Farben, ergänze nahe am harten Übergang einen zusätzlichen Zwischenpunkt. Alternativ helfen Farben mit ähnlicher Helligkeit und eine kleine Anpassung des Winkels. Ändere immer nur eine Einstellung und prüfe danach die Vorschau – so erkennst du, welche Änderung das Ergebnis verbessert.

## Hintergrundunschärfe einsetzen

Die Hintergrundunschärfe macht nur das weich, was **hinter** dem ausgewählten Container liegt. Text, Schaltflächen und andere Inhalte **im** Container bleiben scharf. Sie eignet sich daher gut für einen halbtransparenten Textblock über einem Bild.

1. Wähle im Seiteneditor den Bereich, die Zeile oder die Spalte aus.
2. Öffne rechts **Hintergrund** und danach den Reiter **Farbe**.
3. Aktiviere **Hintergrundunschärfe**.
4. Stelle mit dem Regler für die Unschärfestärke den gewünschten Wert ein.
5. Ergänze bei Bedarf eine leicht durchscheinende Hintergrundfarbe.
6. Speichere und kontrolliere den Bereich in der Vorschau.

Beginne mit einer niedrigen Stärke. Wird der Hintergrund zu weich, verliert die Seite ihren Zusammenhang; ist die Stärke zu gering, hebt sich der Textblock möglicherweise nicht ausreichend ab. Die Unschärfe wirkt nur, wenn hinter dem Container etwas sichtbar ist, das weichgezeichnet werden kann.

## Ergebnis auf Desktop und Mobil prüfen

Öffne nach jeder Änderung die Vorschau für große und kleine Bildschirme. Besonders lange Überschriften, Bilder und Schaltflächen können auf Mobilgeräten anders zusammenrücken als am Desktop.

Prüfe dabei diese Punkte:

* Ist jeder Text auch über einem Bild klar lesbar?
* Hebt sich die wichtigste Schaltfläche eindeutig vom Hintergrund ab?
* Sind Formularfelder, Hinweise und Fehlermeldungen weiterhin gut erkennbar?
* Liegt der Effekt nur auf dem beabsichtigten Bereich?
* Wirkt die Seite auch dann stimmig, wenn ein Hintergrundbild nicht geladen wird?

## Typische Probleme lösen

**Der Effekt erscheint im falschen Teil der Seite.** Wähle erneut den Container aus. Prüfe, ob du Bereich, Zeile oder Spalte markiert hast, und nimm die Einstellung im richtigen Container vor.

**Der Text ist trotz Unschärfe schwer lesbar.** Erhöhe nicht sofort die Unschärfe. Verwende zuerst eine stärker durchscheinende Hintergrundfarbe oder passe die Text- und Schaltflächenfarbe an. Die Lesbarkeit ist wichtiger als der visuelle Effekt.

**Der Verlauf wirkt unruhig oder gestreift.** Reduziere die Anzahl stark unterschiedlicher Farben, füge einen Zwischenpunkt ein oder verändere bei Linear und Angular den Winkel leicht.

**Auf Mobilgeräten sieht die Seite anders aus.** Öffne die mobile Vorschau und passe den betroffenen Container gezielt an. Kontrolliere danach noch einmal den Desktop, damit eine Änderung nicht unbeabsichtigt die große Ansicht verschlechtert.

## Praxisbeispiel: Text über einem Bild hervorheben

Ein Studio möchte auf seiner Startseite einen Termin-Button über einem ruhigen Hintergrundbild platzieren.

1. Das Team wählt die Spalte mit Überschrift, Kurztext und Schaltfläche aus.
2. Unter **Hintergrund** > **Farbe** aktiviert es einen linearen Verlauf mit zwei dezenten Farben.
3. Es setzt eine leichte Hintergrundunschärfe ein, damit das Bild hinter dem Text ruhiger wirkt.
4. In der Vorschau prüft das Team Desktop und Mobilansicht mit einer langen Überschrift.
5. Der Button bleibt klar sichtbar, alle Texte sind lesbar und der Effekt liegt nur auf der gewählten Spalte.

So entsteht eine klare nächste Aktion für Besucherinnen und Besucher, ohne dass das Hintergrundbild vom Inhalt ablenkt.


---

# 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/verlaufe-und-hintergrundunscharfe-im-seiteneditor-verwenden.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.