How to Add Announcement Bar Banner to Your WordPress Website
HTML-код
- Опубликовано: 3 авг 2024
- Looking for a way to add an announcement bar banner to your WordPress website? That's what I'm walking you through in this tutorial.
We'll be using the easy to use Simple Banner plugin to help you add a site-wide notification bar banner to the top (header area) of your WordPress website WITHOUT knowing any code.
Simple Banner Plugin: wordpress.org/plugins/simple-...
-------------------------------------------
-------------------------------------------
Give this video a thumbs up & don’t forget to subscribe to the channel:
ruclips.net/user/MariahMagaz...
🔥 🔍 Download the FREE Roadmap to Successful SEO: www.mariahmagazine.com/roadmap/
Let’s connect on Instagram 🎉 / mariahmagazineco
► ABOUT ME: I'm Mariah. I help online business owners mix strategy + energetics so their visibility & marketing strategies are both sustainable AND successful. On this channel, I create videos around DIY SEO and digital marketing, along with tech tutorials for websites and running an online business.
Find out more at www.mariahmagazine.com/
⚡️✨ Thanks so much for watching ✨⚡️
(( Affiliate Disclaimer: This video and/or description may include affiliate links, in which if you purchase from a link, I may receive a small commission at no additional cost to you. Thanks for supporting my channel! ))
// MY FAVE TOOLS & RESOURCES 💖 //
Squarespace: www.mariahmagazine.com/square...
GoLive Creative Squarespace Templates: www.mariahmagazine.com/golive (Use Code MARIAHMAGAZINE for 10% off)
TubeBuddy: www.mariahmagazine.com/tubebuddy
Canva Pro: www.mariahmagazine.com/canva
Dubsado: www.mariahmagazine.com/dubsado
Kajabi: www.mariahmagazine.com/kajabi
Tailwind for Pinterest: www.mariahmagazine.com/tailwind
Keywords Everywhere Chrome Extension (SEO): www.mariahmagazine.com/kw
SEMRush (SEO): www.mariahmagazine.com/semrush
Convertkit: www.mariahmagazine.com/conver...
The BEST social media sharing plugin for WP: www.mariahmagazine.com/social...
// FILMING SETUP & EQUIPMENT 🎥 //
Webcam: amzn.to/3DP03Wt
Microphone: amzn.to/3zj2Ir0
Microphone Arm Stand: amzn.to/3oE4lL4
Standing Desk Converter: amzn.to/3vnnpB6
// DIGITAL PRODUCTS & DOWNLOADS⚡️ //
👉 DIY SEO Course: www.mariahmagazine.com/diy-se...
👉 Website Traffic Building Bundle: www.mariahmagazine.com/wtbb
👉 Quick & Effective SEO Keyword Research eBook - (USE CODE “SEOLOVE10” for $10 OFF): www.mariahmagazine.com/seokey...
👉 Crafting Successful SEO Titles & Meta Descriptions - (USE CODE “SEOLOVE10” for $10 OFF): www.mariahmagazine.com/seotamd
// WAYS TO WORK WITH ME //
🔥 Let’s improve your SEO: www.mariahmagazine.com/seo/
🧲 Marketing Breakthrough Session: www.mariahmagazine.com/inutit... 
Хобби
Did you find this tutorial helpful? Comment below and let me know!
what is custom css to scroll the banner text
Is there a way to add an image banner that I already made?
Yes i found it very useful. But what if I want the text on the banner to scroll from on end of the screen?
Trying to figure out the samething!@@azach6395 @MariahMagazine
You saved the day...I was banging my head against the wall for a work website. Thank you!
Aw yay, so glad it was helpful! 💖🌞
This worked great to direct folks to my 2023 Holiday Gift Guide! Thanks!
Aw yay, I'm so glad. Thank you for your kind comment :)
This was easy and helpful for a small business owner like me! Thank you so much! Great tutorial.
Thank you! Very helpful for a non-technical person like myself. Straight forward and easy to follow instructions.
This was great! Easily implemented. So much better than a paid plugin. Thanks for the tips!
Thank you so much for all of your help! I was able to add this to our website and your video helped a ton. We really appreciate your help.
Thank you so much for making this video, works like a charm.
Omg, You made this so easy! Thank you :)
Thank you, Mariah, very helpful!
Awesome, thank you. clear and easy to follow... yay
thanks mariah
its really helpful
perfect info for COVID time - then I'll know what to do after just for fun
This was sooooo helpful! thank you! Subbed!!!!
Thankyou. Very clear and concise.
This was very helpful! Thank you
Thx alot therefore!! for my project - this was the right lesson :)
Great instruction! Thanks
Love it thank you!
Really helpful !
Thank you so much!
I started to write one of these in CSS for a client and then was like, wait, I bet theres a plugin for this. Thanks!
This bar is very simple and lite, thank you so much/
Very helpful thank you
Nice, thanks, I love it :)
Super helpful and easy! Just did it
Aw yay, glad it worked!
Great explanation and easy to follow. Thank you!
Awesome, so glad it was helpful Mike!
Thank you!
My problem has done dear👍... Thank you very much😘😘😘😘😘
Very helpful video for WordPress developers, especially for beginners.
very nice, thank you.
thankyou for you help! i had some problems getting it to work over at my mobile view, dont know what i done but its now working :)
Awesome, so glad it worked out! ✨
Thanks so much for this video, it was great!! ❤
Aw yay, I’m glad it was helpful!
Thanks a lot Very helpful
Awesome, I’m glad! ☺️☺️ thank you for commenting ✨
Excellent.
Super helpful! Thanks, Mariah!
You’re welcome! Thanks for commenting ✨
thank you for the tutorial!
I’m glad it was helpful ☺️
Thank you so much! Super helpful :)
Thank you! I’m glad it was helpful ✨
thanks Mariah. you rock. later ask for a better mike for +mas, you deserve it. image we don't care ('bit clear) but audio no. today you get a good mike for less than 50 bucks.
Thank you so much this was very helpful!
🙌🙌 I’m so glad!
Super helpful. Thanks!
Thank you SO much!! I appreciate you 💖💖💖
Really helpful! Thank you :)
Whoop whoop! Love to hear it
Thanks so much. Very clear
So glad you found it helpful! Thanks for commenting ☺️
Great tutorial thank you!
I’m so glad it was helpful!! Thank you for your kind comment 🥰🥰
Thank you so much for the tutorial! But can I ask how to make it responsive in the mobile version?
That worked! Thank you - and I subscribed.
Yay I’m so glad. Thanks Mike!
THANK YOU!!!!!
Really helpful thanks :)
My pleasure! Glad it was helpful :)
Well done! Thanks - arthur
Thank you so much Arthur, I appreciate you!
Thanks! This is what I was hoping existed. BUT I couldn't figure out how to change the color of the text on the mouse-over state. It goes from white to black (need it to go from white to blue or gray)
This is great!! so easy! one question, it is not really translating on mobile and not sure how to fix!
Hmmm, mine seems to work well on mobile. It could be a lot of things, theme/plugin complications, CSS, etc. Email the developer for support or Google to see if they have a support ticket open about it!
Love you
Super useful video. Thank you for sharing!!
Hi, thanks for the video. Couple questions though, is there a way to change the font? And can we change the size of the banner (thickness) ? Thanks in advance!
Hey! You would be able to change these elements by using the Custom CSS box! My suggestion: Right-click on the banner when viewing it from the front-end and inspect the elements using the Google Chrome Inspector to find the CSS classes for making those changes.
awesome! looking for a banner that moves across the screen.
Ah yeah I’m not sure if this one does that or not
hi ! very helpful thankyou , I got a question ! what if I want it just on a certain page and not on the home page ...also what if I want it in a different position like middle can I custom it ?
Thank you! I think, from what I can remember, with the plug-in you can choose which page you want/don’t want it to show up on. I’d check the settings after you install. There is no way to position it in the middle of the page tho, you’d have to do that within the actual design of the page layout itself.
Hi! This doesn't work on my website. I have a Divi Theme. It saves the space for it, but leaves it blank.
Hmmmm maybe contact the plugin developer? They’d have more experience with troubleshooting this.
It doesnt stick, any idea what I could be doing wrong?
Hi there, this video was super helpful however it is not showing up on my site. The preview on the backend looks perfect but when I go to my site, it is just a faint gray bar at the top. I noticed that I have a few suggested updates -Updater version, Parallax version and Landing version... should I be updating these before creating the banner?
**Edited - I updated all plugins and themes, but it is still showing up as the blank gray bar on the desktop. Nothing on the mobile site. Any suggestions?
Hey Chantel, great question! The answer to this is going to depend on quite a few things, including your theme, plugins, etc. But I would definitely start with updating the things on your site and then I would clear any caching plugins or settings you have on your hosting account (if accessible).
Mariah Magazine ok. I’m not super savvy so I may just need to contact GoDaddy support and see if they can figure it out. I’m always afraid to mess something up. Like I said, the preview of it looks perfect so it must just be a small simple glitch that’s not letting it show up on the actual site. Thank you!
How do you enable scrolling text?
Why, in my case, it appears only on my intranet zone and not on my main web site?
Unfortunately, it did not work for me. What am I missing? I followed the video step for step. thanks, Sharon
Hi Mariah, is there an option to have this banner show on every page?
Awesome question! It should by default show on every page. If not, there might be something in your theme settings/code preventing it.
I am trying to find out how to make the words move from right to left. anybody knows how to do it please?
Is there a way where I can add image/logo to the banner ?
I think this plugin, especially the free version only allows for basic HTML & CSS to be added. You can try to hard code an image with HTML and see if that works tho!
My banner is fine on mobile and is clickable but isn’t clickable on laptop/desktop. Can’t figure out why!
How to add scrolling text using this plugin?? can anyone help me??
why nobody shows the mobile customization because its looking horrible on mobile whe button is added and also why this banner is showing in other sales pages what i build, i build sales page in elementor
I’ve never used the button. I use HTML to add linked text to the banner without the visual button bc I think it looks cleaner. Sometimes how things look also depend on your theme/plugins, etc. If you’re having issues though, def reach out to the developer of the plug-in. They know it better than me!
Is this to announce a new business.
Well this would be an announcement bar on the website itself so it wouldn’t be helpful to use this as a way to announce a new business (if the business is associated with the website that the announcement bar is on) since the only people seeing it are the people already on the website. If you had another website and wanted to announce a new website, you could use this to point people from the one website to the new one. But essentially this announcement bar is good for directing the users of the website to something specific. But only people already on the website will see it.
How do you remove the simple banner???
Need animated banner
My banner shows great on desktop but not on mobile...How do I fix this? The top half of the banner shows but the second half does not. I have cleared cache on both desktop and mobile.
My theme is: Hello Elementor
This could be quite a few things. Themes and plugins can impact this. I don’t offer one on one support for these things but you can try reaching out to the developer of the plug-in!
worst plugin ever it made my navbar floating even after deleting it navbar is still floating
Hey Haseeb, unfortunately with WordPress & plugins there can always be conflicts with the coding. Especially when you have different elements coded by different humans. I'd try clearing any cache you have after you delete the plugin, if that's the route you decide to go. (Clear the cache on all levels; website, browser, hosting/server, etc)