{"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\/fr\/docs\/notification-bar-with-elementor\/","title":{"rendered":"Comment concevoir une barre de notification avec Elementor et NotificationX"},"content":{"rendered":"

NotificationX<\/strong><\/a> vous permet de concevoir une superbe barre de notification avec G\u00e9n\u00e9rateur de pages Elementor<\/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 'Barre de notification'<\/strong> using NotificationX and Elementor.<\/p>\n\n\n\n

\u00c9tape 1: cr\u00e9er une barre de notification<\/strong><\/h3>\n\n\n\n

Acc\u00e9dez \u00e0 votre tableau de bord WordPress et acc\u00e9dez \u00e0 wp-admin ->  NotificationX-> All NotificationX<\/strong>. Puis tout en haut, cliquez sur \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
\"barre<\/figure>\n<\/div>\n\n\n

Une fois que vous avez termin\u00e9, vous serez redirig\u00e9 vers le 'La source'<\/strong> Tab page of your NotificationX user interface.\u00a0 Give a title if you want and select \u00a0'Barre de notification' <\/strong>as your notification type. Then click on the 'Prochain' <\/strong>bouton.<\/p>\n\n\n

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

\u00c9tape 2 : Configurer la conception <\/strong><\/h3>\n\n\n\n

Du 'Conception'<\/strong> onglet, vous trouverez quelques th\u00e8mes pr\u00e9d\u00e9finis parmi lesquels choisir et le 'Construire avec Elementor' <\/strong>option when you turn the \u00abConception avanc\u00e9e\u00bb<\/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
\"barre<\/figure>\n<\/div>\n\n\n

Apr\u00e8s avoir choisi votre mod\u00e8le pr\u00e9f\u00e9r\u00e9, allez-y et appuyez sur le \u2018Import\u2019 <\/strong>button, as shown above.<\/p>\n\n\n\n

In \u2018Conception avanc\u00e9e<\/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

Sous le 'Conception' <\/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
\"barre<\/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
\"barre<\/figure>\n<\/div>\n\n\n

Once the design is imported, you will find the button on the user interface \u2018Modifier avec Elementor<\/strong>'. <\/strong>En cliquant dessus, vous serez redirig\u00e9 vers l'\u00e9diteur Elementor o\u00f9 vous pourrez concevoir et personnaliser la section Barre de notification comme vous le souhaitez avec vos options de style pr\u00e9f\u00e9r\u00e9es.<\/p>\n\n\n

\n
\"barre<\/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
\"barre<\/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

dans le 'Afficher'<\/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
\"barre<\/figure>\n<\/div>\n\n\n

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

Ensuite, configurez simplement les param\u00e8tres \u00e0 partir du 'Personnaliser'<\/strong> et configurez l'apparence, la synchronisation et le comportement de la barre de notification. Vous pouvez choisir la position o\u00f9 afficher la barre de notification sur votre site Web WordPress, si vous souhaitez afficher la barre sur les appareils mobiles, et \u00e9galement s\u00e9lectionner si vous souhaitez ajouter un bouton de fermeture. <\/p>\n\n\n

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

Avec le \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
\"barre<\/figure>\n<\/div>\n\n\n

After you have completed all the steps, click on the 'Publier'<\/strong> bouton.<\/p>\n\n\n

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

R\u00e9sultat final<\/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 comment configurer la barre de notification<\/strong>, vous pouvez consultez cette documentation d\u00e9taill\u00e9e<\/strong><\/a>.<\/p>\n\n\n

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

Avec l'aide de NotificationX, c'est ainsi que vous pouvez facilement cr\u00e9er et concevoir de superbes Barres de notification avec Elementor<\/strong><\/a> & augmentez votre conversion dans le processus.<\/p>\n\n\n\n

\u00catre coinc\u00e9? Si vous rencontrez des probl\u00e8mes ou des questions, vous pouvez contactez notre \u00e9quipe d'assistance<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

NotificationX vous permet de d\u00e9corer votre barre de notification avec Elementor gr\u00e2ce \u00e0 ses mod\u00e8les pr\u00eats \u00e0 l'emploi magnifiquement con\u00e7us. Vous pouvez personnaliser les perspectives et en faire la fa\u00e7on dont vous souhaitez utiliser cette puissante int\u00e9gration avec le g\u00e9n\u00e9rateur de pages Elementor.<\/p>","protected":false},"author":12,"featured_media":4656,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_thinkrank_schema_form_data":"","_thinkrank_selected_schema_type":"","_thinkrank_additional_schemas":"","_thinkrank_canonical_url":"","_thinkrank_og_title":"","_thinkrank_og_description":"","_thinkrank_og_image":"","_thinkrank_twitter_title":"","_thinkrank_twitter_description":"","_thinkrank_twitter_image":"","_thinkrank_imported_from":"rankmath","_thinkrank_focus_keywords":["notification bar with Elementor","Notification bar","NotificationX"],"_thinkrank_focus_keyword":"notification bar with Elementor","_thinkrank_robots_meta_enabled":1,"_thinkrank_robots_meta":"{\"noindex\":false,\"nofollow\":false,\"noarchive\":false,\"noimageindex\":false,\"nosnippet\":false,\"index\":true}","_thinkrank_advanced_robots_meta":"{\"max_snippet\":-1,\"snippet_enabled\":true,\"max_video_preview\":-1,\"video_preview_enabled\":true,\"max_image_preview\":\"large\",\"image_preview_enabled\":true}","_thinkrank_primary_category":0,"_analytify_skip_tracking":false,"footnotes":""},"doc_category":[154],"doc_tag":[306,160,155,183,156,157,173],"class_list":["post-4648","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-elementor","doc_tag-fomo","doc_tag-fomo-notification","doc_tag-notification-bar","doc_tag-notificationx","doc_tag-social-proof","doc_tag-wordpress"],"year_month":"2026-08","word_count":747,"total_views":"80861","reactions":{"happy":"3","normal":"0","sad":"0"},"author_info":{"name":"afrine","author_nicename":"afrin","author_url":"https:\/\/notificationx.com\/fr\/blog\/author\/afrin\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/notificationx.com\/fr\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"Elementor","term_url":"https:\/\/notificationx.com\/fr\/docs-tag\/elementor\/"},{"term_name":"FOMO","term_url":"https:\/\/notificationx.com\/fr\/docs-tag\/fomo\/"},{"term_name":"FOMO Notification","term_url":"https:\/\/notificationx.com\/fr\/docs-tag\/fomo-notification\/"},{"term_name":"Notification Bar","term_url":"https:\/\/notificationx.com\/fr\/docs-tag\/notification-bar\/"},{"term_name":"NotificationX","term_url":"https:\/\/notificationx.com\/fr\/docs-tag\/notificationx\/"},{"term_name":"Social Proof","term_url":"https:\/\/notificationx.com\/fr\/docs-tag\/social-proof\/"},{"term_name":"WordPress","term_url":"https:\/\/notificationx.com\/fr\/docs-tag\/wordpress\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/docs\/4648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":25,"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/docs\/4648\/revisions"}],"predecessor-version":[{"id":18794,"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/docs\/4648\/revisions\/18794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/media\/4656"}],"wp:attachment":[{"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/media?parent=4648"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/doc_category?post=4648"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/notificationx.com\/fr\/wp-json\/wp\/v2\/doc_tag?post=4648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}