Hallenplan-Template für Aussteller: die gewählte Halle hervorheben

Auf deiner Messe gibt es mehrere Hallen, und jeder Aussteller soll auf LinkedIn zeigen, wo man ihn findet: mit seinem Logo, seiner Halle und seinem Stand, und auf dem Hallenplan leuchtet genau seine Halle auf. Dieser Guide zeigt an einem Beispiel, wie du so ein Template baust: Aussteller wählen ihre Halle in einem Dropdown-Menü, und der Hallenplan wechselt von selbst. Lies ihn einmal ganz, bevor du anfängst. Jeden einzelnen Klick findest du in den verlinkten Anleitungen.

Das Beispiel: Aussteller zeigen ihre Halle

Der YLW Summit ist eine erfundene Konferenz mit Messe, vom 2. bis 4. April 2026 in Köln, in sechs Hallen. Du kümmerst dich dort ums Marketing. Die Aussteller sollen vor dem Event posten, dass sie dabei sind: „We're exhibiting!“, mit ihrem Logo, ihrem Firmennamen, ihrer Halle und ihrem Stand.

Das Design-Team hat dir den Hallenplan sieben Mal gegeben: einmal für jede Halle, in dem nur diese Halle weiß leuchtet, und einmal ohne hervorgehobene Halle. Alle sieben Bilder sind gleich groß und zeigen denselben Ausschnitt.

Das Template bekommt trotzdem nur ein Bild für den Hallenplan. Welche der sieben Dateien es zeigt, entscheidet eine Zuordnung: eine Liste, die zu jeder Halle aus dem Dropdown-Menü das passende Bild nennt. Wählt ein Aussteller „Hall 5“, zeigt das Bild den Plan mit Halle 5. Diese Liste schreibst du mit der Funktion SWITCH. Excel kennt dieselbe Funktion: Dort heißt sie ERSTERWERT, auf Englisch ebenfalls SWITCH.

Der Weg im Überblick

Von den sieben Bildern bis zum fertigen Link sind es fünf Etappen:

Die Hallenpläne vorbereiten

Bevor du im Studio anfängst, brauchst du die Hallenpläne als einzelne Bilder.

1. Aus deinem Design-Programm exportierst du den Hallenplan einmal pro Halle, mit dieser Halle hervorgehoben, und einmal ohne Hervorhebung. Alle Exporte haben genau die Größe der Fläche, auf der der Plan im Template liegt, hier 1080 × 663 Pixel. So passt jedes Bild an dieselbe Stelle.
2. Unter Assets und Images öffnest du die Bilder deiner Asset-Bibliothek, der Bibliothek deines Kontos. Mit Upload lädst du alle sieben Bilder auf einmal hoch. Jedes Bild hat jetzt eine eigene Adresse im Web, seine URL. Die brauchst du später für die Zuordnung.
   

Das Design im Template-Editor bauen

Das Design baust du direkt im Template-Editor, aus Flächen, Texten und Bildern.

1. Im Ordner „YLW Summit 2026“ erstellst du mit Create Template und Empty ein Template in 1080 × 1080 Pixeln.
2. Mit dem Rechteck-Werkzeug legst du die Flächen an: oben die große blaue Fläche in #457DED, unten das dunkelblaue Band in #124BBA und links darin eine weiße Box für das Event-Logo.
3. Mit dem Bild-Werkzeug holst du drei Bilder aus der Image Library: das Event-Logo in die weiße Box, oben rechts einen Platzhalter „Your Logo“ für das Logo des Ausstellers und auf die blaue Fläche den Hallenplan ohne hervorgehobene Halle, genau in der Größe 1080 × 663.
4. Beim Platzhalter für das Logo stellst du Crop Mode auf Contain. Dann bleibt jedes Logo ganz sichtbar, egal welches Format es hat, und nichts wird abgeschnitten. Außerdem stellst du Origin auf rechts. Die Fläche für das Logo liegt oben rechts und endet an derselben rechten Kante wie „Booth YY“ darunter. Ein Logo, das schmaler ist als seine Fläche, etwa ein quadratisches, säße sonst mitten in der Fläche und stünde aus der Reihe. Mit Origin rechts endet es immer an dieser Kante.
5. Mit dem Text-Werkzeug setzt du vier Texte in Bricolage Grotesque und Weiß: „We're exhibiting!“, „Company Name“ und im blauen Band „Hall XX“ und „Booth YY“. Bei „Hall XX“ und „Booth YY“ schaltest du Wrap aus, damit sie immer in einer Zeile bleiben. „Booth YY“ bekommt Origin rechts: Eine längere Standnummer wächst dann nach links, der rechte Rand bleibt.
6. Im Layers-Panel gibst du den Elementen, die sich ändern, lesbare Namen: logo, company, hall, booth und hallplan. Ein Doppelklick auf den Namen macht ihn bearbeitbar. Aus diesen Namen baut Bluepic gleich die Namen der Variablen, zum Beispiel hall_text für das Input-Feld der Halle. Mit einem lesbaren Namen liest sich die Zuordnung später fast wie ein Satz.
   

Input-Felder anlegen

Jetzt machst du die vier Teile änderbar, die jeder Aussteller anders ausfüllt. Ein Input-Feld ist das, was Aussteller im Design-Generator sehen und ausfüllen. Du legst jedes mit dem Werkzeug Create Input Field an.

1. Der Platzhalter logo bekommt den Feldtyp Image. Aussteller laden dort ihr Logo hoch. Weil der Platzhalter auf Contain steht, wird kein Logo abgeschnitten.
2. company und booth bekommen den Feldtyp Text. Dort tippen Aussteller ihren Firmennamen und ihre Standnummer.
3. hall bekommt den Feldtyp Text Selection. Hier tippen Aussteller nichts, sie wählen ihre Halle aus einem Dropdown-Menü. In den Einstellungen legst du unter Text options sechs Optionen an, mit den Werten „Hall 1“ bis „Hall 6“. Die erste Option „Hall XX“ bleibt der Standardwert und bekommt als Custom label „Select hall“. So steht im Dropdown-Menü „Select hall“, im Design „Hall XX“, bis ein Aussteller seine Halle wählt. Unter Type wählst du Dropdown.
   

Wählt ein Aussteller jetzt „Hall 5“, ändert sich der Text im blauen Band. Der Hallenplan bleibt noch derselbe. Das ändert das nächste Kapitel.

Den Hallenplan an die Auswahl koppeln

Bisher zeigt das Bild hallplan immer dieselbe Datei. Jetzt bekommt es statt der festen Datei die Zuordnung: Welche Datei es zeigt, hängt von der gewählten Halle ab. Dafür schreibst du eine Expression, eine Rechenregel statt eines festen Werts.

Die Funktion SWITCH geht eine Liste von Paaren durch. Ist die gewählte Halle „Hall 1“, nimmt sie die URL des ersten Bilds. Ist sie „Hall 2“, die des zweiten, und so weiter. Passt keine Halle, etwa beim Standardwert „Hall XX“, nimmt sie den letzten Eintrag: den Plan ohne hervorgehobene Halle.

1. Fahre in deiner Asset-Bibliothek mit der Maus über das Bild „Hall plan – Hall 1“ und klicke auf das Kettensymbol. Das ist Copy URL. Die Adresse des Bilds ist jetzt kopiert.
   
2. Füge die Adresse in einem Texteditor neben ihrer Halle ein, zum Beispiel in der Notizen-App deines Computers. Wiederhole das für alle sieben Bilder. Wir empfehlen, die Zuordnung dort vorzubereiten und nicht in Bluepic: Du siehst alle sieben URLs auf einmal, prüfst jedes Paar in Ruhe und hast eine Kopie fürs nächste Jahr.
3. Schreib im Texteditor die Zuordnung. Zuerst kommt der Variablenname des Input-Felds der Halle, dann je eine Halle und die URL ihres Bilds, am Ende die URL des Plans ohne hervorgehobene Halle. Texte und URLs stehen in Backticks (`), die Teile sind mit Kommas getrennt:

   SWITCH(hall_text,
     `Hall 1`, `https://imagedelivery.net/…/public`,
     `Hall 2`, `https://imagedelivery.net/…/public`,
     `Hall 3`, `https://imagedelivery.net/…/public`,
     `Hall 4`, `https://imagedelivery.net/…/public`,
     `Hall 5`, `https://imagedelivery.net/…/public`,
     `Hall 6`, `https://imagedelivery.net/…/public`,
     `https://imagedelivery.net/…/public`)
   

   
   Statt … steht jeweils der Rest der URL, die du kopiert hast.
4. Klicke im Template-Editor in der Toolbar oben auf das kursive fx. Das ist das Werkzeug Connect expressions.
   
5. Klicke im Layers-Panel auf hallplan. Das Properties-Panel zeigt seine Eigenschaften.
   
6. Klicke im Properties-Panel im Bereich Image auf das Vorschaubild unter Source. Der Expression-Editor öffnet sich mit einem Block OBJECT.
   
7. Klicke oben rechts im Expression-Editor auf die spitzen Klammern.
   
   Die Code-Ansicht öffnet sich. Sie zeigt die Quelle des Bilds als { src: "https://…", innerAlign: "center", … }. Für dich zählt nur src, die Adresse der Datei. Der Rest regelt Zuschnitt und Spiegelung und bleibt, wie er ist.
   
8. Ersetze die Adresse nach src:, mitsamt ihren Anführungszeichen, durch deine Zuordnung aus dem Texteditor. Die Zeilenumbrüche dürfen bleiben. Bluepic übernimmt die Änderung sofort und speichert die Zuordnung in einer Zeile.
   
9. Klicke oben links auf ×. Der Expression-Editor schließt sich. Auf dem Canvas siehst du weiter den Plan ohne hervorgehobene Halle, denn noch ist „Hall XX“ gewählt.

Testen und teilen

Ob jede Halle ihr Bild bekommt, testest du im Design-Generator, der Seite, auf der Aussteller das Template ausfüllen.

1. Du klickst oben rechts auf Share und dann auf Publish Template Link. Ein Popup mit dem Link öffnet sich, darunter die Vorschau des Design-Generators.
2. In der Vorschau wählst du jede Halle einmal im Dropdown-Menü und schaust, ob genau diese Halle aufleuchtet. Dazu lädst du ein Logo hoch und tippst einen langen Firmennamen und eine Standnummer.
   
3. Du klickst auf Copy URL und schickst den Link an deine Aussteller, zum Beispiel im Aussteller-Newsletter oder im Aussteller-Portal.

Wie geht es weiter?

• Aussteller sollen das Template schon mit Halle und Stand ausgefüllt bekommen: Aus Daten personalisierte Visuals machen: drei Levels.
• Das Template soll mit anderen Templates in einen Design-Generator im Look deiner Website: Deine erste Campaign: vom fertigen Design zum Design-Generator im Look deiner Website.
• Ein anderes Bild soll einer Auswahl folgen, zum Beispiel der Plan der Bühnen oder eine Flagge pro Land: Die Zuordnung mit SWITCH funktioniert dort genauso.