Einführung in den Seiteneditor

Der Seiteneditor ist ein **visueller WYSIWYG-**Arbeitsbereich: Was Sie auf der Arbeitsfläche anordnen, sehen die Besucher, nachdem Sie die Seite gespeichert und veröffentlicht haben. Sie schreiben keinen reinen HTML-Code – Sie erstellen Blöcke innerhalb von Abschnitten, Zeilen und Spalten, die ArtInStack in eine schnelle, responsive öffentliche Seite umwandelt.

Funktionsübersicht

• Blöcke per Drag-and-Drop – Text, Bilder, Hero-Blöcke, Formulare, Produktraster und mehr (siehe Referenz zu Editor-Blöcken und Layouts und Unterstützte Medienpräsentationsblöcke).
• Inline-Bearbeitung – Klicken Sie auf Text auf der Arbeitsfläche, um den Text zu bearbeiten; wählen Sie einen Block aus, um die Eigenschaften in der rechten Seitenleiste anzupassen.
• Responsive Vorschau – Die Geräteschaltflächen in der Symbolleiste (Desktop, Tablet, Mobil) zeigen Ihnen, wie sich das Layout anpasst, bevor Sie die Seite veröffentlichen.
• Interaktionen (Registerkarte „Ereignisse“) – Scroll-Effekte, Hover-Effekte, Umschaltfunktionen und Bewegungen auf der veröffentlichten Website ohne benutzerdefinierten Code (siehe Ereignisse und Interaktionen im Seiteneditor).
• Gemeinsames Chrome — Kopf- und Fußzeile der Website stammen häufig aus Vorlagen, die seitenübergreifend angewendet werden (siehe Arbeiten mit Seitenvorlagen).

Architektur der Benutzeroberfläche

[Seiten → Bearbeiten → Registerkarte „Seiteneditor“]
        |
        v
[Symbolleiste: Speichern, Veröffentlichen, Gerätevorschau]
        |
        +-- Arbeitsbereich (Mitte): Abschnitte → Zeilen → Spalten → Blöcke
        |
        +-- Rechte Seitenleiste (gestapelte Bereiche):
              Symbole: Bearbeiten | Ebenen | Blöcke
              Wenn „Bearbeiten“ aktiv ist: Registerkarten „Stil“ | „Attribute“ | „Ereignisse“ darunter

Abschnitte, Zeilen und Spalten

Die meisten Seiten bestehen aus Abschnitten (Bänder in voller Breite). Innerhalb eines Abschnitts platzieren Sie Zeilen und anschließend Spalten (1–4 Spalten oder Seitenleisten-Layouts aus der Kategorie Layout). Blöcke befinden sich innerhalb von Spalten – sie schweben niemals frei auf einer unsichtbaren Stammebene.

Ebene	Funktion
Abschnitt	Vertikales Band; steuert den Abstand und den Hintergrund des Abschnitts
Zeile	Horizontale Zeile; maximale Breite, Abstand und Innenabstand
Spalte	Zelle, die einen oder mehrere Blöcke enthält
Block	Bild, Rich Text, Hero, Kontaktformular usw.

Verwenden Sie die Ebenen in der rechten Seitenleiste, wenn Sie eine Zeile oder einen Abschnitt auswählen müssen, der unter anderen Inhalten verborgen ist.

Was Besucher sehen vs. was Sie beim Bearbeiten sehen

Der Editor-Arbeitsbereich wendet dieselben Layout-Regeln an wie die Live-Website: Abstände, Typografie und Blockstruktur sind aufeinander abgestimmt, sodass Sie nach der Veröffentlichung keine Überraschungen erleben. Wenn nach der Veröffentlichung auf der öffentlichen URL etwas falsch aussieht, lesen Sie Vorschau und Veröffentlichung und Behebung von Veröffentlichungsproblemen – meist handelt es sich um den Cache, den Entwurfsstatus oder einen Block, dem noch Medien fehlen.

Häufige Kernanwendungsfälle

• Startseite — Hero + Portfolio-Raster + Kontakt-CTA.
• Kontakt — Kontaktformular-Block — Kontaktformular zu Seiten hinzufügen.
• Über uns — Rich-Text-Block + Porträtbild-Block.
• Dienstleistungen — Funktionen-Raster + Testimonial-Blöcke.
• Shop – Produktlisten-Blöcke (siehe Produkte und Verkauf).

Nächste Schritte & Überprüfung

1. Öffnen Sie den Seiteneditor auf einer echten Seite.
2. Lesen Sie den Abschnitt Seiteneditor-Seitenleiste und Symbolleiste.
3. Lesen Sie den Abschnitt Seitenlayout und Inhalt zu Abschnitten, Zeilen und maximaler Breite.
4. Überfliegen Sie den Abschnitt Ereignisse und Interaktionen im Seiteneditor, wenn Sie Scroll-Effekte, Hover-Effekte oder Klickverhalten ohne benutzerdefinierten Code nutzen möchten.
5. Fügen Sie einen Abschnitt- und einen Bild-Block ein, klicken Sie auf Seite speichern und zeigen Sie eine Vorschau auf dem Handy an.
6. Vorschau anzeigen und veröffentlichen, wenn Sie fertig sind.