Ghid de utilizare: Administrarea Site-urilor Web bazate pe Elements CMS
Elements CMS este un modul de administrare pentru site-uri full-administrabile, extrem de flexibil, cu editare directa (pe loc, fara backend si in timp real) a structurii, meniurilor, paginilor si elementelor din pagini ale site-ului web.
Toate aceste site-uri sunt create dupa o logica foarte simpla, precisa: cea mai mica componenta a site-ului este elementul, care este de fapt o parte de continut, poate fi: titlu, subtitlu, text, text pe 2 coloane, imagine, imagine marita prin click, galerie de poze, clipuri video, mp3-uri, pdf-uri afisate online, download fisiere pdf, excel, word etc. Elementele formeaza o pagina, iar paginile formeaza site-ul. Editarea site-ului decurge tocmai dupa aceasta structura: Se creaza meniul, se creaza paginile, se asociaza paginile create cu punctele de meniu cu aceleasi nume, iar apoi se trece la adaugarea/editarea elementelor din pagini.
Important de stiut: puteti avea un numar infinit de pagini in site, numarul paginilor nu trebuie sa fie egal cu nr. de puncte de meniu. Puteti adauga linkuri pe orice pagina, si apoi sa asociati acel link cu o subpagina. Acest lucru inseamna ca structura arborescenta de pagini-subpagini este infinita.
Editarea
Imaginea de mai sus reprezinta panoul de administrare al site-ului web. Dupa cum vedeti, panoul este asezat direct pe site, si nu se deschide intr-o fereastra/tab separat.
Editarea decurge deci in ordinea:
1. Crearea punctelor de meniu si daca exista in site-ul comandat, punctelor de submeniu
2. Crearea paginilor pentru meniu principal si daca este prezent, submeniu
3. Asocierea punctelor de meniu/submeniu cu paginile create la punctul 2
4. Adaugarea asa-ziselor elemente in paginile create, adica popularea paginilor
5. Daca s-au adaugat elemente de link care au nevoie de noi subpagini, se creaza aceste subpagini si se face asocierea cu ele, din elementele de link.
Editarea meniurilor
Fiecare site bazat pe CMS Elements dispune de un set de meniuri principale. Pot exista si alte meniuri, de genul: submeniuri (care se afiseaza la accesarea unui punct din meniul principal), meniuri secundare (nu au legatura directa cu meniul principal), meniuri de footer (meniul principal repetat/meniu cu mentiuni legale, etc.) Oricate tipuri de meniu ati avea in site, acestea se pot edita: se pot crea de la 0, se pot sterge elemente din meniu sau se pot reorganiza.
Pentru a edita meniul principal, trebuie sa dati click pe tab-ul MENU. Tab-ul MENU arata in felul urmator:
Acest panou are deja un meniu principal creat, dupa cum se vede in lista de mai sus. Fiecare punct de meniu are un buton de stergere, o casuta pentru editarea denumirii si un asa-zis dropdown (lista) in care se afiseaza toate paginile create, pentru asociere.
Adaugarea unui punct de meniu se face folosindu-va de casuta + dropdown-ul (lista) din partea de jos, si este extrem de simplu:
1. Scrieti denumirea punctului de meniu in casuta din partea de jos a panoului
2. Selectati o pagina cu care sa se asocieze punctul de meniu, din dropdown-ul (lista) de langa casuta.
Daca editati pentru prima oara, s-ar putea sa nu existe inca nici o pagina in dropdown (lista), pentru ca nu ati creat inca nici o pagina. Puteti insa crea fiecare punct de meniu, fara sa setati asocierile cu paginile, apoi puteti crea paginile cu pricina, ca apoi sa va intoarceti in tab-ul MENU, sa creati asocierile intre punctele de meniu si paginile tocmai create.
Editarea submeniurilor
Editarea submeniurilor se face intr-un mod foarte asemanator cu cel al meniurilor principale, insa de multe ori submeniurile nu sunt plasate sub meniul principal, ci clientul cere ca submeniul sa fie asezat lateral, in partea stanga (acesta este un tip de meniu des intalnit si la site-urile web mai vechi). In imaginea de mai jos, avem un meniu lateral, asezat vertical, de aceea editarea se face din tab-ul GADGET, punctele de submeniu fiind asezate intr-un gadget. In cazul in care submeniurile sunt chiar subordonate punctelor de meniu principale, ele se editeaza tot in Tab-ul MENU, fiind plasate sub punctele de meniu principal.
Editarea meniurilor de tip quicklink/anchor
Exista meniuri care fac legatura intre o tema, si textul/continutul legat de acea tema, aflat pe aceeasi sau o alta pagina. In limbaj tehnic acestea se numesc in-page anchors, si editarea lor se face ca si editarea submeniurilor, doar ca in panoul de editare exista un dropdown(list) in plus la fiecare punct de meniu, din care puteti selecta titlul/tema din pagina dorita, la care sa va directioneze browserul in mod automat:
Astfel, cele doua dropdown-uri (liste) din partea dreapta a casutei cu numele submeniului sunt pentru crearea unor linkuri in-page, astfel incat sa duca la o anumita tema din interiorul unei pagini. Pagina cu pricina se alege din primul dropdown, iar tema/titlul la care sa sara browserul se alege din al doilea. Putem adauga efecte de tranzitie la accesarea in-page, astfel cand vizitatorul apasa pe un astfel de link, browserul scrolleaza la titlul/tema dorita cu o miscare animata.
Crearea paginilor
Pentru a crea o pagina, intrati in Tab-ul EDITOR, apoi cautati Casuta cu denumirea Create Page. Treceti un nume pentru pagina pe care doriti s-o create, apoi dati click pe butonul Create.
Dupa apasarea butonului, pagina se adauga automat in baza de date si va aparea in toate dropdown-urile (listele) de selectare pagina.
Selectarea paginii dorite pentru editare
Pentru a selecta o pagina existenta in scopul de a o edita, in tab-ul EDITOR aveti dropdown-ul Select Page. Din acest dropdown selectati pagina dorita si asteptati ca browserul sa acceseze aceasta pagina, se va face automat.
Editarea paginilor
Dupa ce ati selectat pagina dorita, puteti incepe editarea ei, acest lucru se face tot din tab-ul EDITOR. In partea de jos a panoului aveti dropdown-ul Add Element. In acest dropdown aveti o lista a elementelor default (initiale, elemente pe care le adaugam la fiecare site web creat de noi, insa cu grafica creata pentru Dvs.) + elementele cerute special pentru Dvs.
Iata o lista cu elemente utilizate frecvent:
- Maintitle element
- Subtitle element
- Paragraph element
- 2 Column paragraph element (scris pe 2 coloane)
- Main image element (imagine simpla)
- Full image element (imagine marita pe latimea maxima - depinde de site)
- Slimbox image element (imagine marita prin click)
- Link element (element cu link interipr sau spre alta pagina web, de obicei cu iconas)
- Highlighted text element (text scos in evidenta)
- Photo gallery element (Galerie fotografii cu slideshow)
- Banner element (puteti uploada bannere de orice fel)
- mp3 player element (uploadati un fisier mp3 si se poate reda)
- Youtube Video element (puteti adauga un clip YouTube in pagina
- Custom menu element (create un meniu personalizat)
- Word/Excel/PPT/PDF element (uploadati un fisier sa se poata downloada de vizitatori
- Contact Form element (puteti adauga formularul de contact la orice pagina)
Sau orice alt element pe care vi-l puteti imagina. Exemplu: un element formular pentru un site cu geamuri si usi termopan, capabil sa calzuleze pretul manoperei si a materialelor din dimensiunile trecute in formular.
Fiecare pagina a site-ului este/va fi compusa din astfel de elemente. Ramane doar sa populati paginile cu astfel de elemente, dupa bunul plac. Acest lucru inseamna o flexibilitate rar intalnita la site-uri dinamice, pentru ca layout-ul, adica ordinea elementelor si a lucrurilor de pe o pagina este de obicei statica in cazul modulelor de administrare site concurente.
Organizarea elementelor dintr-o pagina
Odata adaugate, elementele dintr-o pagina se pot edita, reorganiza sau sterge. Pentru organizarea si stergerea elementelor se face dintr-un mic gadget de editare, care apare daca duceti mouse-ul peste element (fara a da click):
Acest gadget contine butonase pentru (in ordinea dupa cum apar in imagine): Editeaza, Mai sus, Mai jos, Sus de tot, Jos de tot, Sterge. Cu ajutorul acestor butoane puteti aranja elementele paginii in ordinea dorita, avand astfel posibilitatea reorganizarii continutului unei pagini cand doriti si cum doriti. Elementele sunt dispuse pe o axa verticala (teoretic), iar o pagina plina cu elemente poate fi asemanata cu o simpla lista cu numele acelor elemente: apasand pe Mai sus, sau Mai jos ridicati sau coborati acel element in lista noastra virtuala, ceea ce are ca efect si schimbarea pozitiei acelui element pe pagina editata, vizual.
Separarea vizuala a elementelor care incap in acelasi rand
Exista multe elemente care nu ocupa intreaga latime a spatiului din zona editabila a paginii. In imaginea urmatoare puteti vedea cateva elemente care formeaza o galerie de fotografii. Din cate puteti observa, ele sunt dispuse unul langa celalalt, incap 3 elemente orizontal, apoi urmatoarele 3 cad pe linia urmatoare. Teoretic, in lista noastra virtuala, aceste elemente sunt dispuse tot vertical unul sub altul, dar apasand pe Mai sus, elementul se deplaseaza in sens orizontal, cu un element in urma, daca are loc, sau cu un rand mai sus, daca era chiar la marginea stanga.
Astfel putem conclude ca logica dispunerii elementelor este ca ele sunt dispuse in sens vertical, daca este vorba de elemente care ocupa intreaga latime a zonei editabile, si in sens orizontal-vertical, unul langa celalalt, apoi iarasi unul langa celalalt intr-un rand nou, daca nu ocupa intreaga latime. Trebuie sa aveti grija deci cand lucrati cu mai multe elemente care nu ocupa latimea maxima, pentru ca s-ar putea sa fie dispuse automat unul langa celalalt, cand de fapt doreati sa le puneti unul sub altul. In astfel de cazuri ajuta elementul separator (Separator element), care se adauga intre 2 astfel de elemente, sa dispuna al doilea element pe un rand nou chiar daca acesta incape la dreapta de primul element. Acest element separator desparte orice element ar fi deasupra lui de orice element aflat sub el.
Editarea elementelor
Fiecare element din pagina (cu exceptia catorva elemente speciale, ca elementul separator) se poate edita, apasand butonasul Edit (primul butonas) din gadgetul de editare/organizare a elementelor care apare daca duceti mouse-ul peste un element. Fiecare element se poate edita, iar editarea lor difera un pic: un titlu se editeaza prin trecerea textului de titlu in casuta care apare, apoi salvare. O imagine se poate edita prin cautarea imaginii pe Hard Diskul local (apasand pe butonul browse), apoi apasarea butonului Upload. Un link se poate edita trecand un nume de afisare linkului in casuta care apare, dand Paste (copiind) link-ului in casuta de link extern/selectand o pagina din dropdown-ul cu linkuri interne.
Un element mai complex este elementul de paragraf sau elementul de paragrafe pe 2 coloane. Acest element se editeaza cu ajutorul unui editor un pic asemanator cu Word:
Puteti vedea editorul de paragrafe in imaginea de mai sus. Acest editor este un editor de continut web avansat, si va da posibilitatea sa adaugati linkuri in text, sa colorati textul, sa folositi stiluri precum bold, italic, underline, subscript, superscript, sa creati liste, sa aranjati textul la stanga, dreapta sau centru, etc.
Un punct forte al acestui sistem de editare a paginilor web este faptul ca pe de o parte va ofera acest editor pentru a putea edita aproape orice aspect al unui paragraf, insa nu va limiteaza la capabilitatile lui de a dispune informatia pe o pagina (cum procedeaza multe produse concurente), ci puteti dispune cate paragrafe sau alte elemente doriti pe o pagina in forma/layout-ul dorit, si apoi le puteti edita in amanunt.
Optimizarea paginilor pentru motoarele de cautare - Title, Description, Keywords
Site-urile web bazate pe Elements CMS dispun de o puternica optimizare pentru motoarele de cautare, in special Google, optimizare create dupa o reteta proprie de SEO care a adus multe firme in topul Google (pentru un portofoliu SEO consultati pagina http://www.marconimedia.ro/optimizare-site-web.html. Aceasta optimizare insa nu este destul pentru a ajunge in topul Google, pentru ca Google apreciaza calitatea site-urilor mai ales dupa continutul lor de informatie. Astfel, trebuie sa ajutam motorul de cautare sa inteleaga despre ce este vorba in pagina pe care tocmai o editam: trebuie sa completam cateva campuri de optimizare/SEO.
Campurile SEO se afla in tab-ul EDITOR, sub numele: Title, Description, Keywords. Aceste campuri introduc informatii care nu se vor vedea neaparat pe site, insa vor ajuta mult motoarele de cautre sa-si dea seama despre ce este vorba in pagina.
TITLE: Acest camp reprezinta exact ce inseamna: titlul paginii editate. Astfel, daca pagina este cea de produse a unei firme de ferestre si usi termopan, este indicat sa trecem un titlu de genul: “Ferestre termopan, usi termopan, feronerie“ - este important sa enumeram 2-3 grupe importante de servicii/produse in titlu
DESCRIPTION: Aici trebuie sa treceti descrierea continutului paginii, in 1-2 randuri. Exemplu: Firma X din orasul Y produce ferestre si usi termopan in serie si la comanda. Daca titlul este un text scurt, continand mai mult cuvinte cheie, descrierea trebuie sa fie formulata pe intelesul tuturor, astfel incat daca cineva gaseste linkul paginii in Google, si citeste descrierea aceasta, care se afiseaza dedesubt, sa inteleaga exact in unde ajunge daca da click pe link.
KEYWORDS: Aici trebuie sa treceti frazele si cuvintele cheie dupa care ati dori ca pagina sa poata fi gasita in motoarele de cautare. Contrar opiniei generale, cuvintele cheie (meta keywords) nu sunt extrem de importante in optimizare dar este bine sa le treceti. Nu treceti un numar exagerat de mare de cuvinte cheie, 10-12 ar fi numarul maxim pentru acestea.
Trimiterea/Administrarea Newsletter-ului
Site-urile web bazate pe CMS Elements au ca optiune un modul de Newsletter care permite inscrierea interesatilor in mailing list si editarea/trimiterea Newsletter-ului catre cei inscrisi. Modulul va permite sa editati pe loc newsletterul cu ajutorul editorului gen Word, sau sa copiati codul html al unui newsletter gata creat de Dvs. in acest editor. Acest cod html trebuie sa fie mail-compliant, sa respecte cerintele pentru html-urile create pentru e-mail (adresele imaginilor trebuie sa fie absolute, stilurile CSS trebuie sa fie inglobate in html).
Apasand pe ultimul buton din cele dispuse in partea de sus a panoului (iconas pagina cu scris) se trece in modul html/editare sursa si se poate copia codul html al Newsletterului. Editarea Newsletterului in editorul din panou se face exact ca editarea paragrafelor din pagini.
Tot in tab-ul ADMIN sunt dispuse si setarile administrative: setarea e-mailului la care se trimit toate mesajele din formularul de contact, setarea adresei firmei/persoanei care detine site-ul, care apare la informatiile de contact, precum si schimbarea parolei.
