Studio Editor: Unterschiede zwischen dem Editor und der Live-Website beheben
4 min
In diesem Artikel
- Die Breakpoint- und Viewport-Größen anpassen
- Randeinheiten ausrichten
- Responsive Verhaltensweisen ausrichten
- 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 vollständig abgeschnitten werden.
Im Allgemeinen werden diese Unterschiede durch Konfigurationsprobleme mit der Größenanpassung, Position und dem Verhalten des Elements 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.
Hast du die Website kürzlich bearbeitet?
Wir empfehlen dir 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
Breakpoints sind Bildschirmgrößenbereiche, die du verwendest, um eine Website für verschiedene Geräte zu gestalten. Du kannst eine bestimmte Bearbeitungsgröße einrichten innerhalb dieses Bereichs – z. B. kannst du in einem 320-750 Px Breakpoint die Bearbeitungsgröße auf 500 px einrichten.
Viewports beziehen sich auf die Größe des Bildschirms eines Besuchers. Wenn die Live-Website auf einem bestimmten Viewport anders aussieht, kannst du deine Bearbeitungsgröße so einstellen, dass sie mit dem Viewport übereinstimmt, und Anpassungen vornehmen.
Um deine Bearbeitungsgröße einzustellen:
- Ö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.
- Verwende die Studio Editor-Tools, um Anpassungen vorzunehmen.
Randeinheiten ausrichten
Die Verwendung unterschiedlicher Randeinheiten über 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 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 Inspektor öffnen-Symbol
- Scrolle nach unten zu Position.
- Klicke auf das Dropdown neben Rändern.
- 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 Parent-Container in der Größe verändert, was möglicherweise zu Zwischenräumen, Überschneidungen 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, das responsive Verhalten der Elemente aufeinander abzustimmen.
Um das responsive Verhalten eines Elements zu ändern:
- Wähle den relevanten Breakpoint.
- Wähle das Element.
- Klicke auf das Symbol für Inspektor öffnen oben rechts im Editor.
- Wähle eine Option aus dem Dropdown-Menü Responsives Verhalten, die mit dem Parent- oder Child-Element übereinstimmt.
Notizen:
Diese Unterschiede können sich auch auf die Höhe von Elementen auswirken und zu unerwünschten Zwischenräumen auf der Website führen. Erfahre hier mehr über die Behebung von Lücken.
Element-Sichtbarkeit überprüfen
Du kannst feststellen, dass du ein Element auf einigen Bildschirmgrößen siehst, 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 auf den Viewports anzuzeigen, die du möchtest.
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 auf der linken Seite 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 gerade arbeitest. Wenn du ein Element nur auf bestimmten Breakpoints anzeigen möchtest, kannst du es über das Rechtsklick-Menü ausblenden.