Beauty Profil

Seiten-Konstruktor

Diese Seite erklärt den realen Dashboard-Bereich Seiten-Konstruktor. Sie zeigt, wie Templates, aktive Sektionen, Reihenfolge, kleine Designparameter, Preview und Veröffentlichung zusammen die öffentliche Profilseite formen.

Rolle

Struktur- und Layoutzentrale für die öffentliche Profilseite.

Wichtig für

Informationsarchitektur, Conversion-Reihenfolge, mobile Lesbarkeit und schnellen Seitenaufbau.

Nicht allein zuständig für

die eigentlichen Inhalte aus Profil, Leistungen, Team, Bewertungen oder Rechtliches.

Schnell zu einem Bereich

Sinn Seitenkarte Wirkung Kundensicht Screenshots Funktionsblöcke Datenlogik Ablauf Fehler FAQ

Was dieser Bereich im Produkt wirklich macht

Seiten-Konstruktor ist der Bereich, in dem aus einzelnen Inhaltsbausteinen eine öffentliche Profilseite mit eigener Leselogik entsteht. Er ist damit weder nur Template-Auswahl noch nur Sortierliste, sondern die strukturelle Schicht zwischen Inhalten und öffentlicher Darstellung.

Das Modul verbindet schnellen Einstieg über Templates mit granularer Kontrolle über Sektionen. Dadurch kann ein Studio entweder schnell zu einer brauchbaren Struktur kommen oder die Seite später bewusst auf Conversion, Vertrauen und mobile Nutzung hin verfeinern.

Wichtig ist die Abgrenzung: Die Inhalte selbst kommen aus anderen Modulen, aber hier wird entschieden, welche Inhalte in welcher Reihenfolge und mit welcher Prioritaet auf der Profilseite erscheinen.

Wie die Seite aufgebaut ist

Action-Kopf

Preview und Veröffentlichen als Abschluss des Builders.

Info-Box

Erklärt Schnellmodus, erweiterten Modus und Autosave-Haltung.

Mode-Switch

Wechselt zwischen schneller und granularer Arbeitsweise.

Template-Auswahl

Setzt den Startpunkt für die Struktur.

Aktive Sektionen

Definiert die aktuelle Seitenarchitektur.

Sektionen hinzufügen

Ergänzt bisher nicht aktive Blocks.

Design anpassen

Bietet kleine visuelle Parameter wie Akzentfarbe und Hero-Titel.

Preview-Modal

Zeigt Desktop- und Mobile-Sicht auf die aktuelle Struktur.

Was daran auf die öffentliche Seite wirkt

Direkte Wirkung auf Lesereihenfolge

Reihenfolge, sichtbare Sektionen und der gewaehlte Start-Template bestimmen, welche Informationen oben stehen, wie Besucher scrollen und wo CTA-nahe Inhalte auftauchen.

Direkte Wirkung auf Conversion und Vertrauen

Ob zuerst Hero, Leistungen, Galerie, Bewertungen oder Kontakt erscheinen, veraendert die Wahrnehmung der Seite und kann die Wahrscheinlichkeit von Kontakt oder Buchung spürbar beeinflussen.

Wichtige Abgrenzung

Der Builder rettet keine schwachen Inhalte. Er ordnet und priorisiert sie. Wenn Profil, Leistungen oder Bewertungen schwach sind, wird eine bessere Reihenfolge allein das Grundproblem nicht loesen.

Was sieht der Kunde davon?

Direkt sichtbar in der Profilseite

Kunden sehen die hier bestimmte Reihenfolge der Abschnitte, die Gewichtung von Hero, Leistungen, Bewertungen, Kontakt und ggf. FAQ sowie den allgemeinen Lesefluss der Seite.

Besonders stark auf Mobile

Weil Besucher auf kleinen Screens meist linear scrollen, wirkt die hier festgelegte Reihenfolge direkt darauf, was zuerst Vertrauen aufbaut und wann der CTA erscheint.

Praktische Übersetzung in Kundensprache

Gute Reihenfolge sagt: Ich verstehe schnell, wer dieses Studio ist und warum es zu mir passt.

Fruehe Leistungen oder Galerie sagen: Ich sehe schnell, was angeboten wird oder wie die Arbeit wirkt.

Fruehe Bewertungen sagen: Ich kann Vertrauen schneller aufbauen.

Schlecht geordnete Blöcke sagen: Die Seite wirkt unruhig, unklar oder anstrengend zu lesen.

Screenshots und visuelle Orientierung

Diese Bildplätze sind vorbereitet, damit Template-Wahl, Sections-Logik und Preview später auch visuell erklärt werden. Die aktuellen Bilder sind Platzhalter und können später direkt ersetzt werden.

Empfehlung: Modus, Template, Section-Liste und Preview lieber getrennt zeigen als in einem einzigen Full-Screen-Capture.

Die Funktionsblöcke im Detail

1. Zwei Modi für unterschiedliche Arbeitstiefen

Der Seiten-Konstruktor beginnt mit einer klaren Produktentscheidung: Schnellmodus oder Erweiterter Modus. Im Schnellmodus steht die Template-Wahl im Vordergrund. Im erweiterten Modus bekommt der Nutzer volle Kontrolle über aktive Sektionen, Reihenfolge und Design-nahe Einstellungen.

Pflegt

die Arbeitsweise für den Seitenaufbau, nicht nur einzelne Inhalte.

Beeinflusst

wie schnell ein Profil online gebracht oder wie granular es später angepasst werden kann.

Häufig verwechselt mit

zwei voneinander getrennten Tools. Tatsächlich sind es zwei Zugänge zum selben Builder.

Vorhanden: Mode-Toggle, aktive Markierung und eigene Beschreibung pro Modus.

Wirkung: Der Builder passt sich an unterschiedliche Reifegrade und Nutzerprofile an.

Praxis: Schnellmodus für Start, erweitert für Feintuning und Strukturarbeit.

2. Template-Auswahl als Startstruktur

Im Schnellmodus wählt der Nutzer ein Template, das Bild, Name, Beschreibung und vorbereitete Section-Setups mitbringt. Der JavaScript-Flow übernimmt diese Auswahl direkt in die aktive Sections-Liste und macht aus der Template-Karte eine reale Strukturentscheidung.

Pflegt

den strukturellen Startpunkt der öffentlichen Seite.

Beeinflusst

Reihenfolge, Blockauswahl und die Grundlogik des Profils nach außen.

Häufig verwechselt mit

reiner Designkosmetik. In Wahrheit setzt das Template bereits die Seitenarchitektur.

Vorhanden: Template-Modal mit Kategorien, Bildvorschau, Beschreibung und vordefinierten Sections.

Wirkung: Der Nutzer startet nicht bei null, sondern auf einer produktiv sinnvollen Grundstruktur.

Praxis: Ideal für Studios, die schnell zu einer plausiblen Profilseite kommen wollen.

3. Aktive Sektionen als eigentliche Seitenarchitektur

Im erweiterten Modus wird die Seite als Liste aktiver Sektionen verstanden. Jede Zeile repräsentiert einen öffentlichen Block wie Hero, Über uns, Leistungen, Team, Galerie, Bewertungen, Buchung, Kontakt oder FAQ.

Pflegt

die sichtbare Informationsarchitektur der öffentlichen Profilseite.

Beeinflusst

was Besucher zuerst sehen, wie die Seite gelesen wird und welche Inhalte Priorität bekommen.

Häufig verwechselt mit

blosem Content-Switching. Tatsächlich ist das Layout- und Conversion-Logik zugleich.

Vorhanden: aktive Liste, Count-Anzeige und pro Zeile Name, Beschreibung und Steuerbuttons.

Wirkung: Die Seite wird als geordnete Blockstruktur steuerbar, nicht nur als Formularsammlung.

Praxis: Sehr wichtig für mobile Lesbarkeit und klare CTA-Führung.

4. Reihenfolge, Entfernen und Hinzufügen

Jede aktive Sektion kann nach oben oder unten verschoben oder ganz entfernt werden. Parallel gibt es rechts eine Add-Liste für weitere Sektionen. Der JS-Flow synchronisiert diese beiden Seiten des Builders, deaktiviert bereits aktive Add-Buttons und aktualisiert die Preview sofort.

Pflegt

die genaü Reihenfolge und Zusammensetzung der öffentlichen Seite.

Beeinflusst

Scroll-Reihenfolge, inhaltliche Priorisierung und Conversion-Wege.

Häufig verwechselt mit

einer rein kosmetischen Umordnung. In Wahrheit ist das Besucherführung.

Vorhanden: up/down/delete pro Zeile sowie Add-Buttons für bisher inaktive Sektionen.

Wirkung: Aus Templates wird ein aktiv editierbarer Seitenaufbau.

Praxis: Wichtig, wenn ein Studio z. B. Reviews früher und FAQ später zeigen will.

5. Kleine Designanpassungen im Builder

Rechts ist ein kompakter Designblock vorbereitet. Derzeit sind Akzentfarbe und Hero-Titel sichtbar. Das zeigt, dass der Konstruktor nicht nur Blockreihenfolge, sondern auch erste Präsentationsparameter mitsteuert.

Pflegt

kleine visuelle Leitplanken der öffentlichen Seite.

Beeinflusst

Wiedererkennung und Kohärenz zwischen Struktur und Markenwirkung.

Häufig verwechselt mit

einem vollständigen Designsystem. Aktuell ist es eher ein leichter Design-Layer.

Vorhanden: Farbfeld, Hex-Wert und Hero-Titel-Eingabe.

Wirkung: Visuelle Akzente können mit der Seitenstruktur zusammen gedacht werden.

Praxis: Gut für schnelle Personalisierung, aber nicht als vollständiger Theme-Builder zu lesen.

6. Vorschau mit Desktop- und Mobile-Ansicht

Die Preview ist nicht nur ein statisches Bild. Sie kann zwischen Desktop und Mobile umgeschaltet werden und liest ihre Sektionsstruktur direkt aus dem aktuellen Builder-Status. Damit wird die Auswirkung von Reihenfolge und Section-Auswahl sofort sichtbar.

Pflegt

keine Daten, sondern die Kontrolle über den aktuellen visuellen Zustand.

Beeinflusst

wie sicher Entscheidungen über Struktur und Lesefluss getroffen werden.

Häufig verwechselt mit

einem finalen Rendering. In Wirklichkeit ist es ein arbeitsnahes Kontrollinstrument.

Vorhanden: Preview-Modal, Device-Toggle und aktualisierte Preview-Sektionen.

Wirkung: Der Builder bleibt nicht abstrakt, sondern zeigt direkte Strukturfolgen.

Praxis: Besonders wichtig für mobile Reihenfolge und Hero-/CTA-Wirkung.

7. Preview und Veröffentlichen als Abschluss des Flows

Oben rechts stehen Vorschau und Veröffentlichen nebeneinander. Das zeigt die eigentliche Produktlogik: Der Nutzer soll Struktur ändern, visuell prüfen und dann veröffentlichen. Die Page wird also als editierbares, prüfbares und danach live schaltbares Objekt behandelt.

Pflegt

den letzten Schritt zwischen Builder-Zustand und öffentlicher Ausspielung.

Beeinflusst

wie kontrolliert Änderungen live gehen.

Häufig verwechselt mit

einem simplen Speichern. Der Kontext deutet klar auf Preview-vor-Publish.

Vorhanden: Preview-Button und Publish-CTA im Kopf der Seite.

Wirkung: Ändert die Arbeitshaltung von Formularpflege zu bewusstem Seitenbau.

Praxis: Vor dem Publish sollte immer mobile und inhaltliche Reihenfolge geprüft werden.

Welche Zustände und Daten hier zusammenlaufen

Der Seiten-Konstruktor verbindet mehrere Frontend-Zustände zu einem konsistenten Builder-Flow:

Mode-State
Schnellmodus oder Erweiterter Modus inklusive unterschiedlicher Beschreibung und UI-Freigabe.
Template-State
Ausgewaehltes Template mit Bild, Name, Beschreibung und vordefinierten Sektions-IDs.
Sections-State
Aktive Sektionsliste mit Reihenfolge, Löschungen und neu hinzugefuegten Bloecken.
Preview-State
Desktop/Mobile-Umschaltung und Live-Vorschau auf Basis der aktuellen Sections-Liste.

Die JS-Logik zeigt klar, dass Template-Wahl nicht nur kosmetisch ist: Beim Anwenden eines Templates wird die aktuelle Section-Liste neu aufgebaut. Gleichzeitig synchronisiert das Script Add-Buttons, Section-Count und Preview in Echtzeit.

Dazu kommt eine einfache Designebene mit Akzentfarbe und Hero-Titel, wodurch der Builder bereits erste Praesentationsparameter mit der Struktur verknuepft.

Empfohlene Reihenfolge bei der Nutzung

  1. 1 Zuerst entscheiden, ob ein schneller Template-Start reicht oder ob die Seite granular aufgebaut werden soll.
  2. 2 Dann ein passendes Template wählen, das zur Art des Studios und zur groben Seitenlogik passt.
  3. 3 Im erweiterten Modus aktive Sektionen prüfen, Überflüssiges entfernen und fehlende Blöcke gezielt ergänzen.
  4. 4 Danach die Reihenfolge so setzen, dass Vertrauen, Angebot und CTA sinnvoll aufeinander folgen.
  5. 5 Kleine Designparameter nur danach anpassen, nicht als ersten Schritt.
  6. 6 Zum Schluss die Preview in Desktop und Mobile prüfen und erst dann veröffentlichen.

Häufige Fehler auf dieser Seite

Ein Template nur wegen des Vorschaubilds wählen, ohne auf die mitgelieferte Struktur zu achten.
Zu viele Sektionen aktivieren und dadurch die mobile Seite unruhig und lang machen.
Leistungen, Bewertungen oder Kontakt zu spät platzieren, obwohl sie für Vertrauen oder Conversion früh kommen sollten.
Preview nur auf Desktop prüfen und die mobile Reihenfolge nicht gegenkontrollieren.
Versuchen, über den Builder schwache Inhalte zu kompensieren, statt Profil- oder Leistungsinhalte zuerst zu verbessern.

Fragen und Antworten

Ist der Schnellmodus nur für Anfänger gedacht? ⌄
Nicht nur. Er ist auch für erfahrene Nutzer sinnvoll, wenn schnell eine gute Grundstruktur benötigt wird und nicht jedes Detail manuell gebaut werden soll.
Ändert ein Template wirklich die Seite oder nur die Vorschau? ⌄
Es ändert die aktive Sections-Liste. Die Template-Wahl ist also eine echte Strukturentscheidung und nicht nur eine visuelle Auswahl.
Warum ist die Reihenfolge der Sektionen so wichtig? ⌄
Weil Besucher die Seite linear wahrnehmen. Besonders auf Mobile bestimmt die Reihenfolge, wie schnell Vertrauen, Angebot und Handlungsoptionen verstanden werden.
Kann ich im Builder alle Inhalte selbst schreiben? ⌄
Nicht im Kern. Der Builder steuert Struktur und einige Präsentationsparameter. Die eigentlichen Inhalte kommen aus Bereichen wie Profil, Leistungen, Team oder Bewertungen.
Wofür ist die Preview am wichtigsten? ⌄
Um zu sehen, ob die Struktur in Desktop und Mobile wirklich logisch wirkt, bevor Änderungen veröffentlicht werden.

Weiter im Guide Center

Der Seiten-Konstruktor wird erst im Zusammenspiel mit den Inhaltsmodulen stark. Diese Seiten helfen, Struktur, Inhalte und Conversion als zusammenhaengendes System zu lesen.

Alle Admin-Guides ansehen
Basisinhalte

Profil

Liefert die Stammdaten und Kontaktinformationen, die der Builder später anordnet.
Angebotssicht

Leistungen

Wird wichtig, wenn Leistungen im Seitenaufbau frueh und klar sichtbar sein sollen.
Vertrauen absichern

Rechtliches

Ergaenzt die öffentliche Seite um Pflichtangaben, die strukturell sinnvoll eingebettet sein müssen.
Im Zusammenhang lesen

Workflows

Hilft zu verstehen, wann Strukturarbeit im Seitenbau im Gesamtprozess Sinn ergibt.