{"id":946,"date":"2019-07-25T11:22:02","date_gmt":"2019-07-25T11:22:02","guid":{"rendered":"http:\/\/notificationx.com\/?post_type=docs&#038;p=946"},"modified":"2025-06-16T05:59:35","modified_gmt":"2025-06-16T05:59:35","password":"","slug":"notification-bar","status":"publish","type":"docs","link":"https:\/\/notificationx.com\/pt\/docs\/notification-bar\/","title":{"rendered":"Como usar a barra de notifica\u00e7\u00e3o no NotificationX?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">A Barra de Notifica\u00e7\u00e3o permite exibir um aviso importante ou ofertas especiais em seu site para atrair imediatamente a aten\u00e7\u00e3o de seus visitantes. Com <a href=\"https:\/\/notificationx.com\/pt\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Notifica\u00e7\u00e3oX<\/strong><\/a>, voc\u00ea pode criar facilmente uma barra de notifica\u00e7\u00e3o fascinante em seu site WordPress para manter todos envolvidos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Configure Notification Bar in NotificationX<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the step-by-step guide below to configure &amp; style the notification bar on your website using NotificationX.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Etapa 1: Adicionar Nova Notifica\u00e7\u00e3o<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Go to your WordPress Dashboard and navigate to wp-admin -&gt; NotificationX -&gt; All NotificationX. Then right at the top, click on <strong>\u2018Add New\u2019<\/strong>. Or you can also simply go to the <strong>\u2018Add New\u2019<\/strong> tab from the sidebar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1351\" height=\"634\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image.png\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18671\" title=\"\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image.png 1351w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-300x141.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1024x481.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-768x360.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-18x8.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-360x169.png 360w\" sizes=\"(max-width: 1351px) 100vw, 1351px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Select \u2018Notification Bar\u2019 as Your Notification Type<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de concluir a etapa 1, voc\u00ea ser\u00e1 redirecionado para o <strong>&#039;Fonte&#039;<\/strong> Tab page of your NotificationX. You can also put a title. From the options, select <strong>&#039;Barra de notifica\u00e7\u00e3o&#039;<\/strong> as your notification type. Then click on the <strong>&#039;Pr\u00f3ximo&#039; <\/strong>bot\u00e3o.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18672\" title=\"\"><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Design the Notification Bar<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">De<strong> &#039;Projeto&#039;<\/strong> Na guia, voc\u00ea pode escolher um layout e tamb\u00e9m ter a flexibilidade de usar o <strong>&#039;Design Avan\u00e7ado&#039;<\/strong> option to customize it as per your preference. NotificationX offers three awesome Premade layouts that you can pick from and get started. The chosen layout is how the <strong>&#039;Barra de notifica\u00e7\u00e3o&#039;<\/strong> will be displayed on your website. You can also see a preview of your design at the top.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18673\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">De <strong>&#039;Design Avan\u00e7ado&#039;<\/strong> section, you can play around with the Background &amp; Text colors. You can also choose whether you want to use this notification bar in Elementor or the Gutenberg editor. There you can choose which layout you prefer. To know how to edit the bar in Elementor or Gutenberg, <strong>check these documentation<\/strong> below.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/notificationx.com\/pt\/docs\/notification-bar-with-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como projetar barra de notifica\u00e7\u00e3o com Elementor e NotificationX<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/notificationx.com\/pt\/docs\/configure-a-notification-bar-in-gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">How To Configure A Notification Bar In Gutenberg With NotificationX?<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Then you can choose different background colors and a customized background image option. You can also choose your preferred text color for the bar.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-2.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18674\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">For button and countdown, you can choose background and text colors as well. Based on your preference, you can add color to the close button and customize its size. The option of showing a close button in the preferred area is available.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the advanced design, you can also change the background color, text color and font size of your <strong>\u2018Link Button\u2019<\/strong>. As per your preference, you can even decrease or increase the font size. Add custom CSS code if you want more flexibility for your notification bar.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-3.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18675\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">After you are done designing the Notification Bar, click on<strong> &#039;Pr\u00f3ximo&#039;<\/strong> to continue.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Add Content for Your Notification Bar<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Next, go to the <strong>&#039;Conte\u00fado&#039;<\/strong> tab. There you will find the option to add <strong>\u2018Static Text<\/strong>\u2019 or <strong>\u2018Sliding Text\u2019<\/strong>. Add your preferred content and you can see how it will look in the preview. You can also customize the text as you want.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-4.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18676\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">To make your bar content more engaging you can choose <strong>\u2018Sliding Text\u2019<\/strong> option. For this option add multiple texts for your notification bar. To add multiple texts, add your text and then click on <strong>\u2018Add New\u2019<\/strong> button to add another text. After adding text you can also change the sequence by simply dragging and dropping the texts. Choose the sliding interval timing for the text.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-5.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18677\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">You can also use a <strong>\u2018Button\u2019<\/strong> to redirect your visitors to a certain page of your website. You will find an option to add different button text and URL. You can also add <strong>\u2018Transition Speed\u2019<\/strong> e <strong>\u2018Transition Style\u2019<\/strong> to the button.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-6.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18678\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Add Coupon Code<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can enable the coupon code option if you want to give discounts via code. You will find the option to add coupon button text. Add the coupon code, so that visitors will click on the button and it will be automatically copied. You can also add \u2018<strong>Tooltip<\/strong>\u2019 for further instructions on the coupon code. Choose your preferred background, text and border color for the button.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After that, you can use the checkbox to enable\/disable<strong> the \u2018Countdown\u2019<\/strong> option. If it\u2019s enabled, then you can add a <strong>\u2018Countdown Text\u2019<\/strong> e<strong> \u2018Countdown Time\u2019 <\/strong>of your preference. The <strong>\u2018Countdown\u2019<\/strong> feature will give your visitors a sense of urgency to grab the offer currently going around before it\u2019s expired. You also have a checkbox to use a <strong>&#039;Fechamento permanente&#039;<\/strong> bot\u00e3o. Portanto, se o usu\u00e1rio clicar no bot\u00e3o Fechar, ele n\u00e3o ser\u00e1 mais exibido no site. Voc\u00ea tamb\u00e9m pode optar por habilitar <strong>\u2018Evergreen Countdown Timer\u2019<\/strong> Se voc\u00ea quiser. Para aprender mais sobre isso, <a href=\"https:\/\/notificationx.com\/pt\/docs\/evergreen-timer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>verifique esta documenta\u00e7\u00e3o<\/strong><\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After you are done with the configuration, simply click on the \u2018Next\u2019 button to continue.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: Configure Display Option for the Bar<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">De <strong>&#039;Exibi\u00e7\u00e3o&#039;<\/strong> tab, you can set the pages where you want to display the Notification Bar. You also have the option to restrict the Notification for only certain user roles. By default,<strong> \u2018Show On\u2019 <\/strong>est\u00e1 configurado para <strong>\u2018Show Everywhere\u2019<\/strong> como resultado, a barra de notifica\u00e7\u00e3o ser\u00e1 exibida em todas as p\u00e1ginas do seu site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will also get the option to show the bar by setting different conditions in the \u2018Bar Reappearance\u2019 option. There you will find three available options from the dropdown:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Don\u2019t show the bar again for the user:<\/strong> Where a specific user will only see the notification bar once.&nbsp;<\/li>\n\n\n\n<li><strong>Show the bar again when the users visit the website next time: <\/strong>Visitors will see the bar when they visit the website next time.<\/li>\n\n\n\n<li><strong>Show the bar when the user refreshes to another page: <\/strong>When the visitor refreshes another page, the bar will appear.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-7.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18679\" title=\"\"><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6: Customize Notification Appearances<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Under the \u2018Customize\u2019 tab, you will find five separate sections: Appearance, Animation, Targeting,&nbsp; Timing &amp; Behavior. From the <strong>\u2018Appearance<\/strong>\u2019 section, you can set the position where you want to display the Notification Bar and use the checkbox to disable\/enable <strong>\u2018Sticky Bar\u2019<\/strong>, \u2018Close Button\u2019 &amp; \u2018Hide on Mobile\u2019 options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can set the position of the Notification Bar to either the top or the bottom of your website. If the Sticky Bar is chosen, then the <strong>\u2018Notification Bar<\/strong>\u2019 will be in a fixed position. As a result, no matter where you try to navigate on your page, it will always show up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose the display overlapping option to show the notification bar overlapping the content. In this section, you can also choose a scheduling option and select daily, weekly or custom scheduling options to select how many times you want to show the notification.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-8.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18680\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Next, from the animation section, add how you want to show your notification bar more attractively. You can also choose the option to hide the notification with animation.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-9.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18681\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Your discount offer might not be for every user. For this, you can choose the targeting option and specify your target customer. From the target location, you can select which country you want this notification bar for. You can also choose a specific role for whom you want to show this notification bar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"599\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-10.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18682\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">No <strong>\u2018Timing\u2019,<\/strong> you can set an \u2018Initial Delay\u2019 time after which your \u2018Notification Bar\u2019 will be popped up. By default, it is set to 5 seconds. You can also hide the \u2018Notification Bar\u2019 after a certain amount of time by checking the box \u2018Auto Hide\u2019 and setting a time in the \u2018Hide After\u2019 field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can use the checkbox to decide whether to open your set link to open in a new window or a new tab as well. If you have previously set a URL in your Button, when your visitors click on it, the new page will be displayed in either a new window or a new tab, depending on your settings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 7: Publish the Notification Bar<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de concluir a etapa 6, clique no bot\u00e3o <strong>&#039;Publicar&#039;<\/strong> bot\u00e3o. Como resultado, o <strong>&#039;Barra de notifica\u00e7\u00e3o&#039;<\/strong> ser\u00e1 criado com sucesso.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1347\" height=\"633\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1.png\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18683\" title=\"\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1.png 1347w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1-300x141.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1-1024x481.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1-768x361.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1-18x8.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-1-360x169.png 360w\" sizes=\"(max-width: 1347px) 100vw, 1347px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">By following these steps and a bit more modifying &amp; styling, your final outcome would look something like this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Resultado Final<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1353\" height=\"459\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2019\/07\/image-11.gif\" alt=\"Barra de notifica\u00e7\u00e3o\" class=\"wp-image-18684\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u00c9 assim que voc\u00ea pode projetar e exibir facilmente um recurso atraente <strong>Barra de notifica\u00e7\u00e3o<\/strong> on your WordPress website using NotificationX. If you face any issues, you can contact our <strong><a href=\"https:\/\/wpdeveloper.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">Equipe de Suporte dedicada<\/a><\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Crie uma bela barra de notifica\u00e7\u00e3o do WordPress para aumentar as vendas usando NotificationX.<\/p>","protected":false},"author":5,"featured_media":6757,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[154],"doc_tag":[155,183,156],"class_list":["post-946","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-fomo-notification","doc_tag-notification-bar","doc_tag-notificationx"],"year_month":"2026-07","word_count":1354,"total_views":"80885","reactions":{"happy":"92","normal":"8","sad":"10"},"author_info":{"name":"Rafin Khan","author_nicename":"rafin","author_url":"https:\/\/notificationx.com\/pt\/author\/rafin\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/notificationx.com\/pt\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"FOMO Notification","term_url":"https:\/\/notificationx.com\/pt\/docs-tag\/fomo-notification\/"},{"term_name":"Notification Bar","term_url":"https:\/\/notificationx.com\/pt\/docs-tag\/notification-bar\/"},{"term_name":"NotificationX","term_url":"https:\/\/notificationx.com\/pt\/docs-tag\/notificationx\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/docs\/946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":8,"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/docs\/946\/revisions"}],"predecessor-version":[{"id":18796,"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/docs\/946\/revisions\/18796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/media\/6757"}],"wp:attachment":[{"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/media?parent=946"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/doc_category?post=946"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/notificationx.com\/pt\/wp-json\/wp\/v2\/doc_tag?post=946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}