# A szerkesztő

> A húzással működő e-mail szerkesztő: elemek, minták, beállítások, előzmények és az eszköztár.

A szerkesztőt az **Email Templates** listában egy sablon nevére kattintva nyitod meg.

![A szerkesztő felülete az Új rendelés sablonnal](./kepek/szerkeszto-teljes.webp)

*A szerkesztő felülete az Új rendelés sablonnal* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

A felület két részre oszlik:

- **Bal oldali panel**: az **ELEMENTS** és a **PATTERNS** fül, a fogaskerék ikon (beállítások) és az alján az előzmények gombja. A **BACK TO PREVIOUS** gombbal visszalépsz a sablonlistára.
- **Jobb oldal**: az eszköztár és az e-mail élő, szerkeszthető előnézete.

Sablon szerkesztéséhez előbb válaszd ki az e-mailt a bal felső legördülő listából (**Új rendelés**, **Teljesített rendelés** és így tovább). A mellette lévő legördülő listában a mintarendelést választod ki, amelynek adataival a sablon megjelenik (a demóban **Mintarendelés**).

Az elemeket húzással teheted a sablonba. Az elemre kattintva a bal panelen megnyílnak a beállításai (például a **Logó** esetén a belső margó, a háttérszín, a forráskép, a logó helyzete és a szélesség). Az elem fölött megjelenő kis eszköztárral mozgathatod vagy másolhatod.

## Elemek (ELEMENTS)

Az elemek négy csoportban vannak: **Basic**, **General**, **WooCommerce**, **Blocks**. A kereső mezővel név szerint is rákereshetsz.

### Basic

![A Basic elemcsoport](./kepek/elemek-alap.webp)

*A Basic elemcsoport* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

| Elem | Mit csinál |
| --- | --- |
| Logó | A logót adja a sablonhoz. |
| E-mail címsor | Az e-mail fő címsora. |
| Kép | Egy képet tesz a sablonba. |
| Gomb | Gombot ad hozzá. |
| Szöveg | Szövegblokk. |
| Cím | Címsor szöveg. |
| Közösségi ikon | Közösségi ikonok hivatkozásokkal (Facebook, LinkedIn, YouTube). |
| Videó | Videóelem. |
| Képlista | Képek listája. |
| Képdoboz | Kétoszlopos elrendezés: kép és szöveg. |
| Szöveglista | Kétoszlopos elrendezés szövegekkel és egy művelet gombbal. |
| HTML | Nyers HTML-kód beillesztése. |
| Lábléc | Láblécet ad a sablonhoz. |
| Rating Stars | Értékelő csillagok. |
| Countdown | Visszaszámláló, amellyel sürgősséget teremthetsz akcióknál, korlátozott ideig tartó ajánlatoknál (Pro). |

Néhány hasznos tudnivaló a Basic elemekhez:

- **Shortcode egy gombban:** a gomb hivatkozásába (URL mezőjébe) beírhatsz YayMail shortcode-ot, így a gomb egy dinamikus címre mutat (például a rendelés adatai alapján).
- **HTML és shortcode:** a **HTML** elembe nyers HTML és shortcode is írható.
- **Elem másolása:** bármelyik elemet lemásolhatod, és a másolatot egy másik sablonba is átviheted. Így például egy beállított logót nem kell minden e-mailben újra megtervezned.
- **Minta létrehozása:** a kijelölt elemekből saját mintát (pattern) menthetsz, amelyet később a **PATTERNS → Library** fülön újra felhasználhatsz.
- **Hook:** a Hook elem WooCommerce e-mail hookokat illeszt be a sablonba, így más bővítmények kimenete is megjelenhet benne.

### General

Az elrendezéshez tartozó elemek:

| Elem | Mit csinál |
| --- | --- |
| Térköz | Üres helyet ad a sablonba. |
| Elválasztó | Elválasztó vonal. |
| Container | Rugalmas keret, amely több elemet fog össze egy szakaszban (Pro). |
| Egy oszlop | Egyoszlopos szakasz, amelybe bármilyen más elem tehető. |
| Két oszlop | Kétoszlopos szakasz. |
| Három oszlop | Háromoszlopos szakasz. |
| Négy oszlop | Négyoszlopos szakasz. |

### WooCommerce

![A WooCommerce elemcsoport](./kepek/elemek-woocommerce.webp)

*A WooCommerce elemcsoport* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

A csoport tartalma a webhelyen lévő WooCommerce-bővítményektől függően bővülhet.

| Elem | Mit csinál |
| --- | --- |
| Order Progress | A rendelés állapotának menetét mutatja. |
| Szállítási cím | A vásárló szállítási címét teszi a sablonba. |
| Számlázási cím | A vásárló számlázási címét teszi a sablonba. |
| Számlázási és szállítási cím | A két címet egymás mellett mutatja. |
| Rendelés részletei | A megrendelt termékek táblázata: termék, mennyiség, ár és összegek. |
| Rendelési részletek letöltése | A letölthető termékek táblázata (a Teljesített rendelés sablonban). |
| Hook | WooCommerce hookok hozzáadása. |

A rendelés részletei táblázatban a termékek címe is módosítható.

### Blocks

A blokkok kész, többoszlopos szakaszok, amelyekkel dinamikus tartalmat küldhetsz a rendelés-visszaigazoló e-mailekben. Kész blokkok: **Featured Products**, **Cross/Up Sells Products**, **Products With Reviews**, **Simple Offer**, **Single Banner**.

Megadhatod, mely termékek jelenjenek meg bennük (például legutóbb frissített termékek, kapcsolódó termékek, egy kategória vagy címke termékei). Elemenként be- és kikapcsolhatod a következőket:

- felső tartalom: cím és alcím
- termékkép
- terméknév
- termékár
- eredeti ár
- gomb (CTA): vásárlás gomb saját dizájnnal és termékhivatkozással

A **Cross/Up Sells** blokk csak akkor jelenik meg, ha a megvásárolt terméknek van kereszt- vagy felárasító terméke. A **Products With Reviews** blokk csak akkor, ha a terméknek van értékelése.

## Minták (PATTERNS)

A **PATTERNS** fül kész elrendezési szakaszokat kínál, amelyeket a sablonba húzhatsz. Ezek időt takarítanak meg, és egységes megjelenést adnak a különböző e-mailekhez.

![A minták panel](./kepek/mintak.webp)

*A minták panel* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

A bal oldali lista a mintakategóriákat tartalmazza: **Header**, **Footer**, **Banner**, **Gallery**, **Shipping**, **Offer**, **Intro**. Egy kategóriára kattintva a minták előnézete jelenik meg, amelyet a sablonba húzhatsz.

A panel tetején két fül van:

- **Patterns**: a kész minták.
- **Library** (Pro): a saját, mentett mintáid és a **Settings → Synced patterns** alatt létrehozott szinkronizált minták. Bármelyiket behúzhatod az aktuális sablonba, így az e-mailek elrendezése egységes marad.

## Beállítások (fogaskerék)

A fogaskerék ikon két csoportot nyit meg: **Global** és **Email Settings**.

![A beállítások panel Global csoportja](./kepek/beallitas-panel-globalis.webp)

*A beállítások panel Global csoportja* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

### Global

A beállítások a webhely összes e-mailjére érvényesek.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Direction | Jobbról balra író nyelvekhez kapcsold át (RTL). | LTR |
| Globális fejléc és lábléc | A közös fejléc és lábléc be- vagy kikapcsolása az összes sablonban. | OFF |
| Container width (px) | Az e-mail szélessége képpontban, 480 és 900 között. | 605 |
| Display payment instruction and details | Már nem globális beállítás. A fizetési utasításokat az `[yaymail_payment_instructions]` shortcode-dal illesztheted be bármelyik szövegmezőbe. | Yes |
| Show product image | A termékképek megjelenítése a rendelés részleteiben. Beállítható a pozíciója, mérete, magassága és szélessége. | OFF |
| Show product SKU | A cikkszám megjelenítése. | ON |
| Show product short description | A termék rövid leírása a rendelés részleteiben. | OFF |
| Show product Hyperlinks | A termékek hivatkozásként jelennek meg. | OFF |
| Show product item cost | A termék egységára a rendelés részleteiben. | OFF |
| Show product regular price | A termék eredeti ára áthúzva. | OFF |
| Use custom CSS | Megjelenik egy mező, ahová saját CSS-t írhatsz (lásd a [Testreszabás CSS-sel](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/css-testreszabas/) fejezetet). | OFF |
| Change email subject and form name | Az e-mail tárgyának és feladó nevének módosítása (a panel alján). | |

### Email Settings

Az **Email Settings** csak az éppen szerkesztett e-mailre vonatkozik. Itt a színeket állítod be:

- **Background Colour**: a vászon (az e-mail mögötti terület) színe.
- **Email Content Background Colour**: az e-mail tartalmi részének háttérszíne.
- **Text Link Colour**: a hivatkozott szövegek színe.

## Előzmények (History)

A bal alsó órajel ikon az előzmények panelt nyitja meg (Pro).

![Az előzmények panel](./kepek/elozmenyek.webp)

*Az előzmények panel* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

- **ACTIONS**: időrendi lista a szerkesztés során végzett műveletekről (például elem hozzáadása, szöveg módosítása). Bármelyik műveletre kattintva a sablon azonnal visszaáll arra az állapotra.
- **REVISIONS**: a mentett változatok. Bármelyikre visszaállíthatod a sablont, vagy az összeset törölheted.
- A visszanyíl gomb visszavisz az elemek paneljére.

## Az eszköztár

A szerkesztő tetején az eszköztár a következőket tartalmazza, balról jobbra:

| Elem | Mit csinál |
| --- | --- |
| E-mail legördülő | Az e-mail sablon kiválasztása. |
| Mintarendelés legördülő | A tervezéshez használt mintarendelés kiválasztása. |
| Sablonválasztó ikon | Kész sablonok közül választhatsz az e-mailhez (**Classic**, **Modern**, **Modern Minimal**). Alkalmazás után tovább szerkeszthető. |
| Visszavonás és Újra | Az utolsó művelet visszavonása és újra végrehajtása (Pro). |
| Három pontos menü | **Shortcodes**, **Empty**, **Import**, **Reset** (lásd lent). |
| Szem ikon | Az e-mail teljes képernyős előnézete, asztali és mobil nézettel. |
| Tesztlevél ikon | Tesztlevél küldése bármelyik e-mail-címre (**Send test email**). |
| Kapcsoló | Bekapcsolva a YayMail sablon felülírja a WooCommerce alapértelmezett sablonját. |
| Save | A módosítások mentése. A mellette lévő nyíl egy menüt nyit (**Save as template**). |

![Az eszköztár három pontos menüje](./kepek/eszkoztar-menu.webp)

*Az eszköztár három pontos menüje* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

A három pontos menü pontjai:

- **Shortcodes**: az elérhető shortcode-ok listája (lásd a [Shortcode-ok](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/shortcodeok/) fejezetet).
- **Empty**: kitörli a sablon teljes tartalmát, üres munkaterületet kapsz. Óvatosan használd: ha üresen mented, a változtatások nem állíthatók vissza.
- **Import**: egy másik, már megtervezett sablon tartalmát másolja az aktuális e-mailbe, így nem kell nulláról kezdened.
- **Reset**: visszaállítja az alapértelmezett sablont.

### Sablonválasztó

![A sablonválasztó ablak](./kepek/sablon-valaszto.webp)

*A sablonválasztó ablak* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

A sablonválasztóban a kiválasztott e-mailhez kész dizájnokat találsz. Jelöld ki az egyiket, majd kattints a **Next** gombra.

### Mentés sablonként

A **Save** gomb melletti nyíl a **Save as template** funkciót nyitja: a jelenlegi elrendezést kész sablonként mentheted a sablonkönyvtárba. Megadod a nevét (**Név**), és azt, hogy mire alkalmazható (**Apply to**, például **Current email**).

![A Mentés sablonként ablak](./kepek/eszkoztar-ment-menu.webp)

*A Mentés sablonként ablak* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

### Import: egy másik sablon másolása

Az **Import** egy jól sikerült sablon tartalmát másolja át egy másik e-mailbe. Nyisd meg a cél e-mailt, válaszd az **Import** pontot, és jelöld ki a forrás sablont. A másolt tartalom az aktuális e-mail törzsébe kerül, ott pár apró módosítással a célhoz igazíthatod.

### Visszaállítás (Reset)

- **Egy sablon**: a három pontos menü **Reset** pontja az aktuális sablont állítja vissza.
- **Több vagy az összes sablon**: az **Email Templates** listában jelöld ki a sablonokat, és válaszd a **Reset Templates to Default** műveletet.

A visszaállítás után a testreszabásaid elvesznek. A Lite verzióban ez nem vonható vissza, a Pro verzióban visszavonható.

### Nyelvváltó

Ha többnyelvű bővítményt használsz, a szerkesztő jobb felső részén egy nyelvválasztó jelenik meg, amely mutatja, melyik nyelven szerkeszted az adott e-mailt.