{"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\/nl\/docs\/notification-bar-with-elementor\/","title":{"rendered":"Hoe een meldingsbalk te ontwerpen met Elementor en NotificationX"},"content":{"rendered":"

Kennisgeving X<\/strong><\/a> stelt u in staat een verbluffende meldingsbalk te ontwerpen met Elementor-paginabuilder<\/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 'Notificatie balk'<\/strong> using NotificationX and Elementor.<\/p>\n\n\n\n

Stap 1: maak een meldingsbalk<\/strong><\/h3>\n\n\n\n

Ga naar je WordPress-dashboard en navigeer naar wp-admin ->  NotificationX-> All NotificationX<\/strong>. Klik dan helemaal bovenaan op \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
\"notificatiebalk<\/figure>\n<\/div>\n\n\n

Nadat u klaar bent, wordt u doorgestuurd naar het 'Bron'<\/strong> Tab page of your NotificationX user interface.\u00a0 Give a title if you want and select \u00a0'Notificatie balk' <\/strong>as your notification type. Then click on the 'De volgende' <\/strong>knop.<\/p>\n\n\n

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

Stap 2: Configureer het ontwerp <\/strong><\/h3>\n\n\n\n

Van de 'Ontwerp'<\/strong> tabblad, vindt u een paar kant-en-klare thema's om uit te kiezen en de 'Bouw met Elementor' <\/strong>option when you turn the 'Geavanceerd ontwerp'<\/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
\"notificatiebalk<\/figure>\n<\/div>\n\n\n

Nadat u uw voorkeurssjabloon hebt gekozen, gaat u gewoon door en drukt u op de \u2018Import\u2019 <\/strong>button, as shown above.<\/p>\n\n\n\n

In \u2018Geavanceerd ontwerp<\/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

Onder de 'Ontwerp' <\/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
\"notificatiebalk<\/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
\"notificatiebalk<\/figure>\n<\/div>\n\n\n

Once the design is imported, you will find the button on the user interface \u2018Bewerken met Elementor<\/strong>'. <\/strong>Door erop te klikken, wordt u doorgestuurd naar de Elementor-editor waar u het gedeelte Meldingsbalk op elke gewenste manier kunt ontwerpen en aanpassen met uw favoriete stijlopties.<\/p>\n\n\n

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

In de 'Scherm'<\/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
\"notificatiebalk<\/figure>\n<\/div>\n\n\n

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

Configureer daarna eenvoudig de instellingen van de 'Aanpassen'<\/strong> tabblad en configureer het uiterlijk, de timing en het gedrag van de meldingsbalk. U kunt de positie kiezen waar u de meldingsbalk op uw WordPress-website wilt laten zien, of u de balk op mobiele apparaten wilt weergeven en ook selecteren of u een sluitknop wilt toevoegen. <\/p>\n\n\n

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

Met de \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
\"notificatiebalk<\/figure>\n<\/div>\n\n\n

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

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

Uiteindelijke uitkomst<\/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 hoe u de meldingsbalk configureert<\/strong>, jij kan bekijk deze gedetailleerde documentatie<\/strong><\/a>.<\/p>\n\n\n

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

Met de hulp van NotificationX is dit hoe u eenvoudig verbluffende ontwerpen kunt maken en ontwerpen Meldingsbalken met Elementor<\/strong><\/a> & verhoog uw conversie in het proces.<\/p>\n\n\n\n

Vast zitten? Als u problemen of vragen ondervindt, kunt u: neem contact op met ons ondersteuningsteam<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

Met NotificationX kun je je meldingsbalk versieren met Elementor via de prachtig ontworpen kant-en-klare sjablonen. U kunt de vooruitzichten aanpassen en maken zoals u wilt, deze krachtige integratie met Elementor-paginabuilder.<\/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,"_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"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":"80868","reactions":{"happy":"3","normal":"0","sad":"0"},"author_info":{"name":"afrin","author_nicename":"afrin","author_url":"https:\/\/notificationx.com\/nl\/blog\/author\/afrin\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/notificationx.com\/nl\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"Elementor","term_url":"https:\/\/notificationx.com\/nl\/docs-tag\/elementor\/"},{"term_name":"FOMO","term_url":"https:\/\/notificationx.com\/nl\/docs-tag\/fomo\/"},{"term_name":"FOMO Notification","term_url":"https:\/\/notificationx.com\/nl\/docs-tag\/fomo-notification\/"},{"term_name":"Notification Bar","term_url":"https:\/\/notificationx.com\/nl\/docs-tag\/notification-bar\/"},{"term_name":"NotificationX","term_url":"https:\/\/notificationx.com\/nl\/docs-tag\/notificationx\/"},{"term_name":"Social Proof","term_url":"https:\/\/notificationx.com\/nl\/docs-tag\/social-proof\/"},{"term_name":"WordPress","term_url":"https:\/\/notificationx.com\/nl\/docs-tag\/wordpress\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/docs\/4648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":25,"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/docs\/4648\/revisions"}],"predecessor-version":[{"id":18794,"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/docs\/4648\/revisions\/18794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/media\/4656"}],"wp:attachment":[{"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/media?parent=4648"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/doc_category?post=4648"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/notificationx.com\/nl\/wp-json\/wp\/v2\/doc_tag?post=4648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}