{"id":20789,"date":"2026-03-09T10:02:40","date_gmt":"2026-03-09T10:02:40","guid":{"rendered":"https:\/\/notificationx.com\/?post_type=docs&#038;p=20789"},"modified":"2026-04-22T04:06:14","modified_gmt":"2026-04-22T04:06:14","password":"","slug":"how-to-design-a-notification-bar-with-ai","status":"publish","type":"docs","link":"https:\/\/notificationx.com\/ja\/docs\/how-to-design-a-notification-bar-with-ai\/","title":{"rendered":"How to Design a Notification Bar with AI Using NotificationX?"},"content":{"rendered":"<p>Using the AI in <a href=\"https:\/\/notificationx.com\/ja\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>NotificationX<\/strong><\/a>, you create stunning notification bars in WordPress instantly. This feature saves time, eliminates manual design, and helps you quickly create engaging notifications that align with your website\u2019s goals and branding.<\/p>\n\n\n\n<p>Now displaying your latest sales, discounts, or urgent announcements amazingly on the website to influence your potential customers to buy your products or take your services will be faster and easier.<\/p>\n\n\n\n<p>Before getting started, make sure you have installed and activated:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/notificationx.com\/ja\/docs\/install-activate-notificationx\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How to Install and Activate NotificationX Free Version?<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/notificationx.com\/ja\/docs\/install-notificationx-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How to Install and Activate NotificationX PRO Version?<\/strong><\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Configure Notification Bar with AI Using NotificationX\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Xhnq7m5tuBA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Configure Notification Bar with AI in NotificationX?<\/strong><\/h2>\n\n\n\n<p>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>\u30b9\u30c6\u30c3\u30d71\uff1a\u65b0\u3057\u3044\u901a\u77e5\u3092\u8ffd\u52a0\u3059\u308b<\/strong><\/h3>\n\n\n\n<p>WordPress\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306b\u79fb\u52d5\u3057\u3066\u3001 <strong>NotificationX<\/strong> \u2192 <strong>\u3059\u3079\u3066\u306eNotificationX<\/strong>. Then, right at the top, click on \u2018<strong>\u65b0\u3057\u304f\u8ffd\u52a0\u3059\u308b<\/strong>\u2019. Or you can also simply go to the \u2018Add New\u2019 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=\"1600\" height=\"780\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image.png\" alt=\"add a new notification\" class=\"wp-image-20791\" title=\"\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image.png 1600w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-300x146.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1024x499.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-768x374.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1536x749.png 1536w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-18x9.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-360x176.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Select Notification Bar as Your Notification Type<\/strong><\/h3>\n\n\n\n<p>\u624b\u98061\u304c\u5b8c\u4e86\u3059\u308b\u3068\u3001 &#039;\u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3055\u308c\u307e\u3059\u3002<strong>\u30bd\u30fc\u30b9<\/strong>\u2019 Tab page of your NotificationX. You can also put a title for your notification. From the options, select \u2018<strong>\u901a\u77e5\u30d0\u30fc<\/strong>\u2019 as your notification type. Then click on the \u2018<strong>\u6b21<\/strong>&#039; \u30dc\u30bf\u30f3\u3002<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-12-16-04.gif\" alt=\"Creating a Notification Bar\" class=\"wp-image-20807\" 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>\u304b\u3089 &#039;<strong>\u8a2d\u8a08<\/strong>\u2019 tab, you can choose a layout and also have the flexibility to use the \u2018<strong>\u9ad8\u5ea6\u306a\u30c7\u30b6\u30a4\u30f3<\/strong>\u2019 option to customize it as per your preference. NotificationX offers awesome Premade layouts that you can pick from and get started. The chosen layout is how the \u2018<strong>\u901a\u77e5\u30d0\u30fc<\/strong>\u2019 will be displayed on your website. You can also see a preview of your design at the top.<\/p>\n\n\n\n<p>And to create with the help of AI, just click on the \u2018<strong>Build with AI<\/strong>\u2019 &amp; let AI handle everything from this point up to creating a stunning notification bar for your website.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"3418\" height=\"1704\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-04-12-at-10-48-34.gif\" alt=\"nx bar with AI\" class=\"wp-image-21001\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>Here you\u2019ll see multiple notification bar prompts under the &#8220;Prompt Suggestion&#8221; dropdown on different categories. You can pick your categories, select the prompt by clicking on \u2018<strong>Insert This Prompt<\/strong>,\u2019 set the number of generations, and modify your prompts if you wish to before clicking on the generate icon.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3420\" height=\"1706\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-04-12-at-10-53-52.gif\" alt=\"notification bar with AI\" class=\"wp-image-21002\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>And here\u2019s the result below based on your prompt. Now you can select the one that you want to go with &amp; get the preview on top.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-12-38-14.gif\" alt=\"pick your ai generated notification bar\" class=\"wp-image-20810\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>\u304b\u3089 &#039;<strong>\u9ad8\u5ea6\u306a\u30c7\u30b6\u30a4\u30f3<\/strong>\u2019 section, you can play around with the Background &amp; Text colors. 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=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-12-47-20.gif\" alt=\"design notification bar with ai in notificationx\" class=\"wp-image-20811\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>For the 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>In the advanced design, you can also change the background color, text color and font size of your \u2018<strong>Link Button<\/strong>\u2019. 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=\"1600\" height=\"805\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-5.png\" alt=\"notification bar with ai\" class=\"wp-image-20804\" title=\"\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-5.png 1600w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-5-300x151.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-5-1024x515.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-5-768x386.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-5-1536x773.png 1536w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-5-18x9.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-5-360x181.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<p>After you are done designing the Notification Bar, click on \u2018<strong>\u6b21<\/strong>\u2019 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>Next, go to the \u2018<strong>\u30b3\u30f3\u30c6\u30f3\u30c4<\/strong>\u2019 tab. There you will find the option to add \u2018<strong>Static Text<\/strong>&#039; \u307e\u305f &#039;<strong>Slide Multiple Text<\/strong>\u2019. 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=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-12-54-53.gif\" alt=\"adding content to the notification bar\" class=\"wp-image-20812\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>To make your bar content more engaging, you can choose the \u2018<strong>Slide Multiple Text<\/strong>\u2019 option. For this option, add multiple texts for your notification bar. To add multiple texts, add your text and then click on \u2018<strong>\u65b0\u3057\u304f\u8ffd\u52a0\u3059\u308b&#039;<\/strong> button to add another text. After adding text, you can also change the sequence by simply dragging and dropping the text. 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=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-12-58-54.gif\" alt=\"adding content to the notification bar\" class=\"wp-image-20813\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>You can also use a \u2018<strong>Button<\/strong>\u2019 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 \u2018<strong>Transition Speed<\/strong>&#039; \u3068 &#039;<strong>Transition Style<\/strong>\u2019 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=\"1600\" height=\"790\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1.png\" alt=\"notification bar with ai\" class=\"wp-image-20793\" title=\"\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1.png 1600w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1-300x148.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1-1024x506.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1-768x379.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1-1536x758.png 1536w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1-18x9.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-1-360x178.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Add Coupon Code<\/strong><\/h4>\n\n\n\n<p>You can enable the coupon code option if you want to give discounts via code. You will find the option to add the 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<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-13-09-22.gif\" alt=\"add coupon code into your notification bar\" class=\"wp-image-20814\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>After that, you can use the checkbox to enable\/disable the \u2018<strong>Countdown<\/strong>\u2019 option. If it\u2019s enabled, then you can add a \u2018<strong>Countdown Text<\/strong>&#039; \u3068 &#039;<strong>Countdown Time<\/strong>\u2019 of your preference. The \u2018<strong>Countdown<\/strong>\u2019 feature will give your visitors a sense of urgency to grab the offer currently going around before it expires.&nbsp;<\/p>\n\n\n\n<p>You also have a checkbox to use a \u2018<strong>Permanent Close<\/strong>\u2019 button. So, if users hit the close button, it will no longer be displayed on the website. You can also choose to enable <strong>\u2018Evergreen Countdown Timer\u2019<\/strong> \u304a\u671b\u307f\u306a\u3089\u3070\u3002\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001 <a href=\"https:\/\/notificationx.com\/ja\/docs\/evergreen-timer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>\u3053\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044<\/strong><\/a>.<\/p>\n\n\n\n<p>After you are done with the configuration, simply click on the \u2018<strong>\u6b21<\/strong>\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>\u304b\u3089 &#039;<strong>\u753b\u9762<\/strong>\u2019 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, \u2018Show On\u2019 is set to \u2018Show Everywhere\u2019; as a result the Notification Bar will be displayed in every single page of your website.<\/p>\n\n\n\n<p>You will also get the option to show the bar by setting different conditions in the \u2018<strong>Bar Reappearance<\/strong>\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=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-13-14-40.gif\" alt=\"set display option of the bar\" class=\"wp-image-20815\" 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>\u4e0b &#039;<strong>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/strong>\u2019 tab, you will find five separate sections: Appearance, Animation, Targeting,&nbsp; Timing &amp; Behavior. From the \u2018<strong>\u5916\u89b3<\/strong>\u2019 section, you can set the position where you want to display the Notification Bar and use the checkbox to disable\/enable \u2018<strong>Sticky Bar<\/strong>&#039;\u3001&#039;<strong>Close Button<\/strong>\u2019 &amp; \u2018<strong>Hide on Mobile<\/strong>\u2019 options.<\/p>\n\n\n\n<p>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 \u2018<strong>\u901a\u77e5\u30d0\u30fc<\/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>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=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-13-27-36.gif\" alt=\"customize notification appearance\" class=\"wp-image-20816\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>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\n<p>Your discount offer might not be the same 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=\"1600\" height=\"752\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-2.png\" alt=\"notification bar with ai\" class=\"wp-image-20796\" title=\"\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-2.png 1600w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-2-300x141.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-2-1024x481.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-2-768x361.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-2-1536x722.png 1536w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-2-18x8.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-2-360x169.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<p>In the \u2018<strong>\u30bf\u30a4\u30df\u30f3\u30b0<\/strong>\u2019, you can set an <strong>\u2018Initial Delay<\/strong>\u2019 time after which your <strong>\u2018Notification Bar<\/strong>\u2019 will be popped up. By default, it is set to 5 seconds. You can also hide the \u2018<strong>Notification Bar\u2019<\/strong> after a certain amount of time by checking the box<strong>\u2018Auto Hide<\/strong>\u2019 and setting a time in the \u2018<strong>Hide After<\/strong>\u2019 field.<\/p>\n\n\n\n<p>You can use the checkbox to decide whether to open your set link 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<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"806\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-3.png\" alt=\"notification bar with ai\" class=\"wp-image-20797\" title=\"\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-3.png 1600w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-3-300x151.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-3-1024x516.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-3-768x387.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-3-1536x774.png 1536w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-3-18x9.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-3-360x181.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 7: Publish the Notification Bar<\/strong><\/h3>\n\n\n\n<p>After you have completed step 6, click on the \u2018<strong>\u516c\u958b\u3059\u308b<\/strong>\u2019 button. As a result, the \u2018<strong>\u901a\u77e5\u30d0\u30fc<\/strong>\u2019 will be successfully created.<\/p>\n\n\n\n<p>By following these steps and a bit more modifying &amp; styling, your final outcome would look something like this.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"880\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-6.png\" alt=\"publish your notification bar\" class=\"wp-image-20817\" title=\"\" srcset=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-6.png 1600w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-6-300x165.png 300w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-6-1024x563.png 1024w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-6-768x422.png 768w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-6-1536x845.png 1536w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-6-18x10.png 18w, https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/image-6-360x198.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>\u6700\u7d42\u7d50\u679c<\/strong><\/h2>\n\n\n\n<p>This is how you can easily design and display an appealing Notification Bar with AI on your WordPress website using NotificationX.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3420\" height=\"1778\" src=\"https:\/\/notificationx.com\/wp-content\/uploads\/2026\/03\/Screen-Capture-on-2026-03-08-at-13-35-59.gif\" alt=\"\" class=\"wp-image-20818\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>If you face any issues, you can contact our dedicated <a href=\"https:\/\/wpdeveloper.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>\u652f\u63f4\u30c1\u30fc\u30e0<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>A complete guide to design and configure notification bar with the help of AI on your WordPress website.<\/p>","protected":false},"author":29,"featured_media":20809,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[154],"doc_tag":[183],"class_list":["post-20789","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-notification-bar"],"year_month":"2026-05","word_count":1473,"total_views":"1709","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Shahidul Islam","author_nicename":"shahidul","author_url":"https:\/\/notificationx.com\/ja\/author\/shahidul\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/notificationx.com\/ja\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"Notification Bar","term_url":"https:\/\/notificationx.com\/ja\/docs-tag\/notification-bar\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/docs\/20789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/users\/29"}],"version-history":[{"count":6,"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/docs\/20789\/revisions"}],"predecessor-version":[{"id":21072,"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/docs\/20789\/revisions\/21072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/media\/20809"}],"wp:attachment":[{"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/media?parent=20789"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/doc_category?post=20789"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/notificationx.com\/ja\/wp-json\/wp\/v2\/doc_tag?post=20789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}