--- title: Dynamische Inhalte slug: campaign/docs/dynamische-inhalte docTags: createdAt: 2026-08-06T15:53:41.186Z --- ## Design-Anpassungen für Mobilgeräte ### Überblick In diesem Abschnitt werden die Funktionen zur Optimierung der Lesbarkeit und Responsiveness Ihrer Designs für mobile Geräte beschrieben. Obwohl die Standardeinstellungen des Editors auf eine universelle Nutzbarkeit abzielen, möchten Sie vielleicht einige Verhaltensweisen anpassen. Nicht jedes Design profitiert von den Standardeinstellungen für Mobilgeräte. So kann beispielsweise das Stapeln von Spalten (siehe unten) Navigationsleisten oder andere einzigartige Designelemente verzerren. Daher sollten Sie Ihre Designs immer in der Vorschau anzeigen und auf verschiedenen Geräten testen. ### Mobil-Design-Modus und mobil-Stile Im Design-Editor können Sie zwischen dem Desktop-Designmodus (Standard) und dem mobilen Designmodus umschalten, der Ihr Design so anzeigt, wie es auf einem kleinen Handy-Bildschirm dargestellt würde. Im mobilen Modus wird der Inhaltsbereich des Editors auf einen festen Wert von 320 Pixel reduziert. Dieser Modus bietet einen grauen Hintergrund für bessere Sichtbarkeit, der jedoch nicht Teil des Designs ist. Sie können jederzeit zwischen Desktop- und Mobilmodus umschalten. Einige Stileinstellungen können für Desktop- und mobile Clients unterschiedliche Werte haben. Im mobilen Designmodus sind diese mit dem Label :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/a9Q5uKmIZiSA6WHnWQyrW_designeditor-sidepanel-label-mobile-style.png" alt="Bild" caption} (Mobil) im Seitenbereich gekennzeichnet. Wenn Sie einen solchen Wert im mobilen Modus ändern, bleibt der Wert im Desktop-Modus davon unberührt und es werden für jede Zielplattform unterschiedliche Werte zum Rendern des Elements verwendet. Für diese Einstellungen sind mobil-Stile verfügbar: - Ausrichtung - Schaltflächen-Breite - Abstände - Höhe von Abstand-Elementen - Textgröße ### Umschalten zwischen Mobil- und Desktop-Modus **Voraussetzungen:** Sie sehen ein Design im Editor. 1. Klicken Sie unten links im Design-Bereich auf :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rlv1YA8bIvm6P1f-By601_designeditor-designarea-button-switch2mobile.png" alt="Bild" caption width="20" height="20"} (Mobil) oder auf :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/uj1HZanR-hNBn7HFBCAZA_designeditor-designarea-button-switch2desk.png" alt="Bild" caption width="20" height="20"} (Desktop). → Der Modus wechselt. Der ausgewählte Modus wird blau hervorgehoben. ### Stapeln von Spalten Die Verwendung mehrerer Spalten nebeneinander funktioniert gut auf Desktop-Bildschirmen, kann aber auf kleineren mobilen Bildschirmen ein schwierig sein. Die Spaltenoption *Stapeln (mobil)* steuert, ob die Spalten auf Mobilgeräten übereinander statt nebeneinander angezeigt werden. Die Option ist standardmäßig aktiviert, da sie in den meisten Fällen die Lesbarkeit verbessert. Wenn *Stapeln (mobil)* aktiviert ist, gibt es eine zusätzliche Option *Stapelreihenfolge (mobil)*, mit der Sie die Stapelreihenfolge der Spalten in der mobilen Ansicht umkehren können. Die standardmäßige vertikale Stapelung wird von vielen mobilen Browsern und E-Mail-Clients unterstützt. Im Allgemeinen wird empfohlen, die vertikale Stapelung für ein mobilfreundlicheres Layout zuzulassen. Einige E-Mail-Clients, die keine CSS-Unterstützung bieten, verwenden jedoch standardmäßig das Desktop-Layout. ### Ausgeblendete Inhalte Sie können jede Reihe oder jedes Inhaltselement sowohl auf mobilen als auch auf Desktop-Clients ausblenden. Wenn ein Inhalt in Ihrem aktuellen Design-Modus ausgeblendet ist, finden Sie ein augenförmiges Symbol neben dem Umschalter für den Designmodus. Dieses Symbol dient als Umschalter für die Sichtbarkeitseinstellung des Editors. Wenn es aktiviert ist, können Sie Inhalte sehen, die auf dem Gerätetyp, der Ihrem aktuellen Designmodus entspricht, ausgeblendet sind. Ausgeblendete Inhalte werden unscharf dargestellt. Um ausgeblendete Inhalte zu bearbeiten, wechseln Sie in den Design-Modus, in dem sie sichtbar sind. ### Inhalte Ausblenden **Voraussetzungen:** Sie sehen ein Design im Editor. 1. Wählen Sie eine Reihe oder ein Inhalteselement aus. 2. Finden Sie im Seitenbereich im Abschnitt Layout die Option *Nicht sichtbar auf*. 3. Um das ausgewählte Objekt auf Mobilgeräten auszublenden, klicken Sie auf :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/rlv1YA8bIvm6P1f-By601_designeditor-designarea-button-switch2mobile.png" alt="Bild" caption width="20" height="20"} (Mobil), um es auf Desktopgeräten auszublenden, klicken Sie auf :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/uj1HZanR-hNBn7HFBCAZA_designeditor-designarea-button-switch2desk.png" alt="Bild" caption width="20" height="20"} (Desktop). → Die Sichtbarkeit ändert sich. Wenn Sie ein Objekt auf einer Platform ausblenden, wird es automatisch auf der anderen Plattform sichtbar. Um es auf beiden Plattformen anzuzeigen, klicken Sie auf :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/WeZMhgZbAq3yCn15Ay6Fg_designeditor-sidepanel-button-unhide.png" alt="Bild" caption width="20" height="20"} (nicht ausblenden). ## Anzeigebedingungen für Zielgruppen ### Über Anzeigebedingungen Sie können für jede Reihe in einem E-Mail-Design Anzeigebedingungen definieren, um zu steuern, welche Empfänger diese Reihe sehen. Dies funktioniert durch Zuweisung einer oder mehrerer Zielgruppen. Wenn Sie einer Reihe mehrere Zielgruppen zuweisen, wird diese Reihe allen Benutzern angezeigt, die einer dieser Zielgruppen angehören. ### Eine Anzeigebedingung erstellen **Voraussetzungen:** In ihrem Mandanten ist mindestens eine Zielgruppe verfügbar. Sie sehen ein E-Mail-Design im Design-Editor. 1. Wählen Sie eine Reihe aus. 2. Finden Sie im Seitenbereich den Abschnitt *Dynamischer Inhalt*. 3. Klicken Sie auf *Zielgruppen konfigurieren...*. → Ein pop-up-Menu wird angezeigt. 4. Markieren sie alle Zielgruppen, deren Mitglieder die Reihe sehen sollen. 5. Klicken Sie auf *Übernehmen*. → Wenn die E-Mails versendet werden, sehen nur Empfänger aus den zugewiesenen Zielgruppen die Reihe. ### Eine Anzeigebedingung löschen **Voraussetzungen:** Sie sehen ein E-Mail-Design im Design-Editor. 1. Wählen Sie eine Reihe mit einer Anzeigebedingung aus. 2. Finden Sie im Seitenbereich den Abschnitt *Dynamischer Inhalt*. 3. Klicken Sie auf :inlineImage[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/vJnA-D3bBlNFmezHp4dav_designeditor-sidepanel-button-delete.png" alt="Bild" caption width="20" height="20"} *(löschen)*. → Die Anzeigebedingung wird gelöscht. ## Merge-Tags in E-Mails Mit Merge-Tags können Sie textbasierte Elemente in E-Mail-Nachrichten individualisieren. Es gibt zwei Datenquellen für Merge-Tags: - Empfängerlistenfelder, - Feldfunktionen. Im Design-Editor werden Platzhalter als Name des Merge-Tags in geschweiften Klammern angezeigt (z. B. ). In der E-Mail-Nachricht für den Empfänger wird dies durch den Wert des Platzhalter-Tags für den jeweiligen Kontext ersetzt (z. B. *"Marie"*). Die Feldfunktionen in Ihrem Client sind automatisch als Merge-Tags im Design-Editor verfügbar. Zusätzlich können Empfängerlistenfelder ausgewählt werden, wenn ein Empfängerlistenknoten konfiguriert und mit dem Nachrichtenknoten verbunden ist. ### Merge-Tag einfügen **Voraussetzungen:** Sie sehen ein E-Mail-Design im Design-Editor. 1. Klicken Sie auf ein textbasiertes Element. → Ein pop-up-Menü für Textformatierungen wird angezeigt. 2. Platzieren Sie den Cursor dort, wo das Merge-Tag eingefügt werden soll. 3. Klicken Sie im pop-up-Menü auf *Merge tags*. → Verfügbare Merge-Tags werden aufgelistet. 4. Klicken Sie auf das gewünschte Merge-Tag. → Das Merge-Tag wird an der Cursorposition eingefügt. ### Merge-Tag entfernen **Voraussetzungen:** Sie sehen ein E-Mail-Design im Design Editor. 1. Entfernen Sie den Text in geschweiften Klammern (inklusive Klammern). → Das Merge-Tag wurde entfernt. ## Dynamische Bilder auf Landinpages ### Über dynamische Bilder Dynamische Bilder sind ein beliebter Anwendungsfall für benutzerdefiniertes HTML. Ein dynamisches Bild kann nach ihren eigenen Bedingungen angepasst werden, beispielsweise abhängig davon, wer ein Design aufruft oder wann es aufgerufen wird. Ein solches Bild kann zum Beispiel eine Anrede enthalten, die den Namen des Betrachters verwendet. Dies kann durch Hinzufügen eines JavaScript-Programms in ein benutzerdefiniertes HTML-Element erreicht werden. Dieses JavaScript-Programm muss die On-Page-Funktionalität für das folgende Verfahren bereitstellen: Sie senden jedem Betrachter einen benutzerdefinierten Link mit URL-Parametern, die benutzerspezifische Informationen enthalten (z. B. einen Namen). Das JavaScript-Programm verarbeitet dann die URL-Parameter und ändert den HTML-Code eines Bildelements so, dass die Bildquelle zu einer Anfrage an einen externen Dienst wird. Der externe Dienst liefert ein angepasstes Bild, das auf den Informationen in der Anfrage basiert. ### Der Umschalter *Dynamisches Bild* Die Anzeige von dynamischen Bildern im Design-Editor kann problematisch sein, weil der Editor nicht die nötigen URL-Parameter kennt, um Bilder für die HTML \-Elemente anzufordern. Zur Vermeidung dieses Problems dient der Umschalter *Dynamisches Bild* in den Bildeigenschaften im Seitenbereich. Wenn *Dynamisches Bild* aktiv ist, können sie zwei Quellen für ein Bildelement angeben: - Das Feld *URL* wird für die Anzeige im Editor verwendet und sollte einen Link zu einem neutralen Vorschaubild enthalten. - Das Feld *Dynamische URL* wird verwendet um ihr Bild für externe Betrachter des Designs anzuzeigen und sollte einen Link zum externen Bild-Service mit Variablen enthalten. ### Beispiel Nehmen wir an, Sie haben einen Kunden, den Sie mit seinem Vornamen *John* in einem Bild auf einer Landingpage ansprechen möchten. Wir gehen davon aus, dass es unter *my-image-generator.com* einen Dienst gibt, der eine HTTP-Anfrage verarbeiten kann, um ein individuelles Bild für Ihre Landing Page bereitzustellen. Sie können jeden Dienst mit dieser Funktionalität verwenden. Sie senden John einen Link, der seinen Namen als URL-Parameter enthält: ```javascript https://example.com/page?customer_name=John ``` Wenn John diesen Link in seinem Browser öffnet, wird die Landingpage mit einem dynamischen Bild geladen, das den Platzhalter im src-Attribut hat: ```javascript ``` Dieses letzte Code-Beispiel ist im Quellcode der Landingpage nicht zu sehen, aber es zeigt, welche Anfrage an den externen Dienst gestellt wird. Das Bild, das der externe Dienst bereitstellt, wird dann benutzt um die Landingpage so zu rendern, wie John sie sieht.