> 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/rahmen-von-website-elementen-gestalten.md).

# Rahmen von Website-Elementen gestalten

Gestalte Rahmen an Buttons, Bildern und Videos gezielt, damit wichtige Inhalte klarer hervortreten und die Seite einheitlich wirkt.

Ein Rahmen ist die sichtbare Linie um ein einzelnes Element auf deiner Seite. Er kann einen Button besser erkennbar machen, ein Bild ruhig einbetten oder zwei Bereiche optisch voneinander trennen. Diese Anleitung zeigt dir, wie du die Einstellung sicher einsetzt und das Ergebnis selbst kontrollierst.

## Was du mit einem Rahmen erreichst

Ein Rahmen verändert nicht den Inhalt eines Elements. Er verändert nur dessen Erscheinungsbild. Das ist praktisch, wenn Besucherinnen und Besucher einen wichtigen nächsten Schritt schneller erkennen sollen – etwa einen Button zum Kontaktformular oder ein Bild, das zu einem Angebot gehört.

Du legst die Gestaltung immer für das Element fest, das gerade ausgewählt ist. Ein Rahmen an einem Button verändert deshalb nicht automatisch andere Buttons auf derselben Seite. Bereits vorhandene Seiten mit älteren Rahmeneinstellungen funktionieren weiterhin wie bisher, bis du sie selbst bearbeitest und veröffentlichst.

Die Einstellung steht in Websites und Funnels für unterstützte Elemente bereit. In der Regel gehören Buttons, Bilder und Videos dazu. Siehst du den Bereich **Rahmen** bei einem Element nicht, unterstützt dieses Element die Einstellung in deiner aktuellen Editoransicht nicht. Wähle dann ein anderes Element oder ändere nicht versehentlich einen umgebenden Abschnitt.

## Bevor du beginnst

Öffne die Seite, die du ändern möchtest, im Seiteneditor. Überlege vorher kurz, welches Ergebnis du brauchst:

* Soll ein Element insgesamt hervorgehoben werden? Dann erhalten alle vier Seiten dieselbe Stärke.
* Brauchst du nur eine Trennlinie, zum Beispiel unter einer Überschrift? Dann stellst du nur die untere Seite ein.
* Soll das Element weich und freundlich wirken? Dann rundest du die Ecken gleichmäßig ab.
* Soll das Erscheinungsbild bewusst unregelmäßig sein? Dann kannst du jede Ecke einzeln anpassen. Das ist selten nötig und sollte anschließend besonders sorgfältig geprüft werden.

Wähle möglichst einen Rahmen, der zum restlichen Auftritt passt. Mehrere kräftige Linien dicht nebeneinander konkurrieren miteinander und machen eine Seite schnell unruhig.

## Diese Einstellungen findest du im Bereich „Rahmen“

| Einstellung      | Wofür sie da ist                                                                                                                                    | Wann sie sinnvoll ist                                                                                                                               |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Rahmenart**    | Bestimmt, wie die Linie aussieht. Zur Auswahl können neben einer einfachen Linie auch Varianten wie doppelt, gerillt, erhaben oder vertieft stehen. | Eine einfache Linie passt meist zu klaren Formularen und Buttons. Auffälligere Varianten nur nutzen, wenn sie bewusst zum Design gehören.           |
| **Rahmenfarbe**  | Legt fest, in welcher Farbe die Linie erscheint.                                                                                                    | Wähle eine Farbe, die sich klar vom Hintergrund abhebt, aber Text und wichtige Inhalte nicht überdeckt.                                             |
| **Rahmenseiten** | Legt die Stärke der vier Seiten fest: oben, rechts, unten und links.                                                                                | Verbundene Werte ergeben einen gleichmäßigen Rahmen. Getrennte Werte eignen sich für eine einzelne Trennlinie oder einen Akzent an nur einer Seite. |
| **Eckenradius**  | Bestimmt, wie stark die vier Ecken abgerundet sind.                                                                                                 | Ein gemeinsamer Wert sorgt für ein ruhiges, einheitliches Ergebnis. Getrennte Werte nur einsetzen, wenn ein bestimmter Formeffekt gewünscht ist.    |

Bei **Rahmenseiten** und **Eckenradius** siehst du ein Verbindungssymbol. Solange die Werte verbunden sind, reicht eine Eingabe: Sie gilt für alle vier Seiten beziehungsweise alle vier Ecken. Löse die Verbindung erst, wenn du wirklich unterschiedliche Werte brauchst. Danach erscheinen getrennte Eingaben für die einzelnen Seiten oder Ecken.

## Rahmen Schritt für Schritt einrichten

1. Öffne in deinem Standort die gewünschte **Website** oder den gewünschten **Funnel** und starte den Seiteneditor.
2. Klicke in der Arbeitsfläche auf das Element, das du gestalten möchtest. Bei einem Button, Bild oder Video sollte das Element selbst markiert sein. Prüfe das kurz, bevor du weitergehst: Ist stattdessen ein ganzer Abschnitt ausgewählt, würdest du die Einstellung am falschen Bereich ändern.
3. Öffne rechts den Reiter **Stile**. Scrolle dort zum Bereich **Rahmen**. Die Bedienansichten zeigen: Die Rahmeneinstellungen liegen gesammelt in der rechten Seitenleiste, während du die Wirkung gleichzeitig in der Arbeitsfläche siehst.
4. Wähle zunächst die **Rahmenart** und danach die **Rahmenfarbe**. Beginne zurückhaltend. Eine klar erkennbare, einfache Linie ist für die meisten Seiten leichter zu lesen als eine dekorative Variante.
5. Lege unter **Rahmenseiten** die Stärke fest. Lasse das Verbindungssymbol aktiv, wenn oben, rechts, unten und links gleich aussehen sollen. Das ist die passende Wahl für einen Button oder ein Bild, das vollständig eingerahmt wird.
6. Benötigst du nur einen Akzent an einer Seite, löse die Verbindung. Nun kannst du für oben, rechts, unten und links eigene Werte setzen. Für eine Trennlinie unter einem Inhalt braucht nur die untere Seite einen sichtbaren Wert; die anderen Seiten lässt du ohne sichtbare Stärke.
7. Lege den **Eckenradius** fest. Mit verbundenen Werten werden alle Ecken gleich stark gerundet. Löse die Verbindung nur, wenn einzelne Ecken anders aussehen sollen. So kannst du zum Beispiel eine Form mit unterschiedlichen oberen und unteren Ecken gestalten, ohne die übrigen Ecken zu verändern.
8. Sieh dir das Element direkt in der Arbeitsfläche an. Ändere immer nur eine Einstellung und beurteile dann Wirkung, Abstand und Lesbarkeit. So erkennst du sofort, welche Eingabe den sichtbaren Unterschied verursacht.
9. Speichere deine Änderung. Veröffentliche die Seite erst, wenn die Vorschau stimmig ist. Der Editor stellt dafür oben die Aktionen **Speichern** und **Veröffentlichen** bereit.

## So prüfst du das Ergebnis sicher

Ein Rahmen sieht in der Arbeitsfläche manchmal anders aus als auf einem kleinen Bildschirm. Nimm dir deshalb vor dem Veröffentlichen zwei Minuten für diese Prüfung:

1. Wechsle zwischen Desktop- und Mobilansicht.
2. Kontrolliere, ob Text im Button oder auf dem Bild weiterhin gut lesbar ist.
3. Prüfe, ob der Rahmen noch genug Abstand zu Nachbarelementen hat und nichts gequetscht wirkt.
4. Stelle sicher, dass eine einseitige Linie tatsächlich an der gewünschten Seite erscheint.
5. Kontrolliere bei abgerundeten Ecken, ob Bild, Video oder Hintergrund an den Ecken sauber aussehen.
6. Speichere erneut, falls du nach der Vorschau etwas geändert hast. Veröffentliche erst danach.

## Typische Stolperfallen

### Der Bereich „Rahmen“ fehlt

Nicht jedes Element unterstützt die Einstellung in jedem Editorstand. Prüfe zuerst, ob du einen Button, ein Bild oder ein Video direkt ausgewählt hast. Ist der Bereich dort weiterhin nicht sichtbar, steht die Einstellung für dieses Element in deiner Ansicht nicht zur Verfügung.

### Nur eine Seite sollte eine Linie haben, aber alle vier Seiten ändern sich

Die Werte sind noch verbunden. Klicke auf das Verbindungssymbol bei **Rahmenseiten**, bevor du getrennte Werte eingibst. Prüfe danach jede Seite in der Arbeitsfläche, denn eine Eingabe für „unten“ ist nicht mit „oben“ vertauschbar.

### Die Form wirkt auf Mobilgeräten unruhig

Starte mit einer kleineren Stärke und einem gemeinsamen Eckenradius. Besonders bei schmalen Buttons und Bildern können sehr starke Linien oder stark unterschiedliche Ecken schneller auffallen als in der Desktopansicht.

### Nach dem Speichern ist die Änderung öffentlich nicht sichtbar

Speichern bewahrt deine Arbeit im Editor. Damit Besucherinnen und Besucher die neue Fassung sehen, muss die Seite anschließend auch veröffentlicht werden. Wenn du nach dem Speichern weiter geändert hast, speichere die letzte Anpassung erneut, bevor du veröffentlichst.

## Praxisbeispiel: Den Button zur Terminbuchung klar hervorheben

Auf einer Angebotsseite soll der Button **Termin auswählen** leicht zu erkennen sein, ohne den übrigen Inhalt zu überladen.

1. Öffne die Angebotsseite im Seiteneditor und klicke auf den Button.
2. Gehe zu **Stile** und öffne **Rahmen**.
3. Wähle eine einfache Rahmenart und eine Farbe, die sich sichtbar vom Hintergrund abhebt.
4. Lasse die Werte bei **Rahmenseiten** verbunden, damit der Button gleichmäßig eingerahmt wird.
5. Wähle einen kleinen, gemeinsamen Eckenradius. Der Button wirkt dadurch einheitlich und bleibt klar als anklickbares Element erkennbar.
6. Wechsle in die Mobilansicht. Prüfe, ob der Text vollständig im Button sichtbar bleibt und der Rahmen nicht zu dicht am Text liegt.
7. Speichere und veröffentliche die Seite, wenn der Button auf beiden Ansichten gut lesbar ist.

## Kurzcheck vor dem Veröffentlichen

* Das richtige einzelne Element ist ausgewählt.
* Rahmenart und Farbe passen zum Hintergrund.
* Verbundene oder getrennte Seitenwerte entsprechen deinem Ziel.
* Eckenradius und Rahmenstärke wirken auf Desktop und Mobilansicht stimmig.
* Die letzte Änderung ist gespeichert.
* Die Seite ist veröffentlicht.


---

# 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/rahmen-von-website-elementen-gestalten.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.