Antetul site-ului este un bloc prezent pe toate paginile site-ului. Practic, este primul lucru pe care îl observă un client atunci când caută informații despre magazin, așa că este important să faceți antetul atractiv din punct de vedere vizual și convenabil pentru vizitatorii site-ului.
Puteți configura structura și afișarea vizuală a acestui bloc în Website → Design → Editor de design→ bloc Header.
Setări disponibile
Secțiunea de setări a antetului conține mai multe file în care puteți configura poziționarea elementelor interfeței, stilul lor vizual și stilul vizual al blocurilor antetului.
Quantity badge
Indicatorii de cantitate arată numărul de produse afișate în elementele antetului, cum ar fi favoritele, lista de comparație și coșul.
În panoul Header Style, puteți configura fundalul pictogramei și culoarea numărului afișat în interiorul acesteia.
Cum să fixați antetul în timpul derulării
În prima filă Header Style, puteți fixa antetul în timpul derulării bifând caseta Sticky header.
Structura antetului — linii și secțiuni
În imaginea de mai jos, puteți vedea o reprezentare schematică a antetului de pe site în Cartum.
Antetul este format din trei linii orizontale, fiecare conținând mai multe secțiuni.
Secțiunile ocupă o anumită poziție în linie și sunt responsabile de alinierea componentelor din interior.
Liniile de sus și de jos conțin fiecare câte trei secțiuni. Linia principală conține patru secțiuni, dintre care una are înălțime dublă, permițând aranjarea elementelor pe două rânduri.
Pentru a înțelege mai bine cum arată liniile structurii, oferim un exemplu de antet real al unui site cu o suprapunere schematică a liniilor.
Setări de stil pentru linii
Pentru fiecare linie a antetului, puteți configura stilul vizual: înălțime, fundal, culoarea elementelor, spațiere (padding) etc. Toate setările disponibile pot fi văzute în fila corespunzătoare.
În capturile de ecran de mai jos, puteți vedea setările antetului pentru unul dintre designuri din galeria noastră de design. Acolo puteți găsi și alte opțiuni de aranjare a antetului.
Linia de mijloc a antetului
Aceasta este linia cea mai lată a antetului, unde sunt amplasate, de obicei, elemente mari — logo, ore de lucru, blocul de contact, coșul, câmpul de căutare etc.
Se configurează în Design Editor → Header → fila Main section.
Linia de sus a antetului
Se configurează în Design Editor → Header → fila Top section.
Linia de jos a antetului
Se configurează în Design Editor → Header → fila Bottom section.
Configurarea elementelor interfeței în structura antetului
Puteți include și exclude elemente ale interfeței în antet, precum și să le schimbați poziționarea în antet în Editor de design → Header, în fila Header layout .
Aici oferim un exemplu de poziționare a elementelor care corespunde antetului din exemplu. Unele elemente sunt excluse și nu vor fi afișate.
Particularitățile secțiunilor centrale ale liniei de mijloc a antetului
Elementele plasate în secțiunea dublă se vor alinia la marginea stângă, iar cele inserate în diferite părți ale secțiunii duble sunt aranjate pe două rânduri, unul sub altul.
Elementele dintr-o singură secțiune centrală se vor alinia pe centru.
Mutarea și includerea elementelor
Dacă doriți să schimbați poziționarea unui anumit element în antet, pur și simplu trageți-l în secțiunea dorită și salvați modificările.
Notă: După schimbarea poziționării unui element în antet, este posibil să fie nevoie să ajustați și stilul de afișare al acestuia pentru a se potrivi mai bine cu noua poziție.
Stilul elementelor interfeței în antet
În editorul de design, puteți schimba stilul de afișare al unui element. Pentru fiecare element al antetului sunt disponibile setări suplimentare, care pot fi accesate prin extinderea panoului acestuia.
Lista tuturor elementelor posibile din antetul site-ului
Mai multe exemple de diferite aranjări ale antetului, designuri vizuale ale liniilor și poziționări ale elementelor pot fi văzute în Galeria de design.
Toate elementele disponibile ale antetului site-ului:
Navigation Menu — navigare prin paginile cu informații de serviciu ale magazinului
Social Media — bloc de linkuri către conturile dvs. de social media; puteți adăuga un cont în Website → Social media
Language Selector — schimbă limba site-ului
Currency Selector — disponibil dacă pe site sunt configurate monede diferite; puteți adăuga o monedă în Produse → Ratele de schimb
Compare Icon — mergeți la pagina de comparare a produselor
Favorites Icon — mergeți la pagina cu produsele adăugate la favorite
User menu — meniul contului personal al clientului
Logotype — puteți adăuga un logo în Setări → Setări generale → Logouri
Catalog Navigation Menu — meniu de navigare prin paginile catalogului cu produse
Slogan — text scurt în antetul magazinului; puteți adăuga un slogan în Setări → Setări generale → Informații despre magazin
Contact Information Icon — blocul de contact completat în Setări → Setări generale → Informații de contact
Business hours table — programul de lucru al magazinului, completat în Setări → Setări generale → Informații de contact
Shopping cart — mergeți la coșul cu produse
Search icon — casetă de căutare a site-ului
Antetul site-ului în versiunea mobilă
Afișarea vizuală și poziționarea elementelor în antetul versiunii mobile se configurează separat