> 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/breite-und-hohe-von-seitenelementen-anpassen.md). # Breite und Höhe von Seitenelementen anpassen Passe Breite und Höhe von Seitenelementen gezielt an, prüfe die Wirkung auf Desktop und Mobilgeräten und nimm feste Größen bei Bedarf sicher zurück. ## Was diese Einstellung bewirkt Mit **Containergröße** legst du direkt im Seiteneditor fest, wie viel Breite und Höhe ein einzelnes Element innerhalb seines übergeordneten Bereichs einnimmt. Das ist hilfreich für Texte, Bilder, Schaltflächen, Formulare oder andere Bausteine, wenn die automatische Größe nicht zum gewünschten Aufbau passt. Die Einstellung verändert nicht den Inhalt selbst, sondern den Platz, den er im übergeordneten Bereich – etwa einer Spalte, Zeile oder einem Abschnitt – bekommt. Du kannst für Desktop und Mobilgeräte getrennte Werte hinterlegen. > **Kurz entscheiden:** Nutze eine eigene Breite oder Höhe nur, wenn die automatische Größe das gewünschte Layout nicht zuverlässig erreicht. Beginne mit einer kleinen Änderung, prüfe sie auf beiden Geräteansichten und veröffentliche erst danach. ## Voraussetzungen und Grenzen Du brauchst eine Website- oder Funnel-Seite, die du im Editor bearbeiten darfst. Wähle immer zuerst das konkrete Element aus, dessen Größe sich ändern soll. | Voraussetzung oder Grenze | Bedeutung im Alltag | | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | Ausgewähltes Element | Die Größenfelder gelten für das aktuell markierte Element, nicht automatisch für die ganze Seite. | | Übergeordneter Bereich | Prozentwerte beziehen sich auf den Bereich, in dem das Element liegt. Prüfe deshalb auch die umgebende Spalte, Zeile oder den Abschnitt. | | Getrennte Geräteansichten | Werte aus der Mobilansicht verändern die Desktopwerte nicht. | | Positive Größe | Null und negative Werte werden nicht übernommen; das Element behält seine bisherige Größe. | | Vorschau und Veröffentlichung | Speichere erst nach der Prüfung und veröffentliche die Seite erst, wenn beide Ansichten verständlich und nutzbar sind. | Die Größensteuerung ergänzt **Außenabstand** und **Innenabstand**, ersetzt sie aber nicht. Breite und Höhe bestimmen den Platz des Elements. Außenabstand schafft Abstand zu benachbarten Elementen. Innenabstand schafft Luft zwischen Inhalt und Rand innerhalb des Elements. ## Den passenden Wert auswählen | Einheit | Wofür sie geeignet ist | Praktische Folge | | ---------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | **px** | Eine bewusst feste Größe | Gut für ein kleines Logo oder eine Schaltfläche mit klarer Breite. Die Größe reagiert aber nicht automatisch auf den verfügbaren Platz. | | **%** | Ein Anteil des übergeordneten Bereichs | Geeignet für nebeneinanderliegende Karten oder Spalten. Die Breite passt sich an den Bereich an. | | **em** / **rem** | Eine Größe, die sich an der Schrift orientiert | Sinnvoll, wenn der Aufbau mit der Textgröße mitwachsen soll. | | **vh** / **vw** | Ein Anteil der sichtbaren Bildschirmhöhe oder -breite | Nutze diese Werte bewusst für große Einstiegsbereiche und prüfe besonders sorgfältig auf kleinen Bildschirmen. | | **auto** | Die natürliche Größe des Inhalts | Die richtige Wahl, wenn du keine feste Vorgabe brauchst oder eine frühere Größenänderung zurücknehmen möchtest. | Dezimalwerte sind möglich. Für drei gleich breite Karten kann zum Beispiel ein Prozentwert wie **33,33 %** sinnvoll sein. Prüfe in der Mobilansicht trotzdem den Umbruch: Drei passende Desktop-Karten können auf einem schmalen Bildschirm unruhig oder zu eng wirken. ## Größe im Seiteneditor einstellen 1. Öffne die gewünschte Website- oder Funnel-Seite im Editor. 2. Klicke das Element an, das du ändern möchtest, zum Beispiel einen Text, ein Bild, eine Schaltfläche oder ein Formular. 3. Öffne rechts den Tab **Stil**. 4. Scrolle zum Abschnitt **Containergröße**. 5. Wähle bei **Breite** oder **Höhe** die passende Einheit aus dem Auswahlfeld. 6. Trage einen positiven Wert ein. Ändere zunächst nur eine Dimension, damit die Auswirkung nachvollziehbar bleibt. 7. Prüfe die Darstellung direkt im Editor und anschließend in der Vorschau. 8. Öffne über den Geräteumschalter bei **Containergröße** die Mobilansicht. 9. Hinterlege dort bei Bedarf eigene Werte für Breite oder Höhe. 10. Speichere die Änderung erst, wenn Desktop und Mobilansicht geprüft sind. Wenn du die ursprüngliche automatische Größe wiederherstellen möchtest, wähle bei der betreffenden Dimension **auto**. Das ist sicherer als einen Wert von null einzugeben. ## Die sichtbaren Felder richtig verstehen | Feld oder Bereich | Was du festlegst | Worauf du achten solltest | | --------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | **Breite** | Wie viel horizontalen Platz das Element bekommt | Prüfe bei Prozentwerten die Breite des übergeordneten Bereichs. | | **Höhe** | Wie viel vertikalen Platz das Element bekommt | Eine feste Höhe kann bei längeren Texten oder auf kleinen Bildschirmen unpassend sein. | | Einheit | Wie der eingegebene Wert berechnet wird | Wähle die Einheit passend zum Ziel, nicht nur nach einem schönen Desktop-Eindruck. | | Geräteumschalter | Ob du Desktop- oder Mobilwerte bearbeitest | Kontrolliere vor dem Speichern, welche Ansicht gerade aktiv ist. | | **auto** | Rückkehr zur natürlichen Größe | Verwende es, wenn eine feste Vorgabe nicht mehr nötig ist. | | Außenabstand / Innenabstand | Abstand außerhalb bzw. innerhalb des Elements | Ändere diese Einstellungen getrennt von Breite und Höhe, damit du die Wirkung nachvollziehen kannst. | ## Ergebnis sicher prüfen Nach dem Speichern nimmt das ausgewählte Element den eingestellten Platz innerhalb seines übergeordneten Bereichs ein. Bei eigenen Mobilwerten bleibt der Desktopwert unverändert. Prüfe immer den Inhalt innerhalb des Elements: Ein Bild darf nicht ungünstig zugeschnitten sein, ein Text muss vollständig lesbar bleiben und eine Schaltfläche muss weiterhin klar erreichbar sein. Die Größe ist erst dann gelungen, wenn nicht nur der Rahmen, sondern auch der Inhalt auf beiden Ansichten stimmig wirkt. ## Vollständiger Test vor der Veröffentlichung 1. Öffne die Desktopansicht und kontrolliere Breite, Höhe, Ausrichtung und Abstand zu benachbarten Elementen. 2. Prüfe längere Texte, Bilder, Formulare und Schaltflächen innerhalb des geänderten Bereichs. 3. Wechsel in die Mobilansicht. 4. Kontrolliere, ob eigene Mobilwerte nötig sind. Ändere sie nur dort, wenn die Desktopvorgabe auf dem kleinen Bildschirm nicht gut funktioniert. 5. Öffne die Vorschau und prüfe die Seite in beiden Ansichten. 6. Speichere und veröffentliche erst nach dieser Prüfung. 7. Rufe die veröffentlichte Seite anschließend auf einem echten Mobilgerät oder in einer realistischen schmalen Ansicht auf. So erkennst du nicht nur, ob ein Zahlenwert gespeichert wurde, sondern ob Besucher die Seite wirklich gut nutzen können. ## Häufige Probleme und Lösungen ### Drei Karten sehen auf dem Desktop gleich aus, auf Mobilgeräten aber nicht Ein prozentualer Desktopwert kann auf dem Mobilgerät zu Umbrüchen führen. Wechsel in die Mobilansicht und prüfe dort jede Karte. Hinterlege nur für Mobilgeräte einen passenden eigenen Wert oder lasse die Größe auf **auto**, wenn die Karten sich natürlich anordnen sollen. ### Das Element wurde durch einen eingegebenen Wert nicht kleiner Werte von null oder darunter werden nicht unterstützt. Das Element behält dann seine bisherige Größe. Gib einen positiven Wert ein oder wähle **auto**, wenn du zur natürlichen Größe zurückkehren möchtest. ### Der Inhalt wirkt trotz richtiger Breite zu gedrängt Prüfe getrennt die Höhe sowie Außen- und Innenabstand. Breite, Höhe und Abstände erfüllen unterschiedliche Aufgaben. Ändere immer nur einen Bereich und kontrolliere danach Vorschau und Mobilansicht. ### Die Mobiländerung fehlt in der Desktopansicht Das ist erwartetes Verhalten: Mobilwerte gelten nur für die Mobilansicht. Wechsle zum Desktop, wenn du auch dort einen eigenen Wert setzen möchtest. ### Eine feste Höhe schneidet den Eindruck eines Textbereichs ab Stelle die Höhe auf **auto** zurück und prüfe den Text erneut. Feste Höhen eignen sich eher für bewusst gleich große Bereiche als für Inhalte, deren Länge sich ändern kann. ## Praxisbeispiel: Drei Leistungen übersichtlich darstellen Ein Dienstleistungsbetrieb zeigt auf seiner Startseite drei Leistungskarten nebeneinander. Auf dem Desktop sollen alle Karten ungefähr ein Drittel der verfügbaren Breite erhalten. Das Team wählt daher eine Prozentangabe mit Dezimalwert und prüft, ob Überschriften, Bilder und Schaltflächen in jeder Karte gleich gut lesbar bleiben. In der Mobilansicht stehen die Karten untereinander. Dort prüft das Team zuerst die natürliche Darstellung. Nur wenn eine Karte zu schmal oder zu breit wirkt, hinterlegt es einen eigenen Mobilwert. Nach Vorschau und Test auf einem Smartphone veröffentlicht es die Seite. ## Merkliste * Ist wirklich das richtige Element ausgewählt? * Passt die Einheit zum Ziel? * Wurde nur eine Einstellung nach der anderen geändert? * Sind Desktop und Mobilansicht getrennt geprüft? * Ist der Inhalt innerhalb des Elements vollständig lesbar? * Wurde bei einer unnötigen festen Größe wieder **auto** gewählt? --- # 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/breite-und-hohe-von-seitenelementen-anpassen.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.