ENABLE THE SUBTITLES!
In this tutorial you will learn how to make an iconbox/imagebox fully clickable with 1 CSS rule.
In Elementor the iconbox/imagebox is only clickable via the title and the icon/image. I think that's a bad choice because the title has no hover options, you can only see by your cursor that the title is clickable. I really don't like that.
So we are going to improve the UX and make the card fully clickable via a psuedo element on the link in the title element.
This tutorial does NOT explain what a pseudo element is, I only provide the code you need.
Special credits to Maxime Desrosiers for this trick. He uses a similar method but in a different application. He inspired me and that's why I want to thank him this way.
Maxime has a tutorial website : element.how/ which I highly recommend.
He also has a youtube channel : / @elementhow691
TIMESTAMPS:
00:00 Introduction
00:45 Make the iconbox fully clickable
02:41 Fix icon hover effect
04:14 Make the image box fully clickable
05:05 Add some hover effect via the tranform panel
06:05 Check on the front end
CODE FOR THE ICONBOX
selector .elementor-icon-box-title a::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
CODE FOR THE IMAGEBOX
selector .elementor-image-box-title a::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
EXAMPLE PAGE
franktielemans.be/blog/make-i...
Негізгі бет Тәжірибелік нұсқаулар және стиль Make the Elementor iconbox/imagebox widget fully clickable with ONE CSS RULE!
Пікірлер: 14