Sample Content Published

Bară CTA — .cta-box

Bandou lat, cu fundal gradient (accent → secondary) și text alb — gândit pentru un mesaj scurt + un buton, de exemplu sub un articol sau înainte de footer. Conținutul din stânga (.cta-box-content: h2 + paragraf) și butonul din dreapta (.cta-box-action) se rearanjează pe coloană, pe mobil.

Ai nevoie de ceva anume?

O propoziție scurtă care explică oferta sau următorul pas pentru vizitator.

Această pagină e un ghid de stil generat automat de temă: adună exemple pentru fiecare clasă/element special disponibil în conținut, ca referință rapidă la scris pagini noi. Poți edita sau șterge oricând textul de mai jos — nu se regenerează automat.

Tema pe care rulează acest site e gândită pentru simplitate și viteză: Editor Clasic, fără Gutenberg sau page builder — conținutul se scrie direct în HTML curat, exact ca exemplele de mai jos. E light-weight din construcție (CSS/JS minime, încărcate condiționat, fără librării grele by default) și are suport nativ pentru WooCommerce acolo unde site-ul are nevoie de magazin online.


Titluri (h2–h6)

Titlul paginii (câmpul “Titlu” din editor) e mereu h1 — titlurile din conținut încep de la h2, ca să nu existe două h1 pe aceeași pagină.

Acesta e un h3

Acesta e un h4

Acesta e un h5
Acesta e un h6

Paragraf și listă

Un paragraf obișnuit de text, cu text îngroșat, text cursiv și un link.

  • Element de listă neordonată
  • Al doilea element
  • Al treilea element
  1. Element de listă ordonată
  2. Al doilea element
  3. Al treilea element

Citat

Acesta e un citat evidențiat — border stânga în culoarea accent, text italic.


Tabel

ServiciuPrețDurată
Exemplu serviciu 1100 lei1 oră
Exemplu serviciu 2150 lei2 ore

Separator accent

Linia de mai jos folosește clasa .hr-accent (mai groasă, culoare accent) în loc de un <hr> simplu:



Butoane

Buton .btn

Există și .btn-white (fundal alb, text accent) — gândit pentru a fi folosit peste hero/fundaluri accent, nu pe fundal alb ca aici, unde nu s-ar vedea bine.


Grid — .row / .col-*

Sistemul de grid al temei: .row.grid-gap ca wrapper, apoi .col-1 până la .col-12 pe fiecare copil, în funcție de câte coloane din 12 ocupă.

Coloană col-6 (jumătate)
Coloană col-6 (jumătate)
Coloană col-4
Coloană col-4
Coloană col-4

Listă de pași — .content-steps

Pentru conținut de tip “proces”/”cum funcționează”: pune clasa content-steps pe un bloc Group (Advanced → Additional CSS class), cu titluri h2/h3 direct în interior — fiecare primește automat un cerc numerotat.

Primul pas

Descrierea primului pas.

Al doilea pas

Descrierea celui de-al doilea pas.

Al treilea pas

Descrierea celui de-al treilea pas.


Întrebări frecvente — .faq-item

Accordion FAQ nativ, fără JavaScript, pe bază de <details>/<summary> — funcționează din tastatură și cititoare de ecran fără cod suplimentar.

Tema are editor vizual sau page builder?
Nu — tema e construită special pentru Editorul Clasic din WordPress, cu conținut scris direct în HTML curat, ca în exemplele din pagina asta. Nu depinde de niciun page builder sau plugin de blocuri, deci rămâne simplă de întreținut și rapidă la încărcare.
De ce conținut HTML și nu blocuri Gutenberg?
Pentru control total asupra marcajului și zero JavaScript încărcat degeaba doar ca să afișezi un paragraf. Fiecare clasă din acest ghid de stil (butoane, grid, pași, FAQ) se scrie direct în HTML, fără dependențe de editor.
Tema e optimizată pentru performanță?
Da — CSS și JS minime, încărcate condiționat (de exemplu, stilurile WooCommerce se încarcă doar pe paginile de magazin), fără librării grele by default și fără fonturi sau scripturi externe inutile.
Funcționează cu WooCommerce?
Da, are integrare nativă: galerie de produs cu zoom, lightbox și slider, stiluri proprii pentru shop/cart/checkout/cont, plus fragmente AJAX pentru coșul din header — fără să încarce niciun cod WooCommerce pe paginile care nu au nevoie de el.