In this tutorial, learn how to make your entire loop grid container clickable 🖱, highlighting ♿️ accessibility concerns relatin to each method.
In a future video, I’ll go through designing a blog archive page and how to reorder elements in your post loop to improve screen reader accessibility.
Subscribe for more Elementor and Bricks tutorials:
https://www.youtube.com/@daveden2?sub_confirmation=1
|| PLEASE WATCH
▶️ Landmark Regions in Elementor – https://youtu.be/96NOwnZGpHM
|| Recommended Resources:
🔗CSS Tricks article – https://css-tricks.com/block-links-the-search-for-a-perfect-solution/
🔗 NVDA (Screen Reader): https://www.nvaccess.org/download/
🔗 Elementor Pro: https://daveden.co.uk/links/elementor-pro/
🔗 Crocoblock: https://daveden.co.uk/links/crocoblock/
🔗 Dynamicooo: https://daveden.oc.uk/links/dynamicooo/
🔗 Bricksbuilder: https://bricksbuilder.io/
|| TIMESTAMPS
0:00 Intro
0:38 Building the initial loop template
3:48 Method 1 – apply link to wrapper container
8:48 Method 2 – apply link to individual elements
11:29 Method 3 – Using absolutely-positioned pseudo-element
16:36 Method 4 – Using javascript
19:05 Conclusion
|| Let’s Connect:
👉 Subscribe: https://www.youtube.com/@daveden2
👉 Facebook: https://www.facebook.com/daveden2
👉 Instagram: https://www.instagram.com/daveden2
👉 Website: https://daveden.co.uk/
|| Disclaimer:
Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide, I may receive a small commission. There is no additional charge to you! Thank you for supporting me, so I can continue to provide you with free content each week!
|| Soundtrack
🎵 Life is a Dream- Michael Ramir C.