{"id":11872,"date":"2021-02-17T16:48:39","date_gmt":"2021-02-17T11:03:39","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/blossom-studio\/configure-header-footer-section\/how-to-configure-top-bar\/"},"modified":"2021-02-17T16:54:38","modified_gmt":"2021-02-17T11:09:38","slug":"how-to-configure-top-bar","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/blossom-studio-pro\/configure-header-footer-section\/how-to-configure-top-bar\/","title":{"rendered":"How to Configure Top Bar?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"118\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbar-3-1024x118.png\" alt=\"\" class=\"wp-image-11883\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbar-3-1024x118.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbar-3-300x35.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbar-3-768x88.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbar-3-1536x177.png 1536w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbar-3.png 1728w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can add a notification bar to the top of your site.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to&nbsp;<strong>Appearance &gt; Customize &gt; General Settings &gt; Top Bar Settings.<\/strong><\/li><li>Enable the blue button for <strong>Enable Top Bar<\/strong>.<\/li><li>select the <strong>Top bar Type<\/strong>.<\/li><li>If Button Link is selected<ul><li>Enter the text in the <strong>Notification Text<\/strong>.<\/li><li>Enter the text in the <strong>Notification Button Label<\/strong>.<\/li><li>Enter the Link in the <strong>Notification Button Link<\/strong>.<\/li><li>Enable\/ Disable the button for <strong>Enable to open in new window<\/strong>.<\/li><li>Select the color of the Top Bar and the Font on the Top Bar.<\/li><\/ul><\/li><li>Click&nbsp;<strong>Publish<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"344\" height=\"772\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbarbutton.png\" alt=\"\" class=\"wp-image-11884\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbarbutton.png 344w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/02\/topbarbutton-134x300.png 134w\" sizes=\"(max-width: 344px) 100vw, 344px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>If Newsletter is selected.<ul><li>Enter the Shortcode in the <strong>Header Newsletter Shortcode<\/strong><\/li><\/ul><\/li><li>Click&nbsp;<strong>Publish<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"411\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/07\/newsletterbar.png\" alt=\"\" class=\"wp-image-8590\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/07\/newsletterbar.png 340w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/07\/newsletterbar-248x300.png 248w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/figure>\n\n\n\n<p>To extract the shortcode of the newsletter, you need to have <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/plugins\/blossomthemes-email-newsletter\/\" target=\"_blank\">BlossomThemes Email Newsletter plugin<\/a><\/strong> installed and activated for this setting.<\/p>\n\n\n\n<p>You can add a subscription form on the newsletter section of your website from here. To add a newsletter, you need to create a newsletter first and copy &amp; paste the newsletter shortcode.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Newsletters<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to&nbsp;<strong>BlossomThemes Email Newsletter &gt; Add New<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"482\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/create-newsletter.png\" alt=\"\" class=\"wp-image-8032\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/create-newsletter.png 546w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/create-newsletter-300x265.png 300w\" sizes=\"(max-width: 546px) 100vw, 546px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Enter the title for the newsletter.<\/li><li>Select the options on the Field Settings. Select \u201cName and Email\u201d if you want users to enter their Name and Email to subscribe to your newsletters, otherwise select \u201cEmail\u201d.<\/li><li>Enter Name and Email placeholder.<\/li><li>Enter the label for Submit button.<\/li><li>Enter Form note. The note will be displayed below the Title.<\/li><li>From the Appearance Settings, edit the appearance of the newsletter form.<\/li><li>Click on&nbsp;<strong>Publish&nbsp;<\/strong>to create the newsletter<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1301\" height=\"780\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/newsletter1.png\" alt=\"\" class=\"wp-image-8034\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/newsletter1.png 1301w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/newsletter1-300x180.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/newsletter1-1024x614.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/newsletter1-768x460.png 768w\" sizes=\"(max-width: 1301px) 100vw, 1301px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring Newsletters<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to&nbsp;<strong>BlossomThemes Email Newsletter &gt; Settings<\/strong><\/li><li>Select the email platform.<\/li><li>Enter the API key of the email platform.<\/li><li>Select the mailing list in the List Id field.<\/li><li>Select whether to display Popup text of Page when a visitor subscribes to your newsletter. If you select popup text, enter the message. If you select page, select the page you want to show.<\/li><li>Click&nbsp;<strong>Save Changes<\/strong>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Newsletter on the Newsletter section<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to&nbsp;<strong>Appearance &gt; Customize &gt; General Settings &gt; Newsletter Settings<\/strong><\/li><li>Enable Newsletter Section. Blue is enabled.<\/li><li>Enter the shortcode of the newsletter form you want to show. You can find the shortcode on the left-hand side of the newsletter.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1899\" height=\"586\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/shortcode.png\" alt=\"\" class=\"wp-image-8035\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/shortcode.png 1899w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/shortcode-300x93.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/shortcode-1024x316.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/shortcode-768x237.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/02\/shortcode-1536x474.png 1536w\" sizes=\"(max-width: 1899px) 100vw, 1899px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Click&nbsp;<strong>Publish<\/strong>.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You can add a notification bar to the top of your site. Go to&nbsp;Appearance &gt; Customize &gt; General Settings &gt; Top Bar Settings. Enable the blue button for Enable Top Bar. select the Top bar Type. If Button Link is selected Enter the text in the Notification Text. Enter the text in the Notification Button [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":11870,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-11872","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/11872"}],"collection":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/comments?post=11872"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/11872\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/11870"}],"next":[{"title":"How to Configure Header Settings?","link":"https:\/\/docs.blossomthemes.com\/blossom-studio-pro\/configure-header-footer-section\/how-to-configure-header-settings\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/11873"}],"prev":[{"title":"How to Configure Site Logo\/ Name & Tagline to your Website?","link":"https:\/\/docs.blossomthemes.com\/blossom-studio-pro\/configure-header-footer-section\/how-to-configure-site-logo-name-tagline-to-your-website\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/11871"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=11872"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=11872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}