# Levél szerkesztése: blokkok és beállítások

> Az alapértelmezett e-mail-szerkesztő használata: alapbeállítások, stílus, SmartCode-ok, blokkok, szerkesztőváltás, előnézet és tesztlevél.

Az e-mail-szerkesztő blokk-alapú, hasonlóan a WordPress blokkszerkesztőjéhez, így kód nélkül készíthetsz szép leveleket. Az alapértelmezett szerkesztőben van eszközelőnézet, a WordPress médiatára, újrahasználható [blokkminta](https://hub.hellowp.io/hu/plugins/fluentcampaign-pro/emailek-sablonok-es-mintak/) és AI-s szövegírás.

## 1. Az e-mail alapadatai

A tervezés előtt add meg az alapokat:

- **Sablon címe**: a levél neve a későbbi rendezéshez.
- **E-mail tárgya**: világos, figyelemfelkeltő tárgysor. A `{ }` ikonnal SmartCode-ot (például a keresztnevet) szúrhatsz be.
- **Előnézeti szöveg**: rövid szöveg, amely a tárgy mellett jelenik meg a postaládában, és ösztönöz a megnyitásra.

## 2. Stílus és tipográfia

A jobb oldali oldalsáv ikonjával nyisd meg az oldalsávot. Az **Email-Body** fülön az e-mail egészének megjelenését állítod:

![Az oldalsáv Email-Body füle a globális színekkel](./kepek/emailek-x-szerkeszto.webp)

*Az oldalsáv Email-Body füle a globális színekkel* (https://minta-bolt.hu/wp-admin/admin.php?page=fluentcrm-admin)

- **Globális színek**: **A webhely törzsének háttere** (a levél tartalmán kívüli terület), **Tartalom háttere** (a fő doboz), **Címsorok**, **Szöveg** és **Hivatkozások** színe.
- **Tipográfia**: betűcsalád (például System UI), betűméret (S-től XXL-ig) és sormagasság.
- **Max width**: a levél szélessége asztali képernyőn (általában 600 és 700 képpont között).
- **Content border radius** és tartalom-térköz: a tartalomdoboz lekerekítése és belső margója.

### Hivatkozások színe

Az összes hivatkozás színét egy helyen állíthatod, nem kell blokkonként beállítani.

1. Nyisd meg a levelet az alapértelmezett szerkesztőben. (Ha Vizuális szerkesztőben vagy, váltsd át a szerkesztőt, lásd lentebb.)
2. Kattints az oldalsáv ikonra az eszköztárban.
3. Az **Email-Body** fülön, a **Style** szakaszban, a **Globális színek** alatt kattints a **Hivatkozások** sorra.
4. Válassz színt, és mentsd a levelet. A küldéskor minden hivatkozásra ez érvényes.

### Sablontípus

A **Template Type** választó kész elrendezéseket kínál, hogy a tartalom különböző eszközökön és olvasási szokásoknál is jól igazodjon:

| Típus | Megjelenés |
|---|---|
| **Simple Boxed** (alapértelmezett) | A klasszikus levélkinézet: a tartalom egy dobozban van, a háttértől elkülönítve. A legtöbb hírlevélhez és ajánlathoz jó |
| **Plain Centered** | A szöveg és a képek doboz nélkül, középre igazítva. Tiszta, modern, személyes levélhez hasonló |
| **Plain Left** | Mindent balra igazít, mint egy sima Gmail vagy Outlook üzenet. Értékesítési megkereséseknél gyakori |

## 3. SmartCode-ok használata

A SmartCode-ok az adatbázisból valós időben húznak be adatot a levélbe. Háromféleképpen szúrhatod be őket:

- **Oldalsáv**: az **Email-Body** oldalsávon kattints a SmartCode ikonra (`< >` jel). Itt rákereshetsz egy kódra, és a másolás gombbal bárhová beillesztheted.
- **@ jel**: bármely szövegblokkban írj be egy `@` jelet. Legördülő lista nyílik a gyakori adatokkal: **Teljes név**, **Megszólítás**, **Keresztnév**, **Vezetéknév**, **Névjegy e-mail-címe**, **Kapcsolat ID**, **Felhasználói azonosító (ID)**, **Cím 1. sora**, **Cím 2. sora**, **Város** és így tovább.
- **Tárgy és előnézeti szöveg**: a mezők melletti `{ }` ikonnal.

![Az @ jel beírása után megnyíló SmartCode-lista a szövegblokkban](./kepek/emailek-szerkeszto-at-menu.webp)

*Az @ jel beírása után megnyíló SmartCode-lista a szövegblokkban* (https://minta-bolt.hu/wp-admin/admin.php?page=fluentcrm-admin)

A kategóriákról és az összes elérhető kódról a [SmartCode-ok az e-mail-szerkesztőben](https://hub.hellowp.io/hu/plugins/fluentcampaign-pro/emailek-smartkodok/) fejezetben olvashatsz.

> **Tipp:** ha egy kapcsolattartónak nincs keresztneve, használj tartalék értéket, hogy a levél természetesen hangozzék: `Szia {{contact.first_name | default: "barátom"}},`. Ha van név, a levél „Szia Anna,”, ha nincs, „Szia barátom,” lesz.

## 4. Tartalom blokkokkal

A levél építéséhez kattints a bal felső **+** ikonra, vagy írj be egy `/` jelet a szerkesztőben. A választható blokkok listája megjelenik:

![A / jel beírása után megnyíló blokklista](./kepek/emailek-szerkeszto-blokk-valaszto.webp)

*A / jel beírása után megnyíló blokklista* (https://minta-bolt.hu/wp-admin/admin.php?page=fluentcrm-admin)

A blokkok csoportjai:

### Szövegblokkok

- **Paragraph** (bekezdés): a szokásos törzsszöveg.
- **Heading** (címsor): a levél címei, hierarchiával.
- **List** (lista): felsorolás vagy számozott lista.
- **Table** (táblázat): adatok sorokban és oszlopokban.
- **Verse** és **Classic**: különleges szövegformázásokhoz.

### Médiablokkok

Az **Image** (kép) blokk az elsődleges médiaeszköz. A képet háromféleképp adhatod meg:

- **Feltöltés**: közvetlenül a számítógépedről.
- **Médiatár**: a WordPress médiatárából.
- **Beszúrás URL-ből**: távoli webcímről.

### Dizájnblokkok

- **Buttons** (gombok): felhívás cselekvésre (CTA).
- **Columns** (oszlopok): egymás mellé tett tartalomelemek összetett elrendezéshez.
- **Group** és **Row**: több blokk egy tárolóba vagy egy teljes szélességű sorba rendezéséhez.
- **Spacer** és **Separator**: térköz vagy látható elválasztó vonal a szakaszok között.

### Feltételes szakasz

A **Conditional Section** blokk csak a kiválasztott feliratkozóknak mutat tartalmat. Beállítása a [Sorozatok és ismétlődő kampányok](https://hub.hellowp.io/hu/plugins/fluentcampaign-pro/kampanyok/#feltételes-szakasz-az-e-mailben) fejezetben van leírva.

![A Conditional Section blokk beállításai az oldalsávon](./kepek/emailek-feltetel-blokk.webp)

*A Conditional Section blokk beállításai az oldalsávon* (https://minta-bolt.hu/wp-admin/admin.php?page=fluentcrm-admin)

### Beépülő és widget blokkok

A telepített bővítményektől függően különleges blokkokat is látsz:

- **Latest Posts**: automatikusan mutatja a legfrissebb bejegyzéseidet. Beállíthatod a bejegyzések számát és az elrendezést. Ismétlődő kampányokhoz ez az ideális blokk.
- **WooCommerce termék**: rákeresel egy termékre a boltodban, és beszúrod a levélbe.
- **Custom HTML**: egyedi kód olyan elemekhez, amit a szokásos blokkok nem tudnak.
- **RSS**: külső RSS-csatorna tartalmát jeleníti meg, a szerző, a dátum és a kivonat megjelenítési lehetőségével.

## 5. További szerkesztőbeállítások

A jobb felső hárompontos (⋮) menüben további lehetőségeket találsz:

- **Szerkesztő kiválasztása**: maradhatsz az alapértelmezett (Gutenberg) szerkesztőben, vagy átválthatsz a **Vizuális szerkesztőre**, a **Klasszikus szerkesztőre** vagy a **Nyers HTML**-re.
- Blokkminta beszúrása: korábban mentett blokkmintát illesztesz be, hogy ne kelljen mindig újra felépítened a fejlécet, a hősszakaszt vagy a láblécet.
- **Import / Use templates**: korábbi sablont töltesz be a jelenlegi vázlatba.
- **Save as template**: az elkészült elrendezést elmented, hogy későbbi levelekhez kiindulópont legyen.
- **Eszközelőnézet**: az eszköztárban válthatsz asztali és mobil nézet között, hogy mindkettőn ellenőrizd az elrendezést. Egyes blokkbeállításokat a Gutenberg saját korlátai szabnak meg: ha pontosabb vezérlés kell, használd a [Vizuális szerkesztőt](https://hub.hellowp.io/hu/plugins/fluentcampaign-pro/emailek-vizualis-szerkeszto/).

### Klasszikus szerkesztő

Ha a régi WordPress klasszikus szerkesztőt ismered, ez a lehetőség neked való. A tartalom felett több kontrollt ad, mint a Gutenberg.

### Nyers HTML

A nyers HTML szerkesztővel teljesen egyedi levélsablont készíthetsz, vagy külső forrásból hozott HTML-sablont importálhatsz. Fontos: ennél a szerkesztőnél a **globális lábléc** (a leiratkozás és a feliratkozás-kezelés linkjeivel) nem kerül automatikusan a levélbe. Ezeket magadnak kell beszúrnod. A **Beállítások → E-mail-beállítások** oldal láblécszöveg-szakaszában (lásd: [Beállítások](https://hub.hellowp.io/hu/plugins/fluentcampaign-pro/beallitasok/#láblécszöveg)) megtalálod a leiratkozási és a feliratkozás-kezelési linkeket, és onnan beillesztheted őket.

## 6. Előnézet és tesztlevél

A **szem** gombbal megnézheted, hogyan néz majd ki a levél a címzett postaládájában. Sokféle webes, asztali és mobil levelezőprogram van, ezért a levél kissé eltérhet egyes eszközökön. Érdemes mobilra külön CSS-t is írni, hogy a levél ott is jól mutasson.

A szerkesztéssel végzett, kész levélről küldj tesztet a saját címedre, hogy lásd, hogyan jelenik meg egy levelezőprogramban. Ne feledd: a kapcsolattartó adatait lekérő SmartCode-ok a tesztben nem töltődnek ki, mert a tesztlevél nincs egy konkrét kapcsolattartóhoz kötve. A tesztelés lépéseit a [Kampány létrehozása és küldése](https://hub.hellowp.io/hu/plugins/fluentcampaign-pro/emailek-kampany-letrehozasa/#teszt-e-mail-küldése) fejezet írja le.

A jó kézbesítéshez használj SMTP-bővítményt (például FluentSMTP). Ügyelj rá, hogy a tartalmat a spamszűrők ne minősítsék kéretlen levélnek, mert a levél elutasításra kerülhet vagy a spammappába kerülhet.