Stop Using Link Blocks in Webflow

[@jo69123]

Timothy your tutorials are getting just better and better every time, thanks for sharing :)

[@jasonfc3844]

I see your videos time to time and never disappointed. Thanks Tim for such an effort !

[@nav-unger]

Thanks and I wish you a wonderful Xmas and 2024..

[@aaronkaiser]

I hit play expecting to disagree with you, but you actually made good points and won me over. Obviously there are still times when using link block is appropriate, but this is definitely something I will follow moving forward.

[@timothyricks]

Thank you, Aaron! Really glad to hear this helps! Yes, links are still needed for linking to other pages. I’ve just been guilty of overusing them when a button would be better.

[@Shampie]

Same here!

[@vladimirpetroski7089]

Thanks for the video Timothy! Always a pleasure and I'm always learning something new 🤙

[@benvindadossantos2092]

always useful. Thank you Tim, happy holidays!

[@juliocarranza1416]

Thank you Tim this is absolutely best practice! well done

[@MyDistortedWorld]

Makes total sense and is semantic logic.

[@jclewis33]

Thanks for the video. Very helpful. And good explanation between the two.

[@MerijnJoosen]

Thank you, favorite teacher ever!

[@karan.k]

I consider you my webflow mentor, great video as always and thanks for connecting on LinkedIn.

[@timothyricks]

Thank you!

[@Malik-Muhammad-Yusuf]

Amazing as always. I have learnt a lot from you. Keep rocking 👏.

[@timothyricks]

So glad to hear that! Thank you!

[@lakivicsa]

Thank you! Really love you content, it helped me so much!

[@timothyricks]

Thanks so much!

[@oneofafyew]

Love your videos! Big question though - how do we simplify buttons especially for something that's purpose is only to 'close' something which popped up from a different interaction or button on the same page. The 2nd click for interactions is killing me and can't find a way around it. Essentially looking for a simple way to open & close something on a page but has different triggers.

[@moesyah]

excellent! thanks timothy

[@naucidizajn]

Great video! Where can I order that Webflow icon that is behind you?

[@timothyricks]

Thank you! www.webprints.com gave me this one. They were going to sell them, but Webflow said they can’t sadly. Many libraries have 3D printers you can use though.

[@DANNYFIGDESIGNS]

Thank you! 👊🏼

[@valdiszhvaginsh]

Thanks!

[@templa946]

Ive come across a bit of an issue though and that if you add a text inside the custom element so as to have a button with text, such as 'Submit' , Webflow wraps it in a Div... Which is invalid. You cant have div in a button element. Any thoughts?

[@timothyricks]

We can use a custom element with a tag of span inside the button which is valid. The custom element with a tag of button can also have text directly inside it without needing an extra element

[@templa946]

@@timothyricks That worked, thanks!

[@davetaylormusic]

Great content like always Timothy! Can you tell me how to actually add the URL link to the custom element if I’m using it for a button? Is that done through an attribute? Thanks in advance!

[@timothyricks]

Thank you! Button elements shouldn’t get a url. They’re used for actions that don’t take you to a new page. Anything that requires a url should use a link block instead.

[@turaluix]

Hey Timothy, is it possible to create a custom button element which can submit a form in Webflow? I tried it didn't work...

[@sickpeople89]

he literally talks about this in the video, just add an attribute type=submit

[@davidkathrein9644]

Awesome 🎄🎅

[@dima_tregubov]

Great, thanks

[@niklashansson1928]

What about editing the button link in the Editor perspective?

[@timothyricks]

For anything that needs a url, we should use a link element. Buttons can’t have urls. We use buttons to trigger interactions and links for navigating.

[@njanadesign]

you're a legend

[@BorhanMediaWebdesign]

Hey Timothy thanks for your tutorial! Once Again very useful! 🔥💪🏽 I was wonderint about your recordings, you said that you use Screen Studio. But do you record yourself in a different setting? So you can show full screen footage of yourself? Thanks in Advance!

[@timothyricks]

Glad to help! I recorded the full screen footage separately with QuickTime. I noticed a few places though where it would have been nice to cut to full screen in the middle of a screen recording spot. So I might need to look into different software. But I just love how smooth and easy Screen Studio makes it to animate the cursor and zoom.

[@Ali_UX_Desinger]

But how to link that button to another page? I'm using this to wrap up a card and I can't see how to link with to target page

[@timothyricks]

Button tags are for when the card needs to open a modal or trigger some action on the same page. Link blocks should be used for anything that leads to a new page.

[@Ali_UX_Desinger]

@@timothyricks Thank you tim

[@joaolucaswork]

awesome

[@Alzbeta_P]

I don’t understand how do I link it to a page or url?

[@timothyricks]

Good question! Anything that links to a url requires a link. Buttons are used for actions that don’t take us to a new page.

[@ihor.design]

@@timothyricks Please, explain, why can't we use just a div block for this?

[@timothyricks]

@@ihor.design hi, good question! Div blocks aren’t focusable by default so keyboard users can’t navigate to them. There’s attributes we can add to make divs focusable, but screen readers wouldn’t announce that it’s a button and users wouldn’t be able to select a div with spacebar. Basically, using a button to trigger interactions is best for accessibility and satisfies expectations keyboard users have of how a button should work

[@Fray-bentos-george]

Thanks Tim. I do think It’s a bit of a shame we have to do work around such as this. Isn’t that the point of webflow to take this kind of work/thinking away from designers.

[@timothyricks]

Yeah, I wish the button element was included natively with the correct attributes already attached, but it does benefit designers to understand what each attribute does especially for building accessible websites. It’s pretty amazing that Webflow gives us this level of control that other no code tools shy away from. And it looks like Webflow’s going to keep reducing the gap between no code and traditional development with the introduction of features like custom css properties. I’m happy to embrace it and really learn how code works.