Hast du Probleme mit Breakpoints im Website-Design deines Kunden? Der Studio Editor bietet dir Tools, um häufige Probleme mit der Reaktionsfähigkeit zu lösen – zum Beispiel überlappende, falsch platzierte oder falsch ausgerichtete Elemente auf verschiedenen Bildschirmgrößen. Mit den richtigen Anpassungen kannst du eine professionelle Website erstellen, die auf jedem Gerät gut aussieht.
Text, der an bestimmten Breakpoints zu klein angezeigt wird
Sieht dein Text zu klein aus, wenn du die Website deines Kunden auf kleineren Bildschirmen anzeigst? Mit einem
responsiven Verhalten, das proportional skaliert, und der Max-min-Einstellung kannst du sicherstellen, dass dein Text auf jeder Bildschirmgröße gut aussieht.
Wähle den Text aus und öffne das Inspektor-Panel. Lege zunächst das Responsive Verhalten auf Proportional skalieren fest. Klicke dann unter Design auf Max-Min, um die minimale und maximale Schriftgröße festzulegen.
Elemente über Breakpoints hinweg falsch platziert
Wenn die Position eines Website-Elements über verschiedene Bildschirmgrößen hinweg unerwartet verschoben wird, liegt dies wahrscheinlich an den Einstellungen zum Andocken und zum Rand. Führe die folgenden Schritte aus, um das Problem zu beheben und sicherzustellen, dass deine Elemente in ihrer vorgesehenen Position bleiben.
Andocken des Elements überprüfen
Wähle das entsprechende Element aus und überprüfe im Inspektor-Panel seine Andock-Punkte (z. B. oben, links usw.). Wenn das Element nicht an der gewünschten Position andockt (z. B. das Element ist oben angedockt, du möchtest es aber unten haben), kann es sein, dass das Element verschoben wird, wenn sich die Bildschirmgröße ändert.
Die Andock-Position wird durch die gepunkteten Linien am Element und die Andock-Punkte im Inspektor-Panel (unter Position) angezeigt. Du kannst im Inspektor auf die Andock-Punkte klicken, um sie auszuwählen oder zu entfernen.
Die Ränder des Elements anpassen
Ränder definieren den Abstand zwischen dem Element und seinen angedockten Seiten. Wenn sich die Bildschirmgröße ändert, kann es sein, dass die Ränder das Element in verschiedene Richtungen „drücken“.
Wenn zum Beispiel ein Element mit einem Rand von 60 % oben angedockt wird, wird es automatisch nach oben verschoben, wenn der Abschnitt schrumpft (um den festgelegten Randwert beizubehalten). Versuche, die Ränder zu verkleinern, und teste das Ergebnis.
Wenn du die Ränder in Prozent festlegst, passen sie sich dynamisch an die Bildschirmgröße an. Das kann aber auch zu unerwarteten Verschiebungen führen. Für eine einheitlichere Positionierung kannst du zu einer Einheit mit fester Größe wechseln (z. B. Pixel).
(Abschnitt für festes Verhalten) Ränder von Elementen zu Pixel ändern
Wenn du das
responsive Verhalten deines Abschnitts als
Fest definierst, musst du sicherstellen, dass die Ränder der untergeordneten Elemente ebenfalls pixelbasiert sind.
Wenn du fließende Ränder verwendest, zum Beispiel in Prozent, werden die Ränder je nach Bildschirmgröße vergrößert oder verkleinert. Das führt dazu, dass sich das Element verschiebt. Wenn du zu Rändern mit Pixelangaben wechselst, behält das Element immer den gleichen Abstand zu den Seiten bei, anstatt ihn je nach Seitenbreite zu berechnen.
Falsch ausgerichtete Elemente über Breakpoints hinweg
Wenn Elemente in deinem Abschnitt falsch ausgerichtet sind oder ihr Layout nicht mehr stimmt, sobald sich die Bildschirmgröße ändert, liegt dies oft an nicht-einheitlichen Andock- oder Randeinstellungen.
Befolge diese Schritte, um das Problem zu finden und zu beheben. So kannst du sicherstellen, dass deine Elemente auf allen Bildschirmgrößen korrekt ausgerichtet werden.
Sicherstellen, dass die Elemente auf derselben Seite angedockt sind
Wenn Elemente sich widersprechende Andock-Einstellungen haben, werden sie möglicherweise nicht richtig ausgerichtet, sobald sich die Bildschirmgröße ändert.
Überprüfe, ob Elemente im selben Abschnitt unterschiedliche Andock-Einstellungen haben. Zum Beispiel kann ein Element oben und ein anderes unten angedockt sein. Wir empfehlen, alle verwandten Elemente auf derselben Seite des übergeordneten Containers anzudocken (z. B. oben, unten).
Die Andock-Position wird durch die gepunkteten Linien am Element und die Andock-Punkte im Inspektor-Panel (unter Position) angezeigt. Du kannst im Inspektor auf die Andock-Punkte klicken, um sie auszuwählen oder zu entfernen.
Randeinheiten standardisieren
Ränder definieren den Abstand zwischen einem Element und seiner angedockten Seite. Wenn du verschiedene Einheiten (z. B. Prozent vs. Pixel) für Ränder verwendest, können Elemente falsch ausgerichtet werden, sobald sich die Bildschirmgröße ändert.
Öffne das Inspektor-Panel und scrolle nach unten zu Position, um die aktuellen Ränder des Elements zu überprüfen. Um zu einer anderen Randeinheit zu wechseln, wähle den entsprechenden Rand aus und klicke dann auf die aktuelle Einheit (z. B. px, %).
Beziehungen zwischen Elementen überprüfen
Überprüfe zunächst
das Ebenen-Panel, um sicherzustellen, dass sich die Elemente im selben Parent-Container befinden (z. B. Abschnitt, Zelle usw.). Wenn dies der Fall ist, aber keine Beziehung zwischen ihnen definiert ist, agieren die Elemente unabhängig voneinander und überschneiden sich möglicherweise.
Überlappende Elemente über Breakpoints hinweg
Wenn du Elemente anordnest, können sie im Editor genau den richtigen Abstand haben, sich aber überschneiden, wenn du die Live-Website in verschiedenen Viewports überprüfst. Überlappungen treten in der Regel aufgrund der Positionierung oder des responsiven Verhaltens von Elementen auf.
Wenn sich Website-Elemente auf verschiedenen Bildschirmgrößen überschneiden, befolge diese Schritte, um das Problem zu identifizieren und zu beheben.
Positionierung und Andocken von Elementen überprüfen
Wenn Elemente unabhängig voneinander innerhalb desselben übergeordneten Containers positioniert werden, können sie sich überschneiden, sobald sich die Bildschirmgröße ändert. Überprüfe die Andock-Einstellungen und die Positionierung, um sicherzustellen, dass alles einheitlich ist.
Klicke jedes Element an (z. B. Titel, Textabschnitt, Button) und prüfe, wie es im Inspektor-Panel angedockt ist. Achte auf Unterschiede beim Andocken und bei den Rändern der Elemente (z. B. Prozentsätze und Pixel gemischt).
Wenn ein Element einen prozentualen Rand und ein anderes einen festen Pixelrand hat, verschieben sich ihre Positionen unterschiedlich, sobald sich die Größe des übergeordneten Containers ändert.
Das responsive Verhalten von Elementen anpassen
Es kann auch zu Überlappungen kommen, wenn sich Elemente bei einer Änderung der Bildschirmgröße unterschiedlich verhalten. Zum Beispiel kann ein Element proportional skaliert werden, ein anderes kann umgebrochen werden und ein drittes kann fest bleiben.
Wähle jedes Element aus und überprüfe sein
responsives Verhalten im Inspektor-Panel. Suche nach Elementen mit unterschiedlichem Verhalten, da diese die Überschneidung verursachen können.
Beziehungen zwischen Elementen überprüfen
Überprüfe zunächst
das Ebenen-Panel, um sicherzustellen, dass sich die Elemente im selben Parent-Container befinden (z. B. Abschnitt, Zelle usw.). Wenn dies der Fall ist, aber keine Beziehung zwischen ihnen definiert ist, agieren die Elemente unabhängig voneinander und überschneiden sich möglicherweise.
