HTML szerkesztése: a HTML widget

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.

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

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://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.