4 Ways to Make Your Entire Elementor Loop Grid Clickable

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:

▢️ 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/

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.