​​Cum să personalizați meniul Elementor Nav și widgetul Elementor Portfolio (tutorial)

Doriți să îmbunătățiți experiența utilizatorului site-ului dvs. WordPress cu un design profitabil? Ești exact la locul potrivit dacă această întrebare plutește în mintea ta.

Călătoria utilizatorului începe doar după ce intră pe site-ul tău web. Ce se întâmplă dacă vizitatorii dvs. găsesc site-ul dvs. neorganizat sau complex? Cu siguranță, site-ul tău va avea o impresie proastă, iar utilizatorii nu vor putea găsi conținutul lor preferat.

61% dintre utilizatori încearcă un alt site dacă nu găsesc rapid ceea ce caută.

Google

Deci, ce v-ar putea ajuta să vă dezvoltați structura site-ului web pentru o experiență de utilizator mai bună?

În postarea tutorialului de astăzi, vom arăta cum puteți îmbunătăți experiența utilizatorului site-ului dvs. utilizând meniul Nav și widgetul Portofoliu de pe site-ul dvs. Elementor.

Să începem cu widgetul Elementor Nav Menu .

Ce este Elementor Nav Menu?

Meniul de navigare sau meniul de navigare este un segment de site web care prezintă împreună link-urile importante pe care se poate face clic. Dacă utilizatorii intră pe site, pot face clic pe fiecare link pentru a găsi conținutul lor preferat pe site. Meniul Nav poate fi prezentat în diferite moduri. Cum ar fi orizontal, vertical și drop-down .

În funcție de șablonul site-ului dvs., puteți alege oricare dintre ele. Dar vă recomandăm să utilizați cel mai compatibil care se potrivește cu designul site-ului dvs.

Iată o mostră din meniul curent al Happy Addons. Arată grozav și simplu. Încercați să păstrați meniul site-ului dvs. ca acesta și incluzând link-uri foarte importante.

Cum funcționează meniul Elementor Nav (Tipuri de meniu de navigare)

Știm că widgetul Elementor Nav Menu are trei tipuri de modele pe care le puteți folosi pe site-ul dvs. WordPress. La fel ca și alte widget-uri ale Elementor, widget-ul meniului de navigare este, de asemenea, ușor de implementat și total flexibil. Nici măcar nu trebuie să utilizați extensii terță parte pentru a aplica acest widget.

Pe lângă aceste trei tipuri de aspect, puteți adăuga indicatoare și animații, personalizare premeditată a meniului, submeniu, receptivitate mobilă și așa mai departe.

Să discutăm una câte una și să vedem cum funcționează pe orice site WordPress:

Meniu Nav orizontal

Folosind acest model, meniul va fi extins pe orizontală din partea stângă la partea dreaptă. Acest aspect de design este special pentru utilizatorii care doresc să-și păstreze site-ul web simplu și îngrijit. Cum ar fi pentru profesioniști, persoane publice, portaluri de știri și alte tipuri de site-uri web Elementor.

Meniu Nav vertical

La fel ca meniul orizontal, meniul vertical extinde meniul de sus în jos. Acest aspect arată grozav și la modă și simplu. Puteți aplica acest aspect pe site-ul dvs. Elementor dacă site-ul dvs. reprezintă imobiliare, educație sau orice agenție online.

Aflați mai multe: Cum să creați o pagină de destinație cu mare conversie pentru afaceri online

Meniu derulant de navigare

Pare vertical, dar meniurile se vor deschide după ce faceți clic pe butonul drop-down. Puteți folosi acest aspect simplu, dar cu aspect grozav, dacă doriți să păstrați spațiu în secțiunea antet. Suficient spațiu oferă utilizatorilor o vedere frumoasă a site-ului web, inclusiv sigla, textul antetului, butoanele sociale și multe altele.

Puteți utiliza acest model de design dacă aveți un site web de portofoliu, un site web de pasiune, muzică sau un site web personal. Iată un exemplu pe care îl puteți vedea.

Cum să adăugați un meniu în Elementor

Mai jos vă arătăm procesul pas cu pas pentru a adăuga meniul Elementor nav pe site-ul dvs. WordPress.

Cerințe preliminare

• Site WordPress
• Elementor (GRATIS)
• Elementor (Pro)

Să presupunem că aveți un site WordPress existent. Și ați instalat atât Elementor FREE, cât și versiunea Pro. Meniul de navigare este o caracteristică premium. Deci, trebuie să cumpărați pachetul pro înainte de a utiliza acest widget.

Pasul unu: deschideți o pagină nouă

• Selectați pânza Elementor și faceți clic pe butonul „ Editați cu Elementor ”.

Pasul doi: Adăugați o secțiune

• Pe măsură ce ați selectat Elementor Canvas , veți obține o interfață nouă. Pentru a face acest lucru, faceți clic pe butonul roșu (+) . Și apoi alegeți secțiunea preferată pe care doriți să o utilizați. În cazul nostru, am selectat al doilea model.

• După selectarea celui de-al doilea model, puteți vedea cele două secțiuni în partea de sus a ecranului.

• Acum căutați widgetul „Nav Menu” în bara de căutare Elementor.

• După ce l-ați găsit, trageți și plasați widgetul în secțiunea care vă place. Vă recomandăm să-l lipiți în partea dreaptă a secțiunii.

• Odată ce adăugați meniul în secțiune, acesta va apărea imediat.

În cazul în care nu știți cum să creați un meniu în WordPress, consultați ghidul aici.

Pasul trei: Personalizați meniul Nav

Ei bine, sunteți gata să personalizați meniul site-ului dvs. În această personalizare, puteți utiliza trei părți cruciale.

• Conţinut
• Stil
• Avansat

Personalizarea conținutului

În conținut, puteți găsi două opțiuni. Layout și Wrapper link . Acum atingeți butonul Aspect . Veți găsi toate opțiunile de personalizare aferente pentru designul meniului dvs.

• Meniu : selectați meniul pe care l-ați creat pe site-ul dvs. WordPress.
• Aspect : Sunt disponibile trei tipuri de layout. Orizontală, verticală și verticală.
• Aliniere : pentru a modifica alinierea meniului.
• Indicator : Adăugați-le pentru a face meniul mai frumos. Cum ar fi subliniat, supraliniu, încadrat, text etc.
• Animație : Cu ea puteți adăuga animații în meniu. Cum ar fi fade in-out, Shrink in-out și multe altele.
• Meniul derulant al modului : verificați dacă designul dvs. răspunde sau nu la mobil.

• Să vedem cum puteți adăuga un aspect pe acest widget

• În același mod, puteți aplica animație pe widget.

Personalizare stil

După personalizarea inițială, puteți stiliza meniul. Pentru asta, atingeți butonul Stil . Și veți găsi două opțiuni – Meniu principal; Meniu derulant .

• Să vedem cum puteți adăuga rapid funcțiile widget-ului dvs. de meniu de navigare Elementor. Aici puteți schimba culoarea textului, lățimea, umplutura, umplutura verticală și spațiul.

• Pentru a anunța culori pe mouse, faceți clic pe hover și modificați culorile preferate pe care doriți să le adăugați.

Caracteristici avansate

Cu funcțiile avansate, puteți face mai mult cu designul dvs. actual. Cum ar fi efectele de mișcare, fundalul, efectul de chenar, mascarea, poziționarea, capacitatea de răspuns, CSS personalizat și multe altele.

• După ce ați terminat cu întregul design, faceți clic pe butonul Publicare . Și meniul tău de navigare Elementor va fi mai jos:

Așadar, puteți adăuga widget-ul meniului Nav pe site-ul dvs. Elementor. Am încercat doar să arătăm cum funcționează caracteristica și să o aplicăm în design. Acum este rândul tău să le aplici unul câte unul.

Cu toate acestea, dacă doriți să obțineți un ghid detaliat, iată videoclipul pe care îl puteți vedea acum.

Ce mai puteți adăuga cu Meniul Elementor Nav?

• Subliniați animațiile
• Animații de fundal
• Animații text
• Spațierea și alinierea meniurilor
• Culoare, fundal și tipografie
• Și altele

Prin urmare, utilizând aceste funcții, puteți îmbunătăți structura meniului WordPress și îi puteți oferi un aspect standard. Dar amintește-ți; încercați să le implementați urmând pașii corespunzători. De exemplu, puteți încerca unul câte unul pe serverul local. Odată ce confirmați designul final, aplicați-l pe site-ul dvs. live. Încercați să practicați această regulă dacă nu doriți să descompuneți formarea șablonului site-ului dvs.

Sfat bonus: Vă prezentăm Widget-ul Mega Meniu Happy Addons

Pe lângă combinarea acestor funcții în meniul site-ului dvs. web, puteți adăuga funcții mai avansate folosind widget-ul mega meniu Happy Addons. Puteți crea mega meniuri precum dribble, InVision, Bobbi Brown, Adidas, Puma, Evernote și multe altele din imaginația voastră.

De asemenea, puteți adăuga pictograme personalizate, insigne și meniul implicit WordPress pe site-ul dvs. și puteți ajuta să le faceți mai frumoase pentru utilizatorii dvs.

Iată un scurt tutorial pe care îl puteți verifica pentru a afla despre widgetul de meniu Happy Addons Mega.

Pentru a obține un ghid detaliat, puteți consulta și documentația oficială pentru a afla cum funcționează acest widget și procesul de aplicare.

Cum să vă personalizați site-ul WordPress folosind Elementor Portfolio Widget

Aici vom vorbi despre o altă caracteristică premium a Elementor – widget-ul de portofoliu . După ce vă personalizați meniul de navigare Elementor, puteți înfrumuseța aspectul site-ului dvs. aplicând widget-ul portofoliu. Acest widget vă ajută să vă afișați postările, paginile și tipurile de postări personalizate într-o grilă atractivă, filtrabilă. Pentru a finaliza procesul este nevoie de doar câțiva pași. Deci, puteți utiliza cu ușurință utilizarea acestui widget pe site-ul dvs.

Cu toate acestea, să vedem cum să adăugați un portofoliu cu Elementor. Presupunem că aveți deja un site web de portofoliu creat cu Elementor. Dacă nu, puteți consulta articolul pentru a afla cum să creați un site web de portofoliu folosind Elementor.

Pasul unu: creați o pagină

Mai întâi de toate, deschideți o pagină în care doriți să adăugați un widget de portofoliu. Apoi faceți clic pe Editare cu Elementor .

După aceea, pânza de design se va deschide. În felul în care ați adăugat widget-ul meniu de navigare Elementor, în mod similar, puteți adăuga acest widget.

Pasul doi: Adăugați widgetul pentru portofoliu

Căutați widgetul Portofoliu în bara de căutare și trageți-l pe pânză.

Notă : widgetul Portofoliu funcționează NUMAI cu postări, pagini și tipuri de postări personalizate. Widgetul Portofoliu NU funcționează cu Galeriile.

Pasul trei: personalizați widgetul Portofoliu

După ce adăugați widget-ul, postările dvs. vor apărea automat pe ecran.

Întreaga personalizare constă din trei părți. Conținut, stil și avans .

Conţinut

• Coloane: setați numărul de coloane afișate în widget
• Număr de postări: setați cantitatea exactă de postări care vor fi afișate în widget
• Dimensiunea imaginii: setați dimensiunea imaginilor
• Raport articole: setați raportul articolelor
• Afișare titlu: alegeți dacă doriți să afișați sau să ascundeți titlul. Titlul se va afișa în timp ce treceți cu mouse-ul peste imagini
• Etichetă HTML pentru titlu: împachetați titlul cu o etichetă, fie H1…H6, span, div sau paragraf

• Bara de filtrare : setați dacă să afișați sau să ascundeți bara de filtrare deasupra portofoliului. Alegeți taxonomia din care să afișați postările. Opțiunile includ: Categorii, Etichete și orice taxonomii personalizate de tip de postare

• Interogare : Selectați sursa din care widget-ul va afișa conținutul. Opțiunile includ postări, pagini, tipuri de postări personalizate, dacă sunt disponibile, selecție manuală, interogare curentă și conexe.

Stil

• Distanța articolului : setați distanța exactă între elemente
• Rows Gap : Setați distanța exactă între rândurile de articole
• Raza chenarului: Setați raza chenarului pentru imagini pentru a controla rotunjimea colțului
• Culoare de fundal : setați culoarea de fundal a suprapunerii atunci când treceți cu mouse-ul peste imagine
• Culoare : setați culoarea titlului postării. Titlul apare în suprapunere atunci când treceți cu mouse-ul peste imagine
• Tipografie : personalizați tipografia titlului
• Culoare : setați culoarea textului barei de filtrare
• Culoare activă : setați culoarea pentru textul activ al barei de filtrare
• Tipografie : personalizați tipografia textului barei de filtrare
• Spațiu între elemente : setați spațiul dintre elemente în bara de filtre
• Spațiere filtru : setați distanța dintre bara de filtru și imagini

Caracteristici avansate

Puteți adăuga câteva caracteristici avansate la designul dvs. Cum ar fi marjă, umplutură, Z-Index, CSS, efecte de mișcare, fundal, chenar, mascare, atribute și multe altele.

Deci, după personalizarea tuturor setărilor designului dvs., iată cum va arăta pe site-ul dvs. live.

Cu toate acestea, dacă doriți să adăugați un tutorial mai detaliat, puteți consulta următorul tutorial video.

Câteva întrebări frecvente referitoare la Meniul Elementor și Widgetul Portofoliu

Concluzie

Crearea unui meniu pentru site-ul web necesită multă muncă și răbdare. Dar platforma open-source precum WordPress ne face mai ușor. Resursele disponibile, pluginurile, documentația și alte tutoriale scurte ar putea ajuta cu ușurință pe oricine să-și construiască și să-și personalizeze site-urile.

Cu toate acestea, există mai multe moduri de a crea un meniu și un site portofoliu WordPress personalizat. Puteți să o faceți manual sau să urmați procesul pe care l-am arătat mai sus. Dar vă recomandăm să evitați procesul manual. Vă poate rupe structura site-ului dacă nu aveți suficientă experiență în designul site-ului.

Pentru a vă automatiza procesul și a reduce efortul inutil, widget-ul meniului de navigare Elementor ar putea fi alegerea finală. Și widget-ul portofoliu vă poate ajuta să vă reproiectați site-ul făcând paginile dvs. web mai profitabile și mai atractive.

Dacă doriți să vă îmbunătățiți experiența de proiectare a site-ului Elementor la nivelul următor, puteți utiliza Happy Addons . Este o colecție de diverse funcții și widget-uri Elementor. Folosind-le corect, puteți îmbogăți un aspect profesional într-un timp scurt.