{"id":15569,"date":"2024-03-24T09:27:36","date_gmt":"2024-03-24T09:27:36","guid":{"rendered":"https:\/\/notificationx.com\/?post_type=docs&p=15569"},"modified":"2025-06-16T05:53:58","modified_gmt":"2025-06-16T05:53:58","password":"","slug":"configure-a-notification-bar-in-gutenberg","status":"publish","type":"docs","link":"https:\/\/notificationx.com\/vi\/docs\/configure-a-notification-bar-in-gutenberg\/","title":{"rendered":"How To Configure A Notification Bar In Gutenberg With NotificationX?"},"content":{"rendered":"

Notification Bars on the top of a web page help you display product discounts, announcements, promotions, CTAs, and other critical information. With NotificationX<\/strong><\/a>, you can easily configure a notification bar in Gutenberg and display your required information or sales promotions on your website for free. Follow the step-by-step guide below to learn how you can do that.<\/p>\n\n\n\n

How To Configure A Notification Bar In Gutenberg With NotificationX?<\/strong><\/h2>\n\n\n\n

Before getting started, make sure you have \u0111\u00e3 c\u00e0i \u0111\u1eb7t v\u00e0 k\u00edch ho\u1ea1t NotificationX<\/strong><\/a> on your WordPress website.<\/p>\n\n\n\n

B\u01b0\u1edbc 1: Th\u00eam th\u00f4ng b\u00e1o m\u1edbi<\/strong><\/h3>\n\n\n\n

Chuy\u1ec3n \u0111\u1ebfn B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n WordPress c\u1ee7a b\u1ea1n v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn wp-admin \u2192 NotificationX<\/strong>. Then, right at the top, click on \u2018Th\u00eam m\u1edbi<\/strong>'.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

Step 2: Choose Notification Type<\/strong><\/h3>\n\n\n\n

After completing step 1, you will be redirected to the \u2018Ngu\u1ed3n<\/strong>\u2019 tab page of your NotificationX. You can also set a title and select \u2018Thanh th\u00f4ng b\u00e1o<\/strong>\u2019 as your Notification type. Afterward, go ahead & click on the \u2018K\u1ebf ti\u1ebfp<\/strong>' c\u00e1i n\u00fat.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

Step 3: Customize The Design<\/strong><\/h3>\n\n\n\n

T\u1eeb 'Thi\u1ebft k\u1ebf<\/strong>\u2019 tab, you can choose a theme and customize it as per your preference. To use a notification bar in Gutenberg,  turn the \u2018Thi\u1ebft k\u1ebf ti\u00ean ti\u1ebfn ' <\/strong>toggle on. <\/p>\n\n\n\n

If you do so, you\u2019ll get the option \u2018Built with Gutenberg\u2019<\/strong>, click on it & you will get all the notification bar design options. Choose the one that you prefer most & click on \u2018Import.\u2019<\/strong><\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

 In \u2018Thi\u1ebft k\u1ebf ti\u00ean ti\u1ebfn<\/strong>\u2019 you also get the flexibility to modify the notification bar to reach the maximum potential of it.<\/p>\n\n\n\n

Ph\u00eda d\u01b0\u1edbi c\u00e1i 'Thi\u1ebft k\u1ebf' <\/strong>option, you can do a lot of customization to make your notification bar stand out. Such as changing the background color and image, making your own button color, countdown background color, countdown text color, closing button color, close button size, and position.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

Plus, you can also customize the Link Button, Typography  & add Custom CSS to your Gutenberg Notification from this section.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

Step 4: Customize Your Notification Bar Directly From Gutenberg Editor<\/strong><\/h3>\n\n\n\n

To edit everything live, click on \u2018Edit with Gutenberg\u2019<\/strong> under \u2018Advanced Design.<\/strong>\u2019 It\u2019ll redirect you to the Gutenberg editor.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

Note: Instead of seeing something like the above images, if you see a few broken blocks, make sure you have the Essential Blocks for Gutenberg installed & activated on your WordPress website.<\/em><\/p>\n\n\n\n

Now Gutenberg gives you the flexibility of editing everything in your picked notification bar. <\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

Click on the portion you want to edit and style the way you want from the right-side control panel. Set your notification bar exactly how you imagined. Once you\u2019re done, revert back to NotificationX dashboard to do a few more customization.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

Step 5: Set Your Notification Bar Visibility<\/strong><\/h3>\n\n\n\n

b\u00ean trong 'Tr\u01b0ng b\u00e0y'<\/strong> tab, you can now configure its settings to choose the location of your site where you want to display your notification bar and for whom you want to display the alert.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

Step 6: Customize Your Notification Bar As You Prefer<\/strong><\/h3>\n\n\n\n

Sau \u0111\u00f3, ch\u1ec9 c\u1ea7n \u0111\u1ecbnh c\u1ea5u h\u00ecnh c\u00e0i \u0111\u1eb7t t\u1eeb 'T\u00f9y ch\u1ec9nh'<\/strong> v\u00e0 \u0111\u1ecbnh c\u1ea5u h\u00ecnh giao di\u1ec7n, th\u1eddi gian v\u00e0 h\u00e0nh vi c\u1ee7a thanh th\u00f4ng b\u00e1o. B\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn v\u1ecb tr\u00ed hi\u1ec3n th\u1ecb thanh th\u00f4ng b\u00e1o tr\u00ean trang web WordPress c\u1ee7a m\u00ecnh, cho d\u00f9 b\u1ea1n c\u00f3 mu\u1ed1n hi\u1ec3n th\u1ecb thanh tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng hay kh\u00f4ng v\u00e0 c\u0169ng c\u00f3 th\u1ec3 ch\u1ecdn xem b\u1ea1n c\u00f3 mu\u1ed1n th\u00eam n\u00fat \u0111\u00f3ng hay kh\u00f4ng. <\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

V\u1edbi \u2018Targeting\u2019 <\/strong>option, you can target users who will be able to see the bar and who are not. The timing of the notification bar can also be customized from the \u2018Timing\u2019 section.<\/p>\n\n\n\n

If you want to hide your bar automatically, you can do that by simply clicking on the \u2018Auto Hide\u2019<\/strong> option. You have the flexibility of setting the timer for your auto-hiding.<\/p>\n\n\n\n

If you want your notification bar will pop up after a few seconds your visitor come to your website, you can set that as well. You can also do this based on your visitor\u2019s scrolling timing here.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

After you have completed all the steps, click on the 'C\u00f4ng b\u1ed1'<\/strong> c\u00e1i n\u00fat.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

K\u1ebft qu\u1ea3 cu\u1ed1i c\u00f9ng<\/strong><\/h2>\n\n\n\n

By following these mentioned steps and a bit more modifying, this is how your Notification Bar will appear on your Gutenberg website. For more information on c\u00e1ch c\u1ea5u h\u00ecnh thanh th\u00f4ng b\u00e1o<\/strong>, b\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m tra t\u00e0i li\u1ec7u chi ti\u1ebft n\u00e0y<\/strong><\/a>.<\/p>\n\n\n

\n
\"Configure<\/figure>\n<\/div>\n\n\n

V\u1edbi s\u1ef1 tr\u1ee3 gi\u00fap c\u1ee7a NotificationX, \u0111\u00e2y l\u00e0 c\u00e1ch b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u1ea1o v\u00e0 thi\u1ebft k\u1ebf Thanh th\u00f4ng b\u00e1o v\u1edbi Elementor<\/strong><\/a> & t\u0103ng chuy\u1ec3n \u0111\u1ed5i c\u1ee7a b\u1ea1n trong qu\u00e1 tr\u00ecnh n\u00e0y.<\/p>\n\n\n\n

B\u1ea1n \u0111ang g\u1eb7p kh\u00f3 kh\u0103n? N\u1ebfu b\u1ea1n g\u1eb7p b\u1ea5t k\u1ef3 v\u1ea5n \u0111\u1ec1 ho\u1eb7c th\u1eafc m\u1eafc n\u00e0o, b\u1ea1n c\u00f3 th\u1ec3 li\u00ean h\u1ec7 v\u1edbi Nh\u00f3m h\u1ed7 tr\u1ee3 c\u1ee7a ch\u00fang t\u00f4i<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

Configure a notification bar in Gutenberg effortlessly with NotificationX. Promote discounts, CTAs & more. Step-by-step guide included!<\/p>","protected":false},"author":28,"featured_media":15574,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[154],"doc_tag":[517,183,569,568],"class_list":["post-15569","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-advanced-template","doc_tag-notification-bar","doc_tag-notificationx-in-gutenberg","doc_tag-notificationx-live-alerts-in-gutenberg"],"year_month":"2026-06","word_count":725,"total_views":"20422","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Abdullah Mamun","author_nicename":"mamun","author_url":"https:\/\/notificationx.com\/vi\/author\/mamun\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/notificationx.com\/vi\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"Advanced Template","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/advanced-template\/"},{"term_name":"Notification Bar","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/notification-bar\/"},{"term_name":"NotificationX in Gutenberg","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/notificationx-in-gutenberg\/"},{"term_name":"NotificationX Live Alerts In Gutenberg","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/notificationx-live-alerts-in-gutenberg\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/docs\/15569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/users\/28"}],"version-history":[{"count":4,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/docs\/15569\/revisions"}],"predecessor-version":[{"id":18778,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/docs\/15569\/revisions\/18778"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/media\/15574"}],"wp:attachment":[{"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/media?parent=15569"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/doc_category?post=15569"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/doc_tag?post=15569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}