MagyarmagyarMegjelenés: az áruház színei
Az áruház színeinek és sarokkerekítésének beállítása: saját stílus, a sablonból öröklés vagy kézi testreszabás.
A Megjelenés oldalon CSS írása nélkül állíthatod be az áruház színeit: a boltét, a termékoldalét, a kosárét és a pénztárét. Három forrás közül választhatsz, és a jobb oldali élő előnézet azonnal mutatja a változást.
Az oldal megnyitása
Szekció neve “Az oldal megnyitása”- Nyisd meg a FluentCart Pro → Beállítások oldalt.
- A bal oldali menüben kattints az Áruház beállításai pontra, majd a Megjelenés almenüre.
Bal oldalon a Honnan származnak a színek és a sarokkerekítés rész áll a három kártyával, jobb oldalon a Webáruház előnézete: egy minta termékkártya, kosár és szállítási cím űrlap a kiválasztott színekkel.
Az áruház stílusa néhány globális színből, valamint a kártyák, gombok és beviteli mezők sarokkerekítéséből épül fel. A bolt, az egyes termékoldal, a kosár, a pénztár és a vásárlói fiók minden gombja, kerete, mezője és panelje ezek valamelyikét használja. Ha itt módosítasz egy értéket, minden oldalon frissül, ahol használják. A három kártya közül egyszerre csak egy lehet aktív.
1. A FluentCart saját stílusa
Szekció neve “1. A FluentCart saját stílusa”Ez az alapértelmezés. Az áruház megtartja az eredeti színeket és sarokkerekítést, és semmilyen kiegészítő stílus nem kerül az oldalakra. Akkor válaszd, ha elég a gyári megjelenés, vagy ha vissza akarsz állni a tiszta alaphelyzetre.
2. Öröklés az aktív sablonból
Szekció neve “2. Öröklés az aktív sablonból”Ezzel a kártyával az áruház a használt WordPress-sablon színeiből építi fel a saját palettáját. A FluentCart beolvassa a sablon színeit, és hozzárendeli a felületekhez, a szövegekhez, a kiemelő színhez és a gombokhoz. Azokat a köztes árnyalatokat, amelyeket a sablon nem ad meg (vonalak, elválasztók, halvány feliratok, rámutatáskor megjelenő árnyalatok, helyőrző szöveg), maga számolja ki. A gombfelirat színét a gomb színéhez mérten választja, így egy világos márkaszín mellett is olvasható marad a felirat. Ha később sablont váltasz, az áruház követi az új sablont.
A színek mellett a sablon sarokkerekítését is átveszi: a gombokét a sablon gombstílusából, a beviteli mezőkét a keresőmezőjéből. A termékkártyák megtartják a FluentCart saját sarkait.
Csak a színpaletta és a kerekítés öröklődik. A betűtípus, a térközök és az elrendezés változatlan marad.
Az előnézet azonnal frissül, így rögtön látod, átjöttek-e a sablon színei. Hogy mennyire pontos az eredmény, az attól függ, milyen színinformációt ad meg a sablon:
| Sablontípus | Hogyan olvassa be a FluentCart |
|---|---|
| Minden sablon, amely színpalettát ad át a WordPressnek: az összes blokksablon (teljes webhelyszerkesztős sablon) és a szerkesztőpalettát regisztráló klasszikus sablonok | A palettát olvassa be, és a gyakori szerepeket (alap, kontraszt, elsődleges, kiemelő) a saját színeihez rendeli. |
| Blokksablonok, amelyek a webhelyszerkesztőben gombszínt is megadnak, a rámutatásos állapottal együtt | A gombszíneket közvetlenül átveszi. |
| Astra, Blocksy, Kadence, Divi, GeneratePress és Bricks | A sablon saját beállításaiból közvetlenül olvassa ki a kiemelő, a szöveg-, a háttér- és a gombszíneket, így az admin előnézete és az éles áruház mindig egyezik. |
Ha a sablonod egyik csoportba sem tartozik, vagy nem akarsz a találgatásra hagyatkozni, válaszd a Testreszabás kártyát, és állítsd be a színeket kézzel.
3. Testreszabás
Szekció neve “3. Testreszabás”A Testreszabás kártya kinyílik, és húsz színválasztót mutat, csoportokba rendezve. Csak azok a színek kerülnek az áruházba, amelyeket beállítasz: az üresen hagyott választó a FluentCart alapszínét használja.
A kártyán a SZÖVEG, a HÁTTEREK ÉS KERETEK, a GOMBOK és az ŰRLAPMEZŐK csoport címe látszik, minden választónál egy „Hozzáadás…” mezővel. A csoportok és a színek hatása:
- Szöveg
- Elsődleges szöveg: a termékcímek, az árak és a címsorok színe.
- Másodlagos szöveg: a leírások, a feliratok és az inaktív menüpontok színe.
- Aktív szöveg: a pénztár kijelölt lépése és az aktív hivatkozások színe.
- Hátterek és keretek
- Elsődleges háttér: az aktív és kijelölt elemek mögötti márkaszín.
- Másodlagos háttér: a bolt rácsa és a pénztár összesítője mögötti halvány panelek színe.
- Szegély: a kártyák, beviteli mezők és finom vonalak színe.
- Aktív keret: a kijelölt változat vagy fizetési mód körvonala.
- Másodlagos aktív keret: a halványabb aktív körvonal a felugró pénztárban.
- Elválasztó: a sorok és szakaszok közötti világosabb vonalak színe.
- Kártya háttere: a termékkártyák és panelek felülete.
- Gombok
- Gomb háttere és Gomb szövege: a pénztári, az Azonnali vásárlás és a bolt többi elsődleges gombja.
- Gomb háttere rámutatáskor és Gomb szövege rámutatáskor: ugyanezek a gombok rámutatáskor.
- Másodlagos gomb háttér, Másodlagos gomb szöveg, Másodlagos gomb keret és Másodlagos gomb rámutatási állapota: a Kosárba teszem és a többi körvonalas gomb.
- Űrlapmezők
- Beviteli mező háttere, Beviteli szöveg, Helyőrző szöveg és Kikapcsolt beviteli mező háttere: a pénztár, a címűrlapok és a vásárlói fiók mezői.
A színt kétféleképpen adhatod meg: kattints a választó színmintájára, és válaszd ki látványosan, vagy írj be egy hexadecimális értéket (például #00009F) a szövegmezőbe. Az előnézet mentés előtt is frissül, amint az érték érvényes. Egyetlen szín törléséhez kattints a választó × jelére.
Az összes szín törléséhez kattints a színválasztók listája jobb felső sarkában lévő, körkörös nyilat ábrázoló ikonra. Ez minden választót üresre állít, mintha egyet sem állítottál volna be. A visszaállítás is csak mentés után lép életbe, mint az oldal minden más változtatása.
A színek alatt a SZEGÉLY LEKEREKÍTÉSE csoportban három felület sarokkerekítését adhatod meg:
| Beállítás | Mire hat |
|---|---|
| Kártya | a termékkártyák és a képeik sarkai |
| Gomb | a Kosárba teszem, a pénztári és a többi műveleti gomb |
| Űrlapmező | a szövegmezők, legördülő listák, szövegterületek és mennyiségmezők |
Pixelértékhez elég egy szám (például 8), de mértékegységgel is megadhatod (például 8px, 0.5rem vagy 1em). Az üresen hagyott mező a FluentCart alapértelmezett kerekítését használja.
Mentés
Szekció neve “Mentés”A változtatások alkalmazásához kattints a képernyő jobb felső sarkában a Mentés gombra. Az áruház a következő oldalbetöltéskor már az új színeket mutatja, a felugró pénztárat is beleértve, és a beállítások addig maradnak, amíg át nem írod őket.
Ha a beágyazott Stripe-pénztárral fogadsz kártyás fizetést, a Stripe fizetési űrlapja is átveszi a beviteli mező háttérszínét, a beviteli szöveg színét és az elsődleges háttérszínt, így nem lóg ki a márkázott pénztárból.
Az oldal az általános színeket állítja, amelyekből a többi felület örököl. Egyetlen elem átformázásához, illetve a térközök, a kerekítés és a betűtípus finomhangolásához továbbra is felülírhatod a FluentCart CSS-változóit. Amit ezen az oldalon beállítasz, ugyanezekként a változókként kerül az oldalra, így az egyéni CSS-ed ráépülhet.
Készült: