# HTML szerkesztése: a HTML widget

> HTML, CSS és JavaScript kód beillesztése az oldalra a HTML widgettel.

Ha HTML-, CSS- vagy JavaScript-kódot kell az oldalra vagy a bejegyzésre tenned, használd a **HTML** widgetet. A kód származhat a CodePenből, a Dreamweaverből vagy más kódrészlet-forrásból.

## A HTML widget használata

1. A **Widgetek** panelen keress rá a **HTML** widgetre, és húzd az oldalra.
2. A panel **HTML-kód** mezőjébe írd vagy illeszd be a kódot.
3. A CSS-t `style` címkék közé tedd, és a kód elejére írd.
4. A JavaScriptet `script` címkék közé tedd, és a kód aljára írd.
5. Mentsd az oldalt, és nézd meg az eredményt egy új böngészőlapon az **Előnézet** gombbal.

```html
<style>
  .koszonto { color: #1a6b3c; }
</style>
<p class="koszonto">Üdv a webhelyemen!</p>
<script>
  console.log('Betöltött az oldal');
</script>
```

![A HTML widget beállításai a panelen](./kepek/szerkeszto-html-widget.webp)

*A HTML widget beállításai a panelen* (https://minta-bolt.hu/wp-admin/post.php?post=9&action=elementor)

A panelen a **HTML szerkesztése** fejléc alatt a **HTML-kód** mező látható; mellette a **Szerkesztés AI-val** hivatkozás az AI segítségét kínálja.

## Biztonság

A HTML widgetbe írt kód kártékony programot is tartalmazhat, ezért a widgetet alapból csak a rendszergazdák használhatják. Ezt a szerepkör-kezelőben módosíthatod, de légy óvatos, kinek adsz erre jogot.

## Hibák jelzése és átméretezés

Az Elementor megpróbál jelezni, ha hiba van a kódban. Nagyobb mennyiségű kódhoz a panel ablaka átméretezhető.

## Haladó fül

A widget **Haladó** fülének beállításai ugyanazok, mint a többi widgetnél. Lásd: [Haladó fül](https://hub.hellowp.io/hu/plugins/elementor/stilus-halado-ful/).

![A HTML widget kódmezője a panelen](./kepek/widgetek-html-tartalom.webp)

*A HTML widget kódmezője a panelen* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen a **HTML-kód** mezőben a példakód látható.

## HTML készítése AI-val

Az Elementor AI segítségével bárki létrehozhat HTML-kódot. Az Elementor Pro előfizetői egyedi CSS-t és egyedi kódot is készíthetnek vele.

Az AI-val készített kódra érvényes tudnivalók:

- Mentsd el és készíts biztonsági másolatot az oldalról, mielőtt egyedi CSS-t adsz hozzá, mert a kód váratlan módosításokat okozhat.
- Ha egyedi CSS-t egyetlen elemhez adsz, a kódnak tartalmaznia kell a `selector` kifejezést. Ha nem tartalmazza, a kód az egész oldalra vagy más elemekre is hatással lehet.
- Ha beszúrás nélkül újragenerálod a kódot, az előző kód felülíródik. Érdemes külön dokumentumban megőrizni az előzőt.
- Ha több kódrészletet szúrsz be, azok kioszthatják vagy zavarhatják egymást.
- A generált kód nem mindig lesz pontosan olyan, mint szeretnéd; előfordulhat, hogy módosítanod kell.
- Az egyedi CSS-kódhoz nem jár támogatás: az AI által készített kód ellenőrzése és hibakeresése a te feladatod.

Példa: Google-hirdetések beágyazása HTML-lel.

1. Húzd a **HTML** widgetet a vászonra.
2. A widget **Haladó** fülén kattints a **Kód AI-val** lehetőségre. Az első használat után ennek helyén az Elementor AI ikonja jelenik meg.
3. Válaszd ki a mintakérést („Írj beágyazási kódot Google-hirdetésekhez HTML widgetben”), vagy írd be a saját kérésedet a beviteli mezőbe.
4. Kattints a **Kód generálása** gombra. A widget beilleszti a generált HTML-kódot.