# A webhelyszerkesztő a boltban

> A webhelyszerkesztő felépítése, a visszavonás, a listanézet és a Stílusok: betűkészlet, színek, háttér, árnyékok és elrendezés.

A webhelyszerkesztő vizuális eszköz, amellyel kód nélkül alakíthatod a boltod egészét: a fejlécet, a láblécet, a termékoldalakat és a pénztárat. A blokkokból és sablonokból felépített elrendezéseket itt módosítod.

## Blokkos téma kell hozzá

A WooCommerce összes boltszerkesztő funkciójához blokkos témára van szükség. Blokkos témánál nemcsak a bejegyzések és oldalak tartalma áll blokkokból, hanem a webhely minden része: a fejléc, a lábléc, az oldalsávok és a sablonok is. A sablonokat a webhelyszerkesztőben módosíthatod.

Blokkos témát így keresel:

1. Nyisd meg a **Megjelenés → Témák** oldalt.
2. Kattints az **Új téma hozzáadása** gombra.
3. Válaszd a **Blokkos témák** szűrőt.

Az itt látható összes téma szerkeszthető a webhelyszerkesztővel. A téma használatához előbb aktiválnod kell. Ha bizonytalan vagy, először egy tesztwebhelyen próbáld ki.

Ha a témád blokkos, a **Megjelenés → Szerkesztő** menüpont megjelenik. Ha hiányzik, a témád nem támogatja a teljes webhelyszerkesztést: válts blokkos témára.

## A szerkesztő felépítése

A webhelyszerkesztőnek három fő területe van:

1. **Blokkbeszúró / Listanézet:** a bal oldalsávban, attól függően, mit választasz.
2. **Tartalom:** középen az éppen szerkesztett oldal, bejegyzés, sablon vagy sablonrész.
3. **Beállítások / Stílusok oldalsáv:** jobb oldalon, a jobb felső sarok ikonjaival váltasz közöttük.

![A webhelyszerkesztő a Kosár sablonnal: balra a listanézet, középen a tartalom, jobbra a sablon beállításai](./kepek/bolt-megjelenese-szerkeszto-felulet.webp)

*A webhelyszerkesztő a Kosár sablonnal: balra a listanézet, középen a tartalom, jobbra a sablon beállításai* (https://minta-bolt.hu/wp-admin/site-editor.php?canvas=edit&p=%2Fwp_template%2Fwoocommerce%2Fwoocommerce%2F%2Fpage-cart)

A képen a három terület látszik: balra a **Lista nézet**, középen a Kosár sablon, jobbra a **Sablonminta** és **Blokk** fül.

### Listanézet

A listanézet a sok blokkot tartalmazó oldalak áttekintésére való. Szerkezetes vázlatot ad az elrendezés blokkjairól, így könnyebben kijelölhetsz vagy áthelyezhetsz egy elemet. A megnyitásához kattints a felső sáv három vízszintes vonalat mutató ikonjára. Egy blokkra kattintva a szerkesztő odaugrik.

### Visszatérés a vezérlőpultra

A bal felső sarokban a visszanyíl ikonnal (a boltod ikonja mellett, a webhely neve előtt) kilépsz a szerkesztőből a WordPress-vezérlőpultra.

### Visszavonás és újra

A bal felső sarokban, a blokkbeszúró mellett találod a **Visszavonás** és az **Újra** gombot. Ezekkel az oldalon végzett lépéseket léptetheted vissza vagy előre.

## Stílusok

A témád határozza meg a bolt sok megjelenési elemét, például a háttérszínt és a betűk családját és méretét. A **Stílusok** felületen mindezt tetszés szerint átalakíthatod: beállíthatod a blokkok alapszíneit, és saját színpalettát is készíthetsz.

1. Nyisd meg a **Megjelenés → Szerkesztő** oldalt.
2. Kattints a jobb felső sarokban a **Stílusok** ikonra (félig sötét, félig világos kör).
3. Válassz a **Betűkészlet**, **Színek**, **Háttér**, **Árnyékok**, **Elrendezés** vagy **Blokkok** közül, és állítsd be a lehetőségeit.

![A Stílusok oldalsáv a Betűkészlet, Színek, Háttér, Árnyékok, Elrendezés és Blokkok pontokkal](./kepek/bolt-megjelenese-szerkeszto-stilusok.webp)

*A Stílusok oldalsáv a Betűkészlet, Színek, Háttér, Árnyékok, Elrendezés és Blokkok pontokkal* (https://minta-bolt.hu/wp-admin/site-editor.php?canvas=edit&p=%2Fwp_template%2Fwoocommerce%2Fwoocommerce%2F%2Fpage-cart)

A képen a **Stílusok** oldalsáv főmenüje látszik; a pontok mindegyike külön beállításokat nyit meg.

- **Betűkészlet:** a szöveg méretét, stílusát és megjelenését szabályozza, hogy a webhely egységes és áttekinthető legyen.
- **Színek:** a színpaletta kezelése. A színek a webhely arculatának fontos részei.
- **Háttér:** a webhely háttérszínét vagy háttérképét itt személyre szabhatod.
- **Árnyékok:** az árnyékhatások alapértelmezései.
- **Elrendezés:** a webhely alapelrendezése és a blokkok elrendezése. Itt állíthatod a tartalom szélességét, a méreteket és a blokkok közötti távolságot.
- **Blokkok:** egy blokktípus alapértelmezett stílusát egyszer adod meg, és az az egész webhelyen érvényes lesz, így gyorsan egységes megjelenést kapsz.

### Korábbi stílusok és alaphelyzet

A Stílusok oldalsáv tetején lévő **Revíziók** (óra) ikonnal visszaléphetsz a stílusok egy korábbi változatára. Ugyanitt visszaállíthatod az összes stílust a téma alapmegjelenésére, ha elölről szeretnéd kezdeni.

A WooCommerce-blokkok szerkesztéséről a [blokkok használatáról szóló fejezetben](https://hub.hellowp.io/hu/manuals/woocommerce/bolt-megjelenese/bolt-megjelenese-blokkok-hasznalata/) olvashatsz.