Dynamic Author Bio POPUP with GenerateBlocks (My New Favorite Trick!)
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- In this video, I'm going to show you how to create a nifty little "popup" (or tooltip, maybe?) that displays author information when you hover over the author's name in a blog post.
Most of it will be done using just GenerateBlocks, but we'll need just a pinch of CSS to get it. functioning.
Get the CSS here: theadminbar.com/dynamic-autho...
[ Video Created and Produced by Kyle Van Deusen ]
👏 COMMUNITY
Join our free community: theadminbar.com/group/
(voted best WordPress community!)
✋ REQUESTS
Email me at: kyle@theadminbar.com
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.com/events/
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.com/products/wom/
Write proposals in less than 15 minutes with this template: theadminbar.com/products/easy...
Fill your prospect pipeline in this 3-week challenge: theadminbar.com/products/pros...
5 Airtable templates I use to run my agency: theadminbar.com/products/agen...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.com/friday-chaser/
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.com/products/#end...
Kyle on Twitter: / kylevandeusen
my new favorite channel. I was anti wordpress for the longest time until I saw your Tom Usborne interview
Glad to have ya! :) Tom is legit... Of course, WordPress isn't the best tool for everything... but it's a great multi-purpose solution.
Great video! Your videos are really well done. Super useful stuff and very clear explanations. Even down to the last minute where you described the client’s motivation for this. I’m primarily a Kadence user but your videos translate well there too. Thank you for great content.👍
Great tutorial Kyle. Easy to follow along.
I was waiting for this. Love you Kyle Bro ♥
hahaha glad it comes in handy!
I love this little trick. Thanks Kyle.
Glad you enjoyed it! Thanks!!
This video was so much fun to follow along. Thanks, Kyle! The pop-up box doesn't stick for me on hover 90% of the time. Sometimes, I can get to the links inside the box, and it will stick, but the box often disappears the moment I move my mouse. I added the CSS 1-1 you provided. Is there a more solid alternative to make sure the box stays visible?
Nice solution! Thanks for presenting the details!
Glad you found it useful!
Lov it Kyle, great trick!
Thanks! Glad you enjoyed it!
Nice! Need to try this out
Let me know if you find any better ways!
Hi,
Can you show how we can laod static/dynamic video background to container? is video background a feature of GenerateBlock? and does it support animations?
Thank you for the videos I really loved your tutorials. 💥💢💯
This is cool! But is possible to have it work for mobile as well? Not hover on mobile but click.
Hi Kyle. Beginner question. How to get the links into the popup?
Kyle for the win! This is a nice touch. P.S. How did I miss you growing a beard? 😯
Oh man, the beard just comes and goes 😅 I'm just too lazy to shave. It will get annoying (or my wife will complain) and I'll chop it off again 😂
Thanks Kyle! Great tutorial!
Quick question: do you know how to make the social media links open in a new window?
Regular buttons have the simple link options to do this, but using dynamic content doesn't.
(I'm using the free version of GenerateBlocks.)
Thanks.
Hummm I'll have to go back and take a look - I hadn't considered that! Worse case, you might be able to edit the block as HTML and add target="_blank
I want to add a co-author box and I want to select the co-author from my users that I have created accounts for
Hi Kyle,
Although you have never replied to any of my queries to you in the past, this is the last time I am trying if you can answer my query. As you have created a pop-up for the author box, is there any way that we can create a similar disappearing popup box on a single word in the paragarph? For instance, I want to make a pop-up the moment I hover on the word "CREATED" in the above line... Can you make a video on the subject???
Thanks (if I get a reply from yourside this time)
If i want to add author name and also Proof reader name, how can we do ?
Thanks Kyle, great video, I can see this being used in other areas - I guess my only reservation is that there is nothing really obvious that the link pops up the dialog?
Yeah, I think if you want it MORE obvious (besides it being a link), then just put the full bio up there in the hero not hidden.
Without thinking too much, and asking based on hope, would this CSS Code be applicable to create a more Complex Mega Menu?
If so, it would be great not to depend on third-party plugins.
I'll test it out this weekend!
I'd be pretty hesitant to do that. This solution doesn't actually work on "focus" (I couldn't get it to, anyway) and there are a LOT of other concerns when it comes to navigations. Semantic HTML is going to be critical for both SEO and accessibility - so using a "real" navigation element is going to be much safer.
@@TheAdminBar, it makes perfect sense. Looking more closely, SEO would be a big issue within this scenario with a Block like Popup in Navigation. That's why I didn't use GeneratePress in projects with WooCommerce that require Mega Menus. And since the idea is to avoid a ton of plugins, Kadence and Blocksy have served these projects perfectly because they have Mega Menu in their Pro options.
Hey, any idea why the hover won't work? I tried everything, disabling/flushing the varnish cache. Both of author name and pop-up have a custom CSS using the generateblock. The CSS does hide the pop-up, but only the hover doesn't work.
I'm having the same issue! I must be missing something...
I'm having the same issue
Thanks buddy
No problem, glad you enjoyed it!
@@TheAdminBar 🥰
Well, popup is really an Achilles heel of Generateblocks for me. This is a kinda solution for some issues, but not the real deal. Btw, appreciate all your videos, this one as well!
Yeah, I know what you mean. This certainly isn't a "popup" in the traditional sense (but gotta convey the point in a few characters 😅). Kadence has a really great popup system, but I've just decided to try and avoid them. Users don't really like them, they can be difficult for accessibility, and there's usually another way.
@@TheAdminBar I will try Kadence in our next project (I've started to shift our portfolio from Elementor to Gutenberg) as it is a webshop and Kadence has ways to customize product pages. For popup, I decided to mix GenerateBlocks with Greenshift blocks, their popup block is good enough. To a certain point GeneratPress+Block is really great (simple, robust and low maintenance), but the thing I really dig. with Gutenberg is that you can mix it up with other blcoks without much bloat.
@@TheAdminBar How about a popup displaying an article title with its featured image when hovering over regular Internal links in posts?
Excellent video and work as always. Thanks
Nice work. Does Generateblocks not have dynamic visibility?
There is a TINY bit of that, which I'll be exploring in a video next week. But no, for the most part it does not.
can you do single post layout for gaming with pro look dark backgournd please !
Anything is possible :)
@@TheAdminBar pls do video for that if you can
Thanks again!
Just one minor complaint... You are way too close to the camera to start the video. It's a bit disturbing on a 27" screen :D
😂 Yeah, doing my best on that... I don't have any more room to zoom out and if I just physically scoot my body back, then the audio is way different than the screenshare audio 😭 I'll keep tweaking on it!
@@TheAdminBar I like it. I keep the volume down and it's like we're face to face having a private convo. lol.
@@TheAdminBar Totally understood. I appreciate the effort
What kind of mic are you using? Maybe you should get one of those podcast mics, or the ones you wear on your body
Doesn't really matter if the audio is different. Just match the levels by boosting or lowering one of them
Hello sir, Can we make blog post unlimited scrolling article using generatpress.
That's one I don't know much about. I'll have to do some digging.
kyle, Thanks for the inspiration. I used wpcodey to generate the fields you have created with the ACF plugin. It works I don't need the plugin. I can use wpcodebox (which I have anyway). that's the code:
Extra profile information
Author Bio
Please enter your author bio.
Facebook URL
That's Epic!!!! Really cool man, thanks for sharing!