Honlapépítőnket elsősorban olyan felhasználóknak szánjuk, akik nem rendelkeznek előzetes honlapépítési tudással. Őket tekintjük az elsődleges célközönségünknek.
Ám alkalmanként felmerül, hogy lehet-e némi CSS és HTML tudás ismeretében tágítani a lehetőségeket. Ebben a cikkben összeszedjük, hogy akikben felmerül ez a kérdés, merre tudnak elindulni, milyen eszközök és lehetőségek vannak számukra.
Mielőtt belevágunk ebbe a részbe, nagyon fontos kiemelni, hogy a rosszul megírt forráskód akár el is ronthatja az oldal megjelenését! Így mindenkit arra kérünk, akik használni szeretnék ezeket az eszközöket, hogy különös odafigyeléssel tegyék majd ezt!
Egyedi CSS modul
Az Extrák között megtalálható egy Egyedi CSS modul nevű kiegészítő. Ahogy a neve is mutatja, itt a már meglévő CSS szabályok mellé írhatunk újabbakat. Itt tudunk egyedi színt, formázást, vagy akár betűtípust is megadni.
Például, ha a fejléc színét át szeretnénk színezni, akkor ezt az alábbi szabállyal tudjuk megtenni:
header {background-color: darkolivegreen;}Extra <head /> modul
Szintén az Extrák között található az Extra <head /> modul. Ide már nem csak CSS, hanem tetszőleges HTML elemeket is be tudunk szúrni. Jellemzően különféle harmadik fél által készített mérőkódok beszúrására, különféle JavaScript kód beillesztésére lehet ezt a funkciót használni. (pl. Facebook Pixel Code, Google Tag Manager stb.)
Formázást itt nem érdemes használni. Az Egyedi CSS modulban megadott formázások megjelennek a szerkesztő felületen is, így szerkesztés közben is már a végleges formázást láthatjuk. Míg a Head tag-ben írtak nem érvényesülnek a szerkesztő felületen.
Az a kód, ami ide kerül az majd a legenerált honlap minden oldalán szerepelni fog a HTML <head /> végében.
Sávokhoz plusz class illetve id megadása
Az Egyedi CSS modul aktiválását követően a sávok jobb felső eszköztárán megjelenik egy új ikon (id + extra CSS class). Akkor lehet erre szükséged, ha csak egy-egy konkrét sávhoz szeretnél más formázást.
Egy egyszerű példa: az extra CSS class-hoz beírjuk, hogy brown, majd az Egyedi CSS modulhoz, hogy:
section.brown {background-color: #aa6633;}Így a megadott sáv háttérszínét módosítottuk is.
HTML sáv
Az Extra <head />-ben írt HTML kód minden oldalnál a HTML head tag végére kerül be. Ezen kívül lehetőség van olyan HTML elemek beszúrására is, amelynek a helyét konkrétan megadjuk. Ekkor a szerkesztő felületen nem a megjelent formát látjuk, hanem a sáv HTML forrását. Előnézetet behozva lesz majd látható a végleges formájában. Elsősorban ezt a sávot is harmadik fél általi kódok beillesztésére készítettük, mint például különféle feliratkozó űrlapok, speciális kalkulátorok. A lehetőségek száma itt is végtelen.
Ezeket a funkciókat kezdő webfejlesztőknek is ajánljuk, hiszen általuk számtalan módosításra nyílik lehetőségük. Viszont ismét hadd hívjuk fel a figyelmet arra, hogy a rosszul megírt HTML forráskód el is ronthatja az oldal megjelenését!