Cum să creați cu ușurință un meniu de navigare Elementor pe o pagină

Publicat: 2021-11-05

Este esențial să aveți o navigare solidă către site-ul dvs. Indiferent de faptul că site-ul dvs. are mai multe pagini sau are o singură pagină, trebuie să vă asigurați de navigarea corectă pe site.

În Elementor puteți crea cu ușurință un meniu de navigare cu mai multe pagini. Dar ce se întâmplă dacă aveți un site web cu o singură pagină și trebuie să creați un meniu.

În acest blog, vă vom arăta cum să creați cu ușurință Meniul de navigare Elementor One Page.

Înainte de a vă scufunda în ghid, să înțelegem procesul de lucru de bază al unui meniu de navigare de o pagină.

Cum funcționează de fapt meniul de navigare pe o pagină

What Is One Page Navigation Menu

Meniul de navigare pe o pagină se referă la un meniu de navigare simplu utilizat în principal pe un site web cu o singură pagină. Cu toate acestea, se mai numește și meniu de derulare pe o singură pagină pe care îl puteți afișa în ambele moduri Orizontal și Vertical.

Cu acest tip de meniu, puteți configura eficient navigarea conținutului pe o singură pagină. În acest fel, utilizatorii dvs. pot găsi cu ușurință informațiile necesare de pe site-ul dvs., mutând o secțiune în alta, în loc să redirecționeze către o altă pagină.

Puteți declanșa meniul în două moduri:

1. Faceți clic : puteți face clic pe elementele de meniu pentru afișarea conținutului de la o secțiune la alta.

Click One Page Navigation

2. Derulați : puteți utiliza funcția de defilare pentru a naviga prin conținutul site-ului dvs. web.

Scroll One Page Navigation Menu

Cum să adăugați meniul de navigare Elementor One Page

În următoarea parte a blogului nostru, veți afla cum să adăugați un meniu de navigare de o pagină pe site-ul dvs. web alimentat de Elementor.

Cerințe preliminare :

Pentru a utiliza uimitorul widget de navigare pe o pagină, aveți nevoie de următoarele lucruri:

  • Elementor (gratuit)
  • Suplimente fericite (gratuit)
  • Happy Addons Pro

Dacă sunteți nou la Elementor, consultați acest Ghid pas cu pas pentru începători.

Asigurați-vă că ați instalat și activat versiunea Happy Addons Free & Premium a site-ului dvs.

Pasul 1: Adăugați o pagină Widget Nav

Mai întâi trebuie să adăugați widgetul de navigare pe o pagină a Happy Addons. Puteți găsi widget-ul în galeria de widget-uri Elementor din partea stângă. Doar trageți și plasați widgetul în zona selectată a paginii site-ului dvs.

Add Happy Addons One Page Nav Widget

Pasul 2: Gestionați conținutul de navigare

După adăugarea widget-ului, ar trebui să adăugați și să gestionați conținutul meniului de navigare.

Conţinut

Secțiunea Conținut are trei setări diferite pe care le puteți utiliza pentru a adăuga elemente de meniu și pentru a seta alt conținut necesar de meniu. Sunt.

  1. Navigare
  2. Balon cu instrumente
  3. Setări
On Page Navigation Content

Definiți stilul de navigare

În zona Conținut–>Navigație , puteți selecta stilul de navigare din cele nouă liste diferite și puteți adăuga elemente din lista de navigare . De asemenea, setați Alinierea orizontală și Alinierea verticală pentru navigare.

Iată lista de stiluri de navigare pentru tine.

  1. Mod implicit
  2. Berta
  3. Hagos
  4. Magool
  5. Maxamed
  6. Shamso
  7. Ubax
  8. Xusni
  9. Zahi
Set Navigation Design

Setați primul meniu de navigare pe pagină

Pentru a seta meniul de navigare de o pagină, trebuie să copiați Elementele–> Id-ul secțiunii și să-l inserați în zona Avansat->Id - ul CSS . Deoarece este cea mai importantă setare, trebuie să vă asigurați că numele ID-ului secțiunii și ID-ul CSS trebuie să fie același.

Notă: De asemenea, puteți scrie diferite nume pentru a seta meniul de navigare.

Create one page navigation

Pasul 3: Personalizați meniul

Setați elementul de navigare

Puteți seta pictograma unui element de navigare. Și capabil să scrie titlul de navigare și titlul descrierii .

Set Navigation Item

Activați stilul personalizat

În funcție de scopul dvs., puteți adăuga un stil personalizat articolului dvs. de navigare individual . Deschideți mai întâi un articol și activați Activați stilul personalizat .

Acum puteți schimba culoarea conținutului, culoarea conținutului hover și culoarea conținutului activă a unui singur articol. Urmați imaginea de mai jos pentru a înțelege setarea.

Enable Custom Style

Balon cu instrumente

Puteți activa opțiunea Tooltip pentru a afișa un text al meniului dvs. individual ori de câte ori treceți cu mouse-ul peste el. Vizitați zona Content–> Tooltip și activați setarea. Puteți, de asemenea, să activați săgeata de tip Tooltip dacă doriți să o afișați. Urmați imaginea de mai jos pentru a înțelege cum funcționează.

Set Tooltip

Setarea conținutului

De asemenea, puteți muta o secțiune în altă secțiune folosind derularea mouse-ului. Pentru a face acest lucru, trebuie să mergeți la Conținut–>Setări . Aici veți găsi opțiunea Scroll Wheel . Doar activați setarea și acum puteți muta un meniu în altul.

Enable Scroll Wheel Option

De asemenea, puteți activa opțiunea Touch Swipe care funcționează numai pe dispozitivele mobile . Folosind această opțiune, puteți trece de la o secțiune la alta prin defilare.

Enable Touch Swipe

De asemenea, puteți activa opțiunea Taste de derulare și puteți seta Row To Offset și Viteza de defilare în opțiunea de setare.

Notă: Puteți utiliza tastele săgeți sus/jos de la tastatură pentru a derula la o anumită secțiune.

Pasul 4: Personalizați designul meniului

Dacă doriți să stilați meniul de navigare în felul dvs., puteți utiliza cu ușurință opțiunile de stil ale widget-ului. În zona Stil, veți avea trei opțiuni diferite pentru a vă reproiecta meniul.

  • Navigare
  • Conținut de navigație
  • Balon cu instrumente
Style On Page Navigation

Previzualizare finală a unei pagini de navigare Mneu

Dacă urmați toți pașii unul câte unul, atunci meniul dvs. de navigare pe o pagină arată ca imaginea de mai jos.

Final Preview

Citiți documentația completă pentru a obține o înțelegere puternică asupra tuturor opțiunilor de personalizare.

Sau consultați tutorialul video la îndemână al widget-ului de navigare pe o pagină de la Happy Addons.

Lasă-mă să verific toate widgeturile uimitoare Happy

Când ar trebui să includeți meniul de navigare pe o pagină pe site-ul dvs

Adesea vezi site-uri web care constau dintr-o singură pagină numită pagina de pornire. Proprietarul acestui site a pus tot conținutul necesar pe această singură pagină. Cu toate acestea, scopul acestui site web cu o singură pagină este ca vizitatorii dvs. să se concentreze asupra conținutului site-ului dvs.

Dar dacă nu setați un meniu de navigare adecvat pentru această singură pagină ca un site web obișnuit cu mai multe pagini, veți afecta site-ul dvs. experiența dvs. de utilizator. Pentru că utilizatorii tăi se pierd pe site-ul tău și au nevoie de mai mult timp pentru a obține conținutul tău.

Pentru a rezolva acest tip de problemă, trebuie să implementați un meniu de navigare de o pagină. În cele din urmă, vă ajută utilizatorii să sară între secțiunile conținutului site-ului dvs.

Iată câteva idei de site-uri web cu o singură pagină pentru tine.

  • Site-ul portofoliu
  • Site-ul paginii de destinație a produsului
  • Site-ul furnizorului de servicii digitale
  • Site-ul restaurantului
  • Site-ul galeriei foto

Notă: site-urile web enumerate mai sus pot avea, de asemenea, mai multe pagini.

Sunteți gata să explorați Meniul de navigare pe o pagină Elementor

Crearea unui meniu de navigare Elementor de o pagină nu este o sarcină dificilă dacă aveți instrumentul potrivit în mână.

În acest ghid, am acoperit cel mai simplu mod de a crea un meniu de defilare pe o singură pagină pe site-ul dvs. folosind Happy Addons. De asemenea, am discutat despre ce este un meniu de navigare de o pagină și când ar trebui să-l utilizați pentru site-ul dvs. web.

Dacă încă ești blocat și vrei să afli mai multe, ne poți scrie în secțiunea de comentarii.

De asemenea, vă rugăm să vă alăturați buletinului nostru informativ pentru a primi tutoriale și știri exclusive despre WordPress, Elementor și Happy Addons.

Aboneaza-te la newsletter-ul nostru

Obțineți cele mai recente știri și actualizări despre Elementor