Ce este Web Graffiti?

Web Graffiti este unealta cu care poti construi pagini web cu usurinta. Poti construi layouturi complexe sau simple, fara te doara capul.

In acest articol vom vorbi despre:

  • Butoanele principale.
  • Shortcode-uri
  • Sectiuni de pagina
  • Coloane

Butoanele principale

Butoanele schimba intre modul clasic de editare si cel vizual. Adauga elemente folosind editorul vizual.

Poti sa te tragi elementele cu mose-ul si sa le plasezi oriunde vrei. (sectiune, rand sau coloana).

Butonul Templates te poate ajuta sa salvezi pagina pe care lucrezi ca un sablon refolosibil. Este foarte util cand ai de creat duzine de pagini rapid.

Shortcode-uri

Lista tuturor shortcode-urile aplicabile o poti gasi daca apesi butonul de adauga elemente.

Sectiunea de pagina

Sectiunea de pagina este un shortcode care joaca rolul unui container full width, in care poti sa cuprinzi alte shortcode-uri.

Poti folosi sectiunea de pagina pentru a imparti pagina in coloane de cate 2, de cate 3 sau 4 sau cate vrei tu, dar nu mai multe de 12, ce e mult strica.

Pagina ta poate avea nenumarate sectiuni de pagina in ea. Pentru a schimba pozitia unei sectiuni pur si simplu trage de sectiune pe o axa verticala. De aici incolo esti liber sa adaugi orice alt modul vrei, Slideshow-uri, Produse, Articole de blog…

Setarile sectiunii de pagina:

  1. Butonul de stergere pentru a sterge sectiunea cu tot cu elementele incluse din ea.
  2. Butonul de clonare a sectiunii cu toate elementele din ea.
  3. Butonuld e editare pentru a configura optiuni diverse ale sectiunii
  4. Butonul de drag pentru a muta sectiunea.
  5. Butonul de layout care poate imparti sectiunea in coloane
  6. Butonl de editare coloana unde poti configura optiuni diverse ale coloanei
  7. Butonul va deschide panoul de alegere elemente

Coloane

Coloanele fac parte din sectiunile de pagina sau randuri, iar scopul lor este sa contina elementele tale favorite. Coloanele pot fi reordonate. Click si trage coloana pe o axa orizontala astfel incat sa reordonezi contentul paginii tale dupa plac.

Elemente de continut

Elementele de continut sunt shortcode-uri care pot fi folosite in sectiuni de pagina sau coloane. Gandeste-te la ele ca la caramizi cu care iti construiesti layout-ul. Toate elemntele sunt customizabile. Pentru a edita apasa butonul verde de editare. Pentru a salva apasa „Save changes”.

  1. Butonul de stergere shortcode
  2. Butonul de clonare
  3. Butonul de editare
  4. Nume shortcode
Editorul front end

Editeaza si personalizeaza-ti site-ul cu editorul front end pentru a vedea imediat cum arata modificarile tale. Ceea ce vezi e si ceea ce primesti.

In acest articol:

  • Accesul la editorul front end
  • Adauga un shortcode
  • Setarile de pagina
  • Previzualizare responsive

Accesul la front end editor

Pentru a avea acces la editorul front end:

  1. Din meniul WordPress, alege Pagini si editeaza o pagina
  2. Click pe editorul front end
  3. Vei fi redirectionat catre editorul front end

Adauga un shortcode

Adaugarea unui shortcode din editorul frontend este la fel ca in editorul backend.

In popup-ul Adauga Elemente cauta Blog si da click pe el.
Dupa ce shortcode-ul pentru Blog este adaugat un panou de setari specifice modulului de Blog se va deschide. Pentru a salva apasa „Save Changes”.

Vei vedea postarile de Blog cum se populeaza pe pagina.

In coltul dreapta sus, click pe butonul de Update pentru a publica schimbarile.

Setarile paginii

Editorul front end dispune de setari speciale care te lasa sa schimbi titlul paginii, sa adaugi CSS special pentru pagina respectiva, dar nu are toate optinile editorului back end. Optiunile editorului back end sunt disponibile doar din back end.

Pentru a accesa setarile paginii din front end trebuie sa:

  1. Click pe iconita de settings din dreapta sus
  2. O fereastra noua se va deschide unde poti seta numele paginii sau CSS custom.

Previzualizare responsive

Editorul front end dispune de o metoda de a vedea cum se comporta site-ul tau pe diferite tipuri de device-uri (telefon, tableta, laptop, mega desktop).

  1. In coltul dreapta, hover pe iconita de ecran si alege unul din device-uri
  2. Vei putea vedea acum cum arata site-ul pe device-ul ales.
Setari coloane

In acest articol vom vorbi despre setarile de coloana. Vom dezvalui informatii detaliate despre optiunile disponibile in setarile de coloana.

In acest articol: 

  • Setarile de coloana
  • Setari de coloane responsive

Setari de coloana

Poti adauga coloane in Randuri si Sectiuni de pagina. Lungimea coloanelor este reglabila. Firecare coloana are setari proprii pentru a personaliza aspectul fiecareia. Pentru a edita setarile de coloana este deajuns sa click pe iconita de creion a coloanei. Mai jos enumeram toate setarile disponibile coloanelor.

Setari generale

  1. Column Border Color
    Foloseste aceasta optiune pentru a seta culoarea chenarului unei coloane.
  2. Background blend modes
    Foloseste aceasta optiune pentru a seta efectul de fundal dorit pentru aceasta coloana. Optiunile disponibile sunt:

    1. None
    2. Multiply
    3. Screen
    4. Overlay
    5. Darken
    6. Lighten
    7. Soft light
    8. Luminosity
  3. Visibility for devices
    Foloseste aceasta optiune pentru a ascunde coloana sub o anumita dimensiune. Optiunile disponibile sunt:

    1. All
    2. Hidden on phones
    3. Hidden on tablets
    4. Hidden on mega tablets
    5. Hidden on desktops
    6. Hidden on mega desktops
    7. Visible on phones
    8. Visible on tablets
    9. Visible on mega tablets
    10. Visible on dekstops
    11. Visible on mega desktops
  4. Extra class name
    Daca doresti ca o coloana anume sa aiba un element customizat diferit fata de restul coloanelor, adauga un nume de clasa dupa care sa apelezi coloana in CSS-ul personalizat.

Setari design

  1. CSS
    Aceasta optiune furnizeaza utilizatorul cu o metoda de a seta margine, padding-ul si border-ul coloanei.
  2. Border Color
    Foloseste optiunea pentru a seta culoarea border-ului. Optiunea din tab-ul general va suprascrie aceasta optiune daca este activa.
  3. Border style
    Foloseste aceasta optiune pentru a seta stilul border-ului pentru aceasta coloana. Optiunile disponibile sunt:

    1. Theme defaults
    2. Solid
    3. Dotted
    4. Dashed
    5. None
    6. Hidden
    7. Double
    8. Groove
    9. Ridge
    10. Inset
    11. Outset
    12. Initial
    13. Inherit
  4. Border radius
    Foloseste aceasta optiune pentru a seta cat de rotunde sa fie colturile coloanei mai sus mentionate. Optiunile disponibile sunt:

    1. None
    2. 1px
    3. 2px
    4. 3px
    5. 4px
    6. 5px
    7. 10px
    8. 15px
    9. 20px
    10. 25px
    11. 30px
    12. 35px
  5. Background
    Foloseste aceasta optiune pentru a seta culoarea fundalului si/sau o imagine pentru fundalul coloanei. De asemenea, in acelasi panou ai setari pentru a mari sau micsora marimea imaginii de fundal. Optiunile disponibile sunt:

    1. Theme Defaults
    2. Cover
    3. Contain
    4. No Repeat
    5. Repeat
  6. Box controls
    Activand bifa de Simplify Controls poti seta dimensiunea marginii, padding-ului si border-ului pe toate 4 partile coloanei.

Optiuni responsive

  1. Width
    Foloseste aceasta optiune pentru a seta latimea coloanei pentru toate marimile de device disponibile. O sectiune sau un row poate fi sparta in 12 parti egale sau mai multe coloane de marimi diferite, atata timp cat totalul marimilor acestora este 12. Aceste setari vor fi setate ca default in urmatorul panou. Optiunile disponibile sunt:

    1. 1 column – 1/12
    2. 2 columns – 1/6
    3. 3 columns – 1/4
    4. 4 columns – 1/3
    5. 5 columns – 5/12
    6. 6 columns – 1/2
    7. 7 columns – 7/12
    8. 8 columns – 2/3
    9. 9 columns – 3/4
    10. 10 columns – 5/6
    11. 11 columns – 11/12
    12. 12 columns – 1/1
  2. Width and responsiveness
    Optiunile disponibile sunt:

    1. Desktop
    2. Tablet – Landscape
    3. Tablet – Portrait
    4. Mobile

Setari de coloane responsive

  1. Seteaza pozitia responsive default la 2 coloane
    Click pe creionul de editare al fiecarei coloane si mergi la Responsive Options. Aici poti seta valoarea de 6 coloane (1/2). Asta va face coloana sa fie intodeauna jumatate din lungimea randului.
  2. Seteaza pozitia la 2 coloane si pe mobil
    Din panoul Width and Responsiveness poti seta lungiea fiecarei coloane pentru fiecare tip de dispozitiv folosit. Doar alege din lista lungimi predefinite si salveaza modificarile.
Cum sa adaug CSS unei pagini din setari?

Constructorul de pagini are o functionalitate care poate fi accesata din coltul dreapta sus, daca apesi pe iconita zimtata. In panoul deschis poti insera orice cod CSS pentru a continua personalizarea in amanunt a paginii. In exeplul de mai jos vom afla cum putem schimba culoarea unui text.

  1. Creaza o pagina noua din Pagini > Adauga pagina noua
  2. Adauga un shortcode de text si introdu textul in dialog si completeaza la campul Extra Class Name cu valoarea „salut”.
  3. Click pe rotita zimtata din coltul dreapta sus, pentru a activa dialogul de setari ale paginii.
  4. Adauga CSS-ul personalizat si salveaza pagina. In exemplul nostru este:
    .salut{color:green;}

Textul a capatat culoarea rosie, dar doar pentru pagina asta, nu si pentru celelalte pagini.