--- url: "/de/emailify/content/dynamic.md" description: "Füge deinen E-Mails dynamische Inhalte hinzu – mit Merge-Tags deiner E-Mail-Marketing-Plattform und eigenen Codeblöcken in ihrer Syntax." --- # Dynamische und personalisierte Inhalte mit Emailify > Füge deinen E-Mails dynamische Inhalte hinzu – mit Merge-Tags deiner E-Mail-Marketing-Plattform und eigenen Codeblöcken in ihrer Syntax. ### Video-Tutorial: Dynamische Inhalte zu HTML-E-Mails in Figma hinzufügen Dieses Video zeigt dir, wie du mit dem Plugin Emailify dynamische Inhalte zu HTML-E-Mails in Figma hinzufügst. [Embedded media](https://www.youtube-nocookie.com/embed/0512urzUNTk) ### Video-Tutorial: Einen dynamischen Produkt-Feed zu deinen Klaviyo-E-Mails in Figma hinzufügen Dieses Video zeigt dir, wie du mit dem Figma-Plugin Emailify eigene Klaviyo-Produkt-Feeds in eigene HTML-Vorlagen einbaust. [Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo) ### Video-Tutorial: E-Mail-Vorlage für einen Klaviyo-Flow zu abgebrochenen Warenkörben in Figma erstellen Dieses Video zeigt dir, wie du mit dem Figma-Plugin Emailify eigene Klaviyo-Flows zu abgebrochenen Warenkörben in eigene HTML-Vorlagen einbaust. [Embedded media](https://www.youtube-nocookie.com/embed/MHPCkb1n8XM) ## Plattformspezifische personalisierte Inhalte hinzufügen {#adding-platform-specific-personalization-content} [Video](/assets/videos/emailify/content/text-merge-tags.mp4) Personalisierte Texte, etwa für die Namen der Empfänger, fügst du mit den Merge-Tags deines E-Mail-Dienstleisters hinzu (zum Beispiel MailChimp, Klaviyo usw.). Trag dazu dein Merge-Tag in deine Emailify-Textebenen ein. Fügst du zum Beispiel `Hello, %FIRSTNAME%` oder `Hello, *|FNAME|*` (je nach Syntax und Werten deiner Plattform) in den Inhalt deiner Figma-Textebene ein, wird das Merge-Tag beim Versand der E-Mail automatisch durch die echten Daten ersetzt. > **Note:** Da sich diese Tags je nach Plattform unterscheiden, über die du deine E-Mails verschickst, sieh in der Vorlagendokumentation deines E-Mail-Dienstleisters nach, welche Tags du verwenden kannst. ### Dokumentation zu Vorlagenvariablen einiger Plattformen {#some-platform-specific-template-variable-documentation} Hier findest du Links zu einigen (aber nicht allen) beliebten Plattformen: - [Merge-Tags von MailChimp](https://mailchimp.com/en-au/help/all-the-merge-tags-cheat-sheet/) - [Template-Tags von Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4408802648731) - [Vorlagensyntax von Campaign Monitor](https://help.campaignmonitor.com/personalize-emails-with-subscriber-custom-fields) - [Vorlagensyntax von Postmark](https://postmarkapp.com/support/article/1077-template-syntax) - [Substitution-Tags von SendGrid](https://docs.sendgrid.com/for-developers/sending-email/substitution-tags) - [Personalisierungstoken von HubSpot](https://knowledge.hubspot.com/website-pages/personalize-your-content#add-personalization-to-a-coded-template) - [Personalisierungs-Tags von ActiveCampaign](https://help.activecampaign.com/hc/en-us/articles/220709307-Personalization-Tags#list-of-standard-personalization-tags-0-5) - [E-Mail-Personalisierung bei Mailjet](https://documentation.mailjet.com/hc/en-us/articles/360043225773-Can-we-personalize-emails-) - [E-Mail-Personalisierung bei SendPulse](https://sendpulse.com/knowledge-base/email-service/additional/clever-personalization) - [Personalisierungs-Tags von Braze](https://www.braze.com/docs/user_guide/personalization_and_dynamic_content/liquid/supported_personalization_tags/) - [Vorlagenpersonalisierung bei Iterable](https://support.iterable.com/hc/en-us/articles/205480365-Personalizing-Templates-with-Handlebars-) - [Personalisierungs-Tags von Dotdigital](https://support.dotdigital.com/hc/en-gb/articles/212212798-Add-data-field-personalisation-to-your-email-campaign-or-landing-page) - [Personalisierungs-Tags von Intercom](https://www.intercom.com/help/en/articles/247-create-custom-email-templates#2-when-adding-user-or-company-variables-to-your-template) ## If/else-Logik zwischen Row-, Wrapper- oder Hero-Ebenen einfügen {#add-if-else-logic-between-your-row-wrapper-or-hero-layers} [Video](/assets/videos/emailify/content/custom-code-elements.mp4) Mit dem Ebenentyp [🧑‍💻 Custom Code](/de/emailify/content/code) fügst du eigene Vorlagenlogik zwischen den Zeilen deiner Designs ein. Achte darauf, dass die Syntax zu deiner E-Mail-Marketing-Plattform passt; ungefähr sieht das so aus: `{% if customer_type == 'premium' %}` _Hier eine Emailify-Row_ `{% else %}` _Hier eine andere Emailify-Row_ `{% endif %} ` ## Personalisierte bzw. dynamische Bilder hinzufügen {#add-personalized-dynamic-images} [Video](/assets/videos/emailify/content/custom-image-url-override.mp4) Du kannst die Bild-URL einer bestimmten Bildebene in deinen E-Mail-Designs überschreiben, indem du einen Wert in das Feld **Override Image Src** einträgst. Das kann entweder die URL eines Bildes sein, das bereits irgendwo hochgeladen ist (zum Beispiel `https://mycdn/img.jpg`), oder eine dynamische Variable in der Vorlagensprache deiner E-Mail-Plattform (zum Beispiel `{ variable.my_image }`). Der Wert wird beim HTML-Export automatisch in das `src`-Attribut des ``-Tags übernommen. ### Optional die Höhe (mit „auto“ als Breite) für ein dynamisches Bild festlegen {#optionally-setting-the-height-with-an-auto-width-for-a-dynamic-image} Bei dynamischen Bildern, deren Höhe du festlegen willst, während sich die Breite natürlich anpasst (weil die Abmessungen der Bilddatei hinter der dynamischen URL vorab oft nicht bekannt sind), gehst du in Figma so vor: 1. Aktiviere in der Figma-Oberfläche **Lock aspect ratio** für die Bildebene. 2. Leg in der Figma-Oberfläche einen Wert für **Max height** der Bildebene fest. Danach wird das Bild mit fester Höhe (entsprechend deiner maximalen Höhe in Figma) und automatisch angepasster Breite dargestellt, statt wie standardmäßig mit fester Breite und automatischer Höhe. So nehmen deine dynamischen Bilder den richtigen vertikalen Platz ein und behalten ihr natürliches Seitenverhältnis. > **Info:** Dieses Verhalten gilt nur für Bilder mit dynamischen URLs; statische, von Emailify exportierte Bilder und Bilder auf MJML-Plattformen sind nicht betroffen. ## Lange eigene Textinhalte kürzen {#truncate-long-custom-text-content} [Video](/assets/videos/emailify/content/truncate-lines.mp4) Lange dynamische Text-Tags in deinen E-Mail-Designs können das Design verfälschen, weil sie bestimmte Elemente oder Hintergrundbilder künstlich in die Höhe ziehen, obwohl der _endgültige Inhalt_, der die dynamischen Platzhalter-Tags beim Versand ersetzt, kürzer sein kann als das Tag selbst. Um das zu vermeiden, kannst du deine Figma-Textebene auf eine von dir festgelegte maximale Zeilenzahl kürzen. So gehst du vor: 1. **Klick auf deine Textebene** im Emailify-Frame in Figma 2. Setz die [Textgrößen-Einstellung](https://help.figma.com/hc/en-us/articles/27378154668951-Adjust-text-dimensions-and-resizing) der Textebene auf **Auto width** 3. Öffne das Fenster **Type settings** (über das Symbol **...**) 4. Setz die Option **Truncate text** auf **Truncate enabled** 5. Setz die Eigenschaft **Max lines** (darunter) auf die maximale Zahl an Zeilen, auf die dein Text umbrechen darf 6. Setz die Eigenschaft **Horizontal resizing** unter **Auto layout** der Textebene auf **Fill container** > **Note:** Die Kürzung gilt nur auf deinem Figma-Canvas, damit der vollständige dynamische Textwert nicht mehr Höhe einnimmt als nötig. Der endgültige HTML-Export enthält keine Kürzung, da der dynamische Text automatisch durch echte Inhalte ersetzt wird, wenn die E-Mail über die E-Mail-Marketing-Plattform, für die du die dynamischen Tags verwendest, an deine Zielgruppe verschickt wird. ### Buttons mit langem Platzhaltertext schmal halten {#keep-buttons-narrow-with-long-placeholder-text} Enthält ein Button eine lange Variable oder einen Platzhalter, der später durch ein kürzeres Datum oder Label ersetzt wird, richte die Größe seiner Textebene nach dem endgültigen Label. Sonst kann der Platzhalter den exportierten Button zu breit machen, und Outlook behält diese Breite womöglich bei, auch nachdem deine E-Mail-Plattform den Platzhalter ersetzt hat. 1. Wähle in Figma die **Textebene im Button** aus. 2. Setz **Horizontal resizing** dieser Textebene auf **Fixed width** und wähle eine Breite, die zum erwarteten endgültigen Datum oder Label passt. 3. Öffne **Type settings**, aktiviere **Truncate text** und setz **Max lines** auf **1**. 4. Lass die vollständige Variable bzw. den Platzhalter in der Textebene und exportiere die E-Mail erneut. 5. Schick über deine E-Mail-Plattform einen Test, um den Button mit dem endgültigen Ersatztext zu prüfen, falls betroffen auch in Outlook. > **Note:** Die Kürzung ändert nur, wie der Platzhalter auf dem Figma-Canvas erscheint. Der vollständige Platzhalter bleibt im exportierten HTML, damit deine E-Mail-Plattform ihn ersetzen kann. Plane genug Breite für das längste endgültige Label ein, das du voraussichtlich verschickst. ## Dynamische Variablen für Farben und Schriftfamilien hinzufügen {#adding-dynamic-color-and-font-family-variables} [Video](/assets/videos/emailify/content/dynamic-color-name-variables.mp4) ### Dynamische Farbvariablen {#dynamic-color-variables} Soll eine Hintergrund-, Text- oder Konturfarbe in deinen E-Mail-Designs als dynamisches Code-Snippet (zum Beispiel **{{ primary_color }}**) statt als normaler Hex-Wert der Figma-Farbe (zum Beispiel `#000000`) ausgegeben werden, erstelle einen [Figma-Farbstil](https://www.youtube.com/watch?v=d01Ql9ZtVnk) und achte darauf, dass sein **Name** doppelte geschweifte Klammern enthält (zum Beispiel **{{ my_color_var_name }}**). Dieser **Name** deines Farbstils wird dann automatisch als CSS-Wert für `color`, `background-color` oder `border-color` verwendet, wenn das Plugin Emailify das HTML erzeugt. ### Dynamische Variablen für Schriftfamilien {#dynamic-font-family-variables} Ebenso kannst du einen `font-family`-CSS-Wert als dynamisches Code-Snippet (zum Beispiel **{{ customer.font_family }}**) statt als normalen Schriftwert aus Figma (zum Beispiel `Arial, sans-serif`) ausgeben lassen. Erstelle dazu einen [Figma-Textstil](https://www.youtube.com/watch?v=M0OuDhxaroU) und achte darauf, dass sein **Name** doppelte geschweifte Klammern enthält (zum Beispiel **{{ my_font_var_name }}**). Dieser **Name** deines Stils wird dann automatisch als CSS-Wert für `font-family` verwendet, wenn das Plugin Emailify das HTML erzeugt. ## Eine Data Table Row mit dynamischen Daten in einer Schleife wiederholen {#looping-a-data-table-row-with-dynamic-data} [Video](/assets/videos/emailify/content/looping-data-table-row.mp4) Um Daten aus deiner E-Mail-Plattform zu durchlaufen, wähle eine **Data Table Row** aus und öffne **Settings**. Trag die Schleifensyntax in **Opening Code Wrapper** (zum Beispiel `{% for product in collection.products %}`) und **Closing Code Wrapper** (zum Beispiel `{% endfor %}`) ein. Emailify setzt die Tags im exportierten HTML um das ``-Element dieser Zeile. Sobald du die Wrapper-Tags zur **Data Table Row**-Ebene hinzugefügt hast, kannst du die Ebenen deiner Zeile nach Bedarf [mit dynamischen Inhalten füllen](#adding-platform-specific-personalization-content). > **Tip:** Du kannst [Einstellungen auf mehrere Ebenen anwenden](/de/emailify/design/settings#apply-settings-in-bulk), indem du **Settings** öffnest und dann in Figma mehrere Emailify-Ebenen desselben Typs auswählst. Jede Einstellung, die du änderst, wird auf alle ausgewählten Ebenen angewendet.