header-logo
Verbessere deine Kenntnisse mit unseren Tutorials.
Erhalte Tipps für Webdesign, Marketing und mehr.
Erfahre, wie du den organischen Traffic steigerst.
Erstelle eine Website mit unserer Full-Stack-Plattform.
Finde einen Spezialisten, der dir hilft, deine Ziele zu erreichen.
placeholder-preview-image

Studio Editor: Elemente und Abschnitte pinnen

3 min
Möchtest du sicherstellen, dass Besucher keine wichtigen Informationen verpassen? Mit der Einstellung „Gepinnte Position“ kannst du Elemente und Abschnitte an ihrer Position fixieren, sodass sie für Besucher beim Hoch- und Runterscrollen immer zugänglich sind.
Wusstest du schon?
Du kannst einen Scroll-Effekt für die Kopfzeile hinzufügen, sodass sich ihr Aussehen verändert, wenn Besucher nach oben und unten scrollen. Lass zum Beispiel die Kopfzeile beim Scrollen die Farbe ändern oder verschiebe sie aus dem Blickfeld, damit Besucher sich auf die Seite konzentrieren können.

Elemente und Abschnitte pinnen

Pinne Elemente an einen Container, Abschnitt oder einer Seite an, damit Besucher sie immer erreichen können. Ebenso kannst du Abschnitte pinnen, um die Sichtbarkeit wichtiger Inhalte und Navigationselemente (z. B. des Website-Menüs) zu erhöhen.
Hinweise:
Du kannst nur einen Abschnitt pro Seite pinnen. Außerdem muss der Abschnitt an allen Breakpoints an die Seite angrenzen.

Um ein Element oder einen Abschnitt zu pinnen:

  1. Wähle den entsprechenden Abschnitt oder das entsprechende Element aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird.
  1. Scrolle nach unten zu Position.
  2. Wähle aus dem Dropdown-Menü Positionstyp die Option Gepinnt aus.
  3. (Nur Elemente) Wähle unter Anpinnen an, wo das Element angeheftet werden soll:
    • Container/Zelle: Das Element bleibt relativ zum übergeordneten Container oder der Zelle gepinnt.
    • Abschnitt: Das Element bleibt an seinem Platz, wenn Besucher im Abschnitt nach oben und unten scrollen.
    • Seite: Das Element bleibt sichtbar und an seinem Platz, wenn Besucher auf der gesamten Seite nach oben und unten scrollen.
Ein Screenshot zeigt ein Stapelelement auf der Arbeitsfläche neben dem Inspektor-Panel. Der Stapel wird an seinen übergeordneten Container gepinnt.
Wusstest du schon?
Standardmäßig überlagert ein gepinnter Abschnitt den Abschnitt darunter.

Eine gepinnte Position entfernen

Du kannst Elemente und Abschnitte jederzeit in die Standardposition zurücksetzen. Das bedeutet, dass sie nicht mehr an den Bildschirm fixiert sind, sondern einfach in ihrer Position bleiben.

Um eine fixierte Position zu entfernen:

  1. Wähle den entsprechenden Abschnitt oder das entsprechende Element aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird.
  1. Scrolle nach unten zu Position.
  2. Wähle aus dem Dropdown-Menü Positionstyp die Option Standard aus.
Ein Screenshot zeigt ein Stapelelement auf der Arbeitsfläche neben dem Inspektor-Panel. Der Positionstyp des Stapels ist auf Standard eingestellt.
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird.
Ein Screenshot zeigt ein Stapelelement auf der Arbeitsfläche neben dem Inspektor-Panel. Der Stapel wird an seinen übergeordneten Container gepinnt.
Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird.
Ein Screenshot zeigt ein Stapelelement auf der Arbeitsfläche neben dem Inspektor-Panel. Der Positionstyp des Stapels ist auf Standard eingestellt.