# Vizuális szerkesztő

> A húzd és vidd e-mail-tervező használata: blokkok, elrendezések, globális stílus, stockképek és AI-képek, szerkesztőváltás.

A Vizuális szerkesztő húzd és vidd e-mail-tervező. HTML-tudás nélkül is személyre szabott, igényes leveleket készíthetsz vele.

## Hol érhető el

A Vizuális szerkesztő minden fontos e-mailes helyen használható:

- **E-mail-kampányok**: új kampány létrehozásakor.
- **E-mail-sablonok**: az újrahasznosítható sablonok tervezésekor.
- **E-mail-sorozatok**: sorozat leveleinél.
- **Automatizálások**: az e-mailt küldő művelet szerkesztésekor.

Új levélnél válaszd a **Vizuális szerkesztő** lehetőséget a **Válassz szerkesztőt** résznél, vagy meglévő levélnél a **Szerkesztő kiválasztása** panelen válts át rá. A kezdéshez kiinduló dizájnt is választhatsz (például **Blank**, **Standard** vagy **Sales**), vagy üresen indulhatsz.

![A Vizuális szerkesztő üres levéllel, jobbra a blokkok panelje](./kepek/emailek-vizualis-szerkeszto-kezdo.webp)

*A Vizuális szerkesztő üres levéllel, jobbra a blokkok panelje* (https://minta-bolt.hu/wp-admin/admin.php?page=fluentcrm-admin)

A jobb oldali panelen négy fül van: **Blocks**, **Layouts**, **Global Style** és **Stock Media**. A felső eszköztárban a fogaskerék a beállításokat, a szem az előnézetet, a `{ }` a SmartCode-okat nyitja meg, a **Sablonok importálása** gombbal sablont töltesz be, és van **Mentés** és **Következő** gomb is.

## Blokkok

A **Blocks** fülön húzással a levél törzsébe helyezhető elemek vannak.

### Oszlopok (Columns)

Az oszlop egységes térközt, igazítást és vizuális rendet ad. Húzd az oszlopblokkot a levélbe.

- **Megjelenítési feltétel**: csak bizonyos címkével vagy listával rendelkező kapcsolattartóknak mutatja az oszlopot.
- **Oszlop- és sortulajdonságok**: háttérszín, szegély és térköz szakaszonként.
- **Reszponzív megjelenés**: a **Hide on Desktop** és **Hide on Mobile** kapcsolókkal elrejtheted az elemet asztali vagy mobil nézetben.

### Címsor (Heading)

Hierarchiát ad a tartalomnak.

- **Megjelenítési feltétel**: címke és lista alapján megadhatod, ki lássa a címsort.
- **Smart Headings**: AI-val generálhatsz figyelemfelkeltő címsorokat.
- **Tipográfia**: betűtípus, betűcsalád, méret, vastagság, sormagasság és szín.
- **Hivatkozások**: ha a címsor linket tartalmaz, ennél a résznél állítható a link kinézete.
- **Általános**: a térköz (padding) beállítása.

### Kép (Image)

Képet közvetlenül a számítógépedről tölthetsz fel.

- **Magic Image**: leírás alapján az AI képgenerátor egyedi képet készít.
- **Stock Media**: a szerkesztőből közvetlenül elérhetsz ingyenes képeket. A kép szélességét kézzel is megadhatod.
- **Művelet (Action)**: a legördülő menüből válaszd ki a kép műveletét, majd töltsd ki a hozzá tartozó mezőt.
- **Általános**: a tároló térköze.

Ha bekapcsolod a **Hide on Desktop** kapcsolót, a kép csak mobilon látszik.

### Gomb (Button)

- **Megjelenítési feltétel**: szegmens alapján állíthatod, kinek jelenjen meg.
- **Smart Buttons**: a gomb szövegének beírása után az AI javaslatokat ad.
- **Művelet**: a gomb célja. Linkelhetsz weboldalt, indíthatsz e-mailt vagy telefonhívást.
- **Gomb beállításai**: szín és igazítás.
- **Térköz**: a gomb elhelyezése és szegélye.

### Elválasztó (Divider)

Látható elválasztó vonal a szakaszok között. A kinézetét a jobb oldali beállításokban szabhatod testre.

### HTML

A HTML-blokkal saját kódot illeszthetsz a levélbe, így egyedi elemeket is használhatsz.

### Menü (Menu)

Navigációs sáv a levélbe.

- **Menüpont**: írd be a nevét, válaszd ki a műveletet a legördülő listából, és töltsd ki a hozzá tartozó mezőt. További pontokat az új elem hozzáadásával veszel fel.
- **Stílusok**: betűméret, szín, hivatkozás színe és igazítás.
- **Általános**: a tároló térköze.
- **Elrendezés**: vízszintes vagy függőleges menü, és a hivatkozások színe.

### Táblázat (Table)

Információk rendezett sorokba és oszlopokba.

- **Megjelenítési feltétel**: szabály, hogy ki lássa a táblázatot (például címke szerint).
- **Aktív cella**: egy cellára kattintva szerkesztheted annak háttérszínét vagy szövegigazítását.
- **Oszlopok és sorok**: a plusz és a mínusz gombbal gyorsan adhatsz hozzá vagy távolíthatsz el.
- **Szegélyek**: ki- és bekapcsolható, stílusa (folytonos, szaggatott stb.) és vastagsága képpontban.

## Elrendezések (Layouts)

A **Layouts** fül előre épített tárolókat és tartalomblokkokat ad a gyors építéshez. Innen húzhatod a levélbe:

- **Blank Layouts**: különféle oszlopszerkezetek (1 oszlopos, 2 oszlopos stb.) saját rács kialakításához.
- **Pre-Made Contents**: kész elemek, például hősszekciók, funkciórácsok és kép-szöveg kombinációk.
- **Keresősáv**: a panel tetején kulcsszóval kereshetsz az elrendezések között.

> **Tipp:** a **Global Style** fül segít, hogy az összes hozzáadott elrendezésben egységes legyen a térköz, a szín és a betűtípus.

## Globális stílus (Global Style)

A **Global Style** fülön az e-mail egészének megjelenését állítod. A módosítások az egész dokumentumra érvényesek, így a levél egységes marad.

- **Tipográfia és vászon**: a **Content Width** a levél törzsének legnagyobb szélessége képpontban (például 600 px), a **Content Alignment** a tartalom igazítása (középre vagy oldalra), a betűcsalád és az alapvastagság.
- **E-mail beállításai**: az előnézeti szöveg (**Preheader Text**), amelyben dinamikus SmartCode-ot is használhatsz.
- **Hivatkozások és akadálymentesség**: az összes hivatkozás alapszíne, az aláhúzás ki- és bekapcsolása, valamint a levél HTML-címe a képernyőolvasók és a keresők számára.

> **Megjegyzés:** az egyes blokkok saját beállításai (például a táblázat vagy a szöveg színe) felülírják a globális stílust, ha külön megváltoztatod őket.

## Stockképek és AI-képek

A **Stock Media** fülön jó minőségű képeket találsz, és AI-val is generálhatsz.

- **Keresés**: a keresősávval több millió ingyenes, jogdíjmentes képet böngészhetsz, amelyeket az Unsplash, a Pexels és a Pixabay ad. A képek Creative Commons Zero licencűek, így gond nélkül használhatók.
- **AI-képgenerálás**: a „See the Magic” gombbal megnyílik az AI-alapú képkészítő. Írd le, milyen képet szeretnél, és a rendszer egyedi képet készít.
- **Húzd és vidd**: a megtalált vagy létrehozott képet húzd át az oldalsávból a levélbe.

> **Tipp:** a jó képek növelhetik az elköteleződést, de mindig add meg a képek alternatív szövegét is, a jobb akadálymentesség és kézbesíthetőség érdekében.

Az AI-s eszközök (**Smart Headings**, **Smart Buttons**, **Magic Image**) akkor jelennek meg a blokk eszköztárában, ha az AI-modellt beállítottad a **Kiegészítők → AI-konfiguráció** oldalon.

## Váltás szerkesztők között

A jobb oldali panelek közül a **Szerkesztő kiválasztása** panelen válthatsz:

- **Alapértelmezett (Gutenberg)**: ismerős, blokk-alapú szerkesztés.
- **Klasszikus szerkesztő**: hagyományos szövegszerkesztő.
- **Nyers HTML**: teljes kódszintű vezérlés.
- **Vizuális szerkesztő**: a jelenlegi húzd és vidd tervező.

Ha a Vizuális szerkesztőben szeretnél alap hivatkozásszínt, a **Global Style → Links & Accessibility → Links** helyen állíthatod. Az alapértelmezett (Gutenberg) szerkesztő ennek megfelelője a [Levél szerkesztése](https://hub.hellowp.io/hu/plugins/fluentcampaign-pro/emailek-szerkeszto/#hivatkozások-színe) fejezetben van leírva.