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 relating 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.
|| Simple Clickable Card CSS
/* Add the class name "dd-link-card" to the parent container and "dd-link-card__trigger" to the post title link */
.dd-link-card{
position: relative;
}
.dd-link-card :has(.dd-link-card__trigger a){
position: static;
}
.dd-link-card__trigger a::before{
position: absolute;
inset: 0;
z-index: 3;
}
Subscribe for more Elementor and Bricks tutorials:
/ @daveden2
|| PLEASE WATCH
▶️ Landmark Regions in Elementor - • Improve Elementor Site Accessibility With ...
|| Recommended Resources:
🔗My article - https://daveden.co.uk/tutorials/click...
🔗CSS Tricks article - https://css-tricks.com/block-links-th...
🔗 NVDA (Screen Reader): https://www.nvaccess.org/download/
Subscribe for more Elementor and Bricks tutorials:
🔗 https://davedens.link/subscribe
► Connect with me: ◄
📺 Subscribe: / @daveden2
👍 Facebook: / daveden2
🐦 X (formerly Twitter): https://x.com/Daveden2
🌐 Website: https://daveden.co.uk/
► Recommended Tools (Affiliate Links - Support the Channel!) ◄
🔗 Elementor Pro - https://davedens.link/elementor
🔗 Dynamic Shortcodes - https://davedens.link/dsh
🔗 Crocoblock JetEngine - https://davedens.link/jetengine
🔗 Bricksbuilder - https://davedens.link/bricks
🔗 WDesignKit - https://davedens.link/wdkit
🔗 Epidemic Sounds - https://davedens.link/sounds
🔗 Hostinger: https://davedens.link/hosting
|| 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: / @daveden2
👉 Facebook: / daveden2
👉 Instagram: / 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.