> 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/schatten-bei-website-elementen-gestalten.md). # Schatten bei Website-Elementen gestalten Setze Außen- und Innenschatten für Text, Bilder, Schaltflächen und weitere Seitenelemente bewusst ein, verstehe jeden sichtbaren Wert und prüfe die Wirkung vor der Veröffentlichung. Page "Schatten bei Website-Elementen gestalten" — id: DShExnO0gX9X4mk4uGjI, path: /one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/schatten-bei-website-elementen-gestalten *** ### description: >- Setze Außen- und Innenschatten für Text, Bilder, Schaltflächen und weitere Seitenelemente bewusst ein, verstehe jeden sichtbaren Wert und prüfe die Wirkung vor der Veröffentlichung. ## Schatten bei Website-Elementen gestalten ### Welches Problem Schatten lösen Schatten helfen Besuchern, wichtige Bereiche auf einer Seite schneller zu erkennen. Eine Karte kann sich klarer vom Hintergrund abheben, eine Schaltfläche wirkt leichter auffindbar und eine Überschrift kann bei einem kontrastreichen Hintergrund besser lesbar werden. Die Funktion ändert ausschließlich die optische Darstellung. Sie verändert weder den Inhalt eines Elements noch die Funktion einer Schaltfläche, die Reihenfolge von Abschnitten oder nachgelagerte Abläufe. Ein Schatten sollte deshalb immer einen konkreten Zweck haben: Orientierung, visuelle Trennung oder lesbarer Text. Zu viele oder zu starke Schatten machen eine Seite schnell unruhig und können die Aufmerksamkeit vom eigentlichen nächsten Schritt weglenken. ### Was vor dem Start bereitstehen muss Du brauchst eine bearbeitbare Website- oder Funnel-Seite und ein Element, dessen Gestaltung du anpassen möchtest. Lege vorher fest: * Welches Element soll hervorgehoben werden? * Soll der Schatten außerhalb oder innerhalb des Elements sichtbar sein? * Welche Hintergrundfarbe liegt hinter dem Element? * Muss der Effekt auf Desktop und Mobilgerät gleich wirken? * Wie prüfst du die Lesbarkeit von Text und die Erkennbarkeit von Schaltflächen? Starte mit einem einzelnen, dezenten Effekt. Weitere Schattenebenen kommen erst hinzu, wenn die Vorschau zeigt, dass sie einen erkennbaren Nutzen haben. ### Kasten- und Textschatten unterscheiden | Schattenart | Geeignet für | Wirkung | Grenze | | ------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------- | | **Kastenschatten** | Textbereiche, Überschriften, Bilder, Schaltflächen und weitere Seitenelemente | Hebt die Fläche vom Hintergrund ab oder lässt sie vertieft wirken. | Gilt für das gesamte Element, nicht nur für die Buchstaben. | | **Textschatten** | Textbasierte Elemente wie Überschriften und Absätze | Hebt die Zeichen optisch hervor und kann ihnen mehr Tiefe geben. | Ist nur bei textbasierten Elementen verfügbar. | Ein Textschatten ist kein Ersatz für ausreichenden Kontrast. Wenn Text ohne Effekt kaum lesbar ist, verbessere zuerst Farbe, Hintergrund oder Größe des Textes. ### Alle sichtbaren Werte verstehen Bei einem **Kastenschatten** hat jede Schattenebene diese Einstellungen: | Einstellung | Bedeutung | Praktischer Einsatz | | ----------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | **Außen / Innen** | Ein Außenschatten liegt außerhalb der Elementfläche; ein Innenschatten wirkt innerhalb der Fläche. | Außen eignet sich für schwebende Karten. Innen kann einen eingedrückten oder vertieften Eindruck erzeugen. | | **X-Wert** | Verschiebt den Schatten horizontal. | Ein positiver oder negativer Wert lässt den Schatten nach rechts oder links wandern. | | **Y-Wert** | Verschiebt den Schatten vertikal. | Damit wirkt der Schatten oberhalb oder unterhalb des Elements. | | **Unschärfe** | Steuert, wie hart oder weich die Schattenkante ist. | Eine stärkere Unschärfe ergibt einen weicheren Übergang. | | **Ausdehnung** | Vergrößert oder verkleinert die Fläche des Schattens. | Kleine Werte wirken meist natürlicher; starke Ausdehnung kann wie ein Rahmen erscheinen. | | **Farbe** | Legt Farbton und Transparenz fest. | Eine zurückhaltende, transparente Farbe passt häufig besser als ein deckender dunkler Schatten. | Ein **Textschatten** ist bewusst einfacher aufgebaut: Hier stehen X-Wert, Y-Wert, Unschärfe und Farbe zur Verfügung. Die Wahl **Außen / Innen** und die Ausdehnung gibt es beim Textschatten nicht. Das passt, weil er nur die Buchstaben gestaltet und keine gesamte Elementfläche. Das Plus-Symbol legt bei einem Kastenschatten zunächst einen zurückhaltenden Außenschatten an. In der sichtbaren Ausgangseinstellung sind X = 0 px, Y = 1 px, Unschärfe = 5 px und Ausdehnung = 0 px; die Farbe ist ein transparentes Schwarz. Nutze ihn als Ausgangspunkt und passe danach nur die Werte an, die für die gewünschte Wirkung nötig sind.\n\n## Schatten Schritt für Schritt einrichten 1. Öffne die gewünschte Website- oder Funnel-Seite im Editor. 2. Klicke auf das Element, das du gestalten möchtest. 3. Öffne den Bereich **Erweitert**. 4. Klappe die Einstellungen für **Schatten** auf. 5. Wähle bei einem Flächenelement **Kastenschatten**; bei einem Text-Element steht zusätzlich **Textschatten** zur Verfügung. 6. Klicke neben der gewünschten Schattenart auf das Plus-Symbol. 7. Öffne die neu angelegte Schattenebene. 8. Wähle **Außen** oder **Innen**. 9. Passe X-Wert, Y-Wert, Unschärfe, Ausdehnung und Farbe an. 10. Speichere die Änderung und öffne die Vorschau. Du kannst mehrere Schattenebenen für ein Element anlegen. Öffne dann jede Ebene einzeln, damit klar bleibt, welcher Wert welchen Effekt erzeugt. ### Außen- und Innenschatten bewusst einsetzen Ein **Außenschatten** lässt ein Element optisch über dem Hintergrund schweben. Er passt zum Beispiel zu einer wichtigen Karte, einer hervorgehobenen Schaltfläche oder einem Bildbereich. Ein **Innenschatten** liegt innerhalb der Fläche. Er erzeugt einen vertieften Eindruck und kann für zurückhaltende Details geeignet sein. Er sollte jedoch sparsam eingesetzt werden, weil er Flächen schnell schwer oder gedrückt wirken lässt. Für eine ruhige Seite genügt häufig ein weicher Außenschatten bei den wichtigsten Karten. Nutze nicht gleichzeitig unterschiedliche harte Schatten für alle Bilder, Textblöcke und Schaltflächen. Besucher sollen weiterhin erkennen, welcher Bereich wirklich wichtig ist. ### Mehrere Schattenebenen prüfen Mehrere Ebenen ermöglichen komplexere Effekte. Sie sind aber nicht automatisch besser. Gehe dabei so vor: 1. Richte zuerst eine einzige Ebene ein. 2. Prüfe ihre Wirkung in der Vorschau. 3. Füge nur dann eine zweite Ebene hinzu, wenn eine konkrete Wirkung fehlt, etwa eine sehr leichte zusätzliche Tiefe. 4. Reduziere eine Ebene sofort wieder, wenn das Element wie ein Rahmen, ein Leuchteffekt oder ein schwerer Kasten wirkt. 5. Prüfe die Seite anschließend auf Desktop und Mobilgerät. Die genaue Wirkung ergibt sich aus dem Zusammenspiel aller Werte. Verändere deshalb nicht X-Wert, Y-Wert, Unschärfe, Ausdehnung und Farbe gleichzeitig. Passe einen Wert an, prüfe die Vorschau und entscheide dann über den nächsten Schritt. ### Ergebnis kontrollieren Nach dem Speichern prüfst du nicht nur die Bearbeitungsfläche, sondern auch die Vorschau und die veröffentlichte Seite. 1. Öffne die Vorschau im Editor. 2. Prüfe, ob das Element klar erkennbar ist, ohne stärker als der eigentliche Inhalt zu wirken. 3. Lies Text auf dem betroffenen Hintergrund vollständig. 4. Wechsle in die Mobilansicht und kontrolliere Größe, Abstand und Zeilenumbrüche. 5. Veröffentliche die Seite. 6. Öffne die veröffentlichte Fassung in einem neuen Browserfenster und kontrolliere den Effekt erneut. Bei einer Schaltfläche teste zusätzlich den Klick. Der Schatten darf die sichtbare Gestaltung verändern, aber nicht darüber hinwegtäuschen, ob die Schaltfläche tatsächlich funktioniert. ### Praxisbeispiel: Eine Termin-Karte sichtbar ordnen Auf einer Seite stehen drei gleichartige Leistungsbereiche. Einer davon führt zur Terminbuchung und soll leichter erkennbar sein, ohne die anderen Bereiche zu überdecken. 1. Das Team wählt nur die Termin-Karte aus. 2. Im Bereich **Erweitert** fügt es einen Kastenschatten hinzu. 3. Es behält die voreingestellte Außenvariante und stellt einen weichen, dezenten Schatten ein. 4. Die Farbe bleibt zurückhaltend, damit sie zum Seitenhintergrund passt. 5. In der Vorschau prüft das Team, ob die Karte klarer zu erkennen ist und der Text lesbar bleibt. 6. Auf Mobilgeräten kontrolliert es, ob die Karte nicht zu schwer oder zu groß wirkt. 7. Erst nach der Prüfung veröffentlicht es die Seite. So wird die nächste Aktion besser sichtbar, ohne dass die gesamte Seite mit starken Effekten überladen wird. ### Häufige Fehler und Lösungen | Beobachtung | Wahrscheinliche Ursache | Lösung | | --------------------------------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | Der Schatten wirkt wie ein dicker Rahmen. | Ausdehnung oder Farbe ist zu stark. | Ausdehnung verringern und eine transparentere, zurückhaltende Farbe wählen. | | Das Element wirkt zu weit vom Hintergrund entfernt. | X- oder Y-Wert ist zu groß. | Versatz schrittweise reduzieren und nach jeder Änderung prüfen. | | Der Schatten hat eine harte, unruhige Kante. | Die Unschärfe ist zu niedrig. | Unschärfe erhöhen, bis der Übergang ruhig wirkt. | | Text wird schwer lesbar. | Der Textschatten konkurriert mit Schrift oder Hintergrund. | Textschatten entfernen oder Kontrast von Text und Hintergrund zuerst verbessern. | | Der Textschatten ist nicht auswählbar. | Es ist kein textbasiertes Element ausgewählt. | Eine Überschrift oder einen Absatz auswählen; für andere Elemente den Kastenschatten verwenden. | | Auf dem Smartphone wirkt der Effekt anders. | Die Darstellung wurde nur im Editor geprüft. | Mobilansicht und veröffentlichte Seite prüfen; Werte bei Bedarf für die Ansicht anpassen. | | Mehrere Schatten stören sich. | Zu viele Ebenen oder widersprüchliche Werte sind aktiv. | Zusätzliche Ebenen entfernen und mit einem einzelnen Außenschatten neu beginnen. | ### Grenzen der Funktion Schatten sind ein Gestaltungsmittel, keine Funktionslogik. Sie können Bereiche strukturieren und visuell hervorheben, ersetzen aber weder einen klaren Text noch eine eindeutige Schaltflächenbeschriftung. Verwende sie gezielt an wenigen wichtigen Stellen. Wenn ein Element nur durch einen starken Effekt auffällt, prüfe zuerst Inhalt, Größe, Abstand und Kontrast. Die verständlichste Seite ist meistens die, deren Hierarchie auch ohne viele Dekorationen klar bleibt. Weiterführend: [Rahmen von Website-Elementen gestalten](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/rahmen-von-website-elementen-gestalten) und [Bilder und Buttons auf Website-Seiten animieren](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/bilder-und-buttons-auf-website-seiten-animieren). --- # 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/schatten-bei-website-elementen-gestalten.md?ask=&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.