Dynamic Author Bio POPUP with GenerateBlocks (My New Favorite Trick!)

Подписаться 10 тыс.

Просмотров 4,6 тыс.

50% 1

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

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@sprinterfix Год назад

my new favorite channel. I was anti wordpress for the longest time until I saw your Tom Usborne interview

@TheAdminBar Год назад

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.

@PilatesinSacramento Год назад

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.👍

@iamYasin22 Год назад

I was waiting for this. Love you Kyle Bro ♥

@TheAdminBar Год назад

hahaha glad it comes in handy!

@agentbey Год назад

Great tutorial Kyle. Easy to follow along.

@MrOliver1444 Год назад

I love this little trick. Thanks Kyle.

@TheAdminBar Год назад

Glad you enjoyed it! Thanks!!

@comartse Год назад

Nice solution! Thanks for presenting the details!

@TheAdminBar Год назад

Glad you found it useful!

@andreadant Год назад

Lov it Kyle, great trick!

@TheAdminBar Год назад

Thanks! Glad you enjoyed it!

@majoritymedia692 Год назад

Kyle for the win! This is a nice touch. P.S. How did I miss you growing a beard? 😯

@TheAdminBar Год назад

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 😂

@hiddenholland 10 месяцев назад

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?

@MikeOliverDesign Год назад

Nice! Need to try this out

@TheAdminBar Год назад

Let me know if you find any better ways!

@Steveeland Год назад

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!

@TheAdminBar Год назад

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.

@Steveeland Год назад

@@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.

@HorizonTrading Год назад

@@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

@DavePerth Год назад

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?

@TheAdminBar Год назад

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.

@michealphilips7153 Год назад

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.

@jessica2123 Год назад

I'm having the same issue! I must be missing something...

@sailingfromswitzerland 4 месяца назад

I'm having the same issue

@AndrewDForbes1984 Год назад

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.

@TheAdminBar Год назад

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

@davidson7838 Год назад

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. 💥💢💯

@Johan_Growthlake 5 месяцев назад

This is cool! But is possible to have it work for mobile as well? Not hover on mobile but click.

@DeviCube Год назад

Thanks buddy

@TheAdminBar Год назад

No problem, glad you enjoyed it!

@DeviCube Год назад

@@TheAdminBar 🥰

@ashokvaswani123 2 месяца назад

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

@rallesreviewkanal5849 Год назад

Hi Kyle. Beginner question. How to get the links into the popup?

@DenisonCarlosMS Год назад

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!

@TheAdminBar Год назад

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.

@DenisonCarlosMS Год назад

@@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.

@cooladityarai 5 месяцев назад

If i want to add author name and also Proof reader name, how can we do ?

@BGdev305 Год назад

Nice work. Does Generateblocks not have dynamic visibility?

@TheAdminBar Год назад

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.

@HeartfeltHighlights-bm1wl 5 месяцев назад

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)

@DeviCube Год назад

can you do single post layout for gaming with pro look dark backgournd please !

@TheAdminBar Год назад

Anything is possible :)

@DeviCube Год назад

@@TheAdminBar pls do video for that if you can

@379rale Год назад

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

@TheAdminBar Год назад

😂 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!

@badcatdesign Год назад

@@TheAdminBar I like it. I keep the volume down and it's like we're face to face having a private convo. lol.

@379rale Год назад

@@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

@MrOliver1444 Год назад

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

@TheAdminBar Год назад

That's Epic!!!! Really cool man, thanks for sharing!