A szerkesztő felületének bemutatása

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.

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:

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.