Seiteneditor-Seitenleiste und Symbolleiste

Der Seiteneditor hält die Arbeitsfläche in der Mitte und ordnet alle Builder-Steuerelemente in einer rechten Seitenleiste von oben nach unten an. Eine obere Symbolleiste dient zum Speichern, Veröffentlichen und zur Gerätevorschau. Sie können die Seitenleiste einklappen, um der Arbeitsfläche mehr Breite zu geben.

Es gibt keine separate linke Seitenleiste für Blöcke oder Einstellungen – alles befindet sich auf der rechten Seite.

Funktionsübersicht

Bereich	Zweck
Obere Symbolleiste	Speichern, Veröffentlichen, Rückgängig/Wiederherstellen, Gerätevorschau, Seitenleiste ein-/ausblenden
Rechte Seitenleiste – obere Reihe (Symbole)	Panel-Umschaltung: Bearbeiten, Ebenen oder Blöcke
Rechte Seitenleiste – unten (im Bearbeitungsmodus)	Registerkarten Stil, Attribute, Ereignisse für das ausgewählte Element
Arbeitsbereich	Live-Seitenkomposition

Rechte Seitenleiste – Bereichsumschaltung (oben)

Drei Symbolschaltflächen in einer Reihe oben in der Seitenleiste:

Bearbeiten (Bleistift-Symbol)

Standardmodus. Wähle etwas auf der Arbeitsfläche aus und verwende dann die darunter liegenden Registerkarten (Stil, Attribute, Ereignisse).

Ebenen

Eine strukturierte Liste aus Abschnitten → Zeilen → Spalten → Blöcken. Verwenden Sie diese Option, wenn:

Sie die gewünschte Zeile nicht anklicken können, weil sich Blöcke überlappen.
Sie verschachtelte Elemente neu anordnen möchten, ohne sie auf der Arbeitsfläche zu verschieben.
Sie den Abschnitt-Wrapper auswählen müssen, um den Abstand zwischen den Abschnitten zu ändern.

Blöcke (plus Symbol)

Die nach Kategorien gruppierte Blockbibliothek (Grundlegend, Layout, Portfolio, Hero, Erweitert usw.). Ziehe einen Block auf die Arbeitsfläche und lege ihn in einer Spalte ab, wenn du dazu aufgefordert wirst. Nachdem Sie einen Block abgelegt haben, kehrt die Seitenleiste in der Regel zum Bearbeitungsmodus zurück, sodass Sie ihn konfigurieren können.

Medienintensive Blöcke sind unter Unterstützte Medienpräsentationsblöcke dokumentiert. Layout- und Textblöcke finden Sie unter Editor-Blöcke und Layout-Referenz.

Rechte Seitenleiste – Registerkarten im Bearbeitungsmodus (unterhalb der Symbole)

Werden angezeigt, wenn Bearbeiten aktiv ist und Sie eine Komponente auf der Arbeitsfläche ausgewählt haben (Block, Zeile, Spalte oder Abschnitt).

Stil

Optische Darstellung – Abstände, Typografie, Farben, Hintergründe, sofern die Plattform diese für diesen Komponententyp bereitstellt.

Innenabstand und Rand: Verwenden Sie unter Abstand das Link-Symbol, um zwischen dem verknüpften Modus (ein Wert gilt für alle vier Seiten) und dem unverknüpften Modus (oben, rechts, unten und links unabhängig voneinander festlegen) umzuschalten. Schieberegler sind auf 160px begrenzt; geben Sie bei Bedarf größere Werte in die Zahlenfelder ein.

Breite: Eine feste Breite (z. B. 800px) bei einem eigenständigen Block zentriert diesen automatisch auf der Seite. Für normalen Seiteninhalt innerhalb eines Abschnitts → Zeile sollten Sie stattdessen unter Attr die Option Zeile → Maximale Breite bevorzugen – siehe Seitenlayout und Inhalt.

Attr

Attribute für diese Komponente – Bildauswahl, Portfolio-Quelle, Spaltenanzahl, Hero-Layout-Modus, CTA-Bezeichnung, Formularempfänger und Ähnliches. Hier nehmen Sie hauptsächlich die Einstellungen für Medien, Portfolio oder E-Commerce vor. (In einigen Anleitungen werden diese als „Traits“ bezeichnet; im Editor lautet die Bezeichnung der Registerkarte Attr.)

Ereignisse

Elementinteraktivität für die veröffentlichte Website – fügen Sie Auslöser (Klick, Scroll-Einblendung, Hover, beim Laden) und Aktionen (Klasse umschalten, ein-/ausblenden, benachbarte Galeriebilder abdunkeln, sanftes Scrollen, Parallax-Effekt) hinzu, ohne JavaScript schreiben zu müssen. Die Registerkarte heißt in der Seitenleiste Ereignisse; die Überschrift des Bereichs lautet Elementinteraktivität.

Vollständige Anleitung mit Anleitungen, Einschränkungen und Fehlerbehebung: Ereignisse und Interaktionen im Seiteneditor.

Kurzes Beispiel	Was Sie unter Ereignisse konfigurieren
Abschnitt wird beim Scrollen eingeblendet	In den Viewport gelangen → Klasse hinzufügen + CSS-Übergang für diese Klasse
Menü auf Mobilgeräten öffnen/schließen	Klick → Klasse umschalten in einem Menübereich (Selektor `#menu`)
Portfolio-Kachelraster	Hover-Eingang → Geschwisterelemente abdunkeln; Hover-Austritt → Abdunkelung rückgängig machen auf dem Kachel-Wrapper
Sprung zu einem Anker innerhalb der Seite	Klick → Zu … scrollen mit `#section-id`

Interaktionen werden nach dem Speichern der Seite auf **Live- und Vorschau-**Seiten ausgeführt – nicht unbedingt bereits während Sie auf der Arbeitsfläche ziehen. Verknüpfen Sie Interaktionen vorzugsweise mit dem von Ihnen ausgewählten Block-Stamm (Abschnitt, Karten-Wrapper, Schaltfläche) und nicht mit tief verschachtelten Knoten.

Bei Zeilen werden Abstände und maximale Breite in der Regel über Attr (Felder für das Zeilenlayout) gesteuert. Wenn sowohl Attr als auch Style Abstände anzeigen, sollten Sie die Zeilensteuerelemente unter Attr bevorzugen, um widersprüchliche Werte zu vermeiden.

Layout-Abstände (Abschnitte, Zeilen, Spalten)

Die Abstände sind auf drei Ebenen verteilt. Eine Verwechslung dieser Ebenen ist der häufigste Grund dafür, dass ein Band nach der Veröffentlichung zu hoch, zu niedrig oder nicht zentriert erscheint.

Ebene	Was wird gesteuert?	Wo bearbeiten?
Abschnitt	Äußerer vertikaler Abstand oberhalb und unterhalb der Zeile (der „Atemraum“ des „Bandes“)	Wählen Sie den Abschnitt aus → Attr (Abschnittsabstände) oder Style
Zeile	Maximale Breite, Abstand zwischen Spalten, Zeilenabstand	Wählen Sie die Zeile aus → Attr (Zeilenlayout) – ziehen Sie dies dem Stil-Abstand für Zeilen vor
Spalte	Innerer Zellenabstand, Mindesthöhe, vertikale Ausrichtung	Wählen Sie die Spalte → Attr

Abschnittsabstände ändern die Größe der untergeordneten Elemente nicht. Das Erhöhen des Abschnittsabstands fügt um die Zeile herum Leerraum hinzu; es dehnt Zeilen oder Spalten nicht so weit, dass sie den Ansichtsbereich ausfüllen. Um ein Band höher zu machen, erhöhe die Spalten-Mindesthöhe oder den Spaltenabstand oder füge einen Spacer-Block hinzu.

Ist es schwierig, auf die Zeile zu klicken? Verwenden Sie Ebenen → erweitern Sie Abschnitt → wählen Sie Zeile aus und ändern Sie dann die maximale Breite oder den Abstand unter Attr.

Sieht die Zeile auf der Live-Seite dezentriert oder zu schmal aus? Lege die maximale Breite der Zeile unter Attr fest (nicht nur unter Style). Wenn sowohl Attr als auch Style den Abstand für dieselbe Zeile festlegen, verwende ausschließlich Attr.

Umfassende Anleitung zu Inhaltsbreite, „Section“ vs. „Row“ und wann welche Steuerung verwendet werden sollte: Seitenlayout und Inhalt.

Ausführliche Blockliste: Editor-Blöcke und Layout-Referenz.

Obere Symbolleiste

Steuerelement	Funktion
Entwurf / Veröffentlichen	Legt fest, ob die Seite öffentlich ist (zusammen mit Seite speichern)
Seite speichern	Speichert Änderungen auf der Arbeitsfläche, ohne dass die Seite sofort veröffentlicht wird
Desktop / Tablet / Mobil	Vorschau der Arbeitsbereichsbreite
Rückgängig / Wiederherstellen	Letzte Editor-Aktionen

Vollständiger Veröffentlichungsablauf: Vorschau und Veröffentlichen.

Registerkarte „Seiteneditor“ vs. „Seiteneinstellungen“

Über dem Arbeitsbereich unterteilen zwei Registerkarten die Funktionen:

Seiteneditor — Alles in diesem Artikel (Arbeitsbereich + rechte Seitenleiste + Symbolleiste).
Seiteneinstellungen — Slug, SEO-Felder, Vorlagenüberschreibungen: Seiteneinstellungen und Überschreibungen.

Nächste Schritte & Überprüfung

Öffnen Sie eine beliebige Seite im Editor.
Wählen Sie einen Block aus → vergewissern Sie sich, dass sich die Registerkarten Stil, Attribute und Ereignisse unter Bearbeiten aktualisieren.
Klicken Sie auf das Symbol Ebenen → wählen Sie eine Zeile aus → ändern Sie die maximale Breite unter Attribute.
Klicken Sie auf das Symbol Blöcke → ziehen Sie einen Block auf die Arbeitsfläche.
Öffnen Sie Ereignisse in einem Abschnitt → fügen Sie eine Interaktion vom Typ In den Viewport gelangen hinzu → Seite speichern → zeigen Sie eine Vorschau der öffentlichen Seite an.