{"id":368934,"date":"2023-01-31T13:01:00","date_gmt":"2023-01-31T10:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368934"},"modified":"2023-01-31T13:11:57","modified_gmt":"2023-01-31T10:11:57","slug":"como-configurar-uma-barra-de-notificacao-do-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-configurar-uma-barra-de-notificacao-do-wordpress\/","title":{"rendered":"Como configurar uma barra de notifica\u00e7\u00e3o do WordPress"},"content":{"rendered":"\n

Existem muitos tipos diferentes de mensagens que voc\u00ea pode querer transmitir em seu site. Cada um deles requer um canal apropriado. Grandes caixas pop-up, banners promocionais e similares s\u00e3o muito convenientes, mas \u00e0s vezes podem parecer muito insistentes. Al\u00e9m disso, os visitantes do site facilmente obt\u00eam o suficiente deles, o que pode levar a altas taxas de rejei\u00e7\u00e3o. Se voc\u00ea est\u00e1 pensando em uma maneira elegante, discreta e eficaz de capturar a aten\u00e7\u00e3o de seus visitantes e transmitir uma mensagem<\/strong>, uma barra de notifica\u00e7\u00e3o do WordPress pode ser exatamente o que voc\u00ea est\u00e1 procurando.<\/p>\n

Barra de notifica\u00e7\u00e3o – para que serve<\/h2>\n

A barra de notifica\u00e7\u00e3o pode ser usada para v\u00e1rias finalidades. Certamente pode ajud\u00e1-lo a direcionar mais tr\u00e1fego para p\u00e1ginas dedicadas<\/strong>. Voc\u00ea pode us\u00e1-lo para aumentar sua lista de e-mail oferecendo uma assinatura de boletim informativo ou compartilhar informa\u00e7\u00f5es em todo o site<\/strong>.<\/p>\n

Pode ser muito ben\u00e9fico se, por exemplo, voc\u00ea tiver um tema WP de com\u00e9rcio eletr\u00f4nico<\/a>. Voc\u00ea pode exibir informa\u00e7\u00f5es de envio<\/strong> l\u00e1, pois esse \u00e9 o tipo de informa\u00e7\u00e3o que todos os visitantes do seu site certamente desejam saber. Voc\u00ea tamb\u00e9m achar\u00e1 muito conveniente anunciar uma venda ou um novo produto<\/strong>. Exibir um c\u00f3digo promocional<\/strong> em uma barra de notifica\u00e7\u00e3o tamb\u00e9m \u00e9 uma \u00f3tima ideia.<\/p>\n

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

Al\u00e9m disso, voc\u00ea pode us\u00e1-lo para compartilhar suas informa\u00e7\u00f5es de contato<\/strong>. Dessa forma, voc\u00ea est\u00e1 aprimorando a comunica\u00e7\u00e3o com os visitantes do site, pois eles n\u00e3o precisam abrir outra p\u00e1gina apenas para encontr\u00e1-la. E se voc\u00ea adicionar \u00edcones sociais na barra<\/strong>, \u00e9 uma receita comprovada para aumentar suas conex\u00f5es de rede social.<\/p>\n

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

Qualquer tipo de site pode se beneficiar de uma barra de notifica\u00e7\u00e3o bem projetada. Basta pensar nas possibilidades. Voc\u00ea pode us\u00e1-lo como um banner de CTA para convidar os visitantes do site a se inscrever, se registrar, clicar para baixar determinado material, fazer um pedido especial<\/strong> e similares.<\/p>\n

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

Agora, se o seu tema WP ainda n\u00e3o tiver uma barra de notifica\u00e7\u00e3o, voc\u00ea pode facilmente configurar uma com um dos plugins da barra de notifica\u00e7\u00e3o do WordPress.<\/p>\n

Definir uma barra de notifica\u00e7\u00e3o usando o plug-in da barra de notifica\u00e7\u00e3o WPFront<\/h2>\n

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

WPFront<\/a> \u00e9 um plugin de barra de notifica\u00e7\u00e3o confi\u00e1vel e pr\u00e1tico. \u00c9 muito popular entre os usu\u00e1rios do WordPress gra\u00e7as \u00e0 sua simplicidade e efic\u00e1cia. \u00c9 bastante f\u00e1cil de configurar e oferece a quantidade certa de op\u00e7\u00f5es de personaliza\u00e7\u00e3o<\/strong>. Por ser muito leve, voc\u00ea pode ter certeza de que n\u00e3o deixar\u00e1 seu site lento nem afetar\u00e1 seu desempenho de forma negativa. Agora, mostraremos como configur\u00e1-lo em apenas algumas etapas<\/strong> e criar a barra de notifica\u00e7\u00e3o perfeita para o seu site.<\/p>\n

PASSO 1: Ativando o plug-in da barra de notifica\u00e7\u00e3o WPFront<\/h3>\n

Depois de instalar o plug-in, clique em Configura\u00e7\u00f5es e depois em Barra de notifica\u00e7\u00e3o no menu suspenso.<\/p>\n

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

Clicar nele abrir\u00e1 todas as configura\u00e7\u00f5es dispon\u00edveis para a barra de notifica\u00e7\u00e3o. A primeira coisa a fazer \u00e9, logicamente, marcar a caixa que diz Ativado.<\/p>\n

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

Depois de ativar a barra de notifica\u00e7\u00e3o aqui, ela ficar\u00e1 vis\u00edvel em todas as p\u00e1ginas e voc\u00ea poder\u00e1 continuar a personaliz\u00e1-la<\/strong>. Todas as op\u00e7\u00f5es de personaliza\u00e7\u00e3o s\u00e3o mostradas nesta p\u00e1gina.<\/p>\n

Voc\u00ea notar\u00e1 que a barra de notifica\u00e7\u00e3o aparece como uma visualiza\u00e7\u00e3o no back-end na p\u00e1gina de configura\u00e7\u00f5es da barra de notifica\u00e7\u00e3o<\/strong>, o que \u00e9 muito conveniente, pois voc\u00ea n\u00e3o precisa ir e voltar para verificar a apar\u00eancia na p\u00e1gina ativa. Voc\u00ea pode ver suas personaliza\u00e7\u00f5es ao vivo e, quando estiver satisfeito com o que v\u00ea, clique em Salvar.<\/p>\n

PASSO 2: Configurando a Posi\u00e7\u00e3o da Barra de Notifica\u00e7\u00e3o<\/h3>\n

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

Este plugin permite que voc\u00ea escolha o local onde deseja exibir sua barra de notifica\u00e7\u00e3o<\/strong> \u2013 pode ser a parte superior ou inferior da p\u00e1gina<\/strong>. Caso opte pela posi\u00e7\u00e3o superior, voc\u00ea tamb\u00e9m pode decidir a que dist\u00e2ncia da borda superior da tela deseja que a barra apare\u00e7a<\/strong> usando a op\u00e7\u00e3o Deslocamento de posi\u00e7\u00e3o. No entanto, isso n\u00e3o \u00e9 poss\u00edvel para a posi\u00e7\u00e3o inferior.<\/p>\n

Quanto ao comportamento da barra, voc\u00ea pode escolher entre Fixed at Position<\/strong> e Display on Scroll<\/strong>. Se voc\u00ea escolher a primeira op\u00e7\u00e3o, a barra n\u00e3o ser\u00e1 influenciada pela rolagem da p\u00e1gina, ela permanecer\u00e1 sempre na mesma posi\u00e7\u00e3o<\/strong>. Se voc\u00ea escolher a segunda op\u00e7\u00e3o, a barra aparecer\u00e1 quando voc\u00ea rolar a p\u00e1gina<\/strong>. Ele n\u00e3o ficar\u00e1 vis\u00edvel imediatamente e, em Deslocamento de rolagem<\/strong>, voc\u00ea poder\u00e1 escolher depois de quantos pixels deseja que ele apare\u00e7a<\/strong>. Para que a op\u00e7\u00e3o Display on Scroll funcione, voc\u00ea deve desmarcar a op\u00e7\u00e3o Fixed at Position primeiro<\/strong>! <\/p>\n

PASSO 3: Personalizando a Barra de Notifica\u00e7\u00e3o<\/h3>\n

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

Voc\u00ea pode tornar sua barra de notifica\u00e7\u00e3o est\u00e1tica ou animada<\/strong>. Voc\u00ea escolhe isso definindo a dura\u00e7\u00e3o da anima\u00e7\u00e3o<\/strong>. Se voc\u00ea definir como 0, a anima\u00e7\u00e3o ser\u00e1 desativada e a barra ficar\u00e1 est\u00e1tica<\/strong>. Para animar a barra, insira quanto tempo a anima\u00e7\u00e3o levar\u00e1<\/strong>. Por exemplo, se voc\u00ea definir para 3 segundos, a barra aparecer\u00e1 gradualmente durante os 3 segundos. A anima\u00e7\u00e3o \u00e9 uma boa maneira de enfatizar a barra, pois ela aparece gradualmente e, assim, chama a aten\u00e7\u00e3o para ela.<\/p>\n

Se voc\u00ea n\u00e3o quiser que sua barra de notifica\u00e7\u00e3o seja exibida imediatamente ap\u00f3s o carregamento da p\u00e1gina, existe a op\u00e7\u00e3o Exibir ap\u00f3s<\/strong>. Ele permite que voc\u00ea defina quanto tempo ap\u00f3s o carregamento da p\u00e1gina voc\u00ea deseja que a barra apare\u00e7a<\/strong>.<\/p>\n

A op\u00e7\u00e3o Auto Close After<\/strong> permite que voc\u00ea fa\u00e7a a barra desaparecer ap\u00f3s um determinado per\u00edodo de tempo. Se a barra estiver animada, ela fechar\u00e1 da mesma forma que abriu \u2013 gradualmente.<\/p>\n

Quando se trata das op\u00e7\u00f5es que voc\u00ea pode exibir na barra de navega\u00e7\u00e3o, voc\u00ea tem o bot\u00e3o Exibir Fechar<\/strong>, que permite ao visitante fechar a barra<\/strong>, e o bot\u00e3o Exibir Reabrir<\/strong>, que d\u00e1 ao visitante a chance de reabrir a barra, se necess\u00e1rio<\/strong>. Se esta op\u00e7\u00e3o estiver desabilitada, a barra n\u00e3o aparecer\u00e1 at\u00e9 que a p\u00e1gina seja recarregada ou n\u00e3o aparecer\u00e1 caso a op\u00e7\u00e3o Manter Fechado<\/strong> esteja habilitada. A op\u00e7\u00e3o Manter fechado por<\/strong> permite definir o tempo ap\u00f3s o qual a barra aparecer\u00e1 novamente.<\/p>\n

Para definir o conte\u00fado de texto da barra<\/strong>, use o campo Texto da mensagem<\/strong> onde voc\u00ea insere o texto que deseja que seja exibido na barra. Al\u00e9m disso, voc\u00ea pode estiliz\u00e1-lo usando HTML. Voc\u00ea nem precisa ser particularmente habilidoso em HTML.<\/p>\n

Se, por exemplo, voc\u00ea deseja alterar o tamanho da fonte, basta ajust\u00e1-lo digitando o tamanho desejado no campo Texto da mensagem<\/strong>. Voc\u00ea adicionar\u00e1 este texto no campo:<\/p>\n

<span style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span>.<\/code><\/pre>\n
e a \u00fanica coisa que voc\u00ea deve alterar aqui \u00e9 o n\u00famero<\/strong>, que representa o tamanho da fonte.<\/p>\n
\"Como<\/a><\/p>\n
Agora, se voc\u00ea deseja que um bot\u00e3o seja exibido ao lado do texto na barra<\/strong>, marque a op\u00e7\u00e3o Exibir bot\u00e3o<\/strong>. Em seguida, insira o texto que deseja exibir no campo Texto do bot\u00e3o<\/strong>. Quanto \u00e0s fun\u00e7\u00f5es do bot\u00e3o, voc\u00ea pode escolher entre as seguintes op\u00e7\u00f5es:<\/strong><\/p>\n
\"Como<\/a><\/p>\n
Se voc\u00ea quiser que a barra pare de aparecer depois que o visitante clicar nela<\/strong>, voc\u00ea pode configurar isso facilmente marcando a op\u00e7\u00e3o Fechar Barra ao clicar no bot\u00e3o<\/strong>. Isso faz sentido principalmente se a notifica\u00e7\u00e3o for um bot\u00e3o de CTA. Por exemplo, uma vez que o visitante clica no bot\u00e3o Assinar nossa newsletter na barra de notifica\u00e7\u00e3o, ele \u00e9 redirecionado para a p\u00e1gina com os detalhes sobre a assinatura, e a barra de notifica\u00e7\u00e3o n\u00e3o aparece mais, pois sua finalidade foi cumprida.<\/p>\n
Se voc\u00ea n\u00e3o quiser que sua barra de navega\u00e7\u00e3o fique vis\u00edvel para todos o tempo todo, voc\u00ea pode usar uma das v\u00e1rias op\u00e7\u00f5es de filtragem<\/strong>. Voc\u00ea pode definir por quanto tempo deseja que a barra seja exibida definindo as datas nos campos Data e hora de in\u00edcio e Data e hora<\/strong> de t\u00e9rmino .<\/strong> Voc\u00ea tamb\u00e9m pode selecionar em quais p\u00e1ginas deseja que a barra seja exibida<\/strong> marcando algumas das op\u00e7\u00f5es da configura\u00e7\u00e3o Exibir nas p\u00e1ginas<\/strong>.<\/p>\n
\"Como<\/a><\/p>\n
Quando se trata de quem pode ver a barra de navega\u00e7\u00e3o, voc\u00ea pode torn\u00e1-la vis\u00edvel apenas para determinados usu\u00e1rios simplesmente marcando as caixas no campo Exibir para fun\u00e7\u00f5es de usu\u00e1rio<\/strong>.<\/p>\n
\"Como<\/a><\/p>\n
Desenho e Cores<\/h4>\n
O plugin oferece alguns recursos interessantes para estilizar a apar\u00eancia da barra tamb\u00e9m. Voc\u00ea pode ajustar a Altura da Barra<\/strong> \u2013 definindo o n\u00famero de pixels. Como esta barra deve ser atraente, mas n\u00e3o grande<\/strong>, tome cuidado para n\u00e3o exagerar. Outro recurso interessante \u00e9 que voc\u00ea pode adicionar uma sombra \u00e0 barra<\/strong>, marcando a op\u00e7\u00e3o Exibir sombra<\/strong>.<\/p>\n
\u00c9 interessante que voc\u00ea n\u00e3o precise tornar a barra unicolor \u2013 voc\u00ea tem a op\u00e7\u00e3o de definir duas cores e criar gradientes<\/strong>. Al\u00e9m disso, voc\u00ea pode definir a cor do texto e as cores de todos os bot\u00f5es tamb\u00e9m.<\/strong><\/p>\n
\"Como<\/a><\/p>\n
O plugin WPFront Notification Bar tamb\u00e9m permite que voc\u00ea escreva CSS adicional para ajustar ainda mais o estilo<\/strong>.<\/p>\n
Vamos agora mencionar algumas personaliza\u00e7\u00f5es de CSS que s\u00e3o usadas com bastante frequ\u00eancia, como a altera\u00e7\u00e3o do tamanho da fonte, por exemplo. O que pode confundir voc\u00ea \u00e9 que, quando voc\u00ea altera o tamanho da fonte do texto da mensagem, ele pode ficar desalinhado com o bot\u00e3o ao lado. Isso pode ser facilmente corrigido. Ao alterar o tamanho da fonte, \u00e9 recomend\u00e1vel definir a classe do elemento ao qual atribuiremos determinados valores<\/strong> :<\/p>\n
<span class=\"text-bar\" style=\"font-size: 20px\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/code><\/pre>\n
Em nosso exemplo, a classe \u00e9 uma barra de texto, voc\u00ea pode fazer o mesmo para alguma outra classe.<\/p>\n
Vamos descrev\u00ea-lo assim em CSS:<\/p>\n
.text-bar {margin-bottom: 0px;}<\/code><\/pre>\n
Desta forma vamos alinhar o texto e o bot\u00e3o<\/strong>. Claro, voc\u00ea pode precisar usar um valor diferente. \u00c9 melhor inspecionar o elemento desejado<\/a> para descobrir o valor que voc\u00ea precisa. Voc\u00ea pode atribuir qualquer outra caracter\u00edstica \u00e0 classe dependendo do que deseja alterar.<\/p>\n
Outro recurso interessante \u00e9 que voc\u00ea tamb\u00e9m pode ajustar a sombra, que por padr\u00e3o \u00e9 bem escura. Voc\u00ea pode, por exemplo, ajust\u00e1-lo assim e torn\u00e1-lo mais leve:<\/p>\n
wpfront-bottom-shadow {box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);}<\/code><\/pre>\n
E n\u00e3o se esque\u00e7a – voc\u00ea precisa clicar em Salvar ap\u00f3s cada altera\u00e7\u00e3o que fizer para que elas tenham efeito!<\/p>\n
Para concluir<\/h2>\n
Quando usada corretamente, a barra de navega\u00e7\u00e3o pode trazer muitos benef\u00edcios. Sinta-se \u00e0 vontade para test\u00e1-lo para diferentes prop\u00f3sitos. Listamos apenas algumas das ideias para inspir\u00e1-lo, mas temos certeza de que voc\u00ea pode pensar em muitos outros motivos para us\u00e1-lo. Estilize, personalize e compartilhe sua experi\u00eancia conosco!<\/p>\n
Fonte de grava\u00e7\u00e3o:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Descubra o que \u00e9 uma barra de notifica\u00e7\u00e3o do WordPress e saiba como configur\u00e1-la de forma r\u00e1pida e f\u00e1cil.<\/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":[573],"tags":[848],"class_list":["post-368934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nocoes-basicas-do-wordpress","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/368934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=368934"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/368934\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/363820"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=368934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=368934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=368934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}