# Design Meniu

**Design Meniu** este atelierul în care îți construiești **meniul tipărit** al localului, pornind direct de la produsele tale reale. Alegi un stil de start, aranjezi pagina, categoriile și produsele exact cum vrei, iar pe măsură ce lucrezi vezi în stânga o **previzualizare completă, gata de tipar**. Prețurile, descrierile, gramajul, imaginile, alergenii și valorile nutriționale vin **automat din baza de date** și se actualizează singure. La final tipărești pe hârtie sau salvezi ca PDF. Acest capitol explică fiecare buton și fiecare reglaj, cu exemple de folosire.

> Chappa POS · https://chappa.ro/manual/design-meniu/

## Ce este Design Meniu

Design Meniu transformă lista ta de produse într-un **meniu frumos, gata de tipărit**. Tu nu rescrii produsele aici — ele sunt deja în [Gestiuni, Produse, Zone](https://chappa.ro/manual/gestiuni-produse-zone/). Designerul doar le **aranjează vizual**: alegi cum arată pagina, cum se grupează pe categorii și cum se prezintă fiecare produs, iar conținutul (nume, preț, descriere, gramaj, poză) se completează singur.

> **Ideea în două cuvinte: șablon + date**  
> Un **șablon** (design) este o rețetă de aspect (pagină, categorii, produse). Aplici șablonul peste **produsele tale reale** și obții meniul. Schimbi un preț în Gestiuni → meniul se actualizează singur data viitoare. Schimbi designul → toate produsele se reașează după noul stil.  

### Cum o deschizi

Din **meniul principal**, apasă **Design Meniu**. Pagina e disponibilă de la **nivelul de acces 2** în sus. Din colțul din dreapta-sus te întorci la **Meniu**.

### Structura ecranului

Sus ai o **bară de unelte** (șablonul curent, nivelul de preț, zoom, tipărire). Sub ea, ecranul e împărțit în două:

- **Stânga — Previzualizare completă:** meniul real, paginat exact ca la tipar. Aici dai click pe orice element ca să-l editezi.
- **Dreapta — Inspectorul:** panoul de editare, cu trei file ([Pagină](https://chappa.ro/manual/design-meniu/aspect-pagina/), [Categorie](https://chappa.ro/manual/design-meniu/aspect-categorie/), [Produs](https://chappa.ro/manual/design-meniu/aspect-produs/)), lista de [Elemente](https://chappa.ro/manual/design-meniu/elemente/) și proprietățile elementului selectat.

![Privire de ansamblu asupra paginii Design Meniu](https://chappa.ro/manual/media/img/design-meniu/overview.png)
*Design Meniu: bara de unelte sus, previzualizarea paginabilă în stânga, inspectorul cu file (Pagină / Categorie / Produs), structura și elementele în dreapta.*

### Cum arată rezultatul

Iată o pagină completă, așa cum iese la tipar: antetul cu numele localului și titlul, o categorie și produsele ei cu poză, nume, descriere, gramaj și preț, plus numărul paginii jos.

![Exemplu de pagină de meniu finalizată](https://chappa.ro/manual/media/img/design-meniu/menu-page.png)
*O pagină de meniu gata de tipar (stilul „Clasic”): antet, categoria BERE și produsele aduse automat din baza de date, cu preț pe nivelul ales.*

> **Sfat**  
> Dă click pe orice captură din acest manual ca să o mărești.  


## Cum începi: alegi un stil

Când creezi un șablon nou (butonul **+** din bară), designerul îți cere întâi un **punct de pornire** — un stil predefinit. Nu pornești de la o pagină goală: alegi un aspect aproape gata și apoi îl modifici cât vrei.

![Selectorul de stiluri predefinite](https://chappa.ro/manual/media/img/design-meniu/preset-picker.png)
*Fereastra „Alege stilul meniului” cu cele șase stiluri de pornire. Oricare l-ai alege, toate elementele rămân editabile și conectate la produsele din baza de date.*

Cele șase stiluri sunt doar **puncte de plecare** — le poți transforma complet după aceea:

| Stil | Potrivit pentru |
| --- | --- |
| **Clasic** | Aspect cald și echilibrat — restaurante și cafenele. |
| **Mean Bar** | Industrial, contrastant: negru, oțel și accente roșii. |
| **Disco** | Neon, energic, fundal violet profund — baruri și cluburi. |
| **Fancy** | Editorial și rafinat: serif elegant, spațiu generos, detalii aurii. |
| **Beach Bar** | Relaxat și luminos: nisip, turcoaz, coral. |
| **Club** | Nocturn și premium: negru intens, auriu discret. |

> **Stilurile sunt doar un început**  
> Indiferent de stilul ales, **fiecare** culoare, font, margine sau element poate fi schimbat. Vezi mai jos cum, în secțiunile despre [Pagină](https://chappa.ro/manual/design-meniu/aspect-pagina/), [Categorie](https://chappa.ro/manual/design-meniu/aspect-categorie/), [Produs](https://chappa.ro/manual/design-meniu/aspect-produs/) și [Elemente](https://chappa.ro/manual/design-meniu/elemente/).  

Dacă ai deja șabloane salvate, le alegi din lista **Șablon** din bară, fără să mai treci prin selectorul de stiluri. Vezi [Gestionarea șabloanelor](https://chappa.ro/manual/design-meniu/sabloane/).


## Gestionarea șabloanelor

Bara de sus comandă **șabloanele** (designurile salvate). Poți avea mai multe meniuri — de pildă unul „Vară”, unul „Iarnă”, unul „Bar” — și comuți între ele dintr-o listă.

![Bara de unelte a designerului](https://chappa.ro/manual/media/img/design-meniu/header.png)
*Bara de unelte: lista de șabloane, butoanele Nou / Duplică / Șterge / Salvează (cu starea „Salvat / Modificări nesalvate”), nivelul de preț, zoom-ul și butonul Tipărește.*

- ****Șablon** (lista)** — Comută între șabloanele salvate. La schimbare, previzualizarea se reîncarcă pe designul ales.
- ****+** (Șablon nou)** — Pornește un șablon nou — deschide [selectorul de stiluri](https://chappa.ro/manual/design-meniu/start/).
- **Duplică șablonul** — Face o copie a designului curent (numită „… - copie”), ca să experimentezi fără să strici originalul.
- **Șterge șablonul** — Șterge definitiv șablonul curent (cere confirmare).
- ****Salvează**** — Salvează designul. Indicatorul din stânga sus arată **Salvat** sau **Modificări nesalvate**.

> **Șabloanele sunt comune pe local**  
> Designurile se salvează pe server, nu doar pe calculatorul tău. Cine deschide pagina vede aceleași șabloane salvate. Datele de start (produse, categorii, prețuri) sunt mereu cele actuale din baza de date.  

> **Nu uita să salvezi**  
> Cât timp scrie **Modificări nesalvate**, schimbările există doar pe ecran. Dacă încerci să creezi alt șablon sau să închizi pagina, designerul te avertizează („Renunți la modificările nesalvate?”) ca să nu pierzi munca din greșeală. Apasă **Salvează** înainte.  


## Cele trei niveluri de editare

Un meniu are trei „straturi”, iar inspectorul le editează separat prin cele trei file de sus. Alegi întâi *ce* editezi, apoi reglezi aspectul și elementele acelui strat.

- ****Pagină**** — Întreaga foaie: format (A4…), orientare, margini, fundal, în câte coloane curg categoriile, plus antetul paginii (nume local, titlu meniu). Vezi [Aspect pagină](https://chappa.ro/manual/design-meniu/aspect-pagina/).
- ****Categorie**** — Cum arată o grupă de produse (ex. „BERE”): fundal, contur, în câte coloane stau produsele, antetul categoriei. Vezi [Aspect categorie](https://chappa.ro/manual/design-meniu/aspect-categorie/).
- ****Produs**** — Cum arată un produs (rândul lui): aranjarea pe coloane a numelui, prețului, descrierii, pozei. Vezi [Aspect produs](https://chappa.ro/manual/design-meniu/aspect-produs/).

> **Editezi un strat, se aplică la toate**  
> Reglajele dintr-un strat se aplică **tuturor** elementelor de acel fel. Schimbi „Aspect produs” → se schimbă **toate** produsele din meniu, unitar. Așa ții meniul coerent fără să atingi produs cu produs.  


## Aspect pagină

Fila **Pagină** controlează foaia întreagă. Aici dai formatul de tipar și aspectul general.

![Reglajele de aspect pentru pagină](https://chappa.ro/manual/media/img/design-meniu/page-settings.png)
*Reglajele de pagină: nume șablon, titlu, scară globală, format, orientare, margini, coloane de categorii, fundal și imagine de fundal.*

- **Nume șablon** — Numele sub care apare designul în listă (ex. „Meniu principal”).
- **Titlu meniu** — Textul mare din antet (ex. „MENIU”). Se poate afișa prin elementul *Titlu meniu*.
- **Scară globală** — Un multiplicator (0,2×–2×) care mărește sau micșorează **tot** dintr-o dată: fonturi, imagini, spațieri, contururi. Util ca să încapă mai mult sau mai puțin pe pagină.
- **Format** — Dimensiunea foii: A4, A3, Letter, Pătrat sau **Personalizat** (lățime/înălțime în mm).
- **Orientare** — Portret sau Peisaj.
- **Margini pagină** — Spațiul gol de la marginea foii (în mm), egal pe toate laturile sau diferit pe fiecare.
- **Coloane categorii** — În câte coloane curg categoriile pe pagină (1–4).
- **Spațiu categorii** — Distanța dintre categorii.
- **Coloane / Spațiu antet** — Cum se aranjează elementele din antetul paginii (nume local, titlu, linie).
- **Culoare fundal** — Culoarea foii.
- **Imagine de fundal** — O imagine pe toată foaia — o încarci tu sau alegi una predefinită (sigla sau fundalul localului).


## Aspect categorie

Fila **Categorie** dă forma fiecărei grupe de produse (ex. „BERE”, „SUCURI”). Categoriile și ordinea lor vin din [Gestiuni → Categorii](https://chappa.ro/manual/gestiuni-produse-zone/categorii/).

![Reglajele de aspect pentru categorie](https://chappa.ro/manual/media/img/design-meniu/category-settings.png)
*Reglajele de categorie: fundal, contur, colțuri, spațiere, în câte coloane stau produsele, antetul categoriei și repetarea antetului la continuare.*

- **Fundal / Culoare contur** — Fundalul casetei categoriei și culoarea conturului (ambele pot fi *transparente*).
- **Grosime contur / Colțuri** — Grosimea liniei de contur și rotunjirea colțurilor.
- **Spațiere interioară** — Spațiul dintre marginea casetei și conținut.
- **Coloane produse** — În câte coloane stau produsele *în interiorul* categoriei (1–5).
- **Spațiu produse** — Distanța dintre produse.
- **Coloane / Spațiu antet** — Aranjarea elementelor din antetul categoriei (numele categoriei, o linie).
- **Repetă antetul** — Dacă o categorie se rupe pe două coloane sau pagini, antetul (numele) se repetă la continuare, ca cititorul să știe unde e.


## Aspect produs

Fila **Produs** dă forma rândului fiecărui produs — cum se așază pe coloane numele, prețul, descrierea și poza.

![Reglajele de aspect pentru produs și lista de elemente](https://chappa.ro/manual/media/img/design-meniu/item-settings.png)
*Reglajele de produs (Aspect produs) și, dedesubt, lista de Elemente care compun rândul unui produs.*

- **Fundal / Culoare contur** — Fundalul și conturul casetei produsului (pot fi transparente — implicit produsul nu are casetă vizibilă).
- **Grosime contur / Colțuri** — Linia de contur și rotunjirea.
- **Spațiere interioară** — Spațiul în jurul conținutului produsului.
- **Înălțime minimă** — Forțează o înălțime minimă pe rând, ca produsele să fie uniforme chiar dacă unele au descriere mai lungă.
- **Coloane / Spațiu coloane** — În câte coloane se împarte rândul produsului. Așa pui, de exemplu, *numele* într-o coloană la stânga și *prețul* în alta, la dreapta.

> **Sfat**  
> Coloanele rândului + opțiunea „Poziționare” a fiecărui element (vezi [Elemente](https://chappa.ro/manual/design-meniu/elemente/)) îți dau aranjamentul clasic „nume la stânga · preț la dreapta · descriere pe tot rândul dedesubt”.  


## Elemente (componentele meniului)

**Elementele** sunt piesele din care e construit fiecare strat. Un element fie afișează un **câmp din baza de date** (nume, preț, descriere…), fie e un adaos liber (text, imagine, linie). Fiecare filă (Pagină / Categorie / Produs) are propria listă de elemente.

![Lista de elemente și butoanele de adăugare](https://chappa.ro/manual/media/img/design-meniu/elements.png)
*Lista de Elemente pentru un produs: fiecare rând se poate reordona (trage de mâner sau săgeți) și șterge. Jos, selectorul de câmp din baza de date și butoanele de adăugare rapidă.*

### Câmpuri din baza de date

Din lista derulantă de jos alegi un câmp și apeși **+** ca să-l adaugi. Câmpurile disponibile depind de stratul în care ești:

| Strat | Câmpuri pe care le poți afișa |
| --- | --- |
| **Pagină** | Titlu meniu · Nume local · Nivel de preț · Număr pagină · Total pagini |
| **Categorie** | Nume categorie |
| **Produs** | Nume produs · Descriere · Preț · Gramaj · PLU · Imagine produs · Alergeni · Valori nutriționale |

> **Conținutul vine singur**  
> Un câmp din baza de date nu are text fix — afișează valoarea reală a fiecărui produs. **Prețul** se ia de pe [nivelul ales](https://chappa.ro/manual/design-meniu/previzualizare/); **alergenii** și **valorile nutriționale** se calculează automat din rețeta produsului (vezi [Subrețete](https://chappa.ro/manual/gestiuni-produse-zone/subretete/) și [Alergeni](https://chappa.ro/manual/gestiuni-produse-zone/alergeni/)); **imaginea** e poza produsului. Poți adăuga același câmp de mai multe ori (în lista de câmpuri scrie „deja adăugat”, dar nu te oprește).  

### Adăugare rapidă (elemente libere)

- ****Text liber**** — Un text scris de tine (ex. „Toate prețurile includ TVA”, o urare, o notă).
- ****Imagine / PNG**** — O imagine încărcată de tine (siglă, decor, pictogramă). Acceptă PNG, JPG și WebP.
- ****Linie**** — O linie despărțitoare (separator) decorativă.

### Ordine și ștergere

- **Reordonezi** elementele trăgând de mânerul din stânga, sau cu săgețile sus/jos. Ordinea contează la afișare.
- **Ștergi** un element cu **✕**.
- Numărul din dreptul titlului **Elemente** arată câte elemente are stratul curent.


## Editarea unui element

Ca să editezi un element, **dă click pe el** — fie în lista de elemente, fie direct **în previzualizare**. Elementul ales se încadrează cu un chenar, iar proprietățile lui apar jos în inspector.

![Un element selectat în previzualizare](https://chappa.ro/manual/media/img/design-meniu/preview-select.png)
*Click pe un element din previzualizare (aici prețul) îl încadrează și îl deschide pentru editare.*

![Editorul de proprietăți al unui element](https://chappa.ro/manual/media/img/design-meniu/element-editor.png)
*Proprietățile unui element de tip preț: poziționare, câmpul din baza de date, formatul prețului (monedă, zecimale, stil bănuți) și stilul textului (font, mărime, grosime, culoare).*

### Poziționare (la orice element)

- **Afișează** — Bifează/debifează ca să arăți sau să ascunzi elementul fără să-l ștergi.
- **Poziționare** — Pe ce coloană stă: *Automat*, *Toată lățimea*, o coloană anume, sau **Absolut** (îl așezi liber cu Poziție X/Y și Scală).
- **Aliniere** — Stânga / Centru / Dreapta / Întins.
- **Rotire** — Înclină elementul (grade).

### Stilul textului

Pentru text și câmpuri-text: **Font** (Arial, Georgia, Times New Roman, Verdana, Tahoma, Trebuchet MS, Courier New), **Mărime**, **Grosime** (de la subțire la black), **Stil** (normal/italic), **Transformare** (MAJUSCULE / minuscule / Titlu), **Culoare text** și **Fundal**, **Înălțime rând**, **Spațiere litere** și colțuri.

### Formatul prețului

Când selectezi elementul **Preț**, apar reglaje de format care se aplică tuturor prețurilor din meniu:

- **Monedă** — RON, LEI sau fără simbol.
- **Zecimale** — Câte zecimale (0–2).
- **Stil bănuți** — Cum apar zecimalele: normal, ridicate (exponent) sau coborâte (indice) — pentru efectul „12⁵⁰”.
- **Ascunde bănuții dacă e 00** — La prețuri rotunde, ascunde „,00” (arată „12” în loc de „12,00”).
- **Ascunde dacă prețul e 0** — Nu afișa nimic la produsele cu preț 0 pe nivelul ales.

### Imagine și linie

- **Imagine:** lățime, înălțime, încadrare (decupează / conține / întinde / original), opacitate, colțuri. La elementul *Imagine / PNG* încarci fișierul (sau alegi sigla / fundalul localului).
- **Linie:** culoare, grosime, lățime (procent) și spațiu deasupra.

> **De reținut**  
> Imaginile încărcate sunt micșorate automat și optimizate, ca șablonul să rămână ușor. Un șablon are o limită de mărime totală, așa că folosește imagini rezonabile (siglă, nu poster de 20 MB).  


## Nivel de preț, previzualizare și zoom

Previzualizarea nu e un desen — sunt **produsele tale reale**, paginate exact ca la tipar. Două comenzi din bară controlează ce și cum vezi.

### Nivel comportament (nivelul de preț)

Lista **Nivel comportament** alege **pe ce nivel de preț** se construiește meniul. Pe el depind două lucruri: **care produse apar** (doar cele active pe acel nivel) și **cu ce preț**. Așa poți tipări un meniu „Terasă” și unul „Happy Hour” din același design, doar schimbând nivelul. Nivelurile și prețurile se setează în [Gestiuni → Niveluri](https://chappa.ro/manual/gestiuni-produse-zone/nivele-comportament/) și [Prețuri pe niveluri](https://chappa.ro/manual/gestiuni-produse-zone/preturi-niveluri/).

> **Ce intră în meniu**  
> Apar doar produsele **active pe nivelul ales** (vezi [Disponibilitate](https://chappa.ro/manual/gestiuni-produse-zone/disponibilitate/)), grupate pe categorii în ordinea din Gestiuni, sortate alfabetic. Produsele fără categorie ajung la „Altele”. Dacă un nivel nu are niciun produs activ, previzualizarea arată mesajul „Niciun produs activ pentru nivelul selectat”.  

Sus, lângă „Previzualizare completă”, vezi un rezumat: **câte pagini** și **câte produse active** are meniul curent.

### Zoom

Cursorul de **zoom** (25%–100%) doar **mărește sau micșorează vizual** previzualizarea, ca să lucrezi confortabil. **Nu** schimbă designul și **nu** afectează tiparul — la imprimantă pagina iese mereu la dimensiunea reală aleasă (A4 etc.).

> **Sfat**  
> Pentru reglaje fine pe un element mic, dă zoom mai mare. Pentru a vedea cum curg paginile, dă zoom mic.  


## Tipărire și PDF

Butonul **Tipărește** trimite meniul la imprimantă — sau îl salvează ca **PDF**, din dialogul de imprimare (alegi „Salvează ca PDF” ca destinație).

- Se tipărește **doar meniul** — fără bara de unelte și fără inspector.
- Pagina iese la **dimensiunea reală** aleasă (A4, A3…), indiferent de zoom-ul din ecran.
- Dacă meniul are mai multe pagini, se tipăresc **toate**, în ordine.
- Culorile, fonturile și imaginile de fundal sunt păstrate întocmai.

> **Sfat la tipar**  
> În dialogul de imprimare al browserului, activează **„Grafică de fundal” / „Background graphics”** ca să iasă culorile și fundalurile. Verifică și ca formatul hârtiei din imprimantă să fie același cu Formatul ales în [Aspect pagină](https://chappa.ro/manual/design-meniu/aspect-pagina/).  


## Exemple de folosire

Câteva scenarii concrete, pas cu pas.

### Exemplul 1 — Un meniu nou, de la zero

1. Apasă **+** și alege un stil (ex. **Clasic**). Designerul îți umple imediat pagina cu produsele tale.
2. În fila **Pagină** pune **Nume șablon** (ex. „Meniu Vară”), alege **Format** A4 și **Coloane categorii** după cât vrei să încapă.
3. Din **Nivel comportament** alege nivelul de preț pe care vrei să-l tipărești.
4. Verifică în previzualizare; ajustează ce nu-ți place dând click pe elemente.
5. Apasă **Salvează**. Apoi **Tipărește** sau salvează ca PDF.

### Exemplul 2 — Adaugi alergenii sub fiecare produs

1. Treci pe fila **Produs**.
2. În **Elemente**, deschide lista de câmpuri, alege **Alergeni** și apasă **+**.
3. Selectează noul element, pune-i **Poziționare: Toată lățimea**, o mărime mică și o culoare discretă.
4. Gata — sub fiecare produs apar automat alergenii lui, calculați din rețetă. La fel poți adăuga **Valori nutriționale**.

### Exemplul 3 — Sigla localului în antet

1. Treci pe fila **Pagină**.
2. În **Elemente** apasă **Imagine / PNG** (sau adaugă o imagine și alege din predefinite **sigla localului**).
3. Reglează-i lățimea și alinierea (ex. centrat, deasupra titlului), trăgând-o în ordine cu celelalte elemente de antet.

### Exemplul 4 — Același meniu, alt stil

Pentru că designul e separat de produse, **aceleași** produse arată complet diferit după stil. Iată exact aceeași listă, în trei stiluri:

![Meniu în stilul Mean Bar](https://chappa.ro/manual/media/img/design-meniu/preset-meanbar.png)
*Stilul **Mean Bar** — industrial, două coloane, fundal negru cu accente roșii, nume cu MAJUSCULE.*

![Meniu în stilul Disco](https://chappa.ro/manual/media/img/design-meniu/preset-disco.png)
*Stilul **Disco** — neon pe fundal violet, titluri colorate, energic.*

![Meniu în stilul Fancy](https://chappa.ro/manual/media/img/design-meniu/preset-fancy.png)
*Stilul **Fancy** — editorial, serif elegant, ramă fină și detalii aurii.*

> **Sfat**  
> Vrei să încerci un stil nou fără să strici meniul actual? **Duplică** șablonul întâi, apoi experimentează pe copie.  


## Întrebări frecvente

**De ce nu apar produsele mele în meniu?**

Probabil nu sunt **active pe nivelul** ales din **Nivel comportament**. Schimbă nivelul, sau activează produsele pe acel nivel din [Disponibilitate](https://chappa.ro/manual/gestiuni-produse-zone/disponibilitate/). Produsele șterse și cele cu preț ascuns nu apar.

**Am schimbat un preț în Gestiuni. Trebuie să refac meniul?**

Nu. Designul e separat de date — la următoarea deschidere (sau reîncărcare), meniul ia automat prețurile și produsele actuale. Designul tău rămâne neatins.

**Cum schimb prețul afișat în meniu?**

Din designer nu modifici prețuri — ele vin din [Prețuri pe niveluri](https://chappa.ro/manual/gestiuni-produse-zone/preturi-niveluri/). Aici controlezi doar **cum arată** prețul (monedă, zecimale, stil) din elementul Preț.

**De unde vin alergenii și valorile nutriționale?**

Se calculează automat din **rețeta** fiecărui produs (ingrediente și subrețete). Le afișezi adăugând câmpurile *Alergeni* / *Valori nutriționale* la stratul Produs.

**Pot face un PDF, nu doar să tipăresc?**

Da. Apasă **Tipărește** și în dialogul de imprimare alege ca destinație **„Salvează ca PDF”**.

**Categoriile apar în altă ordine decât vreau.**

Ordinea categoriilor vine din [Gestiuni → Categorii](https://chappa.ro/manual/gestiuni-produse-zone/categorii/). Schimb-o acolo. Produsele fără categorie ajung la „Altele”, la final.

**Pot avea mai multe meniuri diferite?**

Da — fiecare e un **șablon** separat în lista **Șablon**. Folosește **+** pentru unul nou sau **Duplică** pentru o variantă a celui curent.

**Zoom-ul îmi face meniul mai mic la tipar?**

Nu. Zoom-ul e doar pentru ecran. La tipar pagina iese mereu la dimensiunea reală din [Aspect pagină](https://chappa.ro/manual/design-meniu/aspect-pagina/). Ca să faci tot meniul mai mic/mai mare, folosește **Scară globală**.

**Mi-am pierdut modificările?**

Cât scrie **Modificări nesalvate**, apasă **Salvează**. Designerul te avertizează dacă pleci cu modificări nesalvate — dar salvează des, ca să fii sigur.
