# Az elempanel és az alap elemek

> Az ELEMENTS panel felépítése, a Basic elemek, a gomb dinamikus hivatkozása és HTML vagy shortcode a szövegben.

Az elempanel az e-mail sablon építőkockáit adja. Hasonló, mint az oldalszerkesztők (Elementor, Divi) elemlistája: az elemeket a bal oldali panelről húzod az e-mailbe, majd rákattintva beállítod őket.

A panel négy csoportra oszlik: **Basic**, **General**, **WooCommerce** és **Blocks**. A csoport nevére kattintva nyílik le a listája, a tetején lévő **Search elements** mezővel név szerint is kereshetsz.

- **Basic**: az e-mail tartalmát adó elemek (szöveg, kép, gomb és a többi), erről szól ez a fejezet.
- **General**: elrendezési elemek, lásd [Általános elemek](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/szerkeszto-elemek-altalanos/).
- **WooCommerce**: a rendeléshez kötött elemek, lásd [WooCommerce elemek](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/szerkeszto-elemek-woocommerce/).
- **Blocks**: kész, termékeket mutató blokkok, lásd [Blokkok](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/szerkeszto-elemek-blokkok/).

Egy elem hozzáadása: fogd meg a panelen, és húzd az e-mail kívánt helyére. Egy beillesztett elemre kattintva a bal panelen megnyílnak a beállításai (felül **Edit <elem neve>** felirattal), a visszanyíllal térsz vissza az elemlistához. Az elem mozgatásához és további műveleteihez lásd [Elemek másolása és mentése mintaként](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/szerkeszto-elemek-muveletek/).

## Basic elemek

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

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

A képen a **Basic** csoport elemei látszanak.

| 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 a sablonhoz. |
| Szöveg | Szövegblokk. |
| Cím | Címsor szöveg. |
| Közösségi ikon | Közösségi ikonok a hivatkozásaikkal (Facebook, LinkedIn, YouTube). |
| Videó | Videóelem. |
| Képlista | Képek listája. |
| Képdoboz | Kétoszlopos rész: kép és szöveg. |
| Szöveglista | Kétoszlopos rész szövegekkel és egy műveletgombbal. |
| 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 és időben korlátozott ajánlatoknál (Pro). |

## A gomb beállításai

A **Gomb** elemet behúzva és rákattintva ezek a beállítások nyílnak meg.

![A Gomb elem beállításai](./kepek/szerkeszto-elemek-gomb-beall.webp)

*A Gomb elem beállításai* (https://minta-bolt.hu/wp-admin/)

A panel felső részén a doboz (container) beállításai vannak: **Padding** (belső margó) és **Háttérszín**. A gomb saját beállításai:

| Beállítás | Mit csinál |
| --- | --- |
| Típus | A gomb típusa (alapérték: **Default**). |
| Button position | A gomb helye a sorban: balra, középre vagy jobbra. |
| Szélesség | A gomb szélessége (alapérték: **Auto**). |
| Magasság | A gomb magassága csúszkával. |
| Padding | A gomb belső margója. |
| Háttérszín és Szöveg színe | A gomb és a felirata színe. |
| Border és Szegély lekerekítése | Keret és lekerekített sarkok. |
| Gomb szövege | A gombon látható felirat. |
| URL | A cím, ahová a gomb vezet. |
| Betűméret | A felirat mérete. |

### YayMail shortcode a gomb hivatkozásában

A gomb **URL** mezőjébe nemcsak fix címet, hanem YayMail shortcode-ot is írhatsz. Így a gomb hivatkozása dinamikus lesz, például a webhely címét adja.

![A gomb URL mezőjébe írt shortcode](./kepek/szerkeszto-elemek-gomb-url.webp)

*A gomb URL mezőjébe írt shortcode* (https://minta-bolt.hu/wp-admin/)

A képen az **URL** mező a `[yaymail_site_url]` shortcode-ot tartalmazza. Fontos: a gombba csak olyan shortcode illeszthető, amelynek az eredménye URL (a neve általában tartalmazza az „url” szót). A shortcode-ok listájáról lásd a [Shortcode-ok](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/shortcodeok/) fejezetet.

## HTML és shortcode beírása a szövegbe

A **Szöveg** elembe HTML-kódot és shortcode-ot is beírhatsz. A szövegszerkesztő a bal panelen a **Tartalom** mezőben van.

1. Húzz be egy **Szöveg** elemet, és kattints rá.
2. A bal panelen a szerkesztő menüsorában kattints a **Megtekintés** menüre.
3. Válaszd a **Forráskód** pontot.
4. Írd vagy illeszd be a HTML-kódot vagy a shortcode-ot.

![A Megtekintés menü a Forráskód ponttal](./kepek/szerkeszto-elemek-forraskod.webp)

*A Megtekintés menü a Forráskód ponttal* (https://minta-bolt.hu/wp-admin/)

A menüben a **Vizuális segítség**, a **Blokkok megjelenítése** és a **Teljes képernyő** pont is megtalálható. Ha csak egy nyers HTML-darabot akarsz tenni a sablonba, használhatod a **HTML** elemet is.