Ereignisse und Interaktionen im Seiteneditor

Auf der Registerkarte Ereignisse (Titel des Bereichs: Element-Interaktivität) ermöglicht es Ihnen, festzulegen, wann etwas auf Ihrer Live-Website geschieht und was sich auf der Seite ändert – Menüs, die sich öffnen, Abschnitte, die beim Scrollen eingeblendet werden, Galerie-Kacheln, die beim Darüberfahren mit der Maus abgedunkelt werden, sanftes Scrollen zu Ankerpunkten und subtile Parallax-Effekte. Dies ist nicht der Ereignis-Manager (Workshops und Tickets); es ist Teil der Editoren für Seiten und Kopf-/Fußzeilenvorlagen.

Konfigurieren Sie dies über die rechte Seitenleiste: Bearbeiten → Ereignisse, wobei ein Block, eine Zeile, eine Spalte oder ein Abschnitt ausgewählt sein muss. Das vollständige Layout der Seitenleiste finden Sie unter Seitenleiste und Symbolleiste des Seiteneditors.

Was Sie tun können (Funktionsübersicht)

Funktion	So aktivieren Sie sie
Durch Scrollen ausgelöste Einblendungen	In den Viewport gelangen + Klasse hinzufügen (in Kombination mit CSS-Übergängen unter Stil oder im Theme-CSS)
Klickgesteuerte Benutzeroberfläche	Klick + Klasse umschalten, Anzeigen, Ausblenden oder Zu scrollen – funktioniert auf Smartphones (im Gegensatz zu reinen Hover-Effekten)
Hover im Galerie-Stil	Hover-Eintritt / Hover-Austritt + Abdunkeln / Abdunkeln rückgängig machen oder Spotlight / Spotlight entfernen bei Kachel-Wrappern
Optimierung der Ladezeit	Beim Laden (Mount) + Klasse hinzufügen oder Anzeigen, wenn die Seite initialisiert wird
Fokuszustände	Fokus / Unschärfe + Klasse hinzufügen oder Klasse entfernen bei fokussierbaren Steuerelementen
Bewegung	Parallax (Scroll oder Mauszeiger) und Scroll-Scrub (fortschrittsabhängige Skalierung/Deckkraft) mit begrenzter Intensität
Elementübergreifende Steuerung	Aktion anwenden auf → Ein anderes Element (CSS-Selektor), um ein entferntes Panel umzuschalten (z. B. #mobile-menu)

ArtInStack speichert Interaktionen als deklarative Daten auf dem Element (nicht als beliebige Skripte). Eine kleine, auf der Whitelist stehende Laufzeitumgebung auf veröffentlichten Seiten wendet Ihre Regeln sicher an, nachdem Sie die Seite gespeichert haben.

So funktioniert es

[Element auf der Arbeitsfläche auswählen]
        → Registerkarte „Ereignisse“: Ereignis (Auslöser) + Aktion + Aktion anwenden auf
        → Seite speichern → Veröffentlichen (wenn fertig)
        → Die Live-Website führt Interaktionen auf den Inhalten dieser Seite aus

Jede Interaktion entspricht einer Zeile in der Liste:

1. Ereignis – Wann es ausgelöst wird (die UI-Bezeichnungen unten entsprechen der Dropdown-Liste im Editor).
2. Aktion – Was passiert (Klasse umschalten, scrollen, Geschwisterelemente abdunkeln usw.).
3. Aktion anwenden auf – Dieses Element, Ein anderes Element (CSS-Selektor) oder Geschwisterelemente (für Grid-Hover-Voreinstellungen).
4. Einmal ausführen (optional) – Bei Klicks und beim Erscheinen im Sichtbereich nur beim ersten Mal auslösen.

Sie können mehrere Interaktionen auf dasselbe Element stapeln (zum Beispiel Beim Laden → „ready“-Klasse hinzufügen, dann Klick → Menü umschalten).

Registerkarte „Ereignisse“ – Auslöser und Aktionen

Der Editor bietet nur gültige Auslöser-Aktions-Paare an. Wenn eine Aktion ausgegraut ist oder fehlt, wechseln Sie zunächst das Ereignis.

Ereignisse (Auslöser)

Ereignis (UI-Bezeichnung)	Am besten geeignet für
Klick	Schaltflächen, Karten, Menüs – für alles verwenden, was Besucher auf Mobilgeräten tun müssen
Beim Laden (Mount)	Anfangszustand beim Laden der Seite (Klasse „ready“, ein Band anzeigen)
In den Viewport gelangen (Scroll-Reveal)	Einblenden/Hineingleiten, während der Besucher scrollt (nutzt die Viewport-Schnittmenge, keine reinen Scroll-Listener)
Hover-Enter / Hover-Leave	Desktop-Erweiterungen – „Leave“ immer mit „Enter“ kombinieren
Fokus / Fokusverlust	Formularfelder und fokussierbare Steuerelemente (tabindex bei benutzerdefinierten DIVs, falls erforderlich)
Zeigerbewegung (kontinuierlich)	Cursorgebundene Parallax-Effekte (gedrosselt; berücksichtigt „Reduced Motion“)

Aktionen

Aktion (UI-Bezeichnung)	Funktion
Klasse umschalten	Fügt eine CSS-Klasse zum Ziel hinzu oder entfernt sie – ideal für Klick-Menüs und Registerkarten
Klasse hinzufügen / Klasse entfernen	Einmalige Klassenänderungen – ideal für Einblendungen und Hover-Paare
Anzeigen / Ausblenden	Sichtbarkeit über Plattformklassen (standardmäßig wird zum Ausblenden hidden im Tailwind-Stil verwendet)
Abdunkeln / Abdunkeln rückgängig machen	Geschwister-Kacheln im selben Zeilen-/Spalten-Elternelement abdunkeln (Galerie-Raster)
Spotlight / Spotlight entfernen	Hebt das Element beim Hover hervor
Zu scrollen	Sanftes Scrollen zu einem Anker innerhalb der Seite (#section-id)
Parallax (Scroll oder Mauszeiger)	Dezente Bewegung, die an das Scrollen oder den Mauszeiger gekoppelt ist (Intensität im Formular begrenzt)
Scroll-Scrub (Fortschritt → Stil)	Animiert beim Laden die Skalierung/Deckkraft, während sich das Element durch den Ansichtsbereich bewegt

Aktion anwenden auf

Option	Verwenden, wenn
Dieses Element (ausgewählt)	Der ausgewählte Block soll sich ändern (oder einen Hover-Listener für das Abdunkeln von Geschwisterelementen enthalten)
Ein anderes Element (CSS-Selektor)	Sie müssen #nav-drawer, .accordion-panel usw. umschalten
Geschwisterelemente (gleicher Elternteil)	Grid-Hover Abdunkeln / Abdunkeln rückgängig machen – fügen Sie die Interaktion dem Kachel-Wrapper hinzu, sodass Geschwisterelemente andere Kacheln sind

Ansichtsbereich-Timing (für das Einblenden beim Scrollen): Voreinstellungen Standard, Früher, Später oder Benutzerdefinierter Root-Rand steuern, wie schnell die Einblendung ausgelöst wird.

Besonders nützliche Anleitungen

Einblendung beim Scrollen (Einblenden oder Einschieben)

1. Wählen Sie den Abschnitt oder die Block-Wurzel aus.
2. Ereignisse → In den Viewport gelangen (Anzeige durch Scrollen) → Klasse hinzufügen → Klassenname, z. B. is-visible.
3. Definieren Sie in Stil (oder Ihrem Theme) diese Klasse mit opacity / transform + transition.
4. Aktivieren Sie Einmal ausführen (empfohlen), damit sich die Animation nicht bei jedem Zurückscrollen des Nutzers wiederholt.
5. Seite speichern → Öffnen Sie die öffentliche oder Vorschau-URL und scrollen Sie zum Block.

Mobiles Menü oder Ein- und Ausblenden

1. Weisen Sie dem Panel bei Bedarf in Attr eine ID zu (oder verwenden Sie eine Klasse).
2. Im Button-Block: Klicken → Klasse umschalten → Anderes Element → #your-panel-id → Klasse, z. B. is-open.
3. Gestalte .is-open im CSS so, dass die Ausklappleiste angezeigt wird.
4. Teste die Darstellung bei der Mobile-Vorschau-Breite.

Portfolio-Raster – Andere Kacheln beim Hover abdunkeln

1. Wähle den Kachel-Wrapper aus (die Spaltenzelle um jedes Bild herum – nicht das bloße img, es sei denn, dies ist die Blockwurzel).
2. Hover-Ereignis → Abdunkeln → Dieses Element (der Listener bleibt auf der Kachel; Geschwisterelemente werden abgedunkelt).
3. Fügen Sie eine zweite Interaktion hinzu: Mauszeiger entfernen → Abdunkelung rückgängig machen.
4. Seite speichern und auf dem Desktop testen; bieten Sie für wichtige Informationen auf Mobilgeräten eine Klick-Alternative an.

Sanftes Scrollen zu einem Abschnitt

1. Auf einem Button- oder Link-Block: Klick → Zu scrollen zu → Selektor #pricing (muss auf der Seite vorhanden sein).
2. Eine Anpassung des Scroll-Offsets ist nicht möglich – der Browser scrollt das Ziel an den oberen Rand des Viewports.

Parallax oder Scroll-Scrub

1. Verwenden Sie vorzugsweise Beim Laden (Mount) + Parallax oder Scroll-Scrub in einem übergeordneten Abschnitt; nutzen Sie den Selektor Anderes Element, wenn die bewegliche Ebene ein untergeordnetes Element mit einer ID ist.
2. Halten Sie die Intensität niedrig; der Editor erzwingt Obergrenzen.
3. Testen Sie mit der Desktop-Vorschau und berücksichtigen Sie, dass einige Besucher Reduced Motion verwenden (Effekte können dadurch minimiert werden).

Gestaltungsregeln für zuverlässige Seiten

Regel	Grund
Kritisches Verhalten → Klick	Hover gibt es auf vielen Smartphones nicht
Hover beim Auflaufen + Hover beim Verlassen kombinieren	Vermeiden Sie „abgedunkelte“ Raster, die hängen bleiben
Vermeiden Sie „Hover“ und „Ausblenden“ auf demselben Element	Einmal ausgeblendet, kann der Besucher nicht erneut mit der Maus darüberfahren, um den Vorgang rückgängig zu machen
Verwenden Sie „Klasse hinzufügen/entfernen“ für Hover	Verwenden Sie beim Hover nicht „Klasse umschalten“ – dies kann beim erneuten Aufrufen zu einer falschen Umschaltung führen
Klassen müssen im CSS vorhanden sein	„Klasse hinzufügen“ ändert nur den Namen; definiere .is-visible, .is-open usw. im Stil oder im Theme-CSS
An den Block-Root anhängen	Weniger doppelte Listener; leichter in Ebenen zu finden
Vor der Beurteilung des Live-Verhaltens speichern	Interaktionen gelten für veröffentlichtes/Vorschau--HTML, nicht nur für die statische Arbeitsfläche

Grenzen (pro Seite)

Die Registerkarte Ereignisse zeigt Live-Zähler an. Typische Obergrenzen:

Begrenzung	Ungefährer Wert
Interaktionen pro ausgewähltem Element	15
Diskrete Interaktionen pro Seite	200
Kontinuierliche Bewegung (Parallax / Scroll-Scrub) pro Seite	32
Elemente mit Interaktionen pro Seite	80

Wenn Interaktion hinzufügen deaktiviert ist, entfernen Sie ungenutzte Interaktionen an anderer Stelle auf der Seite oder vereinfachen Sie bewegungsintensive Effekte.

Kopfzeilen-, Fußzeilen- und Vorlagen-Editoren

Die gleiche Registerkarte Ereignisse wird angezeigt, wenn Sie Kopfzeilen- oder Fußzeilen-Vorlagen unter Einstellungen → Kopf- und Fußzeile bearbeiten. Verwenden Sie ihn für Umschaltelemente der fixierten Navigation oder für einblendbare Fußzeilenbereiche – siehe Kopfzeile, Fußzeile und Navigation.

Fehlerbehebung

Symptom	Zu überprüfende Punkte
Auf der Live-Seite passiert nichts	Seite speichern; testen Sie die Vorschau/öffentliche URL, nicht nur die Arbeitsfläche; überprüfen Sie, ob für das Element weiterhin Interaktionen unter Ereignisse aufgeführt sind
Hover funktioniert einmal, danach nie mehr	Sie haben Ausblenden beim Hover verwendet – wechseln Sie zu Klasse hinzufügen / Klasse entfernen mit einem Effekt, der nicht display:none ist
Klasse wird umgeschaltet, aber keine visuelle Änderung	Keine CSS-Regeln für diesen Klassennamen
„Scroll reveal“ wird nie ausgelöst	Schwellenwert/Rand zu streng; Element bereits beim Laden sichtbar; Klasse ohne Übergang
Menü funktioniert auf dem Desktop, nicht auf dem Smartphone	Verwenden Sie Klick, nicht nur Hover
Falsche Kacheln werden abgedunkelt	Interaktion auf falschem Wrapper – Geschwisterelemente müssen denselben Elternteil haben

Nächste Schritte & Validierung

1. Öffne eine Entwurfsseite → wähle einen Abschnitt aus → Ereignisse → füge In den Viewport gelangen + Klasse hinzufügen hinzu → Seite speichern.
2. Zeige eine Vorschau der Seite im Browser an und scrolle, bis der Abschnitt in den sichtbaren Bereich gelangt.
3. Füge Klick + Klasse umschalten auf eine Schaltfläche hinzu, die auf ein ausgeblendetes Panel verweist; überprüfe die Darstellung bei mobiler Breite.
4. Lies die Referenz zu Editorblöcken und Layouts, um zu erfahren, welche Blocktypen sich gut für Interaktionen eignen.