# Projektowanie w edytorze Drag-and-Drop

Kreator e-mail Drag-and-Drop w MessageFlow to intuicyjne narzędzie typu **no-code**. Pozwala on na błyskawiczne projektowanie atrakcyjnych wizualnie i wysoko konwertujących wiadomości. Dzięki funkcji **przeciągnij i upuść** przygotujesz swój wymarzony szablon bez konieczności pisania ani jednej linijki kodu HTML.

Narzędzie daje Ci pełną swobodę twórczą i zapewnia innowacyjny **tryb projektowania mobilnego**. Dzięki niemu masz 100% kontroli nad tym, jak Twoja kreacja wygląda na ekranach smartfonów.

<figure><img src="https://329730659-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2s632FgUSm9RH1pVB9a%2Fuploads%2FEYgNWwdPNfH7zsaH91Ui%2Fobraz.png?alt=media&#x26;token=15be5f56-0178-46c9-b9a5-a8341481a8ad" alt=""><figcaption></figcaption></figure>

### Jak poruszać się po edytorze?

Interfejs edytora został zaprojektowany wokół trzech kluczowych zakładek, które znajdziesz w panelu po prawej stronie ekranu:

* **Wiersze:** Stanowią szkielet Twojego projektu. To poziome kontenery, w których organizujesz przestrzeń. Możesz wybrać wiersz jednokolumnowy dla szerokiego zdjęcia głównego (Hero Image) lub układy dwu- i trójkolumnowe do prezentacji produktów.

<figure><img src="https://329730659-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2s632FgUSm9RH1pVB9a%2Fuploads%2FSKsIbLTj7czJhhFfteu6%2Fobraz.png?alt=media&#x26;token=24e0a1bc-b515-4e9a-b85a-927a1c0b335d" alt=""><figcaption></figcaption></figure>

* **Zawartość:** To właściwe elementy Twojej wiadomości. Znajdziesz tu bloki takie jak Tekst, Obraz, Przycisk CTA, Separator czy ikony mediów społecznościowych. To te bloki przeciągasz i umieszczasz wewnątrz wcześniej przygotowanych Wierszy.

<figure><img src="https://329730659-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2s632FgUSm9RH1pVB9a%2Fuploads%2FTdEbRiHQzmGVTJcys8I2%2Fobraz.png?alt=media&#x26;token=30766dae-6cd7-4001-8f26-d2b1d58bb3a4" alt=""><figcaption></figcaption></figure>

* **Ustawienia:** Centrum zarządzania globalnym wyglądem kreacji. Ustalasz tutaj domyślną szerokość obszaru treści, kolor tła całej wiadomości oraz domyślną typografię dla linków i tekstów.

<figure><img src="https://329730659-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2s632FgUSm9RH1pVB9a%2Fuploads%2FeBXswJ0ECfAKx7DXXIij%2Fobraz.png?alt=media&#x26;token=ba0ae20a-66ac-45b0-8f02-4fd19b0be680" alt=""><figcaption></figcaption></figure>

### Tworzenie krok po kroku

Budowa wiadomości w edytorze to prosty i logiczny proces. Pamiętaj, aby zawsze zaczynać od struktury.

1. **Zbuduj szkielet**: Przejdź do zakładki Wiersze, wybierz odpowiedni układ kolumn i przeciągnij go na pusty obszar roboczy.
2. **Dodaj treść**: Przełącz się na zakładkę Zawartość. Chwyć wybrany blok (na przykład Obraz) i upuść go wewnątrz przygotowanego wiersza. Jeśli posiadasz własny fragment kodu, użyj bloku HTML.
3. **Modyfikuj i personalizuj**: Kliknij dowolny element w obszarze roboczym, aby otworzyć jego szczegółowe właściwości.
   * Dla Przycisków zmienisz kolor tła, zaokrąglenie rogów i dodasz podlinkowanie.
   * Dla Tekstów uruchomi się zaawansowany edytor przypominający edytory tekstowe, w którym pogrubisz słowa, wstawisz linki i dodasz znaczniki personalizacji.

{% hint style="info" %}
**Personalizacja treści (Tagi systemowe i Pola dodatkowe):**

Możesz dynamicznie podmieniać zawartość swojej wiadomości, opierając się na danych z Twojej bazy kontaktów.

* **Podstawowa personalizacja**: W edytorze tekstu rozwiń menu i wybierz znacznik (na przykład Imię). System wstawi tag `##FirstName##`, który przy wysyłce zamieni się na prawdziwe imię odbiorcy (pod warunkiem że znajduje się ono w zaimportowanej bazie kontaktów).
* **Zaawansowane Pola dodatkowe**: MessageFlow pozwala na personalizację o dowolne zmienne (na przykład miasto, indywidualny kod rabatowy). Najpierw utwórz odpowiednie pole w zakładce Kontakty -> Pola dodatkowe, a następnie wgraj bazę odbiorców, mapując odpowiednią kolumnę pliku do nowo utworzonego pola. Zmienną tę możesz wykorzystać w każdej kampanii masowej.
  {% endhint %}

{% hint style="warning" %}
**Ważne**: Nie zapomnij o dodaniu bloku Tekst i umieszczeniu w nim **Linku Rezygnacji**. Jest to kluczowe dla zachowania zgodności z RODO i utrzymania higieny Twojej bazy odbiorców.
{% endhint %}

<figure><img src="https://329730659-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2s632FgUSm9RH1pVB9a%2Fuploads%2F5bqiD4EWJPVy2SLGiCRu%2Fobraz.png?alt=media&#x26;token=78cd8f5e-8c2c-42f1-b92c-2c89f932df11" alt=""><figcaption></figcaption></figure>

### Tryb projektowania mobilnego

Zamiast zwykłego podglądu, edytor oferuje Ci w pełni interaktywny tryb edycji mobilnej. Kliknij ikonę telefonu widoczną w lewym górnym rogu obszaru roboczego, aby przełączyć widok. W tym trybie każda zmiana, jaką wprowadzisz we właściwościach bloków, dotyczy wyłącznie ekranów urządzeń mobilnych. Co możesz zrobić?

* Zmniejszyć rozmiar czcionki nagłówków, aby nie łamały się na małym ekranie.
* Zmienić wyrównanie tekstu z lewej strony na środek.
* Zmniejszyć wewnętrzne marginesy (paddingi) wierszy.
* Ukryć wybrane elementy: Możesz zdecydować, że dany blok (na przykład duży, ozdobny obraz) nie będzie w ogóle wyświetlany na telefonach. Upraszcza to przekaz i przyspiesza ładowanie wiadomości na łączach komórkowych.

<figure><img src="https://329730659-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2s632FgUSm9RH1pVB9a%2Fuploads%2FdKteE33IZgcbha2isSXJ%2Fobraz.png?alt=media&#x26;token=fa1c8e51-d9c2-4242-810a-4af4cdd744f3" alt=""><figcaption></figcaption></figure>

### Zapis i podgląd pracy

Zanim ruszysz dalej, zawsze sprawdzaj ostateczny wygląd kampanii. Użyj przycisku Podgląd, aby zobaczyć kreację bez paneli bocznych edytora.

<figure><img src="https://329730659-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj2s632FgUSm9RH1pVB9a%2Fuploads%2Fu3YuGYpYZ8P1JLfgczwl%2Fobraz.png?alt=media&#x26;token=8cafea63-cf00-4c7a-99d1-79dd1ac578d0" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Zapisywanie i pobieranie gotowych szablonów**

Gotowy projekt nie musi być jednorazowy. Możesz go łatwo zapisać i wykorzystać ponownie:

* **Zapisz jako nowy szablon**: W górnym pasku edytora kliknij ten przycisk, aby zachować układ na przyszłość. Podaj nazwę, a projekt trafi do zakładki Twoje szablony widocznej przy tworzeniu nowej kampanii.
* **Pobieranie pliku HTML**: Jeśli chcesz wykorzystać swoją kreację poza panelem kampanii (na przykład do wdrożenia jej na serwerach wysyłkowych API), przejdź do kroku 1 kreatora (Kreacja e-mail) i otwórz zakładkę Twoje szablony. Najedź kursorem na wybrany projekt i kliknij **Pobierz**. Plik zostanie zapisany na Twoim dysku pod nazwą `index.html`.

**Ważne**: Jeśli z szablonu nie usuniesz systemowego linku wypisu, po pobraniu kodu HTML i użyciu go w kanale API, link ten będzie nieklikalny i nie zadziała poprawnie.
{% endhint %}

Gdy Twoja kreacja jest w 100% gotowa i satysfakcjonująca, po prostu kliknij **Dalej** w kreatorze kampanii.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.messageflow.com/pl/e-mail/kampanie-e-mail-panel/kampanie/tworzenie-kampanii-e-mail/projektowanie-w-edytorze-drag-and-drop.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.