Studio Editor: Unterschiede zwischen dem Editor und der Live-Website beheben
5 min
In diesem Artikel
- Die Breakpoint- und Viewport-Größen anpassen
- Randeinheiten ausrichten
- Responsive Verhaltensweisen ausrichten
- Die Element-Sichtbarkeit überprüfen
Wenn du die veröffentlichte Version einer Studio Editor-Website ansiehst, stellst du möglicherweise fest, dass sie anders aussieht als in deinem Editor. Diese Unterschiede sind in der Regel minimal, können aber dazu führen, dass Elemente falsch ausgerichtet oder abgeschnitten aussehen.
Im Allgemeinen werden diese Unterschiede durch einige der Element-Einstellungen (Größenanpassung, Position und Verhalten) auf Viewports verursacht. Verwende die Vorschläge in diesem Artikel, um mögliche Lösungen zu finden und die Konsistenz über verschiedene Bildschirmgrößen hinweg zu gewährleisten.
Die Website kürzlich bearbeitet?
Wir empfehlen, zu überprüfen, ob du alle deine Änderungen veröffentlicht hast und die neueste Version der Website ansiehst. Du kannst auch Browser-Tools verwenden, um verschiedene Viewports von einem einzigen Gerät aus zu überprüfen.
Die Breakpoint- und Viewport-Größen anpassen
Wenn die Live-Website anders aussieht als das, was du in deinem Editor siehst, kann dies mit Breakpoints und der Bearbeitungsgröße zusammenhängen.
Breakpoints sind Bildschirmgrößenbereiche, die du verwendest, um eine Website für verschiedene Geräte (d. h. Viewports) zu gestalten. Du kannst eine bestimmte Bearbeitungsgröße innerhalb dieses Bereichs einrichten – z. B. kannst du in einem 320-750 Px-Breakpoint die Bearbeitungsgröße auf 500 Px einrichten.
Viewports, die außerhalb deiner definierten Bereiche liegen, sind nicht optimiert und können Ausrichtungs- und Layoutprobleme aufweisen. Wenn du ein Problem mit einem bestimmten Viewport bemerkst, empfehlen wir, die Bearbeitungsgröße so einzustellen, dass sie übereinstimmt, und Anpassungen vorzunehmen.
Um deine Bearbeitungsgröße einzurichten:
- Öffne die entsprechende Seite und den Breakpoint im Editor.
- Klicke oben auf die aktuelle Bearbeitungsgröße.
- Gib den neuen Wert neben Bearbeitungsgröße ein.
- Klicke auf Anwenden.
- (Optional) Passe die Website so an, wie du sie haben möchtest.
Erlebst du andere Probleme über Breakpoints hinweg?
Verwende unsere Anleitung, um Probleme mit falsch ausgerichteten Elementen, Textgrößen und mehr zu beheben.
Randeinheiten ausrichten
Die Verwendung unterschiedlicher Randeinheiten für Sibling-Elemente (Elemente, die sich einen Parent-Abschnitt/Container teilen) kann dazu führen, dass der Inhalt falsch ausgerichtet oder verzerrt wird. Wir empfehlen, die gleichen Randeinheiten (%, Px, Px*, usw.) für alle Sibling-Elemente in einem einzelnen Container oder Abschnitt zu verwenden.
Um die Randeinheiten eines Elements zu ändern:
- Wähle das entsprechende Element aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
- Scrolle nach unten zu Position.
- Klicke auf das Dropdown neben Ränder.
- Wähle die entsprechende Einheit aus.
Responsive Verhaltensweisen ausrichten
Parent- und Child-Elemente mit widersprüchlichen responsiven Verhaltensweisen können Probleme mit dem Inhalt auf der Live-Website verursachen.
Stell dir einen Button vor, der an einen Container angeheftet ist. Das responsive Verhalten des Buttons ist fest, und der Container ist auf proportional skalieren eingestellt. Da der Button fest ist, wird er nicht mit seinem übergeordneten Container in der Größe angepasst, was möglicherweise zu Zwischenräumen, sich überschneidenden Elementen und abgeschnittenen Elementen auf der Live-Website führt. Dies kann auch passieren, wenn eines der Elemente das responsive Verhalten gemischt hat.
Um dieses Problem zu beheben, empfehlen wir, die responsiven Verhaltensweisen der Elemente auszurichten.
So änderst du das responsive Verhalten eines Elements:
- Wähle den relevanten Breakpoint aus.
- Wähle das Element aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
- Wähle eine Option aus dem Dropdown-Menü Responsives Verhalten, die mit dem übergeordneten oder untergeordneten Element übereinstimmt.
Hinweis:
Diese Unterschiede können sich auch auf die Höhe der Elemente auswirken, was zu unerwünschten Zwischenräumen auf der Website führt. Erfahre hier mehr über die Fehlerbehebung bei Zwischenräumen.
Die Element-Sichtbarkeit überprüfen
Du bemerkst möglicherweise, dass du ein Element auf einigen Bildschirmgrößen sehen kannst, aber nicht auf anderen. Dies liegt in der Regel daran, dass das Element für bestimmte Breakpoints ausgeblendet wurde. Du kannst das Ebenen-Panel verwenden, um das Element zu finden und es in den gewünschten Viewports anzuzeigen.
Um die Sichtbarkeit eines Elements zu überprüfen:
- Öffne deinen Editor und öffne die entsprechende Seite.
- Wähle einen Breakpoint oben in deinem Editor aus.
- Klicke links auf Ebenen
. - Suche das ausgeblendete Element in der Liste.
- (Optional) Klicke auf das Symbol für Anzeigen
.
Hinweis:
Änderungen wie das Löschen eines Elements oder das Verschieben in einen anderen Abschnitt/Container gelten für alle Breakpoints – egal, an welchem du arbeitest. Wenn du ein Element nur auf bestimmten Breakpoints anzeigen möchtest, kannst du es über das Rechtsklick-Menü ausblenden.