Kisebb módosítások a Site builder kódban lehetségesek, de a forrás kódhoz nem lehet hozzáférni. A szerkesztési lehetőségeket alább ismertetjük.
Saját kódot is hozzáadhat az oldal törzséhez vagy fejlécéhez. Ezt a beállítást a következőképpen érheti el: Kezdőlap -> Oldalszkriptek:
A szkriptek használhatóak például egy reklám "banner" beillesztésére.
Szabványos szkriptek és stílusok beszúrása a "head" és a "body" részbe
1. Facebook Pixel
Rövid definíció: Ez egy webhely kódrészlete, amely lehetővé teszi a hirdetési kampányok mérését, optimalizálását és közönségépítést.
Hozzáadás: A létrehozáshoz és a beágyazáshoz közvetlenül a Facebook oldalán található segítség. A felhasználónak fiókkal kell rendelkeznie.
URL: https://www.facebook.com/business/help/952192354843755
Alternatív megoldás: Keresőmotor (Google, Bing, List) - Facebook Pixel hozzáadása a webhelyhez.
2. Google Tag manage / Google Analytics
Rövid definíció: Lehetővé teszi a webhelytulajdonosok számára, hogy statisztikai adatokat szerezzenek webhelyük felhasználóiról.
Hozzáadás: A létrehozáshoz és a beágyazáshoz közvetlenül a Google webhelyén található segítség. A felhasználónak fiókkal kell rendelkeznie.
URL: https://support.google.com/analytics/answer/1009694?hl=hu
Alternatív megoldás: Keresőmotor (Google, Bing, Lista) - Google Analytics hozzáadása a webhelyhez.
3. Egyedi szkript
<!--Egyedi szkript--> <script src="path"></script>
<!--Egyedi szkript-->
4. Saját stílus
<!--Egyedi stílus--> <link rel="stylesheet" href="path" type="text/css" />
<!--Egyedi stílus-->
5. a 6. BOOTSTRAP 4 a 5
Rövid definíció: CSS stílusú eszközök készlete webhelyek és webes alkalmazások létrehozásához.
Kiegészítés: A fejlesztői oldalak példákat mutatnak be az egyes szabályokra és magára a webre történő telepítésre.
Dokumentáció: https://getbootstrap.com/docs/4.0/getting-started/introduction/
Dokumentáció: https://getbootstrap.com/docs/5.0/getting-started/introduction/ <!--BOOTSTRAP 4--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384- Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNH0E263XmFCJ1SAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https:// code.jquery.com/jquery- 3.2.1.1.3.DKJ. IK3UENzmM7KCkRr/rE9 /Qpg6aAZGJwFDMVNA/ GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384- ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibkFP4Qymous" crossfax09v4jX "></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384- JZR6Spejh4U02d8j0t6vLEHfe/JQGiRRSQQxVFard+7jCjCQQxSFFWY" cross origin="anonymous"></script>
<!--BOOTSTRAP 4--><!--BOOTSTRAP 5--> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- EVSTQN3/azprG1Anm3QDgpJLm9Nao0Yz1ztcQTwFspd3yD65VohhpuuComLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap="5.0.2-jsssss"4itystrap@5.0.2/dist/ MrcW6ZMFY1zcLA8N1+NtUVF0sA7MsXsP1UyJoMp4YLEUNSfAP+JcXn/tWtIaxVXM" cross origin="anonymous"></script>
<!--BOOTSTRAP 5-->
7. JQUERY 3.6.0
Rövid definíció: A jQuery egy JavaScript-könyvtár, amely lehetővé teszi a webfejlesztők számára, hogy további funkciókat adjanak weboldalaikhoz.
Kiegészítés: A fejlesztői oldalak példákat mutatnak be az egyes szabályokra és magára a webre történő telepítésre.
Dokumentáció: https://api.jquery.com/
<!--JQUERY 3.6.0 frissítés--> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256- /xUj+30JU5yEx1q6GSYGHktPXikynS7ogEvDej/m4=" crossorgin="anonymous"></script>
<!--Aktuális JQUERY 3.6.0-->
8. Példa a CSS használatára
Magyarázat: Ez közvetlenül beszúrt egyéni CSS a <style>...</style> címkék közé, ahol a felhasználó különböző módokon módosíthatja a webhely egyes elemeit.
Magyarázat kezdőknek: https://www.w3schools.com/css/
<style> h1 { font-size: 29px; } } </style>
9. Példa a JS / JavaScript használatára
Magyarázat: Ez magában foglalja a saját szkript közvetlen beszúrását a <script>...</script> címkék közé, ahol a felhasználó néhány alapvető és összetettebb funkciót adhat hozzá a webhelyhez.
Magyarázat kezdőknek: https://www.w3schools.com/js/
<!--Példa egyszerű kimenet használatára a konzolon a jquery 3.6.0 használatával--> <script> $(document).ready(function() { console.log("jquery 3.6.0" ); }); </script>
<!--Példa egyszerű kimenet használatára a konzolon a jquery 3.6.0 használatával-->
Az 1-9 pontokat elsősorban a HEAD és BODY szerkezetbe lehet beilleszteni.
10. Példa saját HTML-kód beszúrására
<div class="container">
<div class="row">
<div class="col-md-5">
<p>41,6%-os oszlopszélesség 768 képpontnál nagyobb felbontás esetén</p>
</div>
<div class="col-md-2">
<p>16,6% oszlopszélesség 768 képpontnál nagyobb felbontás esetén.</p>
</div>
<div class= "col-md-5">
<p>41,6%-os oszlopszélesség 768 képpontnál nagyobb felbontás esetén érvényes</p>
</div>
</div>
</div>
Itt meg tudjuk mutatni az oszlopok létrehozásához szükséges kód beszúrását és az ezt követő megjelenítését. Alább látható a kód beillesztése a "Beágyazás widgetbe".
A "Beágyazás widget" a Tartalom hozzáadása -> Widget hozzáadása -> Beágyazás menüpont alatt érhető el.
A "Beágyazást" (a továbbiakban Embed widget) húzzuk az oldal tetszőleges helyére, ahol meg akarjuk jeleníteni az eredményt.
Ebbe a tartalomba szkriptek és stílusok illeszthetők be, mint az előző pontokban. Ez többé-kevésbé minden, és például a Bootstrap 4.5 vagy a jQuery 3.6.0 szabályai alapértelmezés szerint elérhetők a fejlesztői oldalakon, ahol a használat és a beállítások láthatók:
JQUERY https://api.jquery.com/
BOOTSTRAP 5 https://getbootstrap.com/docs/5.0/getting-started/introduction/
BOOTSTRAP 4 https://getbootstrap.com/docs/4.0/getting-started/introduction/