Canvas Builder: die freie Gestaltungsfläche

Der Canvas Builder ist die freie Gestaltungsfläche von Personyze. Statt mit einer
fertigen Vorlage zu beginnen und ihren Text zu bearbeiten, setzen Sie ein Pop-up, ein Banner oder einen Inline-Block aus Elementen zusammen
— eine Überschrift, ein Foto, ein Countdown, ein Formular, ein Empfehlungsstreifen — und ordnen sie an, wie Sie möchten.

Ein Pop-up, das im Personyze Canvas Builder zusammengesetzt wird — Die Leinwand in der Mitte, die Gliederung der Blöcke links und rechts die eigenen Einstellungen des gewählten Elements — Inhalt und Stil, der Link, den es öffnet, und ob seine Klicks zählen. Zum Vergrößern klicken.

Fügen Sie ihn hinzu wie jede andere Aktion: Wählen Sie im Schritt Inhalte einer Kampagne Canvas Builder.
Er hat drei Schritte: Design Your Banner or Popup, Where the data goes (nur wenn Ihr
Design ein Formular enthält) und Set Display Rules & Placement.

Im letzten Schritt wählen Sie, wo er erscheint und wann er sich öffnet — einschließlich Absprungabsicht auf Desktop und Handys. Die Trigger sind für jede Pop-up-Aktion gleich und unter Trigger — wann sich das Pop-up öffnet dokumentiert.

Canvas Builder oder Popup, Banner & HTML Builder?

Beide Aktionen erzeugen dieselben Arten von Inhalten und teilen alles nach dem Gestaltungsschritt — Platzierung, Anzeige-
regeln, Container und Berichte sind identisch. Sie unterscheiden sich nur darin, wie Sie gestalten.

	Canvas Builder	Popup, Banner & HTML Builder
Sie bauen durch	Hinzufügen und Anordnen von Elementen	Auswählen und Ausfüllen einer Vorlage
Am besten, wenn	Sie ein bestimmtes Layout wollen — geteiltes Foto, Countdown, Glücksrad, Empfehlungen, Regeln pro Gerät	Sie schnell einen fertigen Look wollen oder rohes HTML einfügen und pflegen
Vorlagenbibliothek	15 Ausgangsdesigns	Hunderte klassischer Vorlagen
Im alten Panel bearbeitbar	Nein	Ja

Canvas-Builder-Aktionen lassen sich nur im neuen Panel bearbeiten. Arbeitet Ihr Team noch in der
alten Oberfläche, lässt sich eine hier gebaute Aktion dort nicht öffnen.

Mit einem Design beginnen oder bei null

Eine neue Aktion öffnet sich mit Mit einem Design beginnen. Es gibt 15, darunter Showcase (der ganze
Werkzeugkasten in einer Karte), First-visit welcome, Coupon code, Sale announcement,
Personalized greeting, Announcement bar, Exit-intent save, Minimizable teaser,
Recommended for you, Picture beside the pitch, Full-screen takeover, Social proof,
Latest articles und Blank. Jedes ist nach dem Einfügen ein normales Design — nichts ist gesperrt.

Die Elementbibliothek

Die Elemente sind in der Leiste Element hinzufügen in Text · Medien · Formular · Layout · Dynamisch gruppiert. Klicken Sie,
um anzuhängen, oder ziehen Sie auf die Leinwand — legen Sie am rechten Rand eines Elements ab, um beide neben-
einander zu platzieren.

Text

Chip / Pill — eine kleine Badge-Zeile, z. B. „★ Sonderangebot“.
Headline & Subtitle — die Hauptüberschrift plus eine optionale Zeile darunter.
Paragraph — ein Block Fließtext.
Checklist — eine betitelte Liste von Vorteilen mit farbigen Aufzählungspunkten.
Rotating Text — wechselt Nachrichten nacheinander durch, mit Überblenden oder Hochschieben.
FAQ / Accordion — eine Frage-Antwort-Liste, die sich an Ort und Stelle aufklappt. Basiert auf dem eigenen Aufklappelement des Browsers und öffnet sich deshalb auch bei ausgeschaltetem JavaScript.
Numbered Steps — eine Abfolge „So funktioniert’s“ mit automatisch nummerierten Kreisen, als Zeile oder Spalte.
Testimonials — zitierte Kundenstimmen.

Medien

Image — ein Bild mit maximaler Höhe, Radius und Ausrichtung.
Icon — ein einzelnes Symbol, in Größe und Farbe einstellbar.
Video — bettet einen YouTube- oder Vimeo-Link ein.
Image Slider — ein wischbares Karussell; ab der zweiten Folie kommen Pfeile dazu.
Logo Row — eine Reihe von Kunden- oder Partnerlogos.

Formular

CTA Button — der Handlungsaufruf.
Form — Felder, die in Spalten des Besucherprofils speichern, untereinander oder nebeneinander, mit einer
Dankesnachricht, die die Felder nach erfolgreichem Absenden ersetzt.

Layout

Divider — eine waagerechte Linie.
Close (×) button — ein Schließen-Element, das Sie überall platzieren können, getrennt vom eigenen × in der Ecke des Pop-ups.
Media + Text — Bild auf der einen Seite, Worte auf der anderen, mit einstellbarer Aufteilung.
Menu — eine Navigationsliste, als Zeile oder Spalte, optional hinter einem ☰-Symbol.
Comparison Table — eine zweispaltige Tabelle „wir gegen die anderen“; Zellen, die Sie mit yes oder no füllen, werden als Haken oder Kreuz dargestellt.
Minimier-Tab — klappt das ganze Pop-up zu einem beschrifteten Tab zusammen (siehe unten).

Dynamisch

Countdown — ein festes Datum oder pro Besucher / pro Sitzung, im Stil Boxes, Pills oder Minimal.
Coupon — ein Rabattcode, mit einem Klick kopierbar.
Product Recommendations / Content Recommendations — live ausgewählte Empfehlungen pro Besucher, als Slider oder Raster.
Social Proof — echte Zähler oder Zeilen „kürzlich gekauft“, nie erfunden, unterhalb eines von Ihnen festgelegten Schwellenwerts ausgeblendet.
Progress Bar — Fortschritt zu einem Ziel aus einem Profilfeld, etwa Warenkorbsumme oder Punkte.
Prize Wheel — ein gewichtetes Glücksrad mit Preisen und Codes pro Segment.
HTML / Embed — beliebiges HTML, ausgeliefert, wie es geschrieben ist.
Star Rating — eine Sternreihe, die Bruchteile ehrlich zeigt (4,3 sieht aus wie 4,3, nicht wie 4), optional aus einer Katalogspalte gelesen.
Stock Urgency — ein Badge „nur noch 3 übrig“, gesteuert von einer Katalogspalte oder einem Profilfeld, mit Schwellenwert, damit es nur erscheint, wenn der Bestand wirklich niedrig ist.
Personyze Placeholder — ein leerer Platz, den eine andere Aktion füllt, sodass sich ein Design aus mehreren Aktionen zusammensetzen lässt statt aus einem riesigen Dokument.
Custom JavaScript — Code, der läuft, wenn das Pop-up angezeigt wird; rendert nichts Sichtbares.

Datengesteuerte Elemente zeigen in der Vorschau Beispieldaten — auf der echten Website füllen Ihr Katalog, Ihre Profilfelder und
Statistiken sie aus. Ein Social-Proof-Element ohne Historie dahinter wird für
diesen Besucher einfach nicht gerendert.

Den Container gestalten

Der Bereich Container steuert den Rahmen, in dem alles sitzt: Breite (fit the placement,
full width oder ein festes Maximum), Hintergrundfarbe oder -bild, Eckenradius, Innenabstand und was passiert,
wenn er höher als der Bildschirm ist — über den Bildschirm hinauslaufen oder innerhalb des Pop-ups scrollen.

Mit einem Fotobereich teilen setzt ein Foto an eine Seite, mit einstellbarer Bereichsbreite und einem
Brennpunkt keep in view, damit Gesichter nicht abgeschnitten werden. Auf Handys wird automatisch gestapelt.

Schriften sind eine kuratierte Liste, die nichts herunterlädt — System, Helvetica/Arial, humanistisch, geometrisch, Georgia, Slab
Serif oder Monospace, dazu whatever the page uses. Letzteres passt für Inline-Blöcke und meist nicht
für ein schwebendes Pop-up, das vor einer unbekannten Seite bewusst gestaltet wirken muss.

Steuerung pro Element

Ein Element im Personyze Canvas Builder gestalten — Der Tab „Stil“ einer Überschrift: Preset-Stile oben, dann jede Eigenschaft einzeln — und neben jeder ein Button **Variations**, damit ein einzelner Wert je Zielgruppe abweichen kann, ohne das Design zu duplizieren. Zum Vergrößern klicken.

Ein ausgewähltes Element öffnet rechts seinen eigenen Bereich mit zwei Tabs:

Inhalte — was es sagt und tut. Ein Countdown zählt auf ein festes Datum, ein Cookie pro Besucher oder jeden Besuch hin und legt fest, was bei null passiert; ein Button trägt seine Beschriftung, seinen Link und ob seine Klicks zählen. Die Beschriftung eines Buttons, der Link, den er öffnet, oder das JavaScript,
das er ausführt, und ob seine Klicks die sind, die für diese Aktion zählen.
Stil — zuerst Preset-Stile (eine Überschrift bietet Bold center,
Editorial left, Statement), dann jede Eigenschaft einzeln: Farben, Größen, Schriftstärke,
Ausrichtung.

Fast jedes Feld hat einen Button „Variations“. So bedient ein Design mehrere
Zielgruppen — eine andere Überschriftfarbe oder eine andere Beschriftung pro Segment, am selben Element, statt eines
duplizierten Designs, das man synchron halten muss.

Der Fuß des Bereichs wiederholt die drei Aktionen, die auch die Gliederung bietet: Duplizieren,
Ausblenden (es bleibt in der Gliederung und wird beim Rendern übersprungen) und Löschen.

Geräte — ein Element auf allen Geräten, auf Desktop & Tablet oder nur auf Handys anzeigen.
Animation — ein Auftritt (Einblenden, Aufsteigen, Zoomen, Hineinschieben) und eine optionale Aufmerksamkeitsanimation
(Pulsieren, gelegentliches Wackeln). Besucher, die reduzierte Bewegung wünschen, sehen es ruhig.
Größe & Position — Breite, Ausrichtung, Abstände und place beside the previous
element, um eine Zeile zu bauen.
Hintergrund & Rahmen — Hintergrund, Innenabstand, Rahmen, Radius, Schatten und Hover-Farben pro Element.
Erweitert — eigenes CSS, plus separates CSS für Handys mit Bildschirmen bis 767px.

Der Minimier-Tab

Fügen Sie einen Minimier-Tab hinzu, und das Pop-up klappt zu einem beschrifteten Tab zusammen, statt sich zu schließen — immer einen
Klick von der Rückkehr entfernt. Sie legen Beschriftung und Symbol in beiden Zuständen fest, wo der Tab sitzt, ob er minimiert startet
und ob dieser Zustand über Seiten hinweg gespeichert wird.

Der Tab „Inhalte“ eines Countdown-Elements im Personyze Canvas Builder — Inhalt eines Countdowns: worauf er zählt — ein festes Datum, ein Cookie pro Besucher oder ein Neustart bei jedem Besuch — und was bei null passiert: auf Null stehen bleiben, eine Nachricht einblenden oder verschwinden. Zum Vergrößern klicken.

Variations — ein Design, mehrere Zielgruppen

Fast jedes Feld in beiden Tabs hat einen Button ⚡ Variations mit einem Badge, das zählt, wie viele
Alternativen er enthält. So bedient ein Design mehrere Zielgruppen, ohne ein zweites Design synchron halten zu müssen: eine
andere Überschrift für wiederkehrende Besucher, eine andere Button-Beschriftung in einem Land, ein anderes Bild für Menschen, die
bereits gekauft haben.

Öffnen Sie ihn, erhalten Sie eine Liste von Fällen. Jeder Fall ist eine Zielgruppe — gebaut mit demselben Regel-
editor wie im Schritt „Zielgruppe“; alles, was Sie ansprechen können, können Sie also auch variieren — und der Inhalt, den diese Zielgruppe erhält.
Darunter steht der Standard: was alle sehen, die zu keinem Fall passen.

Fälle werden der Reihe nach geprüft, und der erste Treffer gewinnt. Ein breiter Fall über einem engen macht
den engen wirkungslos — er wird nie erreicht, und nichts in der Liste sagt das. Setzen Sie Ihre spezifischsten
Zielgruppen nach oben.

Weil man sich beim Lesen eines Stapels von Editoren leicht irrt, gibt der Dialog die Gesamtheit in Alltagssprache wieder:
„was jeder Besucher tatsächlich erhält“, in der Reihenfolge, in der die Engine sie prüft, abgeleitet aus den Werten
selbst. Außerdem markiert er die vier Fallen:

Ein Fall ohne Bedingung wird verworfen, wenn Sie auf „Fertig“ drücken — geben Sie ihm eine oder entfernen Sie ihn.
Ein Fall mit leerem Inhalt bedeutet, dass diese Zielgruppe nichts sieht. Richtig, wenn Sie das
Element für sie ausblenden wollten; sonst ein Fehler.
Ein leerer Standard bedeutet, dass jeder, der zu keinem Fall passt, nichts sieht.
Eine als rohes SQL geschriebene Bedingung kann hier nicht geprüft werden. Sie läuft trotzdem genau so, wie sie geschrieben ist.

Das Feld, das Sie im Bereich sehen, ist immer der Standard; ein variierendes Feld wirkt also nie
leer. Die Alternativen liegen hinter dem Button, und das Badge ist das einzige Zeichen, dass es sie gibt — ein Blick lohnt sich,
bevor Sie sich wundern, warum eine Änderung jemanden nicht erreicht hat.

Versionen und Bearbeitung mit KI

Die Versionsleiste baut zielgruppenspezifische Designs in einer Aktion: eine Default-Version, die alle sehen,
plus benannte Versionen, geprüft nach „erster Treffer gewinnt“ mit Ihrem vollständigen Zielgruppen-Vokabular — Besuchermerkmale, Geografie,
Verhalten, CRM-Felder, die aktuelle Seite.

Dieses Popup mit KI bearbeiten schreibt das Design nach einer Anweisung in Alltagssprache um oder gestaltet es neu. Klicken Sie zuerst auf ein
Element auf der Leinwand, um die KI darauf zu lenken, dann auf KI-Änderungen anwenden.

Gut zu wissen

Ein Button zählt Klicks nur, wenn er ein echter Handlungsaufruf ist. Buttons aus den Designs sind
für Berichte verdrahtet; bauen Sie einen Link von Hand und erscheinen seine Klicks nie, liegt es daran.
Die Berichte bestimmt der Aktionstyp, nicht das, was Sie hineinlegen. Ein Formular-Element in einem
einfachen Canvas-Builder-Pop-up meldet Einsendungen als Klicks. Formularspezifische Berichte — der Formularbericht,
Zielgruppen „hat ein Formular abgeschickt“, Folge-E-Mails — kommen vom eigenen Aktionstyp für Lead-Formulare.
Video bettet YouTube und Vimeo ein. Andere Anbieter werden nicht eingebettet.
Eigenes CSS wird bereinigt. Deklarationen mit Anführungszeichen, spitzen Klammern, geschweiften Klammern oder
javascript: werden verworfen. Eine Regel, die „nichts tut“, hat meist diesen Grund.
Ausgeblendet ist nicht gelöscht. Das Augensymbol behält ein Element in Ihrem Design, überspringt es aber für Besucher.
Gesamten Inhalt löschen fragt zweimal nach, und „Rückgängig“ kann ihn trotzdem zurückholen.