Wix Hilfe-Center
    Start
  1. Studio, Partner von Wix & Enterprise
  2. Wix Studio
  3. Den Studio Editor verwenden
  4. Im Studio Editor Websites gestalten
    5. Studio Editor: Einen Container zum Erstellen eines vertikalen Abschnitts verwenden

Studio Editor: Einen Container zum Erstellen eines vertikalen Abschnitts verwenden

5 Min. Lesezeit
Vertikale Abschnitte sind im Studio Editor nicht verfügbar. Du kannst allerdings einen fixierten Container verwenden, um einen ähnlichen Effekt zu erzielen, sodass er wie ein Abschnitt der Seitenleiste aussieht.
Beispiel für das Endergebnis - ein Seitenleistenabschnitt, der für die Navigation auf einer Live-Website verwendet wird, die mit dem Studio Editor erstellt wurde

Schritt 1 | Einen Container hinzufügen und ein Raster anwenden

Füge zunächst einen Container hinzu und lege seine Höhe auf 100 vh fest, sodass er die gesamte Bildschirmhöhe einnimmt. Wende anschließend ein erweitertes CSS Grid an, wobei die Zeilengröße auf Auto eingestellt ist.

Um einen Container hinzuzufügen und ein Raster anzuwenden

  1. Füge im Studio Editor einen Container aus dem „Elemente hinzufügen“-Panel hinzu.
  2. Ändere die Höhe des Containers zu 100 vh:
    1. Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
    2. Klicke neben Größe auf das Symbol für Weitere Aktionen .
    3. Aktiviere den Schalter Erweiterte Größenanpassung.
    4. Lege die Höhe auf 100 vh fest.
      Tipp: Klicke auf die aktuelle Maßeinheit (z. B. %, px), um diese zu ändern.
  3. Ein CSS Grid auf den Container anwenden:
    1. (Im Inspektor) Scrolle nach unten zu Layout.
    2. Klicke neben Erweitertes CSS Grid auf Anwenden.
    3. Klicke auf Reihen.
    4. Klicke auf die aktuelle Größenanpassung, um sie zu Auto zu ändern.
Die Zeilengröße des Rasters im Inspektor-Panel auf Automatisch festlegen

Schritt 2 | Den Container mit der Kopfzeile verbinden

Ziehe den Container an die Kopfzeile der aktuellen Seite, um ihn anzuhängen. Dadurch wird die Größe der Kopfzeile an den Container angepasst, aber wir ändern die Höhe im Inspektor-Panel zurück.
Fixiere anschließend die Kopfzeile, damit der Container sichtbar bleibt, wenn Besucher auf der Seite nach oben und unten scrollen.

Um den Container an die Kopfzeile anzuhängen:

  1. Ziehe den Container, um ihn an die Kopfzeile der Seite anzuhängen.
  2. Die Größe der Kopfzeile ändern:
    1. Wähle die Kopfzeile aus.
    2. Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen .
    3. Klicke neben Größe auf das Symbol für Weitere Aktionen .
    4. Aktiviere den Schalter Erweiterte Größenanpassung.
    5. Lege die Höhe auf den gewünschten Wert in px fest.
      Tipp: Klicke auf die aktuelle Maßeinheit (z. B %, vh), um sie zu ändern.
  3. Scrolle nach unten zu Position.
  4. Wähle aus dem Aufklappmenü Positionstyp die Option Gepinnt aus.
Das Inspektor-Panel und die Kopfzeile mit dem angehängten Container

Schritt 3 | Den Container ausrichten und der Seite Abstände hinzufügen

Jetzt ist es an der Zeit, den Container zu platzieren. Richte den Container je nachdem, wo er angezeigt werden soll, oben und links/oben und rechts aus.
Der letzte Schritt besteht darin, auf der entsprechenden Seite der Seite Abstände hinzuzufügen. Dies verhindert, dass der Container den Inhalt der Seite verdeckt.

Um den Container auszurichten und Abstand hinzuzufügen:

  1. Wähle den Container aus.
  2. (Im Inspektor) Richte den Container nach oben und links/rechts aus:
    1. Klicke auf das Symbol für Oben ausrichten .
    2. Klicke auf das Symbol für Links ausrichten  / Rechts ausrichten .
  3. Füge eine Füllung zur Seite hinzu:
    1. Klicke oben im Inspektor auf Seite.
      Selecting the page in the breadcrumbs at the top of the Inspector panel
    2. Lege unter Position den Abstand auf die Breite des Containers fest.
      Wenn der Container zum Beispiel 20 % breit ist und sich auf der linken Seite der Seite befindet, sollte der linke Abstand auch auf 20 % gesetzt werden.
      Setting the page padding in the Inspector panel

Schritt 4 | Den Container anpassen

Der Container kann jetzt als Abschnitt der Seitenleiste verwendet werden. Füge alle benötigten Elemente hinzu und gestalte den Container im Inspektor-Panel. Er sollte wie im folgenden Beispiel aussehen — an der Kopfzeile angehängt sein und die gesamte Bildschirmhöhe einnehmen, während du auf der Arbeitsfläche nach oben und unten scrollst.
Beispiel für einen Container, der mithilfe der Anleitung im Artikel in einen Seitenleistenabschnitt umgewandelt wurde

War das hilfreich?

|

In diesem Artikel

  • Schritt 1 | Einen Container hinzufügen und ein Raster anwenden
  • Schritt 2 | Den Container mit der Kopfzeile verbinden
  • Schritt 3 | Den Container ausrichten und der Seite Abstände hinzufügen
  • Schritt 4 | Den Container anpassen