Cum se adaugă o bară de top în WordPress cu elementor

O bară de top oferă o modalitate eficientă de a evidenția mesaje importante, promoții și apel la acțiune pe WordPress. Este poziționat în partea de sus a paginii web, cu scopul de a atrage atenția vizitatorilor fără a împiedica experiența de navigare a utilizatorilor.

O bară de top bine proiectată poate stimula semnificativ conversiile, deoarece poate atrage instantaneu atenția vizitatorilor și le poate ghida către acțiuni precum înscrierea la buletine informative, apucarea ofertelor de timp limitat și explorarea conținutului nou. Funcționează ca un memento persistent fără a deranja utilizatorii.

Adăugarea barelor de top la WordPress este foarte simplă cu Elementar. În acest articol, vom acoperi un ghid pas cu pas despre cum să adăugați o bară de top în WordPress cu Elementar. Rămâi cu noi până la sfârșit.

Ce este o bară de top?

O bară de sus este o secțiune orizontală îngustă afișată în partea de sus a unui site web deasupra antetului principal. Spre deosebire de pop-up-uri sau bannere, este folosit pentru a prezenta date de contact, descrieri de linkuri, anunțuri importante, oferte promoționale și mesaje. Puteți îmbunătăți implicarea utilizatorilor prin personalizări extinse, cum ar fi culorile, fonturile și butoanele specifice mărcii.

Bara de top nu este întotdeauna afișată în partea de sus a unui site web 24/7. În schimb, este de obicei prezentat în perioadele de campanie în scopuri promoționale. Este definit prin nume diferite în funcție de cazurile sale de utilizare. O vom discuta în secțiunea următoare. Continuați să citiți.

Cum se numește bara de top pe un site web?

Așa cum am spus în urmă cu doar un minut, bara de top de pe un site web este definită de diferite nume pe baza scopului și funcționalității sale. Aruncați o privire la câțiva termeni obișnuiți folosiți pentru bara de sus, care sunt enumerate mai jos.

• Bara de anunțuri - folosită pentru a împărtăși anunțuri, notificări de evenimente și actualizări importante.

• Bara de notificare- afișează oferte în timp limitat, știri de întreținere a sistemului și mesaje urgente.

• Promo Bar - evidențiază promoții speciale, reduceri exclusive și campanii pentru stimularea vânzărilor.

• Info Bar - Exponate numere de contact, detalii despre cumpărături, adrese locale și program de lucru.

• Sticky Bar - rămâne fixat în partea de sus a site -ului chiar și atunci când utilizatorii derulează postări și pagini.

• Bară plutitoare - se mișcă de -a lungul timpului când derulați postări și pagini pentru a asigura o prezență vizibilă.

Cum se adaugă o bară de top în WordPress cu elementor

Partea teoretică s -a terminat. Acum, vom acoperi partea tutorial din această secțiune, explicând un ghid pas cu pas despre cum să adăugați o bară de top în WordPress folosind Elementar.

Pre-cerință: Instalați Elementar sau HappyAddons

Pentru a crea o bară de top pe întregul site web, trebuie să aveți acces la Elementator Teme Builder, care este o caracteristică premium. Dacă doriți să utilizați versiunea premium a pluginului și căutați o opțiune gratuită, trebuie să încercați pluginul HappyAddons.

HappyAddons este de fapt un addon la pluginul Elementar cu multe caracteristici gratuite care sunt în mod normal premium în Elementar. De exemplu, HappyAddons are și un constructor de teme, care este destul de asemănător cu Elementar, dar este complet gratuit de utilizat.

Așadar, în această secțiune, vom folosi pluginul HappyAddons pentru a explica tutorialul. Instalați și activați următoarele pluginuri de pe site -ul dvs.

• Element
• Happyaddons

După ce sunt instalate și activate pe site -ul dvs., începeți să urmați tutorialul explicat mai jos. Vă vom arăta cum să creați o bară de top pe WordPress, precum cea pe care o puteți vedea în imaginea de mai jos.

Pasul 01: Mergeți la HappyAddons Theme Builder

Navigați la HappyAddons> Teme Builder . La fel ca pluginul Elementar, puteți crea un antet, un subsol, un șablon de postare pe blog și o pagină de arhivă cu constructorul de teme al pluginului HappyAddons.

Pasul 02: Accesați secțiunea antetului

Deoarece bara de sus este afișată în partea de sus a antetului web, trebuie să o personalizați din secțiunea antet. Deci, deschideți antetul cu opțiunea Editare cu Elementar.

Aflați cum să creați conținut off-canvas în Elementar.

Pasul 03: Adăugați un nou recipient deasupra antetului

Plecarea cursorului dvs. pe antet va arăta pictograma Plus (+) . Făcând clic pe această pictogramă vă va permite să adăugați un nou container în antetul de mai sus. Fă -o.

Pasul 04: Personalizați bara de sus și adăugați conținut

Trebuie să adăugați o culoare contrastantă pe fundalul barei de sus. Pentru a face acest lucru, faceți clic pe pictograma cu șase puncte de pe container> Accesați fila Style > Găsiți opțiunea Color > Selectați o culoare.

Adăugați widgetul editorului de text la secțiunea bare de sus. Acest lucru vă va permite să adăugați conținut de text la secțiune.

Sub editorul de text din bara laterală din dreapta, puteți scrie conținutul de text dorit care va fi afișat pe bara de sus în timp real.

Din opțiunea marcată de mai jos din secțiunea editor de text, puteți modifica culoarea și îndrăzneala textului pe care l-ați adăugat în bara de sus.

Puteți adăuga chiar spații între cuvinte și subliniați anumite cuvinte. Am făcut acest lucru la textul nostru pentru acest tutorial. Le puteți vedea mai jos.

HappyAddons vă permite să adăugați efecte de particule pe fundalul barei de sus. Efectul de particule fericite este o tehnică de animație vizuală în care particulele mici și strălucitoare se mișcă dinamic pe o pagină web, creând o experiență de utilizator plină de viață și antrenantă.

Pentru a adăuga acest lucru, navigați la stil> efecte de particule fericite . După aceea, comutați -vă pentru a activa fundalul de particule .

În continuare, puteți alege un stil de particule, o culoare particule, opacitate, numărul de particule, dimensiunea particulelor și viteza de mișcare . Sper că le poți face singur.

Am adăugat un clip scurt, astfel încât să puteți verifica cum funcționează caracteristica de particule fericite. Acest lucru face ca bara de top să fie atât de bună de arătat.

Extindeți secțiunea de frontieră . Puteți seta o lățime de frontieră și o culoare așa cum doriți. Cu toate acestea, credem că adăugarea unei frontiere nu este importantă pentru bara de sus. Deci, îl puteți evita.

Acum, extindeți secțiunea Divizor de formă . Opțiunea de divizor de formă vă permite să adăugați forme personalizabile și dinamice în partea de sus sau de jos a secțiunilor.

Cu toate acestea, această opțiune nu este importantă și pentru bara de sus. Deci, este mai bine să o evitați. Dar dacă doriți să adăugați această caracteristică în bara de sus, o puteți face.

Iată un ghid despre cum să creezi o pagină web infografică cu Elementar.

Pasul 05: Configurați setări avansate pentru bara de sus

În cele din urmă, vino la fila Advanced . Veți primi numeroase opțiuni aici pentru a personaliza marja, căptușeala, alinierea, ordinea, poziția, înălțimea, efectul de mișcare, receptivul și multe altele. Faceți singuri personalizări necesare.

Pasul 06: Ascundeți bara de sus pe un tip de dispozitiv

Puteți ascunde bara de sus pe orice dispozitiv respectiv pe care îl doriți. De exemplu, dorim să ascundem bara de sus pe dispozitivele de tabletă. Pentru a face acest lucru, extindeți secțiunea receptivă. Apoi, întrerupeți opțiunea modului dispozitiv în care doriți să ascundeți bara de sus.

Pasul 07: Faceți sensibilul BAR -ului de top să răspundă

Faceți clic pe opțiunea Mod Responsive din subsolul panoului Elementar. Apoi, selectați modul portret mobil .

Puteți vedea că conținutul barei de top apare în trei linii și nu este perfect aliniat, spre deosebire de modul în care îl vedeți în modul desktop.

Pentru a face textul să arate bine pentru dimensiunea ecranului, faceți personalizările de care aveți nevoie, rămânând în modul portret mobil.

Am aliniat textele central. Nu arată mai bine acum? Îl puteți personaliza și mai mult în orice mod doriți.

Pasul 08: Publicați/actualizați modificările

Când toate personalizările sunt făcute, faceți clic pe butonul Publicat/Actualizare din partea de jos a panoului Elementar pentru a păstra toate modificările.

Explorați cum să creați o cutie de lumină în WordPress cu Elementar.

Pasul 09: Previzualizați bara de sus pe site -ul web

Acum, vino pe frontendul site -ului tău. Veți vedea că bara de sus este afișată bine pe site -ul dvs.

Astfel, puteți crea cu ușurință o bară de sus pe WordPress folosind pluginul Elementar gratuit.

Gânduri finale

Sper că v -a plăcut acest tutorial. Dar pentru a obține tot ce este mai bun din bara de sus, există mai multe lucruri cheie pe care trebuie să le urmați cu atenție. Concentrați -vă pe menținerea unui design curat și atrăgător vizual, care se aliniază cu brandul site -ului dvs. web. Alegeți culori contrastante pentru lizibilitate, utilizați text clar și concis și păstrați mesajul relevant pentru publicul dvs.

În plus, optimizați -vă pentru reacția mobilă, astfel încât bara de sus să rămână funcțională pe toate dispozitivele fără a împiedica experiența utilizatorului. Evitați supraîncărcarea barei de sus cu prea multe informații, deoarece poate copleși vizitatorii. Dacă utilizați animații sau efecte, mențineți -le subtile pentru a menține profesionalismul.

Dacă mai aveți în minte confuzie sau întrebări, spuneți -ne despre ele prin caseta de comentarii de mai jos.