Antete și subsoluri

Header-ul site-ului este secțiunea de sus a unei pagini web și conține de obicei elemente precum logo-ul, meniul, bara de căutare, butonul de autentificare/cont client etc. Footer-ul este afișat în partea de jos a paginii web și conține de obicei informații precum date de contact, linkuri, notificări legale și alte opțiuni.

Design header

Pentru a modifica designul header-ului, apasă pe Editare, apoi pe header. Următoarele opțiuni sunt disponibile în secțiunea Header din fila Personalizează a editorului de site:

  • Alege un Șablon din meniul derulant.

  • Selectează setările de Fundal pentru a schimba paleta de culori prin diferite stiluri de temă, opțiuni de culoare Personalizată și opțiuni Gradient.

  • Când adaugi o Margine la header, poți defini dimensiunea, stilul și culoarea acesteia.

  • Adaptează Colțurile rotunjite pentru a se potrivi cu designul.

  • Adaugă o Umbră și definește Culoarea, Deplasarea, Estomparea și Răspândirea acesteia.

  • Adaugă un Efect de derulare. Plasează cursorul pe un efect pentru a-l previzualiza.

  • Alege Poziția header-ului între Normal, Ascuns și Peste conținut. Când este selectat Peste conținut, poți personaliza Fundalul și Culoarea textului.

  • Afișează sau ascunde Elemente precum text, bara de căutare, butonul Autentificare, linkuri către rețele sociale, butonul Contactează-ne și logo-ul.

Pentru a finaliza modificările, apasă pe Salvează.

Sfat

Pentru a ascunde header-ul, apasă pe Editare, apoi pe header și mergi la fila Temă din editorul de site. Derulează până la secțiunea Avansat și comută butonul Afișează header pentru a ascunde/afișa header-ul.

Conținut header

Meniurile organizează conținutul header-ului și ajută utilizatorii să navigheze eficient prin paginile web. Meniurile prietenoase și bine structurate joacă un rol esențial în îmbunătățirea clasamentului în motoarele de căutare.

Adăugarea elementelor de meniu

Implicit, paginile sunt adăugate în meniu ca elemente de meniu derulant atunci când sunt create. Pentru a adăuga un element de meniu nou, urmați acești pași:

  1. Accesează Website ‣ Site ‣ Editor de meniuri.

  2. În editorul de meniuri, apasă Adaugă element de meniu.

  3. În fereastra pop-up, introdu Numele care va fi afișat în meniu.

  4. Scrie / în câmpul URL sau Email pentru a căuta o pagină pe site sau # pentru a căuta o ancoră personalizată existentă.

  5. Apasă OK.

  6. Editează structura meniului dacă este necesar, apoi apasă Salvează.

Mega-meniuri

Mega-meniurile sunt similare cu meniurile drop-down, dar în loc de o listă simplă de submeniuri, afișează un panou împărțit în grupuri de opțiuni de navigare. Acest lucru le face potrivite pentru site-urile cu mult conținut sau site-uri de e-commerce, deoarece pot ajuta la includerea tuturor paginilor web sau categoriilor de e-commerce în meniu, menținând totodată toate elementele de meniu vizibile simultan.

screenshot: website-header-footer-mega-menu
menu
(website)
shows
The website navigation bar with a mega menu dropped down over the page, showing its columns of links and images.
highlight
The opened mega menu (red frame).
data
Mega menu 'Services' with three columns.
module
website
notes
English UI, light theme, 1440px width.

Pentru a crea un mega meniu, accesați Site web ‣ Site ‣ Menu Editor și faceți clic pe Add Mega Menu Item. Introduceți Numele mega-meniului în fereastra pop-up, faceți clic pe OK, apoi pe Salvați.

Pentru a adapta opțiunile și conținutul mega-meniului, apasă pe un element de mega-meniu din header, apoi pe Editare. Mega-meniurile sunt compuse din blocuri de construcție, ceea ce înseamnă că poți personaliza fiecare componentă individual. De exemplu:

  • Editează textul direct în blocul de construcție.

  • Editează URL-ul unui element de meniu selectând elementul și apăsând butonul Editează linkul din fereastra mică de previzualizare. Scrie / pentru a căuta o pagină pe site sau # pentru a căuta o ancoră personalizată existentă.

    screenshot: website-header-footer-mega-menu-option
    menu
    Website ‣ Edit ‣ (mega menu)
    shows
    The editor's right sidebar for a selected mega menu with the Template and Size options.
    highlight
    The Template option (red frame).
    data
    Demo website 'My Website'.
    module
    website
    notes
    English UI, light theme, 1440px width.

  • Mută un element de meniu prin tragerea și plasarea blocului asociat în poziția dorită din mega-meniu.

  • Șterge un element de meniu ștergând blocul asociat.

Pentru a adapta aspectul general al mega-meniului, mergi la fila Personalizează din editorul de site, apoi, în secțiunea Mega-meniu:

  • Alege un Șablon.

  • Selectează Dimensiunea: fie Lățime completă, fie Îngust.

Pentru a finaliza modificările, apasă pe Salvează.

Megameniuri automate pe categorii

Menținerea unui megameniu sincronizat manual cu un arbore mare de categorii eCommerce este anevoioasă. Modulul Auto Category Mega Menu (website_sale_megamenu_category) generează conținutul unui megameniu din categoriile eCommerce.

Pe un element de megameniu din Editor Meniu, activați Generează automat megameniul și setați:

  • Categorie de pornire: categoria ai cărei copii sunt listați. Lăsați câmpul gol pentru a porni din vârful arborelui.

  • Adâncime: câte niveluri de subcategorii sunt incluse, implicit două.

  • Șablon de megameniu: aspectul folosit pentru a reda meniul generat.

Meniul este regenerat când arborele de categorii se modifică. Trei butoane îl controlează:

  • Regenerează: reconstruiește conținutul meniului din categorii;

  • Forțează regenerarea (renunță la modificări): îl reconstruiește chiar dacă meniul a fost editat manual, renunțând la acele modificări;

  • Detașează / fă manual: oprește generarea automată și păstrează conținutul curent ca megameniu obișnuit, editat manual.

screenshot: website-header-footer-auto-mega-menu
menu
Website ‣ Site ‣ Menu Editor ‣ (mega menu item)
shows
A mega menu item with Auto-generate mega menu enabled, the Starting category, Depth and Mega-menu template fields, and the Regenerate / Force regenerate / Detach buttons.
highlight
The Auto-generate mega menu checkbox and the Starting category field (red frame).
data
Starting category "Shop", depth 2, template "Columns".
module
website_sale_megamenu_category
notes
English UI, light theme, 1440px width.

Ce categorii apar în meniu se controlează chiar pe categorie. Fiecare categorie eCommerce are o stare Afișează în megameniu și o opțiune Gestionează automat vizibilitatea meniului: cât timp aceasta din urmă este activată, o sarcină programată ascunde categoriile care nu au în prezent niciun produs disponibil și le afișează din nou când au, astfel încât meniul să nu conducă niciodată la o pagină goală. Dezactivați opțiunea pe o categorie pentru a-i seta vizibilitatea manual.

Aspectele propriu-zise se gestionează în Site web ‣ Configurare ‣ Șabloane megameniu, unde fiecare șablon conține propriile XML, CSS și JS, împreună cu un Istoric de revizuiri care poate fi comparat și restaurat.

screenshot: website-header-footer-mega-menu-templates
menu
Website ‣ Configuration ‣ Mega Menu Templates ‣ (template)
shows
A mega menu template with its XML, CSS and JS tabs and the History section listing previous revisions with the Compare and Restore buttons.
highlight
The History section (red frame).
data
Template "Columns" with three revisions.
module
website_sale_megamenu_category
notes
English UI, light theme, 1440px width.

Notă

Meniurile generate sunt listate în Site web ‣ Configurare ‣ Megameniuri automate, ceea ce oferă o privire de ansamblu asupra fiecărui megameniu gestionat automat și asupra celor al căror conținut nu mai corespunde arborelui de categorii.

Ascunderea unui element dinamic de meniu pentru utilizatorii neautentificați

Pentru a ascunde un element dinamic de meniu (adică un element de meniu generat automat de Odoo, de exemplu când instalați o aplicație sau un modul, precum Events, Courses etc.) pentru utilizatorii neautentificați, urmați acești pași:

  1. Activați modul dezvoltator.

  2. Accesați Site web ‣ Configurare ‣ Meniuri.

  3. Extindeți lista de meniuri pentru site-ul relevant, dacă este necesar, apoi faceți clic pe elementul de meniu pe care doriți să îl ascundeți.

  4. În secțiunea Grupuri vizibile, faceți clic pe Adaugă o linie sub Nume grup.

  5. Căutați grupul Tipuri de utilizatori / Portal, selectați-l, apoi faceți clic pe Selectează.

  6. Salvează.

Sfat

Pentru a ascunde elementul de meniu Shop, restricționați accesul la magazinul online pentru utilizatorii autentificați.