Cum să creați o bară de alertă în WordPress (3 moduri ușoare)

Doriți să adăugați o bară de alertă pe site-ul dvs. WordPress?

O bară de alertă sau o bară de notificare este o modalitate excelentă de a informa vizitatorii despre actualizări importante, oferte speciale, lansări de produse noi și multe altele.

În acest articol, îți vom arăta cum să creezi o bară de alertă în WordPress cu 3 soluții simple.

De ce să creați o bară de alertă în WordPress?

O bară de alertă este o modalitate excelentă de a informa vizitatorii despre ceva important pe site-ul dvs. Acesta ar putea fi un eveniment de vânzare în curs, o actualizare a programului dvs. de funcționare sau modificări ale serviciilor dvs.

Puteți folosi, de asemenea, o bară de alertă pentru a informa vizitatorii despre o ofertă specială, cum ar fi o ofertă de tipul cumperi unul, primești unul gratis. Aceasta este o opțiune excelentă dacă administrezi un magazin online.

Utilizarea unei bare de alertă este mai bună decât simpla plasare a unui anunț pe pagina dvs. de pornire. Bara dvs. de alertă poate apărea proeminent chiar în partea de sus a fiecărei pagini de pe întregul site.

Este ușor să creați o bară de alertă în WordPress. Vom analiza metodele care utilizează cele mai bune pluginuri pentru bara de notificări și o metodă manuală folosind cod HTML și CSS. Pur și simplu faceți clic pe linkurile de mai jos pentru a sări direct la fiecare opțiune:

• Metoda 1: Crearea unei bare de alertă folosind OptinMonster
• Metoda 2: Crearea unei bare de alertă folosind Thrive Leads
• Metoda 3: Crearea manuală a unei bare de alertă folosind HTML/CSS personalizat
• Bonus: Adăugați mesaje de alertă personalizate pe paginile WordPress

Metoda 1: Crearea unei bare de alertă folosind OptinMonster

OptinMonster este cel mai bun software de optimizare a conversiilor și de generare de lead-uri de pe piață. Vă ajută să convertiți mai mulți vizitatori ai site-ului în abonați și clienți.

OptinMonster oferă un constructor de campanii drag-and-drop. Acesta vine cu pop-up-uri frumoase de tip lightbox, covorașe de bun venit, cronometre și alte suprapuneri dinamice care vă ajută să creșteți numărul de abonați și vânzările pe site-ul dvs.

Puteți folosi, de asemenea, OptinMonster pentru a crea o bară de alertă pentru site-ul dvs. web. Șabloanele lor predefinite fac foarte ușor să creați o bară de alertă care arată grozav în câteva minute.

Mai întâi, trebuie să vizitați site-ul OptinMonster și să vă înregistrați pentru un cont. Veți avea nevoie cel puțin de planul Basic, deoarece include tipul de campanie Floating Bar.

Apoi, trebuie să instalați și să activați pluginul OptinMonster WordPress. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

Acest plugin vă permite să conectați site-ul dvs. WordPress la software-ul OptinMonster.

La activare, vei vedea ecranul de bun venit și expertul de configurare. Apasă pe butonul „Conectează-ți contul existent”.

În continuare, se va deschide o nouă fereastră în care va trebui să conectați site-ul dvs. WordPress la OptinMonster.

Pur și simplu faceți clic pe butonul „Conectare la WordPress” pentru a continua.

Acum puteți urma instrucțiunile de pe ecran pentru a vă conecta contul OptinMonster.

Apoi, accesați pur și simplu OptinMonster » Campanii în tabloul de bord WordPress. Apăsați butonul „Creați prima campanie”.

Aceasta va deschide constructorul de campanii OptinMonster.

De aici, trebuie să selectați „Bara de plutire” ca Tip de campanie pentru a crea o bară de alertă.

Apoi, veți vedea o selecție de șabloane de campanii. Alegeți un șablon pe care doriți să îl utilizați.

Trebuie doar să duceți mouse-ul peste el și să faceți clic pe butonul „Utilizează șablonul” pentru a-l selecta. Vom folosi șablonul Coupon Code Promo pentru bara noastră de alertă.

Apoi, vi se va cere să dați un nume șablonului dvs. Odată ce ați numit campania, pur și simplu faceți clic pe butonul „Începeți crearea”.

Acum, veți vedea editorul campaniei. Aici puteți proiecta bara de alertă.

OptinMonster oferă diferite blocuri pe care le puteți trage și plasa pur și simplu pe șablon. De exemplu, puteți adăuga o imagine, text, buton și multe altele la bara de alertă.

Veți vedea că bara de alertă apare implicit în partea de jos a ecranului.

Pentru a o muta în partea de sus a ecranului, trebuie să faceți clic pe „Setări bară flotantă” în partea stângă. Apoi, pur și simplu faceți clic pe glisor pentru a muta bara flotantă în partea de sus a paginii.

Pentru a schimba textul de pe bara de plutire, pur și simplu faceți clic pe zona pe care doriți să o schimbați și tastați orice text doriți.

De asemenea, puteți schimba fontul, dimensiunea și culoarea textului și multe altele.

Pentru a modifica setările cronometrului, selectați pur și simplu cronometrul.

Apoi, introduceți data și ora dorite de încheiere. OptinMonster vă permite, de asemenea, să alegeți tipul de numărătoare inversă. Puteți selecta tipul „Static” dacă doriți să afișați un cronometru standard cu data și ora de încheiere specificate.

Pe de altă parte, există un tip „Dinamic” de numărătoare inversă. Cronometrul va funcționa pe baza comportamentului fiecărui utilizator pe site-ul dvs. Numărătoarea inversă este setată separat pentru fiecare vizitator al site-ului dvs. web.

Odată ce sunteți mulțumit de designul barei de alertă, nu uitați să apăsați butonul „Salvare” din partea de sus a ecranului.

Apoi, trebuie să accesați fila „Reguli de afișare” pentru a selecta când și unde va fi afișată bara de alertă pe site-ul dvs. Regula implicită este ca bara de alertă să fie afișată după ce vizitatorul a petrecut 5 secunde pe pagină.

Vom schimba acest lucru la 0 secunde, astfel încât bara de alertă să apară instantaneu. Pentru a face acest lucru, pur și simplu schimbați valoarea „sec” la 0.

Pe lângă acestea, puteți selecta și unde va apărea bara de alertă. Puteți folosi setarea implicită, care este „calea URL curentă este orice pagină”. Astfel, bara dvs. de alertă va apărea pe toate paginile site-ului dvs. WordPress.

Apoi, faceți clic pe butonul „Pasul următor” pentru a modifica setările de acțiune. Puteți lăsa setările „afișează vizualizarea campaniei” ca Optin și puteți selecta dacă doriți să redați un efect sonor atunci când apare bara de alertă.

După ce ați făcut modificările, faceți clic pe butonul „Pasul următor” încă o dată.

Aici, veți vedea un rezumat al regulilor dvs. de afișare. Puteți face editări și modificări finale la campania barei de alertă.

Odată ce sunteți mulțumit, pur și simplu faceți clic pe butonul „Salvare” din partea de sus a ecranului.

După aceea, puteți accesa fila Publicare din partea de sus și puteți schimba Starea publicării în „Publică”. Odată ce ați terminat, va trebui să faceți clic pe butonul „Salvare” și să închideți constructorul de campanii.

Apoi, veți vedea Setările de ieșire ale campaniei.

Ultimul pas este activarea campaniei pe site-ul dvs. web. Pur și simplu schimbați Starea din „În așteptare” în „Publicat”.

Nu uitați să faceți clic pe butonul „Salvați modificările” când ați terminat.

Acum, vizitați pur și simplu orice pagină de pe site-ul dvs. web și veți vedea campania dvs. în acțiune.

Metoda 2: Crearea unei bare de alertă folosind Thrive Leads

O altă modalitate prin care puteți adăuga bare de alertă pe site-ul dvs. WordPress este prin utilizarea Thrive Leads. Acesta face parte din suita Thrive Themes și vă ajută să generați lead-uri prin bare de alertă, lightboxes, pop-up-uri slide-in și multe altele.

Mai întâi, va trebui să vizitați site-ul web Thrive Themes și să vă înregistrați pentru un cont. Pur și simplu faceți clic pe butonul „Start Now” pentru a începe.

Apoi, va trebui să instalați și să activați pluginul Thrive Product Manager pe site-ul dumneavoastră. Pentru mai multe detalii, consultați ghidul nostru despre cum să instalați un plugin WordPress.

Puteți găsi pluginul Thrive Product Manager în zona contului dvs.

După ce ați instalat pluginul, accesați pur și simplu pagina Manager Produs din zona de administrare WordPress.

De aici, continuați și faceți clic pe butonul „Autentificare în contul meu”.

După ce te-ai autentificat în contul tău, vei vedea diferite plugin-uri și instrumente oferite de Thrive Themes.

Pur și simplu selectați pluginul Thrive Leads și apoi faceți clic pe butonul „Instalează produsele selectate” din partea de jos.

Când Thrive Leads este gata de utilizare, veți vedea un mesaj de succes.

Apoi puteți face clic pe butonul „Mergi la tabloul de bord Thrive Themes”.

Apoi, va trebui să accesați Thrive Dashboard » Thrive Leads din panoul de administrare WordPress.

Lângă antetul Grupuri de lead-uri, faceți clic pe butonul „Adăugare nou”.

După aceea, se va deschide o fereastră pop-up.

Poți introduce un nume pentru noul tău grup de lead-uri și să dai clic pe butonul „Adaugă Grup de Lead-uri”.

Apoi, va trebui să creați un nou formular de înscriere.

Continuați și faceți clic pe butonul „Adăugați un nou tip de formular de înscriere”.

După aceea, Thrive Leads vă va cere să selectați un tip de formular.

Puteți selecta tipul „Panglică” pentru a adăuga o bară de alertă pe site-ul dvs.

După adăugarea tipului de formular de abonare Panglică, va trebui acum să adăugați un formular.

Pur și simplu faceți clic pe opțiunea „Adăugați un formular” sub Grupuri de lead-uri.

Pe ecranul următor, puteți alege oricare dintre formularele dvs. existente.

Deoarece este prima dată când creați un formular, faceți clic pe butonul „Creare formular”.

Acum, veți vedea o fereastră pop-up apărând pe ecran.

Puteți introduce un nume pentru formularul dvs. și faceți clic pe butonul „Creare formular”.

Formularul dvs. va fi adăugat în grupul de lead-uri Ribbon.

Pentru a edita designul formularului, faceți clic pe pictograma creion.

Apoi, Thrive Leads va afișa mai multe șabloane din care puteți alege.

Pur și simplu selectați un șablon și apăsați butonul „Alegeți șablonul” din partea de jos.

Aceasta va lansa constructorul vizual cu o previzualizare live, unde puteți personaliza bara de alertă.

De exemplu, puteți selecta textul din șablon și îl puteți modifica conform nevoilor dumneavoastră. Sau faceți clic pe imaginea din bara de alertă și modificați-o.

După ce ați terminat editarea, faceți clic pe butonul „Salvare lucrare” din partea de jos.

Acum puteți închide editorul vizual și puteți reveni la setările formularului. Aici veți vedea opțiuni pentru setarea declanșatorului barei de alertă, frecvența de afișare și poziția.

În mod implicit, bara de alertă va apărea în partea de sus la încărcarea unei pagini. Cu toate acestea, puteți modifica aceste setări.

De exemplu, dacă faceți clic pe opțiunea Trigger, veți vedea mai multe opțiuni, cum ar fi afișarea barei de alertă după un anumit timp, când un utilizator derulează o anumită cantitate, sau când un utilizator ajunge la sfârșitul paginii.

Pe lângă asta, poți schimba și frecvența de afișare. Bara de alertă va apărea tot timpul implicit pentru toți utilizatorii.

Cu toate acestea, poți edita acest lucru și afișa bara ta de alertă aceluiași vizitator după un anumit număr de zile.

În continuare, puteți reveni la pagina Thrive Leads din tabloul de bord WordPress.

După aceea, pur și simplu faceți clic pe pictograma rotiță pentru a deschide Setările de afișare.

De aici, puteți alege pe ce postări și pagini va apărea bara de alertă.

De exemplu, îl puteți afișa doar pe pagina principală sau puteți alege toate postările și paginile. Există, de asemenea, o opțiune de a exclude anumite pagini și postări de la afișarea mesajului dvs. de alertă.

Când ați terminat, pur și simplu faceți clic pe butonul „Salvează și închide”.

Ultimul pas este să faceți clic pe comutatoare pentru a afișa bara de alertă pe dispozitive desktop și mobile.

Odată ce acest lucru este gata, bara dvs. de alertă este acum pregătită să colecteze adresele de e-mail ale utilizatorilor și să vă construiască lista de e-mail.

Puteți vizita site-ul dvs. pentru a-l vedea în acțiune.

Puteți vedea recenzia noastră completă Thrive Themes pentru mai multe detalii.

Metoda 3: Crearea manuală a unei bare de alertă folosind HTML/CSS personalizat

Ce se întâmplă dacă nu vrei să folosești OptinMonster sau Thrive Leads? În această metodă, îți vom arăta cum să creezi o bară de notificări folosind cod HTML și CSS.

Mai întâi, va trebui să copiați următorul cod CSS personalizat pentru bara de alertă:

<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>

O modalitate ușoară de a adăuga cod CSS pe site-ul dvs. web este prin utilizarea WPCode. Este cel mai bun plugin de fragmente de cod pentru WordPress care vă ajută să adăugați cod personalizat pe site-ul dvs. web.

Notă: WPCode este unul dintre pluginurile proprii ale WPBeginner. L-am creat pentru a facilita adăugarea de scripturi, cod HTML și multe altele pe paginile site-ului dvs. web. Vine cu funcționalități precum o bibliotecă încorporată de fragmente de cod, logică condițională, pixeli de conversie și multe altele.

Mai întâi, va trebui să instalați și să activați pluginul gratuit WPCode. Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum se instalează un plugin WordPress.

După activare, trebuie să accesați Fragmente de cod » + Adăugați fragment din tabloul de bord WordPress și să selectați opțiunea „Adăugați propriul cod personalizat (Fragment nou)”.

După aceea, introduceți un titlu pentru fragmentul dvs. în partea de sus și lipiți codul CSS în zona de previzualizare a codului.

Va trebui, de asemenea, să schimbați Tipul de cod la opțiunea „Fragment CSS”.

Apoi, puteți derula în jos la secțiunea Inserare. Aici puteți alege unde va rula codul.

Deoarece dorim ca bara de alertă să apară pe întregul site web, puteți utiliza metoda implicită „Inserare automată”. De asemenea, puteți păstra setarea „Rulează peste tot”.

După ce s-a terminat, puteți face clic pe butonul „Salvează fragment” din partea de sus.

Va trebui, de asemenea, să faceți clic pe comutatorul pentru a activa codul.

După aceea, accesați Snippete de cod » Anteturi & Subsol în tabloul de bord de administrare WordPress.

Pur și simplu copiați și lipiți următoarea linie de cod HTML în caseta „Antet”:

<div class="alertbar">We are currently closed due to Covid-10.</div>

Iată cum ar trebui să arate acel cod în caseta „Antet” din WPCode:

Puteți schimba textul alertei cu orice altceva doriți. Nu uitați să faceți clic pe butonul „Salvează modificările” din partea de sus a paginii odată ce ați terminat.

Acum, puteți vizita blogul dvs. WordPress pentru a vedea bara de alertă. Aceasta ar trebui să apară în partea de sus a fiecărei pagini, astfel:

Sfat: În anumite teme WordPress, bara de alertă poate suprapune meniul. Puteți modifica înălțimea barei la 40px sau 30px pentru a evita acest lucru. Va trebui, de asemenea, să reduceți înălțimea liniei în mod corespunzător, astfel încât textul dvs. să rămână centrat vertical în bară.

Bonus: Adăugați mesaje de alertă personalizate pe paginile WordPress

Dacă doriți să adăugați mesaje personalizate de alertă în diferite părți ale site-ului dvs. web, cum ar fi paginile de produse, paginile de finalizare a comenzii și paginile magazinului, atunci puteți folosi SeedProd. Este cel mai bun constructor de site-uri web și constructor de pagini de destinație pentru WordPress.

Pluginul oferă un constructor drag-and-drop pentru a crea o temă personalizată și pagini web fără a edita cod. Oferă, de asemenea, un bloc de alertă pe care îl puteți plasa oriunde pe site-ul dvs.

Acest bloc de alertă poate avertiza clienții că stocul dvs. se epuizează, anumite articole sunt la reducere sau alte avertismente sensibile la timp.

Puteți adăuga pur și simplu blocul Alertă pe pagina dvs. și apoi adăugați un titlu și o descriere. Pluginul vă permite, de asemenea, să adăugați conținut dinamic, care vă permite să inserați date și alți parametri de interogare.

Există, de asemenea, mai multe opțiuni de personalizare pentru blocul de Alertă. De exemplu, puteți schimba alinierea acestuia, ajusta dimensiunea fontului și edita pictograma.

Pentru a afla mai multe despre utilizarea SeedProd, poți consulta acest ghid despre cum să creezi pagini personalizate în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să creați o bară de alertă în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cei mai buni constructori de pagini drag and drop pentru WordPress pentru a vă ajuta să vă personalizați mai mult site-ul și cele mai bune pluginuri WooCommerce pentru a crește vânzările magazinului dvs.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.