# Sablonok és dizájn

> A pénztársablonok kiválasztása, a logó, a címkestílus, a betűtípusok, a színek és az egyedi CSS beállítása.

A **CheckoutWC → Megjelenés** oldalon két fül van: a **Sablon** fülön választasz sablont, a **Dizájn** fülön a kiválasztott sablon külsejét igazítod a boltod arculatához.

## Sablonok

A **Sablon** fülön a sablonok előnézeti képei láthatók. Az aktív sablon alatt az **Aktív:** felirat és a sablon neve áll.

![A Megjelenés oldal Sablon füle az elérhető sablonokkal](./kepek/megjelenes-sablonok.webp)

*A Megjelenés oldal Sablon füle az elérhető sablonokkal* (https://minta-bolt.hu/wp-admin/admin.php?page=cfw-settings-appearance)

A képen a **Midas** az aktív sablon. A többi sablon (Copify, Futurist, Glass, Groove) mellett a zárolt állapotban **Váltás Premiumra a feloldáshoz** gomb látszik.

Az öt elérhető sablon:

- **Midas** (az alapértelmezett)
- **Copify**
- **Futurist**
- **Glass**
- **Groove**

Sablon kiválasztása érvényes licenccel:

1. Nyisd meg a **CheckoutWC → Megjelenés** oldalt.
2. Vidd az egeret a kiválasztott sablon fölé: megjelenik a sablon alján két gomb: az aktiváló gomb jobbra, az előnézeti gomb balra.
3. Az előnézeti gombbal a saját boltodban nézheted meg a sablont, az aktiválóval bekapcsolod.

Érdemes mindegyik sablont a saját boltodon is megnézni, mert a megjelenés a termékektől és a mezőktől is függ.

## Dizájn

A **Dizájn** fülön a beállítások szakaszokba vannak rendezve. A fül tetején lévő **Mezők keresése...** mezővel szűrheted a beállításokat.

![A Dizájn fül: általános sablonbeállítások, tipográfia, színek és egyedi CSS](./kepek/megjelenes-dizajn.webp)

*A Dizájn fül: általános sablonbeállítások, tipográfia, színek és egyedi CSS* (https://minta-bolt.hu/wp-admin/admin.php?page=cfw-settings-appearance&subpage=design)

A kép a teljes **Dizájn** fület mutatja: fent az általános beállítások, lent a színek és az egyedi CSS.

### Általános sablonbeállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Logó | A fejlécben megjelenő logó. A kép feltöltése nem kötelező: ha nincs logó, a webhely neve látszik helyette (**Beállítások → Általános**). | nincs logó |
| Mező címke stílusa | Az űrlapmezők feliratának megjelenése. **Lebegő (Ajánlott)**: a felirat a mező fölé úszik, ha van benne érték. **Normál**: a felirat mindig a mező fölött marad. | Lebegő |
| Footer Text | A lábléc szövege. Szerkesztője **WYSIWYG** vagy **HTML** módban használható. Ha üresen hagyod, szokásos szerzői jogi sor jelenik meg; ha egyetlen szóközt írsz bele, a lábléc üres marad. | üres |

### Tipográfia

A **Törzsszöveg betűtípusa** és a **Címsor betűtípusa** listában a beépített betűtípusok közül választhatsz. Az alapértelmezett mindkettőnél az **Inter**.

### Színek

A színeket színválasztóval vagy hexakóddal adhatod meg, a **Reset** gomb visszaállítja az alapértéket.

| Csoport | Beállítható színek |
| --- | --- |
| Törzs | Háttér, Szöveg, Link |
| Fejléc | Háttér, Szöveg |
| Lábléc | Háttér, Szöveg |
| Kosár összegzése | Háttér, Szöveg, Link, Mobil háttér, Mennyiségjelző buborék háttere, Mennyiségjelző buborék szövege |
| Breadcrumbok | Befejezett szöveg, Aktuális szöveg, Következő szöveg, valamint a három állapot kiemelőszíne |
| Gombok | Elsődleges háttér, szöveg és rámutatáskori háttér/szöveg; Másodlagos háttér, szöveg és rámutatáskori háttér/szöveg |

### CSS

Az **Egyedi CSS** mezőbe saját stílusokat írhatsz a pénztár külsejének finomhangolásához. A CSS-t közvetlenül írd be, nem kell `<style>` címkébe tenned.

A módosítások csak a **Módosítások mentése** gomb megnyomása után érvényesülnek.