Iconboxes (whole card is clickable)

Body background-color on scroll

With this script you can change the body background-color on scroll in a smooth transition.

Custom grid for image gallery

This gallery is styled in a complex grid.

Custom button styles

All these are buttons are custom styled with CSS.

Imageboxes (whole card is clickable)

Tabs widget styled in a grid

This tabs widget is styled in a grid and it uses a clip-path animation to show the content.

Bodyframe effect

This nav menu widget uses clip-path animation to open a the fullscreen menu. All done with CSS.

Image gallery in marquee

This image gallery animates like a marquee, done with CSS

Posts widget (whole card is clickable)

The script

The script below makes the whole area of a icon-box, image-box or post clickable. Not only the image, icon or title or read more button, but the whole card! 
Everything happens dynamically, because the script automatically searches for a link, creates a link wrapper around the element and adds the link to it.

To make it work copy the script below and paste it in a HTML widget.
Next, select the section that holds the iconboxes, imageboxes or posts and give it the classname linked-widgets
That’s all!

 

If you want to run the script on the whole website, go to Dashboard > Elementor > custom code > add new code
copy – paste the Javascript and CSS and paste it in a new custom code file.

Make sure the Javascript runs in the </body> end and the CSS in the <head>

				
					<script>
document.addEventListener("DOMContentLoaded", function() {
jQuery(function($){
    
$(".linked-widgets").find(".elementor-widget-image-box, .elementor-post, .elementor-widget-icon-box").each(function(){
    
let link = $(this).find("a").attr("href");

$(this).wrapAll( document.createElement( "a" ) );
$(this).closest("a").attr("href", link); 
    });
});
});
</script>


<style>
/*styles to fix equal height*/

.linked-widgets .elementor-widget-image-box,
.linked-widgets  .elementor-widget-wrap > a ,
.linked-widgets  .elementor-widget-icon-box {
    display: flex;
    height: 100%;
}

.linked-widgets  .elementor-image-box-wrapper,
.linked-widgets .elementor-posts > * > * {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.linked-widgets .elementor-image-box-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
 }
</style>

Body background-color on scroll

With this script you can change the body background-color on scroll in a smooth transition.

Custom grid for image gallery

This gallery is styled in a complex grid.

Custom button styles

All these are buttons are custom styled with CSS.