Unde se găsesc aceste setări
Aceste setări sunt configurate pentru fiecare piață, iar în cadrul unei piețe afectează toate paginile deodată. Deschide builderul, alege o piață folosind fila piețelor (pictograma cu steagul țării) din bara laterală din stânga, apoi apasă pe fila Setări (pictograma roată dințată). Modificările se aplică pieței pe care ai selectat-o și devin active când apeși pe Publică. Pentru lista completă a fiecărei setări, consultă Ghidul de referință pentru setările builderului.
Scheme de culori
Storeep folosește o paletă de până la 9 scheme de culori. Fiecare secțiune, bloc și componentă din magazinul tău face referire la una dintre aceste scheme prin numărul ei (de la 1 la 9). Schimbarea culorilor unei scheme actualizează instantaneu fiecare secțiune care o folosește, în toate paginile.
Roluri de culoare în cadrul fiecărei scheme
Fiecare schemă definește următoarele roluri de culoare, toate setate ca valori hexazecimale:
- Fundal: culoarea principală de fundal a secțiunii.
- Fundal interior: un fundal cu o nuanță ușoară folosit pentru carduri și zone de conținut imbricate din interiorul secțiunii.
- Culoarea titlurilor: culoarea pentru textul titlurilor.
- Culoarea textului de corp: culoarea pentru textul paragrafelor.
- Culoarea textului evidențiat: o culoare de text accentuată, folosită pentru prețuri, insigne de economisire și valorile cronometrelor de numărătoare inversă. De regulă, tonul cel mai închis sau mai pronunțat din paletă.
- Culoarea linkurilor: culoarea implicită a hyperlinkurilor.
- Culoarea linkurilor la trecerea cursorului: culoarea hyperlinkului atunci când un cumpărător trece cursorul peste el.
- Culoarea bordurii: culoarea pentru bordurile elementelor și liniile despărțitoare.
- Culoarea conturului: culoarea pentru inelele de focus, evidențierile la selecția cu tastatura și contururile de accent care trebuie să iasă în evidență mai mult decât bordurile obișnuite.
- Culoarea umbrei: culoarea pentru umbrele casetelor (de obicei cu o anumită transparență).
- Fundalul butonului principal: culoarea de umplere pentru butoanele principale.
- Textul butonului principal: culoarea etichetei de pe butoanele principale.
- Bordura butonului principal: culoarea bordurii butoanelor principale.
- Fundalul butonului principal la trecerea cursorului: culoarea de umplere a butonului principal la trecerea cursorului.
- Textul butonului principal la trecerea cursorului: culoarea etichetei butonului principal la trecerea cursorului.
- Bordura butonului principal la trecerea cursorului: culoarea bordurii butonului principal la trecerea cursorului.
- Fundalul butonului secundar: culoarea de umplere pentru butoanele secundare.
- Textul butonului secundar: culoarea etichetei de pe butoanele secundare.
- Bordura butonului secundar: culoarea bordurii butoanelor secundare.
- Fundalul butonului secundar la trecerea cursorului: culoarea de umplere a butonului secundar la trecerea cursorului.
- Textul butonului secundar la trecerea cursorului: culoarea etichetei butonului secundar la trecerea cursorului.
- Bordura butonului secundar la trecerea cursorului: culoarea bordurii butonului secundar la trecerea cursorului.
- Fundalul câmpului de introducere: culoarea de fundal a câmpurilor de introducere din formular.
- Culoarea textului din câmpul de introducere: culoarea textului din interiorul câmpurilor de introducere din formular.
- Culoarea bordurii câmpului de introducere: culoarea bordurii câmpurilor de introducere din formular.
- Culoarea etichetei câmpului de introducere: culoarea textului etichetei de deasupra câmpurilor formularului.
- Fundalul câmpului de introducere la focus: culoarea de fundal a câmpului atunci când un cumpărător focalizează sau trece cursorul peste câmp.
Sfaturi pentru scheme de culori puternice
- Folosește o culoare deschisă, neutră pentru Fundal pe majoritatea secțiunilor și păstrează culorile pronunțate pentru o singură schemă de accent, folosită pe secțiunile hero și de îndemn la acțiune.
- Fă astfel încât Fundalul butonului principal să se distingă vizual de Fundalul secțiunii, deoarece butonul trebuie să iasă clar în evidență.
- Păstrează Fundalul interior ca o nuanță foarte ușoară a Fundalului principal, astfel încât fundalurile cardurilor să fie distincte fără a fi stridente.
- Țintește un contrast de cel puțin 4,5:1 între Culoarea textului de corp și Fundal, precum și între Textul butonului principal și Fundalul butonului principal.
Tipografie
Patru roluri de font controlează tipografia în fiecare pagină. Fiecare rol este asociat unei familii de fonturi din biblioteca disponibilă.
- Corp: fontul principal pentru textul paragrafelor și descrieri.
- Titlu: fontul pentru toate titlurile din întregul magazin.
- Subtitlu: fontul pentru titlurile secundare și subtitlurile secțiunilor, făcând legătura între stilul titlurilor și cel al corpului.
- Accent: un font stilistic pentru prețuri, insigne și evidențieri decorative.
Fonturile disponibile includ: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface și Acme.
Pentru magazinele cu conținut în arabă, fonturile sunt asociate automat cu echivalente arabe potrivite: de exemplu, Inter este asociat cu Cairo, iar Poppins cu Tajawal. Nu trebuie să selectezi separat fontul arab.
Lățimea paginii
Setarea globală Lățimea paginii controlează lățimea maximă a grilei principale de conținut, în pixeli. Secțiunile setate la lățimea Pagină sunt limitate la această valoare; secțiunile setate la Întreagă se întind întotdeauna pe toată zona vizibilă, indiferent de aceasta. Valori disponibile: 900, 1000, 1100, 1200 (implicit), 1300 și 1400 px. Pe ferestrele de vizualizare mai înguste decât lățimea selectată, secțiunile se micșorează automat pentru a umple 100% din ecran.
Logo
Logoul este setat în interiorul blocului de logo al secțiunii Antet și în interiorul blocului Despre noi din subsol. Apasă pe blocul de logo din panoul de control, apoi apasă pe + Adaugă media sau + Adaugă imagine pentru a încărca logoul de pe dispozitiv sau pentru a-l alege din biblioteca ta media. După încărcare, setează lățimea de afișare (20–300 px) și înălțimea (20–300 px); cealaltă dimensiune se scalează automat pentru a păstra raportul de aspect.
Favicon
Favicon-ul este setat în Setări → Branding în builder. Apasă pe câmpul favicon și încarcă o imagine (recomandat: o imagine pătrată). Favicon-ul apare în filele și marcajele browserului.
Imaginea de fundal a corpului
Tot în Setări → Branding: poți seta opțional o imagine de fundal pentru întreaga pagină. Configurează modul în care se scalează (Acoperire umple întreaga zonă vizibilă, Încadrare potrivește imaginea în interiorul acesteia) și dacă se repetă (în mozaic) sau rămâne o singură imagine în spatele conținutului care derulează.
CSS și JavaScript personalizat global
Pentru personalizări avansate pe care setările standard nu le pot realiza, secțiunea Setări oferă un câmp CSS global (până la 1.000 de caractere) și un câmp JS global (până la 1.000 de caractere). CSS-ul introdus aici este injectat în fiecare pagină a magazinului; JS-ul introdus aici rulează pe fiecare pagină. Folosește-le cu moderație și preferă secțiunea Cod personalizat pentru personalizări specifice unei pagini.