Studio Editor: Fehlerbehebung bei Zwischenräumen und horizontalen Scroll-Leisten

4 Min. Lesezeit
Möglicherweise fallen dir beim Erstellen einer Website im Studio Editor unerwünschte Lücken und horizontale Scroll-Leisten auf. Befolge die Schritte in diesem Artikel, um zu erfahren, was du in diesem Fall überprüfen solltest, und stelle sicher, dass sie auf keiner Bildschirmgröße erscheinen.
GIF, das eine Live-Website zeigt, über die horizontal gescrollt werden muss, um Inhalte anzuzeigen

Schritt 1 | Elemente im Ebenen-Panel suchen und neu positionieren

Wenn sich ein Element außerhalb seiner Abschnittsgrenzen befindet, wird automatisch ein Zwischenraum erstellt, damit das Element vollständig sichtbar ist. Verwende das Ebenen-Panel, um eine Liste deiner Seitenelemente anzuzeigen, und klicke auf jedes einzelne Element, um es zu überprüfen und bei Bedarf neu zu positionieren.

Um Elemente im Ebenen-Panel zu suchen und neu zu positionieren:

  1. Klicke auf der linken Seite des Studio Editors auf Ebenen .
  2. Wähle ein Element aus, um es auf der Seite zu suchen.
  3. Positioniere das Element mit den folgenden Tools neu:
Ein Bild wird im Ebenen-Panel ausgewählt. Der Cursor bewegt sich im Inspektor-Panel über das Feld für die Breite.

Schritt 2 | Die Seitenränder überprüfen

Während ein Element innerhalb eines Abschnitts positioniert werden kann, können seine Kanten dennoch die Grenzen der Seite überschreiten und eine weiße Lücke und/oder eine horizontale Scroll-Leiste erzeugen. Das passiert häufig bei Textelementen.
Klicke auf jeden Abschnitt und fahre mit der Maus über alle Elemente in der Nähe der Seitenränder. Wenn einige davon überlaufen, kannst du sie nach Bedarf verschieben oder ihre Größe ändern.
Eine Studio-Editor-Website. Der Cursor fährt mit der Maus über ein Bild, das über den Seitenrand hinausgeht.

Schritt 3 | Die Einstellung für Überlauf-Content der Seite ändern

Du kannst den Überlauf-Content einer Seite ausblenden, um zu verhindern, dass automatisch weiße Lücken und horizontale Scroll-Leisten auf der Seite angezeigt werden. Diese Einstellung „schneidet“ die Ränder der Seite ab, sodass alle überlaufenden Elemente (oder Teile von Elementen) abgeschnitten werden.

Um die Einstellung für Überlauf-Content zu ändern:

  1. Wähle deine Seite aus:
    1. Wähle die entsprechende Seite aus.
    2. Klicke auf der linken Seite des Studio Editors auf Ebenen .
    3. Klicke auf Seite.
  2. Klicke oben rechts im Studio Editor auf den Pfeil Inspektor öffnen .
  3. Klicke auf den Tab Design .
  4. Wähle aus dem Aufklappmenü Überlauf-Content die Option Ausblenden.
Das Inspektor-Panel einer Seite im Studio Editor Der Cursor fährt über die Option Ausblenden.

Schritt 4 | Die Höhe des Abschnitts überprüfen

Die Höhe und/oder Mindesthöhe, die du für einen Abschnitt oder das CSS Grid festlegst, kann eine Lücke erzeugen. Wenn du das Verhalten „An Bildschirm anpassen” oder die vh-Maßeinheit (die relativ zur Viewport-Höhe ist) verwendest, kann die Lücke auf größeren Bildschirmen größer erscheinen.
Du kannst das Inspektor-Panel verwenden, um die Größe des CSS Grid und des Abschnitts zu überprüfen und bei Bedarf ihre Höhe und/oder Mindesthöhe zu ändern.

Um die Höhe des Abschnitts zu überprüfen:

  1. Wähle den entsprechenden Abschnitt aus.
  2. Klicke oben rechts im Studio Editor auf den Pfeil Inspektor öffnen .
  3. Klicke auf den Tab Design .
  4. Überprüfe unter Größe die Einstellungen für Höhe und Mindesthöhe und passe diese an.
Das Inspektor-Panel eines Abschnitts im Studio Editor Der Cursor fährt über das Feld Höhe.

Fehlerbehebung

Wenn du immer noch unerwünschte Lücken auf der Live-Website deines Kunden siehst, sieh dir diese Video-Anleitung an, um das Problem zu beheben.

War das hilfreich?

|