How to make elementor column clickable?
Add the following code to Functions.php
if ( ! class_exists( 'Make_Column_Clickable_Setup' ) ) :
/**
* The main Make_Column_Clickable_Setup class
*/
class Make_Column_Clickable_Setup {
public function __construct() {
//add_action( 'wp_enqueue_scripts', array( $this, 'frontend_scripts' ) );
add_action( 'elementor/element/column/layout/before_section_end', array( $this, 'widget_extensions' ), 10, 2 );
add_action( 'elementor/frontend/column/before_render', array( $this, 'before_render_options' ), 10 );
}
/**
* After layout callback
*
* @param object $element
* @param array $args
* @return void
*/
public function widget_extensions( $element, $args ) {
$element->add_control(
'column_link',
[
'label' => __( 'Column Link', 'make-column-clickable-elementor' ),
'type' => Elementor\Controls_Manager::URL,
'dynamic' => [
'active' => true,
],
'placeholder' => __( 'https://your-link.com', 'elementor' ),
'selectors' => [
],
]
);
}
public function before_render_options( $element ) {
$settings = $element->get_settings_for_display();
if ( isset( $settings['column_link'], $settings['column_link']['url'] ) && ! empty( $settings['column_link']['url'] ) ) {
wp_enqueue_script( 'make-column-clickable-elementor' );
// start of WPML
do_action( 'wpml_register_single_string', 'Make Column Clickable Elementor', 'Link - ' . $settings['column_link']['url'], $settings['column_link']['url'] );
$settings['column_link']['url'] = apply_filters('wpml_translate_single_string', $settings['column_link']['url'], 'Make Column Clickable Elementor', 'Link - ' . $settings['column_link']['url'] );
// end of WPML
$element->add_render_attribute( '_wrapper', 'class', 'make-column-clickable-elementor' );
$element->add_render_attribute( '_wrapper', 'style', 'cursor: pointer;' );
$element->add_render_attribute( '_wrapper', 'data-column-clickable', $settings['column_link']['url'] );
$element->add_render_attribute( '_wrapper', 'data-column-clickable-blank', $settings['column_link']['is_external'] ? '_blank' : '_self' );
}
}
}
endif;
new Make_Column_Clickable_Setup();
function column_clickable_js(){
?>
<script>
jQuery( function( $ ) {
$( document ).on( 'click', 'body:not(.elementor-editor-active) .make-column-clickable-elementor', function( e ) {
var wrapper = $( this ),
url = wrapper.data( 'column-clickable' );
if ( url ) {
if ( $( e.target ).filter( 'a, a *, .no-link, .no-link *' ).length ) {
return true;
}
// handle elementor actions
if ( url.match( "^#elementor-action" ) ) {
var hash = url;
var hash = decodeURIComponent( hash );
// if is Popup
if ( hash.includes( "elementor-action:action=popup:open" ) || hash.includes( "elementor-action:action=lightbox" ) ) {
if ( 0 === wrapper.find( '#make-column-clickable-open-dynamic' ).length ) {
wrapper.append( '<a id="make-column-clickable-open-dynamic" style="display: none !important;" href="' + url + '">Open dynamic content</a>' );
}
wrapper.find( '#make-column-clickable-open-dynamic' ).click();
return true;
}
return true;
}
// smooth scroll
if ( url.match( "^#" ) ) {
var hash = url;
$( 'html, body' ).animate( {
scrollTop: $( hash ).offset().top
}, 800, function() {
window.location.hash = hash;
});
return true;
}
window.open( url, wrapper.data( 'column-clickable-blank' ) );
return false;
}
});
});
</script>
<?php
}
add_action('wp_head','column_clickable_js');