Editor omogućava lako kreiranje i ažuriranje sadržaja web stranica, koncipiran kao ozbiljni alat koji omodućava da sa lakoćom upravljate Vašim web sajtom a da pri tome ne morate posedovati bitna tehnička znanja.
Content editor ima intuitivan korisnički interfejs koji olakšava dodavanje elemenata na stranicu, izmjenu stilova i formatiranje sadržaja. Editor se sastoji od 4 glavna dela: levi panel, panel traka, radna površina i desni panel.
Na levoj strani prozora nalazi se panel koji se sastoji od 2 dela, deo na vrhu na kome se bira veličina ekrana na kojoj se prikazuje stranica, i stablo elemenata koje se nalazi odmah ispod toga.
U gornjem levom uglu prozora se nalaze četiri ikonice preko kojih birate na kojoj veličini ekrana će biti prikazana stranica. Uobičajen prikaz je Desktop računar, a pored njega imaju i opcije prikaza na Tablet uređaju, na mobilnom telefonu i na mobilnom telefonu u bočnom položaju (landscape). Uz pomoć ove opcije se brinete da vaša web stranica ima responzivni dizajn, i to je jedna vrlo bitna stavka prilikom izgradnje web sadržaja.
Stablo prikazuje strukturu elemenata na datom predmetu. Pored toga sto pokazuje gde se koji element nalazi, uz pomoć njega je moguća i manipulacija elementima. Svaki element u stablu ima svoje ime koje označava tip elementa (body, div, text, link...). Ako element ima elemente u sebi (children) onda ima i strelicu pre svog imena koja pokazuje na desno ako nije razlistan ili na dole kad je element razlistan. Takođe uz desnu ivicu stoji broj koji pokazuje koliko elemenata se nalazi u tom elementu, tj. koliko dece (children) ima. Skroz desno pored svakog elementa stoji strelica koja pokazuje na sve 4 strane, i pomoću nje menjate poziciju elementa na stablu jednostavnim prevlačenjem. Prilikom prevlačenja će se pojaviti zlatni pravougaonik koji pokazuje gde će element biti smešten ako ga tu ostavite.
Element koji je selektovan u levom panelu, na stablu, na samoj radnoj površini će biti obeležen svetlo sivom bojom.
Panel traka je horizontalni odeljak sa određenim opcijama koji se nalazi na samoj sredini prozora, iznad radne površine.
Sastoji se od nekoliko dugmića, koji imaju određene funkcije:
"Save" - dugme koje klikom čuva sve što je do tada urađeno.
"Close" - klikom na ovo dugme izlazite iz editora bez sačuvanog posla.
"View coponents" - pali ili gasi prikaz isprekidane linije koja okružuje svaki element u prikazu na radnoj površini.
"Preview" - otvara prikaz stranice kako bi izgledalo u pretraživaču. Ikonica za izlazak iz ovoga tipa prikaza se nalazi u gornjem levom radne površine.
"Fullscreen" - stavlja editor u prikaz punog ekrana.
"View code" - otvara prozor u kome se nalazi kompletan CSS kao HTML kod stranice.
Radna površina zauzima centralni i najveći deo prozora. Njena uloga je da vizuelno prikaže elemente i olakša manipulisanje i stilizovanje istih.
Prilikom selektovanja elementa, oko njega će se pojaviti plavi pravougaonik, koji označava element koji je selektovan. U desnom gornjem uglu tog pravougaonika se nalazi mali panel sa 4 ikonice. Svaka od njih ima neko značenje:
Klikom na ovo dugme selektujete element u kojem se nalazi selektovan element, tj. roditelj (parent) selektovanog elementa.
Služi za prevlačenje elementa.
Dugme za dupliranje elementa.
Dugme za brisanje elementa.
Prilikom selektovanja teksta, u gornjem levom uglu će se pojaviti panel sa 6 ikonica pomoću kojih se stilizuje tekst:
"B" - naglašava (bolduje, podebljava) font.
" / " - italic (kosi) font.
"U" - dodaje liniju ispod teksta.
"S" - precrtan tekst (linija po sredini).
"Link" - dodaje opciju linkovanja selektovanog teksta.
"Wrap for style" - odvaja selektovan deo teksta od ostalog da može posebno da se stilizuje.
Uz desnu ivicu prozora se nalazi panel koje je podeljen na 3 glavne kategorije. Gledano sa desne na levu stranu kategorije su: "Blocks", "Settings" i "Style manager". Odmah ispod tih kategorija se nalaze 2 dugmeta preko kojih manipulišete templejtima.
Klikom na zeleno "Load template" dugme, otvara se prozor biblioteke templejta, gde sa desne strane imate grupe po kojima su podeljeni templejti. U prvoj grupi "Import Templejta", koja je na vrhu, se nalaze vaši templejti. U ostalim grupama ispod se nalaze standardni templejti koji idu uz editor.
Levo pored "Load template" dugmeta se nalazi plavo "Save template" dugme pomoću kojeg čuvate sav trenutni sadržaj sa radne površine i možete kasnije da ga koristite na drugim predmetima. Klikom na "Save template" dugme otvara se prozor biblioteke templejta sa dugmetom "Novi" u donjem desno delu prozora. Klikom na to dugme otvara se novi prozor "Save template" gde unosite naziv pod kojim želite da sačuvate Vaš template. Na kraju ostaje samo da kliknete "Snimi template" i template će biti u grupi "Import templejta". Detaljnije o ovome možete pronaći na Templejti stranici.
Blocks kategorija desnog panela se sastoji 2 odeljka. U prvom odeljku nalaze se komponente koje se dodaju prevlačenjem na radnu površinu. Prvi je "Layout" odeljak u kome se nalaze 4 komponente za raspored elemenata na stranici:
"1 Column" - raspored elemeneta u formaciji 1 kolona.
"2 Columns" - raspored elemenata u formaciji 2 jednake kolone.
"3 Columns" - raspored elemenata u formaciji 3 jednake kolone.
"2 Columns 1/2" - raspored elemenata u formaciji 2 kolone gde je prva duplo manja od druge.
Ispod "Layout" odeljka se nalazi odeljak "Elementi" koji sadži osnovne komponente:
"Image" - komponenta preko koje se dodaje slika.
"H1" - naslov najveće bitnosti.
"H2" - naslov malo manje bitnosti.
"H3" - naslov najmanje bitnosti.
"Paragraf" - komponenta za dodavanje teksta.
"Link" - komponenta za dodavanja linkovanog teksta.
."Link Block" - blok komponenta koja je linkovana i u koju možete da stavljate druge komponente.
"Div" - blok komponenta, služi za grupisanje drugih komponenti.
"Video" - komponenta pomoću koje dodajete video sadržaj.
"Map" - komponenta za dodavanje prikaza mape.
Sledeća je "Settings" kategorija u kojoj se nalaze podešavanja komponenti. Opcije za podešavanja zavise od selektovane komponente, i nisu ista za sve komponente. Sve komponente osim "Video" i "Map" komponenti sadrže 3 standardna polja u "Settings" kategoriji.
Prvo polje je "Id" polje i njegova vrednost se automatski generiše i jedinstvena je samo za taj element i služi za referenciranje tog elementa prilikom njegove stilizacije. Po želji možete da promenite tu vrednost.
Ispod se nalazi "Title" polje koje dodaje "title" atribut sa unetom vrednošću selektovanom elementu. Ako je ovo polje prazno, element neće imati "title" atribut.
Treće polje je "Animation" polje koje služi za dodavanje animacije elementu. Klikom na polje otvara se padajući meni sa listom animacija koje su dostupne. Vizuelnu prezentaciju tih animacija imate na ovoj stranici. Izabrana animacija će se izvršiti jednom kada element uđe u vidno polje prozora.
"Link" i "Link Block" komponente, pored ovih standardnih polja, imaju još jedno dodatno "Href" (hypertext reference) polje u koje se unosi adresa stranice ka kojoj taj link želite da vodi.
Komponente koje imaju ceo svoj set polja su "Video" i "Map", i detaljno objašnjenje imate na Komponente stranici.
Ova kategorija desnog panela se sastoji od 2 glavna odeljka. Prvi je "Classes" odeljak i on se stalno prikazuje na vrhu. Sastoji se iz polja za unos vrednosti klase, i "State" padajućeg menija. Da biste uneli klasu, dovoljno je da kliknete na "+" ikonicu, ukucate ime klase i pritisnete enter, i moguć je unos više klasa. Nakon stilizovanja elementa, pritiskom na ikonicu (dve strelice koje idu u krug) koja se nalazi desno od "+" ikonice, sinhronizujete svu stilizaciju po toj klasi, i svi elementi sa istom klasom će poprimiti tu stilizaciju. Klase se koriste kako bi se omogućilo jednostavno stilizovanje organizacija elemenata na web stranici, i kako bi se grupisali elementi koji dele isti stil ili funkciju. Klasa mora biti jedna reč (ne sme da sadrži razmak) i ne sme da počinje sa brojem.
Uz pomoć "State" padajućeg menija se bira stanje u kom je stanju element prilikom njeove stilizacije. To znači da kada je izabran "Hover", sva stilizacija koja se odradi na tom elementu će biti vidljiva samo kada je element u tom statusu, tj. kada je strelica miša iznad tog elementa (lebdi). U "Click" stanju, sva stilizacija koja se odradi biće vidljiva samo u trenutku kada je mišem kliknuto na taj element.
Drugi odeljak se sastoji od 6 grupa: "General", "Dimension", "Typography", "Decorations", "Extra" i "Flex".
"General" grupa sadrži sledeće opcije:
"Float" - opcija da li će element da lebdi i sa koje strane.
"Display" - način prikaza elementa.
"Position" - način pozicioniranje elementa (absoulte, relative...).
"Top" - pozicioniranje elementa u odnosu na gornju osu.
"Right" - pozicioniranje elementa u odnosu na desnu osu.
"Left" - pozicioniranje elementa u odnosu na levu osu.
"Bottom" - pozicioniranje elementa u odnosu na donju osu.
* "Top", "Right", "Left", "Bottom" imaju funkciju samo kada "Position" elementa nije "static".
Sledeća je "Dimension" grupa i ona se sastoji od 3 odeljka, gde je prvi "Dimensions" odeljak i sastavni deo njega su sledeće opcije:
"Width" - definiše širinu elementa.
"Height" - definiše visinu elementa.
"Min width" - definiše minimalnu širinu elementa.
"Max width" - definiše maksimalnu širinu.
"Min height" - minimalna visina elementa.
"Max height" - definiše maksimalnu visinu elementa.
Drugi odeljak je "Margin" i služi za definisanje prostora oko elementa. Njegove opcije su:
"Top" - definiše gornju marginu.
"Right" - definiše desnu marginu.
"Bottom" - definiše donju marginu.
"Left" - definiše levu marginu.
Treći je "Padding" odeljak, odnosi se na prostor unutar elementa koj se nalazi između sadžaja i ivica elementa, sa opcijama:
"Top" - definiše gornji padding.
"Right" - definiše desni padding.
"Bottom" - definiše donji padding.
"Left" - definiše levi padding.
Ispod "Dimension" nalazi se "Typography" grupa koja je zadužena za stilizovanje fontova. Njene opcije su:
"Color" - polje za odabir boje fonta.
"Font-size" - definiše veličinu fonta.
"Font-weight" - odnosi se na debljinu slova fonta.
"Line height" - definiše visinu prostora koji zauzima jedna linija teksta.
"Letter spacing" - odnosi se na raznak između pojedinačnih slova u tekstu.
"Text align" - definiše horizontalno poravnanje teksta na stranici.
"Text decoration" - odnosi se na ukrase (stilove) koji se primenjuju na tekst.
"Font-family" - padajući meni u kom se bira stil fonta.
"Text shadow" - opcija za dodavanje i definisanje senke teksta.
Sledeća je"Decorations" grupa koja je zadužena za dekojarciju elemenata:
"Background color" - definiše gornji padding.
"Fill" - definiše desni padding.
"Opacity" - definiše donji padding.
"Border radius" - omogućava zaobljavanje uglova elemenata na web stranici. Zaobljenost se definiše za svaki ugao poseno, od gornjeg levog ugla, pa preko gornjeg desnog i donjeg desnog do donjeg levog ugla.
"Border" - definiše okvir elementa. Njegove opcije su "Width" tj. debljina linije okvira, "Style" tj. stil linije (ravna, isprekidana, tačkice, dupla linija...) i "Color" koja definiše boju okvira.
"Box shadow" - je opcija koja se koristi za dodavanje senke elementima na stranici.
"Background" - opcija za dodavanje slike kao pozadine elementa.
"Extra" je grupa zadužena za definisanje animacija elemenata na stranici. Sastoji se od sledećih opcija:
"Transition" - definiše tip i trajanje tranzicije.
"Perspektive" - je svojstvo koje omogućuje prikazivanje 3D transformacija elemenata na web stranici.
"Transform" - definiše transformaciju koja će biti izvršena nad elementom (rotiranje, pomeranje, skaliranje).
"Flex" je poslednja grupa ove kategorije, i odnosi se na podešavanja pozicioniranja elemenata unutar elementa koji ima "Display" opciju postavljenu na "Flex". Opcije se dele na 2 odeljka, odeljak koji utiče na element koji je roditelj (parrent) i na elemente koji su unutar roditelja (children). Odeljak opcija koji utiču na roditelja su:
"Flex Container" - definiše da li je "Display" opcija elementa "Flex" ili nije. Ako nije ostala podešavanja neće imati nikakav uticaj.
"Flex Wrap" - opcija koja omogućuje prelamanje elementima u novi red ili kolonu kada nema više mesta.
"Direction" - definiše se pravac slaganja elemenata.
"Justify" - definiše poravnanje elemenata po jednoj osi (zavisno od "Direction"-a).
"Align" - definiše poravnanje elemenata po drugoj osi.
Odeljak opcija koji se odnose na elemente unutar roditelja su:
"Order" - opcija koja omogućuje promenu pozicije elementa u redu.
"Grow" - Ova opcija kontroliše koliko će se element rastezati unutar dostupnog prostora. Ako je vrednost 0, element neće rasti.
"Shrink" - Definiše koliko će se element smanjivati ??ako nema dovoljno prostora za sve elemente. Ako postavite vrijednost na 0, element se neće smanjivati,
"Basics" - Ovo svojstvo kontroliše početnu veličinu elementa pre nego što se primijene "Grow" i "Shrink".
