# 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.