# A szerkesztő felületének bemutatása

> A Bricks szerkesztő négy fő területe: eszköztár, beállítópanel, vászon és szerkezet panel.

## A szerkesztő megnyitása

Hozz létre egy Kezdőlap oldalt, hogy követni tudd a leírást:

1. A vezérlőpulton nyisd meg az **Oldalak → Oldal hozzáadása** menüpontot.
2. Add meg a címet: „Home”.
3. Kattints az **Edit with Bricks** (Szerkesztés Bricks-szel) gombra.

Ha az oldal nem nyílik meg a szerkesztőben, a **Bricks → Beállítások → Általános** lapon kapcsold be az **Oldal** bejegyzéstípust.

![A Bricks szerkesztő egy üres oldallal](./kepek/elso-lepesek-1-szerkeszto.webp)

*A Bricks szerkesztő egy üres oldallal* (https://minta-bolt.hu/home/?bricks=run)

## A felület négy területe

- **Eszköztár** (fent): globális eszközök és műveletek.
- **Beállítópanel** (balra): az elemek hozzáadása, illetve a kijelölt elem stílusa.
- **Vászon** (középen): az épp tervezett oldal vagy sablon.
- **Szerkezet panel** (jobbra): a HTML-szerkezet vázlata.

### Eszköztár

Az eszköztár mindig látszik. A fő ikonok:

- **Bricks logó:** a Bricks beállításaiban megadott hivatkozást nyitja meg (alapból a WordPress vezérlőpult, később módosítható).
- **Stílusok:** a Stíluskezelőt nyitja, ahol az osztályokat, változókat, színeket, tipográfiai és térközskálákat kezeled (`Cmd/Ctrl + .`).
- **Oldalak:** oldalak közti váltás a szerkesztő elhagyása nélkül.
- **Sablonok:** a sablonkönyvtár és a mentett sablonok.
- **Kezelés:** a szerkesztőhöz kapcsolódó beállítások és eszközök.
- **Parancspaletta:** elemek és műveletek keresése (`Cmd/Ctrl + K`).
- **Elemek / Komponensek:** az elemek és komponensek panelének kapcsolója.
- **Vászon újratöltése:** ha az előnézet szinkronon kívül látszik.
- **Töréspontok és előnézeti méret:** váltás asztali, tablet és mobil szerkesztés között, az előnézet szélességének állítása.
- **Visszavonás / Újra:** lépések visszalépése vagy előre.
- **Szerkezet:** a jobb oldali szerkezet panel kapcsolója.
- **Szerkesztés a WordPressben:** vissza a WordPress szerkesztőjébe az adott oldalhoz.
- **Megtekintés a webhelyen:** az oldal megnyitása új lapon.
- **Előnézet mód:** elrejti a szerkesztői rávetítéseket, tisztább előnézetért.
- **Mentés:** a munkád mentése.

### Beállítópanel (balra)

A panel tartalma attól függ, mit csinálsz:

- alapból a hozzáadható elemeket mutatja csoportokban (Elrendezés, Alap, Média, WordPress stb.), a képen a **Szakasz**, **Tároló**, **Blokk** és **Div**, majd a **Címsor**, **Egyszerű szöveg**, **Gomb**, **Kép** elemek láthatók;
- kijelölt elemnél az elem vezérlőit (tipográfia, színek, térközök stb.);
- a Sablonstílusokra kattintva a globális tervezési beállításokat;
- az Oldalbeállításokra kattintva az oldalra vonatkozó beállításokat.

### Vászon (középen)

A vizuális munkaterület, ahol az oldalt vagy sablont építed.

- Húzd az elemeket a beállítópanelről a vászonra.
- Kattints egy elemre a kijelöléshez; a kijelölt elem kék keretet kap.
- A módosítások valós időben frissülnek.
- Jobb gombbal gyors műveletek érhetők el (például duplikálás, törlés).

A vászon pontosan mutatja a tervet, de a végeredményt mindig nézd meg a weboldalon is.

### Szerkezet panel (jobbra)

Az aktuális oldal elemeinek hierarchiája beágyazott fa formában:

```text
Szakasz
└─ Tároló
   ├─ Címsor
   ├─ Szöveg
   └─ Gomb
```

Miért hasznos:

- elemet itt is kijelölhetsz, nem kell a vásznon keresgélned,
- húzással átrendezheted az elemeket vagy a hierarchiát,
- egy pillantással látod az oldal felépítését.

A panelt az eszköztár fa ikonjával lehet ki-be kapcsolni, de a legtöbben nyitva hagyják.