{"id":368921,"date":"2023-01-31T13:12:00","date_gmt":"2023-01-31T10:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368921"},"modified":"2023-01-31T13:12:00","modified_gmt":"2023-01-31T10:12:00","slug":"come-impostare-una-barra-di-notifica-di-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-impostare-una-barra-di-notifica-di-wordpress\/","title":{"rendered":"Come impostare una barra di notifica di WordPress"},"content":{"rendered":"\n

Ci sono molti diversi tipi di messaggi che potresti voler trasmettere sul tuo sito web. Ognuno di loro richiede un canale appropriato. Grandi scatole pop-up, banner promozionali e simili sono molto convenienti ma a volte potrebbero sembrare troppo invadenti. Inoltre, i visitatori del sito ne ottengono facilmente abbastanza, il che pu\u00f2 portare a frequenze di rimbalzo elevate. Se stai pensando a un modo elegante, discreto ma efficace per catturare l’attenzione dei tuoi visitatori e trasmettere un messaggio<\/strong>, una barra di notifica di WordPress potrebbe essere proprio quello che stai cercando.<\/p>\n

Barra di notifica: a cosa serve<\/h2>\n

La barra delle notifiche pu\u00f2 essere utilizzata per diversi scopi. Pu\u00f2 certamente aiutarti a indirizzare pi\u00f9 traffico verso pagine dedicate<\/strong>. Puoi usarlo per ampliare la tua lista di e-mail offrendo un abbonamento a una newsletter o condividendo informazioni a livello di sito<\/strong>.<\/p>\n

Pu\u00f2 essere molto utile se, ad esempio, hai un tema WP eCommerce<\/a>. Puoi visualizzare le informazioni sulla spedizione<\/strong> l\u00ec poich\u00e9 questo \u00e8 il tipo di informazioni che tutti i visitatori del tuo sito vogliono sicuramente conoscere. Troverai anche molto conveniente pubblicizzare una vendita o anche un nuovo prodotto<\/strong>. Anche visualizzare un codice promozionale<\/strong> in una barra di notifica \u00e8 un’ottima idea.<\/p>\n

\"Come<\/a><\/p>\n

Inoltre, puoi usarlo per condividere le tue informazioni di contatto<\/strong>. In questo modo, migliori la comunicazione con i visitatori del sito poich\u00e9 non devono aprire un’altra pagina solo per trovarla. E se aggiungi icone social nella barra<\/strong>, \u00e8 una ricetta collaudata per far crescere le tue connessioni ai social network.<\/p>\n

\"Come<\/a><\/p>\n

Qualsiasi tipo di sito Web pu\u00f2 beneficiare di una barra di notifica ben progettata. Pensa solo alle possibilit\u00e0. Potresti usarlo come banner CTA per invitare i visitatori del sito a iscriversi, registrarsi, cliccare per scaricare determinati materiali, fare un ordine speciale<\/strong> e simili.<\/p>\n

\"Come<\/a><\/p>\n

Ora, se il tuo tema WP non ha gi\u00e0 una barra delle notifiche, puoi facilmente configurarne una con uno dei plug-in della barra delle notifiche di WordPress.<\/p>\n

Imposta una barra di notifica utilizzando il plug-in della barra di notifica WPFront<\/h2>\n

\"Come<\/a><\/p>\n

WPFront<\/a> \u00e8 un plugin per la barra delle notifiche affidabile e pratico. \u00c8 molto popolare tra gli utenti di WordPress grazie alla sua semplicit\u00e0 ed efficacia. \u00c8 abbastanza facile da configurare e offre la giusta quantit\u00e0 di opzioni di personalizzazione<\/strong>. Dal momento che \u00e8 molto leggero, puoi essere certo che non rallenter\u00e0 il tuo sito Web o influir\u00e0 negativamente sulle sue prestazioni. Ora ti mostreremo come configurarlo in pochi passaggi<\/strong> e creare la barra di notifica perfetta per il tuo sito web.<\/p>\n

PASSAGGIO 1: Attivazione del plug-in della barra di notifica WPFront<\/h3>\n

Una volta installato il plugin, clicca su Impostazioni e poi su Barra di notifica nel menu a tendina.<\/p>\n

\"Come<\/a><\/p>\n

Cliccandoci sopra si apriranno tutte le impostazioni disponibili per la barra delle notifiche. La prima cosa da fare \u00e8, logicamente, selezionare la casella che dice Abilitato.<\/p>\n

\"Come<\/a><\/p>\n

Dopo aver abilitato la barra delle notifiche qui, sar\u00e0 visibile su tutte le pagine e potrai continuare a personalizzarla<\/strong>. Tutte le opzioni di personalizzazione sono mostrate in questa pagina.<\/p>\n

Noterai che la barra delle notifiche viene visualizzata come anteprima nel back-end nella pagina delle impostazioni della barra delle notifiche<\/strong>, il che \u00e8 molto comodo in quanto non devi andare avanti e indietro per controllare come appare sulla pagina live. Puoi vedere le tue personalizzazioni dal vivo e, una volta soddisfatto di ci\u00f2 che vedi, fare clic su Salva.<\/p>\n

PASSAGGIO 2: Impostazione della posizione della barra di notifica<\/h3>\n

\"Come<\/a><\/p>\n

Questo plug-in ti consente di scegliere la posizione in cui desideri visualizzare la barra delle notifiche<\/strong>: pu\u00f2 essere la parte superiore o inferiore della pagina<\/strong>. Nel caso in cui scegli la posizione in alto, puoi anche decidere quanto vicino al bordo superiore dello schermo vuoi che appaia la barra<\/strong> usando l’opzione Position Offset. Tuttavia, questo non \u00e8 possibile per la posizione inferiore.<\/p>\n

Per quanto riguarda il comportamento della barra puoi scegliere tra Fisso in Posizione<\/strong> e Visualizza su Scorri<\/strong>. Se scegli la prima opzione, la barra non sar\u00e0 influenzata dallo scorrimento della pagina, rimarr\u00e0 sempre nella stessa posizione<\/strong>. Se scegli la seconda opzione, la barra apparir\u00e0 quando scorri la pagina<\/strong>. Non sar\u00e0 immediatamente visibile e, in Scroll Offset<\/strong>, puoi scegliere dopo quanti pixel vuoi che venga visualizzato<\/strong>. Affinch\u00e9 l’opzione Visualizza su scorrimento funzioni, devi prima deselezionare Fisso in posizione<\/strong>! <\/p>\n

PASSAGGIO 3: Personalizzazione della barra di notifica<\/h3>\n

\"Come<\/a><\/p>\n

Puoi rendere la barra delle notifiche statica o animata<\/strong>. Puoi sceglierlo impostando la Durata dell’animazione<\/strong>. Se lo imposti su 0, l’animazione verr\u00e0 disattivata e la barra sar\u00e0 statica<\/strong>. Per animare la barra, inserisci quanto tempo impiegher\u00e0 l’animazione<\/strong>. Ad esempio, se lo imposti su 3 secondi, la barra apparir\u00e0 gradualmente durante i 3 secondi. L’animazione \u00e8 un bel modo per enfatizzare la barra in quanto la fa apparire gradualmente e quindi attira l’attenzione su di essa.<\/p>\n

Se non vuoi che la barra delle notifiche venga visualizzata subito dopo il caricamento della pagina, c’\u00e8 l’ opzione Visualizza dopo .<\/strong> Ti permette di impostare per quanto tempo dopo il caricamento della pagina desideri che la barra venga visualizzata<\/strong>.<\/p>\n

L’ opzione Chiusura automatica dopo<\/strong> consente di far scomparire la barra dopo un determinato periodo di tempo. Se la barra \u00e8 animata, si chiuder\u00e0 nello stesso modo in cui \u00e8 stata aperta, gradualmente.<\/p>\n

Quando si tratta delle opzioni che puoi visualizzare sulla barra di navigazione, hai il pulsante Visualizza Chiudi<\/strong> che consente al visitatore di chiudere la barra<\/strong> e il pulsante Visualizza Riapri<\/strong> che offre al visitatore la possibilit\u00e0 di riaprire la barra se necessario<\/strong>. Se questa opzione \u00e8 disabilitata, la barra non verr\u00e0 visualizzata fino a quando la pagina non verr\u00e0 ricaricata o non verr\u00e0 visualizzata affatto nel caso in cui l’opzione Mantieni chiuso<\/strong> \u00e8 abilitata. L’opzione Keep Closed For<\/strong> consente di impostare il tempo dopo il quale la barra verr\u00e0 visualizzata nuovamente.<\/p>\n

Per definire il contenuto del testo della barra<\/strong>, utilizzare il campo Testo<\/strong> del messaggio in cui inserire il testo che si desidera visualizzare nella barra. Inoltre, puoi modellarlo usando HTML. Non devi nemmeno essere particolarmente esperto in HTML.<\/p>\n

Se, ad esempio, desideri modificare la dimensione del carattere, dovrai semplicemente regolarla inserendo la dimensione desiderata nel campo Testo del messaggio<\/strong>. Aggiungerai questo testo nel campo:<\/p>\n

<span style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span>.<\/code><\/pre>\n
e l’unica cosa che dovresti cambiare qui \u00e8 il numero<\/strong>, che rappresenta la dimensione del carattere.<\/p>\n
\"Come<\/a><\/p>\n
Ora, se vuoi che un pulsante venga visualizzato accanto al testo nella barra<\/strong>, seleziona l’opzione Visualizza pulsante<\/strong>. Quindi inserisci il testo che desideri venga visualizzato nel campo Testo pulsante<\/strong>. Per quanto riguarda le funzioni del pulsante, \u00e8 possibile scegliere tra le seguenti opzioni:<\/strong><\/p>\n
\"Come<\/a><\/p>\n
Se si desidera che la barra smetta di essere visualizzata dopo che il visitatore ha fatto clic su di essa<\/strong>, \u00e8 possibile impostarla facilmente selezionando l’opzione Chiudi barra al clic del pulsante<\/strong>. Ci\u00f2 ha senso soprattutto se la notifica \u00e8 un pulsante CTA. Ad esempio, una volta che il visitatore fa clic sul pulsante Iscriviti alla nostra newsletter nella barra delle notifiche, viene reindirizzato alla pagina con i dettagli sull’iscrizione e la barra delle notifiche non viene pi\u00f9 visualizzata poich\u00e9 il suo scopo \u00e8 raggiunto.<\/p>\n
Se non vuoi che la tua barra di navigazione sia sempre visibile a tutti, puoi utilizzare una delle numerose opzioni di filtro<\/strong>. \u00c8 possibile impostare per quanto tempo si desidera visualizzare la barra impostando le date nei campi Data e ora di inizio e Data e ora di<\/strong> fine .<\/strong> Puoi anche selezionare su quali pagine desideri visualizzare la barra<\/strong> selezionando alcune delle opzioni dell’impostazione Visualizza su pagine<\/strong>.<\/p>\n
\"Come<\/a><\/p>\n
Quando si tratta di chi pu\u00f2 vedere la barra di navigazione, puoi renderla visibile solo a determinati utenti semplicemente spuntando le caselle nel campo Visualizza per Ruoli Utente<\/strong>.<\/p>\n
\"Come<\/a><\/p>\n
Design e colori<\/h4>\n
Il plug-in offre anche alcune fantastiche funzionalit\u00e0 per lo stile dell’aspetto della barra. Puoi regolare l’ altezza della barra<\/strong>, impostando il numero di pixel. Dal momento che questa barra dovrebbe essere attraente ma non grande<\/strong>, fai attenzione a non esagerare. Un’altra caratteristica interessante \u00e8 che puoi aggiungere un’ombra alla barra<\/strong>, selezionando l’ opzione Visualizza ombra .<\/strong><\/p>\n
\u00c8 interessante notare che non devi rendere la barra unicolore: hai la possibilit\u00e0 di impostare due colori e creare gradienti<\/strong>. Inoltre, puoi impostare il colore del testo e anche i colori per tutti i pulsanti.<\/strong><\/p>\n
\"Come<\/a><\/p>\n
Il plug-in WPFront Notification Bar consente inoltre di scrivere CSS aggiuntivi per modificare ulteriormente lo stile<\/strong>.<\/p>\n
Citiamo ora un paio di personalizzazioni CSS che vengono utilizzate abbastanza spesso, come ad esempio la modifica della dimensione del carattere. Ci\u00f2 che potrebbe confonderti \u00e8 che, quando modifichi la dimensione del carattere del testo del messaggio, potrebbe non essere allineato con il pulsante accanto ad esso. Questo pu\u00f2 essere facilmente risolto. Quando si cambia la dimensione del carattere, \u00e8 consigliabile definire la classe dell’elemento a cui assegneremo determinati valori<\/strong> :<\/p>\n
<span class=\"text-bar\" style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/code><\/pre>\n
Nel nostro esempio, la classe \u00e8 una barra di testo, puoi fare lo stesso per qualche altra classe.<\/p>\n
Lo descriveremo in questo modo in CSS:<\/p>\n
.text-bar {margin-bottom: 0px;}<\/code><\/pre>\n
In questo modo allineeremo il testo e il pulsante<\/strong>. Naturalmente, potrebbe essere necessario utilizzare un valore diverso. \u00c8 meglio ispezionare l’elemento desiderato<\/a> per scoprire il valore di cui hai bisogno. Puoi assegnare qualsiasi altra caratteristica alla classe a seconda di cosa vuoi cambiare.<\/p>\n
Un’altra caratteristica interessante \u00e8 che puoi anche regolare l’ombra, che per impostazione predefinita \u00e8 piuttosto scura. Puoi, ad esempio, regolarlo in questo modo e renderlo pi\u00f9 leggero:<\/p>\n
wpfront-bottom-shadow {box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);}<\/code><\/pre>\n
E non dimenticare: \u00e8 necessario fare clic su Salva dopo ogni modifica apportata affinch\u00e9 abbiano effettivamente effetto!<\/p>\n
Insomma<\/h2>\n
Se utilizzata correttamente, la barra di navigazione pu\u00f2 offrirti molti vantaggi. Sentiti libero di testarlo per scopi diversi. Abbiamo elencato solo alcune delle idee a cui ispirarti, ma siamo sicuri che puoi pensare a molti altri motivi per usarlo. Modellalo, personalizzalo e condividi la tua esperienza con noi!<\/p>\n
Fonte di registrazione:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Scopri cos’\u00e8 una barra di notifica di WordPress e impara come configurarla in modo rapido e semplice.<\/p>\n","protected":false},"author":1,"featured_media":363820,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[571],"tags":[846],"class_list":["post-368921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nozioni-di-base-su-wordpress","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/368921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=368921"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/368921\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/363820"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=368921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=368921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=368921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}