Deine erste Campaign: vom fertigen Design zum Design-Generator im Look deiner Website

Du hast gerade ein Bluepic-Konto angelegt, und deine Designs gibt es schon, gemacht zum Beispiel in Canva. Dieser Guide zeigt an einem Beispiel den ganzen Weg: vom fertigen Design über ein Template bis zu einem Design-Generator, der aussieht wie deine Website und in dem deine Besucher ihre eigene Version des Designs erstellen. Lies ihn einmal ganz, bevor du anfängst. Jeden einzelnen Klick findest du in den verlinkten Anleitungen.

Das Ziel: der Design-Generator des YLW Summit in den Farben und der Schriftart der Event-Website.

Das Beispiel: Der YLW Summit startet mit Bluepic

Der YLW Summit ist eine erfundene Konferenz mit Messe, vom 2. bis 4. April 2026 in Köln. Du kümmerst dich dort ums Marketing und hast gerade ein Bluepic-Konto angelegt.

Das Team hat in Canva ein Design für Besucher gemacht: „I'm attending!“ mit Foto, Name, Rolle und Firma. Bisher bekommen Besucher eine Canva-Vorlage und eine Anleitung, wie sie Foto und Namen austauschen. Künftig sollen sie das Design auf einer eigenen Seite des Events selbst ausfüllen und auf LinkedIn teilen, ohne Canva und ohne Anleitung.

Die Website des YLW Summit nutzt zwei Blautöne, #124BBA und #457DED, und die Schriftart Bricolage Grotesque. So soll auch die neue Seite aussehen.

Drei Begriffe brauchst du dafür:

• Template: dein Design in Bluepic. Alles, was Besucher ändern dürfen, wird darin zu einem Input-Feld.
• Input-Feld: ein Feld, in dem Besucher etwas eintragen, auswählen oder hochladen, zum Beispiel ihren Namen oder ihr Foto. Das Design übernimmt es sofort.
• Campaign: bündelt ein oder mehrere Templates und veröffentlicht sie als Design-Generator, eine Seite mit eigenem Link. Dort wählen Besucher ein Template, füllen es aus und exportieren ihr Design.

Der Weg im Überblick

Von deinem Design bis zum fertigen Link sind es vier Etappen:

Aus deinem Design ein Template machen

Dein Design kommt nicht als Ganzes nach Bluepic. Du teilst es in zwei Teile:

• Der statische Hintergrund ist alles, was für jeden Besucher gleich aussieht: Farben, Formen, Logo, Event-Daten. Du exportierst ihn aus Canva als ein Bild.
• Die Teile, die sich ändern, füllt jeder Besucher anders aus: hier das Foto, die Namenszeile und die Überschrift. Nur sie baust du in Bluepic nach, auf dem statischen Hintergrund.

Für das Design des YLW Summit sieht das so aus:

1. Du speicherst in Canva eine Kopie des Designs und löschst darin alles, was Besucher ändern sollen: das Foto, die Zeile mit Name, Rolle und Firma und „I'm attending!“. Was übrig bleibt, ist der statische Hintergrund. Du exportierst ihn als PNG-Datei in der Größe des Designs, hier 1080 × 1080 Pixel.
   Links das Design aus Canva, rechts der statische Hintergrund.
2. In Bluepic legst du einen Ordner für die Event-Ausgabe an, hier „YLW Summit 2026“. Darin erstellst du mit Create Template und Empty ein Template in derselben Größe. Der Template-Editor öffnet sich mit einem leeren Canvas. Wie das geht, steht in Template erstellen: Größe und Export-Format festlegen.
   
3. Mit dem Bild-Werkzeug in der Toolbar und Image öffnest du die Image Cloud. Mit Upload kommt der statische Hintergrund hinein. Du klickst auf das Bild und dann auf den Canvas. Das Bild erscheint dort in seiner Originalgröße. Mit dem Align-Button in der Toolbar und Center horizontal und Center vertical rückst du es in die Mitte. Weil es genauso groß ist wie das Template, füllt es das Template jetzt genau.
   
4. Darauf setzt du die Teile, die sich ändern: ein Bild genau über die freie Fläche für das Foto, einen Text für die Namenszeile und einen Text für „I'm attending!“. Wie du Bilder und Texte hinzufügst, steht in Design-Elemente (Bilder, Text, Formen).
5. Du gibst den Texten die Schriftart des Designs. Bricolage Grotesque ist ein Google Font und schon in Bluepic. Eine eigene Schriftart deiner Marke lädst du einmal hoch, siehe Schriftart hochladen: eigene Schriftarten in Templates nutzen.
6. Mit dem Werkzeug Create Input Field machst du die drei Teile änderbar. Das Foto bekommt das Input-Feld „Your photo“, die Namenszeile „Name / Role / Company“. „I'm attending!“ wird eine Text Selection: Hier tippen Besucher nichts, sie wählen zwischen „I'm attending!“ und „Meet me there!“.
   
7. Mit dem Anchoring-Werkzeug verbindest du die obere Kante von „I'm attending!“ mit der unteren Kante der Namenszeile, mit 5 Pixeln Abstand. Jetzt bleibt die Überschrift immer direkt unter der Namenszeile, auch wenn sich die Namenszeile ändert. Das Template sieht jetzt genauso aus wie das Design aus Canva, nur dass Besucher es selbst ausfüllen.
   

Campaign erstellen

Jetzt kommt das Template in eine Campaign. Der YLW Summit hat auf dieselbe Weise fünf weitere Templates gebaut: für Speaker, Aussteller und Sponsoren, einen Profilbild-Rahmen und eine E-Mail-Signatur. Alle kommen in eine Campaign, damit alle auf dem Event dieselbe Seite nutzen.

1. Du klickst in der Navigation auf Campaigns und dann auf Create Campaign. Im Popup lässt du Web ausgewählt und klickst auf Create. Web ist eine eigene Seite mit Link. Wie du den Design-Generator stattdessen in deine Website einbettest, steht weiter unten.
   
2. Im Schritt Templates öffnest du den Ordner „YLW Summit 2026“ und setzt das Häkchen bei allen sechs Templates. Der Design-Generator zeigt sie in alphabetischer Reihenfolge.
   
3. Die Campaign ist ab jetzt online, unter einem Link mit einer langen Nummer. Im Schritt Share machst du daraus mit Edit URL einen lesbaren Link, im Beispiel template.bluepic.io/ylw-summit-2026-generator.

Den Look deiner Website übernehmen

Bluepic übernimmt den Look nicht automatisch von deiner Website. Du brauchst von ihr drei Dinge: die Farben als Hex-Codes, die Schriftart und, wenn du willst, ein Bild für den Kopf der Seite. Ein Hex-Code beschreibt eine Farbe mit sechs Zeichen nach einem #, zum Beispiel #124BBA für das Blau des YLW Summit. Dein Design-Team oder der Styleguide deiner Marke kennt die Hex-Codes.

Generator Theme: Farben, Schriftart, Ecken

Im Schritt Generator Theme legst du fest, wie der Design-Generator selbst aussieht: die Fläche mit der Galerie, den Input-Feldern und den Buttons.

1. Du klickst auf Add theme. Jetzt kannst du eigene Farben einstellen.
2. Bei Background Color trägst du die Hintergrundfarbe ein, im Beispiel Weiß, bei Primary Color die Hauptfarbe deiner Website, im Beispiel #124BBA. Sie färbt Buttons und Markierungen.
3. Bei Header Font und Label Font wählst du die Schriftart der Website. Auch hier lädst du eine eigene Schriftart mit Upload custom font hoch.
4. Bei Corner Radius wählst du, wie rund die Ecken sind, passend zu den Buttons deiner Website. Im Beispiel Subtle.
5. Mit Save as Custom Theme speicherst du das Theme unter einem Namen, hier „YLW Summit“. In deiner nächsten Campaign wählst du es unter Custom Colors mit einem Klick.
   

Landing Page: die Seite um den Design-Generator

Im Schritt Landing Page baust du die Seite um den Design-Generator: einen Kopf und einen Hintergrund mit Titel. Besucher sehen sie, bevor sie ein Template wählen.

1. Du klickst auf Add landing page und unter Header Section auf Add header section. Der Kopf bekommt den Titel „YLW Summit 2026 · 2 - 4 April · Cologne“ und als Hintergrund das Blau #124BBA. Statt einer Farbe geht auch ein Bild im Format 16:3, zum Beispiel ein Ausschnitt aus dem Titelbild deiner Website.
2. Unter Body Section bekommt die Seite den hellen Hintergrund #EEF3FD und darüber zwei Zeilen, die sagen, was Besucher hier tun: „Show your network you're coming“ und „Pick a design, add your photo and name, and share it on LinkedIn.“
3. Unter Text Styling setzt du das Häkchen bei Advanced text styling und gibst den Titeln die Schriftart und die Farben der Website.
   

Testen und teilen

Du testest den Design-Generator zweimal, bevor du den Link verschickst: einmal in der Vorschau im Studio und einmal auf der Seite, die deine Besucher öffnen.

1. Im Schritt Share siehst du unter dem Link die Vorschau: deinen Design-Generator, so wie Besucher ihn sehen. Dort füllst du jedes Template einmal so aus, wie es ein Besucher tun würde: mit einem eigenen Foto und einem langen Namen. Dann exportierst du es. Exporte in der Vorschau kosten keine Credits, deshalb testest du sie hier.
   
2. Du klickst auf Copy URL und öffnest den Link in einem neuen Browser-Tab. Das ist die Seite, die deine Besucher sehen. Du prüfst, ob dort alles stimmt, exportierst aber nicht: Auf dem Live-Link kostet jeder Export einen Credit, auch deiner.
   
3. Du teilst den Link: im Newsletter, als Button auf der Event-Website und in der Bestätigungsmail zur Anmeldung.

Auf deiner Website einbetten

Soll der Design-Generator direkt auf einer Seite deiner Website stehen, mit deinen eigenen Hinweisen daneben, nimmst du eine Widget-Campaign statt einer Web-Campaign. Templates und Generator Theme richtest du genauso ein. Eine Landing Page gibt es nicht, denn die Seite drumherum ist deine Website. Im Schritt Share steht im Tab Embed der Code, den du in deine Seite einfügst.

Wie geht es weiter?

• Speaker und Aussteller sollen ihr Banner schon mit ihren Daten ausgefüllt bekommen: Aus Daten personalisierte Visuals machen: drei Levels.
• Kolleginnen und Kollegen sollen mitarbeiten: Team verwalten: Team-Mitglieder einladen, Rollen vergeben, entfernen. Team-Mitglieder gibt es ab Pro.
• Du willst sehen, wie oft der Design-Generator genutzt wird: Campaign- und Template-Analytics. Analytics gibt es in den bezahlten Tarifen.