Это видео недоступно.
Сожалеем об этом.
How To Add Menu Notification Badges That Demands Attention & Clicks
HTML-код
- Опубликовано: 1 апр 2019
- We are trained to click on anything with a notification badge and in this tutorial, I will show you how to use this powerful tactic on your website.
For the CSS code visit
www.wpcrafter....
I used the following products:
Astra www.wpcrafter....
Elementor www.wpcrafter....
Inspired by:
www.wpcrafter....
www.peeayecrea...
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 SureMembers -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 Presto Player -- www.wpcrafter.... (SAVE 33% Auto Applied)
🟡 Astra Theme -- www.wpcrafter.... (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows -- www.wpcrafter.... (SAVE 40% Auto Applied)
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss -- www.wpcrafter.... (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra -- www.wpcrafter....
🟡 Elementor -- www.wpcrafter....
🟡 Beaver Builder -- www.wpcrafter....
🟡 Divi -- www.wpcrafter.... (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List -- www.wpcrafter....
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger -- www.wpcrafter.... (SAVE 75%)
🟡 NameHero -- www.wpcrafter.... (SAVE 70%)
🟡 SiteGround -- www.wpcrafter.... (SAVE 70%)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
![Finesse2Tymes & Og Boo Dirty - Real Recognize Real [Official Music Video]](http://i.ytimg.com/vi/3xb4bl5PWF8/mqdefault.jpg)
I have already learnt from you so much! THX Adam :-)👍😀
You really are the best WordPress teacher on RUclips thanks for providing all these quality content we really do appreciate all your help (greetings from Arizona USA)
Adam, thanks for this one. We don't need to mess with adding new plugins for every little piece of functionality. Simple code like this will do just fine and you explained it well. We need more tutorials like this!
Thank you and I will do more like these.
You are a real savior. Thank you so much! Bless you!
Hey,
Your code is working in the Astra-free theme.
Both bouncing effects and still also.
Thanks a lot.
You're the true god of wordpress
Great video, Adam. Very cool. Thx
Excellent and *always*!
I am testing this today; Beamer was giving me issues when I tried customizing it. Thanks Adam!!
YES! This was the initial intention for this video. Make your own beamer. Of course, the badge is not dynamic but is that really needed anyway. I recently took it off of my site in order to maximize the speed of my website.
Excellent : I will try this shortly... Thankyou ...
again, one of that moments, when your new video perfectly fits to what i'm working on right now - thank you adam! what i dont like about it: because of the hashtag in URL, the site jumps to the top, when triggering the popup - i left this blank and wrote one additonal line of css (to fix the cursor when hovering the menu-item) - works awesome : )
Adam like always I freeking love it thank you so much! I am going to implement it ASAP. 👍👍👍
Adam I love your videos, full of so much useful information and tutorials, please don't stop sharing your valuable knowledge.
Thank you!! It's wonderful!
Very cool! Thank you for sharing.
Thank you Adam it worked perfectly
Came across this video when searching for a way to add the badge. I'm trying to roll my own beamer alternative, funny you had the same idea, GMTA. I figured with Elementor it was pretty 'simple' to create a few blog posts in a side pop up. I really like the badge though and wish there was a more in-depth tutorial on how to actually have it show/disappear based on if they clicked it. There's probably a way to do this with cookies of course. It would also be cool to have an actual dynamic badge that shows the number of new posts.
Amazing video like always :)
Great tutorial thank you.
Thanks Adam! It's work great!
Ok Adam, my eyes went to the photo in both cases..didn't notice the red button until you mentioned it :-)
Facepalm :-)!
Haha You are forgiven sir
Great value. Thanks.
Great video and tutorial. I've added it to one of my sites and it looks and works great. Thanks a lot Adam, you're the man!
Happy to hear that you're able to implement this cool tactic. Hope it works out great for you on your website.
Awesome tut, thanks for sharing. Can definitely come up with several uses for this.
Enjoy!
Yes I am interested in this kind of contents, Excellent teaching
Thank you and thanks for watching.
This is great!! I've been thinking the same about adding something like this. Thank Adam!
They are irresistible. Your welcome.
Thank you! Exactly what i was looking for, explained well.
I like that a lot :)
Thank you Adam
thank you, as always great videos, god bless u
I will definitely use this attention grabber tip. Thnx again Adam.
Awesome! Thanks!
Not long ago, I decided to get fully immersed in web design. I watched some of your videos and as a result (+ my own due diligence) I purchased Beaver Builder, UABB, and Astra Pro. Now months later, there seems to be greater energy around Elementor. Am I missing something?
OAN: Excellent video, again! I am finding out how to do this with Beaver Builder tools (I am confident that i can). One day, i'll post a video about it... LOL.
Really cool video, Adam. Thank you.
Amazing!!! Thank you for sharing!
Brilliant! Thank you
All my client sites are in BB but I rebuilt my new site (almost done) in Elementor. Was going to add my second Beamer code to it but THIS is what I’ll do now. Love the idea of adding a form at the top of the slide out. Amazeballs :)
Curious, is this possible in Beaver Builder with and of the Ultimate or Power Addons? Else there’s always that plugin you showed briefly. Well it was brief to me. I watch your stuff at 3x speed :)
Another idea I had was is it possible to use this technique when doing a Live RUclips or FB Live or both and stream to a window in the pop out or make the notification say “Live Now” and allow people to watch and subscribe from within the slide out?
Alternatively just like the subscribe box have a Live Box? with or without a notify me for next live video?
Thanks Adam!
Great Video! Thanks! I keep seeing on several formats the siteground is
the hosting service to use. Just for everyones info Bluehost is becoming
a non-professional nightmare to use. Never had issue before until the
last few times using them as a hosting service!
amazing info Adam thanks and keep making this type of tricks
Loved that video hahaah definitely I will implement
And you can use it on any platform, not just WordPress.
Thanks for sharing again a great video and sharing us knowledge...
Nice... Thanks.
Hi Adam. Love this! Is possible to make a header button bounce? Instead of adding a badge.
Please could you expand this tutorial. It is nice
Good stuff Adam. I loved the fact that no plugins were needed. I've started to use code in my php functions file as much as possible because if one is not careful, the website will have 30 plugins which are just too many. Do you use code instead of plugins, unless it's absolutely necessary? Thanks again for providing solid information.
Hi adam.. Great video it works like a charm.. By the way is there any way to make that bubble disappear after clicking? Please let me know
Hi Adam, awesome video, thank you for your time filming this tutorial. It doesn't seem to work for me. When I put NEW next to my Contact page it appears Contact NEW. Look like he doesn't recognize my span class. I am using a paid theme with elementor. Thanks in advance.
GOD BLESS YOU!
Adam hey
I want help from your side.
In my wordpress website manu (headers) page also showing in footers. But i want pages show only in manu (headers).
Please help me to fix it
Hello. how can i make this little bubble disappear after clicking on the menu?
Can you show how to add a pop questionnaire that looks like somewhat of a game that looks fun to fill out? Id like the results to be email to me so I can reply to that prospective lead.
You are great person thank you
And GOD bless you
Great vid Adam! Thanks! When might the snippet for Astra Free be available?
Can you use it for latest IG posts? Or upcoming events?
Dope brother
You are the best Adam! Can u pls make a comparison between beaver and elementor pro?
I have done in the past and I have a current write up on my website. I'm not sure if I make another comparison video but I will make one comparing all the big page builders soon.
please Adam I need your help to rescue my website, i can no longer edit any page on my wordpress website, once i click on edit ,it will face out and pop up something strange image and said view or add to cart
is there a way to display a png image instead of a word?
Adam, I have noticed that on my 2012 Macbook Pro the site is using 0.4% CPU without it and 33-44% of CPU with it animating. Are you aware of its needs to run smoothly? My machine isn't the latest but it's still an i7 CPU, 16GB and m2 SSD pretty fast machine. However with this code it simply goes crazy what I'm observing in the Mac's "Activity Monitor". Just noticed that and removed it right away... Can anyone confirm website using MUCH MORE resources (CPU) when using this? Thanks!
Awesome Adam! Now I'm not so bummed I missed Beamer ;)
How do you hide the badge once clicked?
Thanks man, great tutorials but tried this one, followed you to the T but the pop up doesnt show no matter what I do
Could you for example add WooCommerce products in a side bar? I'm wondering how it would impact the conversion rate.
I think if it was new arrivals or a special promotion, it will definitely draw attention to it.
@@WPCrafter that's exactly what I had in mind. Will have to experiment with it during the next few days. Any ideas how to display products in there? Create a special category or add them manually?
I did that, added mine, choose under woocommerce you'll see it
@@grzegorzwolsztyniak6233 There are many ways to do it. I would choose them manually. A page builder will make it really easy to do.
All the look and feel of my website dyplus.com.ng is all due to your tutorials. I am so grateful you keep doing what you do. Now am going to add this new trick.
Thanks Adam. You rock!
I just implemented it in my site and I love it.
0:49 I can't speak for anyone else but I was checking out that beautiful chick, lol
Good eye
Another great video as always Adam :)
One little niggling item ... on the popup Open By Selector, you sneaked in that period for the cool-pop class name without mentioning it and that it needed to be there. Then on the menu item CSS Classes (optional), you didn't mention that you do not put the period there :)
Just my OCD popping up! LOL :)
Cheers!
Lyle
You sir are a legend! if not for your comment I'd been stuck. thanks!
@@candiskull1 - you're welcome :)
Great tutorial Adam. Thank you! I was wondering if you could make a tutorial on "how to change your admin URL from the default site.com/wp-admin" to something different say site.com/login or whatever your want. With so many sites being hacked, I would love the ability to change this darn URL to something different (extra layer of security). Now I am well aware that plugins do this...But I would like to accomplish this specifically WITHOUT having to use a plugin. I've checked some of the tutorials on youtube and they either can't explain things properly (or like you do) or they just don't work. Is that something you'd consider doing for us mere mortals? Thanks again for everything you do!
Will this badge go away when customers click on it?
Question: I'm using the Hello theme and Free elementor. The bouncing effect works great the Hello theme and free Elementor using the generic menu that comes with Free elementor. However I had to use the Quad menu and when using the Quad menu with the Hello theme the bouncing effect will not work.
Any suggestions what I can look for in the code that could make this work with the Quad menu? Keep up the great videos!
Maybe ask the dev of Quadmenu? I am sure he can help.
Hi Adam thanks for the tutorial but i have an issue, where i placed the code, it made the menu i pasted the code in to come down by one step. now my menu is not in a straight line. please hoe can i fix it that the whole menu will be in a straight line? here is the error prnt.sc/nidbts
Please what screen recorder do you use
I have a complicated setup using vMix.
Would it be possible to add in code that delays 3 seconds before the badge appears?
It's possible. You can script like a jQuery .delay function.
#WPcrafter @WPCraftet Sir how can I add canvas particles animation on my website like header or footer ?
Hey can you review “cssigniter” theme
0:43 100% men : what headline !!!? haha cool video but we gotta avoid beautiful ladies pictures to highlight any badges.
Muhahahaha
But Men will be Men😂 If you know what i meant 😄 Anyway that was great tips😁 Thanks
At first,I was looking at the pictures...
Sorry, I never saw the red badge. Look, if you want to draw someone's attention...put a beautiful woman on the page. Marketing 101. Tiny red badges simply do not compare.
Hahaha
If you are a REAL MAN YOUR EYES GO TO THE CHICK
Muhaaaa. I am married, my eyes go there I am dun for :-)