---
url: "/pl/emailify/content/dynamic.md"
description: "Dodawaj do e-maili treści dynamiczne, łącząc merge tagi z Twojej platformy e-mail marketingu z blokami własnego kodu w składni tej platformy."
---

# Dodawanie treści dynamicznych i spersonalizowanych w Emailify

> Dodawaj do e-maili treści dynamiczne, łącząc merge tagi z Twojej platformy e-mail marketingu z blokami własnego kodu w składni tej platformy.

### Poradnik wideo: dodawanie treści dynamicznych do e-maili HTML w Figmie

Ten film pokazuje, jak dodać treści dynamiczne do e-maili HTML w Figmie za pomocą wtyczki Emailify.
[Embedded media](https://www.youtube-nocookie.com/embed/0512urzUNTk)

### Poradnik wideo: dodawanie dynamicznego feedu produktów do e-maili Klaviyo w Figmie

Ten film pokazuje, jak za pomocą wtyczki Emailify do Figmy dodać własne feedy produktów z platformy Klaviyo do własnych szablonów HTML.
[Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo)
### Poradnik wideo: tworzenie w Figmie szablonu e-maila dla przepływu porzuconego koszyka w Klaviyo

Ten film pokazuje, jak za pomocą wtyczki Emailify do Figmy dodać własne przepływy porzuconego koszyka z platformy Klaviyo do własnych szablonów HTML.
[Embedded media](https://www.youtube-nocookie.com/embed/MHPCkb1n8XM)

## Dodawanie treści personalizowanych dla konkretnej platformy {#adding-platform-specific-personalization-content}

[Video](/assets/videos/emailify/content/text-merge-tags.mp4)

Spersonalizowany tekst, na przykład imiona odbiorców, dodasz za pomocą merge tagów od Twojego dostawcy usług e-mailowych (np. MailChimp, Klaviyo). Wystarczy wpisać merge tag w warstwach tekstowych Emailify.

Na przykład po dodaniu do treści warstwy tekstowej w Figmie `Hello, %FIRSTNAME%` lub `Hello, *|FNAME|*` (zależnie od składni i wartości Twojej platformy) merge tag zostanie automatycznie zastąpiony prawdziwymi danymi podczas wysyłki e-maila.

> **Note:** Te znaczniki różnią się w zależności od platformy, z której wysyłasz e-maile, więc sprawdź w dokumentacji szablonów swojego dostawcy usług e-mailowych, jakich znaczników możesz używać.

### Dokumentacja zmiennych szablonów wybranych platform {#some-platform-specific-template-variable-documentation}

Poniżej znajdziesz linki do dokumentacji niektórych (nie wszystkich) popularnych platform:

- [Merge tagi w MailChimp](https://mailchimp.com/en-au/help/all-the-merge-tags-cheat-sheet/)
- [Znaczniki szablonów w Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4408802648731)
- [Składnia szablonów w Campaign Monitor](https://help.campaignmonitor.com/personalize-emails-with-subscriber-custom-fields)
- [Składnia szablonów w Postmark](https://postmarkapp.com/support/article/1077-template-syntax)
- [Znaczniki podstawiania w SendGrid](https://docs.sendgrid.com/for-developers/sending-email/substitution-tags)
- [Tokeny personalizacji w HubSpot](https://knowledge.hubspot.com/website-pages/personalize-your-content#add-personalization-to-a-coded-template)
- [Znaczniki personalizacji w ActiveCampaign](https://help.activecampaign.com/hc/en-us/articles/220709307-Personalization-Tags#list-of-standard-personalization-tags-0-5)
- [Personalizacja e-maili w Mailjet](https://documentation.mailjet.com/hc/en-us/articles/360043225773-Can-we-personalize-emails-)
- [Personalizacja e-maili w SendPulse](https://sendpulse.com/knowledge-base/email-service/additional/clever-personalization)
- [Znaczniki personalizacji w Braze](https://www.braze.com/docs/user_guide/personalization_and_dynamic_content/liquid/supported_personalization_tags/)
- [Personalizacja szablonów w Iterable](https://support.iterable.com/hc/en-us/articles/205480365-Personalizing-Templates-with-Handlebars-)
- [Znaczniki personalizacji w Dotdigital](https://support.dotdigital.com/hc/en-gb/articles/212212798-Add-data-field-personalisation-to-your-email-campaign-or-landing-page)
- [Znaczniki personalizacji w Intercom](https://www.intercom.com/help/en/articles/247-create-custom-email-templates#2-when-adding-user-or-company-variables-to-your-template)

## Dodawanie logiki if/else między warstwami Row, Wrapper i Hero {#add-if-else-logic-between-your-row-wrapper-or-hero-layers}

[Video](/assets/videos/emailify/content/custom-code-elements.mp4)

Warstwa typu [🧑‍💻 Custom Code](/pl/emailify/content/code) pozwala wstawić własną logikę szablonów między wierszami w projektach. Upewnij się, że składnia jest poprawna dla platformy e-mail marketingu, z której korzystasz. Może to wyglądać mniej więcej tak:

`{% if customer_type == 'premium' %}`

_Tutaj wiersz Emailify_

`{% else %}`

_Tutaj inny wiersz Emailify_

`{% endif %} `

## Dodawanie spersonalizowanych i dynamicznych obrazów {#add-personalized-dynamic-images}

[Video](/assets/videos/emailify/content/custom-image-url-override.mp4)

Adres URL obrazu dla wybranej warstwy obrazu w projekcie e-maila nadpiszesz, wpisując wartość w polu **Override Image Src**. Możesz użyć adresu URL obrazu, który jest już gdzieś przesłany (na przykład `https://mycdn/img.jpg`), albo zmiennej dynamicznej z języka szablonów Twojej platformy e-mailowej (na przykład `{ variable.my_image }`). Przy eksporcie do HTML wartość zostanie automatycznie wstawiona do atrybutu `src` znacznika ``.

### Opcjonalne ustawianie wysokości (z szerokością „auto”) dla obrazu dynamicznego {#optionally-setting-the-height-with-an-auto-width-for-a-dynamic-image}

Jeśli w przypadku obrazów dynamicznych chcesz kontrolować wysokość, a szerokość ma dopasować się naturalnie (bo wymiary pliku pod dynamicznym adresem URL mogą nie być znane z góry), zrób w Figmie następujące kroki:

1. Włącz **Lock aspect ratio** dla warstwy obrazu w interfejsie Figmy.
2. Ustaw wartość **Max height** dla warstwy obrazu w interfejsie Figmy.

Po tych ustawieniach obraz wyświetli się ze stałą wysokością (równą maksymalnej wysokości z Figmy) i automatycznie dopasowaną szerokością, zamiast domyślnego zachowania (stała szerokość, automatyczna wysokość). Dzięki temu obrazy dynamiczne zajmują właściwą przestrzeń w pionie i zachowują naturalne proporcje.

> **Info:** To zachowanie dotyczy tylko obrazów z dynamicznymi adresami URL; nie wpływa na statyczne obrazy eksportowane przez Emailify ani na obrazy na platformach MJML.

## Przycinanie długich treści tekstowych {#truncate-long-custom-text-content}

[Video](/assets/videos/emailify/content/truncate-lines.mp4)

Długie znaczniki treści dynamicznych w projektach e-maili mogą czasem psuć projekt, sztucznie zwiększając wysokość niektórych elementów, obrazów tła itp., podczas gdy _ostateczna treść_ (która w wysłanym e-mailu zastąpi znaczniki dynamiczne) może być krótsza niż sam znacznik.

Aby temu zapobiec, możesz ustawić przycinanie warstwy tekstowej w Figmie do wybranej maksymalnej liczby wierszy. Wykonaj te kroki:

1. **Kliknij warstwę tekstową** w ramce Emailify w Figmie
2. Ustaw [ustawienie rozmiaru tekstu](https://help.figma.com/hc/en-us/articles/27378154668951-Adjust-text-dimensions-and-resizing) warstwy tekstowej na **Auto width**
3. Otwórz panel **Type settings** (klikając ikonę **...**)
4. Ustaw opcję **Truncate text** na **Truncate enabled**
5. Ustaw właściwość **Max lines** (poniżej) na maksymalną liczbę wierszy, na które może się rozciągać tekst
6. Ustaw właściwość **Horizontal resizing** w **Auto layout** warstwy tekstowej na **Fill container**

> **Note:** Przycięcie działa tylko na płótnie Figmy, aby pełna wartość tekstu dynamicznego nie zajmowała więcej wysokości, niż powinna. Końcowy eksport HTML nie zawiera żadnego przycinania, bo tekst dynamiczny zostanie automatycznie zastąpiony prawdziwą treścią, gdy e-mail zostanie wysłany do odbiorców przez platformę e-mail marketingu, z której pochodzą znaczniki dynamiczne.

### Wąskie przyciski mimo długiego tekstu zastępczego {#keep-buttons-narrow-with-long-placeholder-text}

Jeśli przycisk zawiera długą zmienną lub tekst zastępczy, który później zostanie zastąpiony krótszą datą lub etykietą, dopasuj rozmiar warstwy tekstowej do ostatecznej etykiety. W przeciwnym razie tekst zastępczy może sprawić, że wyeksportowany przycisk będzie za szeroki, a Outlook może zachować tę szerokość nawet po podstawieniu wartości przez platformę e-mailową.

1. Zaznacz w Figmie **warstwę tekstową wewnątrz przycisku (Button)**.
2. Ustaw **Horizontal resizing** tej warstwy na **Fixed width** i wybierz szerokość, która zmieści oczekiwaną ostateczną datę lub etykietę.
3. Otwórz **Type settings**, włącz **Truncate text** i ustaw **Max lines** na **1**.
4. Zostaw w warstwie tekstowej pełną zmienną lub tekst zastępczy, a potem ponownie wyeksportuj e-mail.
5. Wyślij test przez platformę e-mailową, aby sprawdzić przycisk z ostatecznym tekstem, w tym w Outlooku, jeśli problem go dotyczy.

> **Note:** Przycięcie zmienia tylko sposób wyświetlania tekstu zastępczego na płótnie Figmy. Pełny tekst zastępczy pozostaje w eksportowanym HTML, aby platforma e-mailowa mogła go podstawić. Zostaw wystarczająco dużo miejsca na najdłuższą etykietę, jaką zamierzasz wysłać.

## Dodawanie dynamicznych zmiennych kolorów i rodzin fontów {#adding-dynamic-color-and-font-family-variables}

[Video](/assets/videos/emailify/content/dynamic-color-name-variables.mp4)

### Dynamiczne zmienne kolorów {#dynamic-color-variables}

Jeśli chcesz, aby kolor tła, tekstu lub obrysu w projekcie e-maila był eksportowany jako dynamiczny fragment kodu (na przykład **{{ primary_color }}**) zamiast zwykłej wartości szesnastkowej koloru z Figmy (na przykład `#000000`), utwórz [styl koloru w Figmie](https://www.youtube.com/watch?v=d01Ql9ZtVnk) i upewnij się, że pole **Name** stylu koloru zawiera podwójne nawiasy klamrowe (na przykład **{{ my_color_var_name }}**). Wartość **Name** ze stylu koloru zostanie automatycznie użyta jako wartość CSS `color`, `background-color` lub `border-color` podczas generowania HTML we wtyczce Emailify.

### Dynamiczne zmienne rodzin fontów {#dynamic-font-family-variables}

Podobnie, jeśli chcesz, aby dowolna wartość CSS `font-family` była eksportowana jako dynamiczny fragment kodu (na przykład **{{ customer.font_family }}**) zamiast zwykłej wartości fontu z Figmy (na przykład `Arial, sans-serif`), utwórz [styl tekstu w Figmie](https://www.youtube.com/watch?v=M0OuDhxaroU) i upewnij się, że pole **Name** stylu tekstu zawiera podwójne nawiasy klamrowe (na przykład **{{ my_font_var_name }}**). Wartość **Name** ze stylu zostanie automatycznie użyta jako wartość CSS `font-family` podczas generowania HTML we wtyczce Emailify.

## Powtarzanie wiersza Data Table Row w pętli z danymi dynamicznymi {#looping-a-data-table-row-with-dynamic-data}

[Video](/assets/videos/emailify/content/looping-data-table-row.mp4)

Aby przejść w pętli przez dane z platformy e-mailowej, zaznacz warstwę **Data Table Row** i otwórz **Settings**. Dodaj składnię pętli w polach **Opening Code Wrapper** (na przykład `{% for product in collection.products %}`) i **Closing Code Wrapper** (na przykład `{% endfor %}`). Emailify wstawi te znaczniki wokół elementu `` tego wiersza w eksportowanym HTML.

Po dodaniu znaczników otaczających do warstwy **Data Table Row** możesz w razie potrzeby [wypełnić warstwy wiersza treścią dynamiczną](#adding-platform-specific-personalization-content).

> **Tip:** Możesz [masowo zastosować ustawienia](/pl/emailify/design/settings#apply-settings-in-bulk): otwórz **Settings**, a potem zaznacz w Figmie kilka warstw Emailify tego samego typu. Każde zmienione ustawienie zostanie zastosowane do wszystkich zaznaczonych warstw.