{"id":4648,"date":"2020-09-29T05:10:05","date_gmt":"2020-09-29T05:10:05","guid":{"rendered":"http:\/\/notificationx.com\/?post_type=docs&p=4648"},"modified":"2025-06-16T05:51:54","modified_gmt":"2025-06-16T05:51:54","password":"","slug":"notification-bar-with-elementor","status":"publish","type":"docs","link":"https:\/\/notificationx.com\/vi\/docs\/notification-bar-with-elementor\/","title":{"rendered":"C\u00e1ch thi\u1ebft k\u1ebf thanh th\u00f4ng b\u00e1o v\u1edbi Elementor & NotificationX"},"content":{"rendered":"

NotificationX<\/strong><\/a> cho ph\u00e9p b\u1ea1n thi\u1ebft k\u1ebf Thanh th\u00f4ng b\u00e1o tuy\u1ec7t \u0111\u1eb9p v\u1edbi Tr\u00ecnh t\u1ea1o trang ph\u1ea7n t\u1eed<\/strong><\/a>. With the introduction of Elementor integration, you will have the flexibility to choose and customize beautifully designed ready-made Elemetor templates on your WordPress website for free.<\/p>\n\n\n\n

You can display your latest sales, discounts, or urgent announcements amazingly on the website to influence your potential customers to buy your products or take your services.<\/p>\n\n\n\n

<\/p>\n\n\n\n

How To Configure Notification Bar On Your Elementor Website<\/strong><\/h2>\n\n\n\n

Follow the below guideline to see how to configure the 'Thanh th\u00f4ng b\u00e1o'<\/strong> using NotificationX and Elementor.<\/p>\n\n\n\n

B\u01b0\u1edbc 1: T\u1ea1o thanh th\u00f4ng b\u00e1o<\/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 ->  NotificationX-> All NotificationX<\/strong>. Sau \u0111\u00f3, \u1edf tr\u00ean c\u00f9ng, nh\u1ea5p v\u00e0o \u2018Add New\u2019<\/strong>. Or you can also simply go to the \u2018Add New\u2019<\/strong> tab from the sidebar.<\/p>\n\n\n

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

Sau khi ho\u00e0n t\u1ea5t, b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng \u0111\u1ebfn 'Ngu\u1ed3n'<\/strong> Tab page of your NotificationX user interface.\u00a0 Give a title if you want and select \u00a0'Thanh th\u00f4ng b\u00e1o' <\/strong>as your notification type. Then click on the 'K\u1ebf ti\u1ebfp' <\/strong>c\u00e1i n\u00fat.<\/p>\n\n\n

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

B\u01b0\u1edbc 2: \u0110\u1ecbnh c\u1ea5u h\u00ecnh thi\u1ebft k\u1ebf <\/strong><\/h3>\n\n\n\n

T\u1eeb 'Thi\u1ebft k\u1ebf'<\/strong> , b\u1ea1n s\u1ebd t\u00ecm th\u1ea5y m\u1ed9t s\u1ed1 ch\u1ee7 \u0111\u1ec1 \u0111\u01b0\u1ee3c t\u1ea1o s\u1eb5n \u0111\u1ec3 l\u1ef1a ch\u1ecdn v\u00e0 'X\u00e2y d\u1ef1ng v\u1edbi Elementor' <\/strong>option when you turn the 'Thi\u1ebft k\u1ebf ti\u00ean ti\u1ebfn'<\/strong> toggle on. Simply by clicking on the button, you will find all the pre-made layouts for your Notification Bar.<\/p>\n\n\n\n

Note: Make sure you have Elementor installed on your WordPress website. Or, click on the \u2018Install Elementor\u2019 button to proceed.<\/em><\/p>\n\n\n

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

Sau khi ch\u1ecdn m\u1eabu \u01b0a th\u00edch c\u1ee7a b\u1ea1n, ch\u1ec9 c\u1ea7n ti\u1ebfp t\u1ee5c v\u00e0 nh\u1ea5n v\u00e0o \u2018Import\u2019 <\/strong>button, as shown above.<\/p>\n\n\n\n

In \u2018Thi\u1ebft k\u1ebf ti\u00ean ti\u1ebfn<\/strong>\u2019 you also get the flexibility to use the option 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
\"thanh<\/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
\"thanh<\/figure>\n<\/div>\n\n\n

Once the design is imported, you will find the button on the user interface \u2018Ch\u1ec9nh s\u1eeda v\u1edbi Elementor<\/strong>'. <\/strong>B\u1eb1ng c\u00e1ch nh\u1ea5p v\u00e0o n\u00f3, b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c chuy\u1ec3n h\u01b0\u1edbng \u0111\u1ebfn tr\u00ecnh ch\u1ec9nh s\u1eeda Elementor, n\u01a1i b\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft k\u1ebf v\u00e0 t\u00f9y ch\u1ec9nh ph\u1ea7n Thanh th\u00f4ng b\u00e1o theo b\u1ea5t k\u1ef3 c\u00e1ch n\u00e0o b\u1ea1n mu\u1ed1n v\u1edbi c\u00e1c t\u00f9y ch\u1ecdn ki\u1ec3u d\u00e1ng \u01b0a th\u00edch c\u1ee7a m\u00ecnh.<\/p>\n\n\n

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

If you want, you can add new Elementor widgets and customize the design as per your preference, and create a stunning notification bar.<\/p>\n\n\n

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

Publish your designed notification bar from the Elementor editor & revert back to the NotificationX dashboard to customize your bar more and make it publish finally.<\/p>\n\n\n\n

Step 3: 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
\"thanh<\/figure>\n<\/div>\n\n\n

Step 4: 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
\"thanh<\/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 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 this based on your visitor\u2019s scrolling timing here.<\/p>\n\n\n

\n
\"thanh<\/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
\"thanh<\/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 Elementor 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
\"thanh<\/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":"

NotificationX cho ph\u00e9p b\u1ea1n trang tr\u00ed Thanh th\u00f4ng b\u00e1o c\u1ee7a m\u00ecnh b\u1eb1ng Elementor th\u00f4ng qua c\u00e1c m\u1eabu s\u1eb5n s\u00e0ng \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1eb9p m\u1eaft. B\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh tri\u1ec3n v\u1ecdng v\u00e0 l\u00e0m cho n\u00f3 theo c\u00e1ch b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng t\u00edch h\u1ee3p m\u1ea1nh m\u1ebd n\u00e0y v\u1edbi tr\u00ecnh t\u1ea1o trang Elementor.<\/p>","protected":false},"author":12,"featured_media":4656,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[154],"doc_tag":[183,306,160,155,156,157,173],"class_list":["post-4648","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-notification-bar","doc_tag-elementor","doc_tag-fomo","doc_tag-fomo-notification","doc_tag-notificationx","doc_tag-social-proof","doc_tag-wordpress"],"year_month":"2026-06","word_count":747,"total_views":"79397","reactions":{"happy":"3","normal":"0","sad":"0"},"author_info":{"name":"afrin","author_nicename":"afrin","author_url":"https:\/\/notificationx.com\/vi\/author\/syeda-sanjida-afrin\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/notificationx.com\/vi\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"Notification Bar","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/notification-bar\/"},{"term_name":"Elementor","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/elementor\/"},{"term_name":"FOMO","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/fomo\/"},{"term_name":"FOMO Notification","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/fomo-notification\/"},{"term_name":"NotificationX","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/notificationx\/"},{"term_name":"Social Proof","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/social-proof\/"},{"term_name":"WordPress","term_url":"https:\/\/notificationx.com\/vi\/docs-tag\/wordpress\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/docs\/4648","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\/12"}],"version-history":[{"count":25,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/docs\/4648\/revisions"}],"predecessor-version":[{"id":18794,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/docs\/4648\/revisions\/18794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/media\/4656"}],"wp:attachment":[{"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/media?parent=4648"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/doc_category?post=4648"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/notificationx.com\/vi\/wp-json\/wp\/v2\/doc_tag?post=4648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}