Elementor - Add Anchor (link) to Column Element w/ Hidden Anchor Text + Title Tag

functions.php

<?php
/**
 * Modify Elementor Column to wrap an anchor tag around it without actually wrapping it (overlay method)
 * 
 * 1) Add url controls to column for loading w/ a link
 * 
 * 2) Use 'elementor/frontend/column/before_render' action hook to update the column's 
 * css class and output the anchor tag (link) on the front end
 * 
 * 3) Load needed css to document header - conditionally, only if any column(s) has link(s)
 * 
 * 4) Load needed script to document footer - conditionally, moves all links inside it's nearest main column
 * content wrapper due to Elementor not providing a way to inject html inside the column (i.e. protected function)
 * 
 **/

//part 1. to add our url control to the column
add_action( 'elementor/element/column/layout/before_section_end', function( $element, $args ) {
  //add select element - link or no?
  $element->add_control(
	  'anchor_wrap_type',
		[
		  'type' => \Elementor\Controls_Manager::SELECT,
		  'label' => __( 'Column Link', 'elementor' ),
      'separator' => 'before',
      'default' => 'default',
			'options' => [
			  'default' => __( 'None', 'elementor' ),
				'link_url' => __( 'Custom URL', 'elementor' ),
      ],
		]
	);
	//add conditional link
	$element->add_control(
		'anchor_wrap',
		[
			'type' => \Elementor\Controls_Manager::URL,
			'label' => __( 'External Link', 'elementor' ),
			'separator' => 'before',
			'placeholder' => __( 'https://your-link.com', 'elementor' ),
			'show_external' => true,
			'default' => [
			    'url' => '',
			    'is_external' => true,
				'nofollow' => true,
			],
			'condition' => [
				'anchor_wrap_type' => 'link_url',
			],
		]
	);
	//add conditional anchor text (hidden but for SEO)
	$element->add_control(
		'anchor_wrap_text',
		[
			'type' => \Elementor\Controls_Manager::TEXT,
			'label' => __( 'Link Text', 'elementor' ),	
			'description' => __( 'Hidden but used for SEO/Accessibility purposes', 'elementor' ), 
			'condition' => [
				'anchor_wrap_type' => 'link_url',
			],
		]
	);
	//add conditional anchor title tag
	$element->add_control(
		'anchor_wrap_title',
		[
			'type' => \Elementor\Controls_Manager::TEXT,
			'label' => __( 'Title Tag', 'elementor' ),	
			'description' => __( 'Text for Title Tag', 'elementor' ), 
			'condition' => [
				'anchor_wrap_type' => 'link_url',
			],
		]
	);
}, 10, 2 );

//part 2. action to add custom column class and render the anchor tag "before" our column element
add_action( 'elementor/frontend/column/before_render', function( \Elementor\Element_Base $element ) {
  $settings = $element->get_settings();
  if ( ! empty( $settings['anchor_wrap']['url'] ) ) {
    //create constant to know a col url exists
    global $colurls;
    $colurls = 1;  //set true
        
    //add custom classes to main column wrapper and inner wrapper	    
	  $element->add_render_attribute( [
		  '_wrapper' => [
		    'class' => 'col-url',
		  ],
		  '_widget_wrapper' => [
		    'class' => 'wrap-has-url',
		  ],
	  ] );
        
    //create link structure for output
    $target = $settings['anchor_wrap']['is_external'] ? ' target="_blank"' : '';
	    $nofollow = $settings['anchor_wrap']['nofollow'] ? ' rel="nofollow"' : '';
	    $link_text = $settings['anchor_wrap_text'] ? $settings['anchor_wrap_text'] : '';
	    $title_text = $settings['anchor_wrap_text'] ? 'title="' . $settings['anchor_wrap_title'] . '"' : '';
	    $link = '<a href="' . $settings['anchor_wrap']['url'] . '"' . $target . $nofollow . $title_text . ' class="col-link">' . $link_text . '</a>';
        
	  echo $link; //output
  }  
  return;
}, 10, 1 );

//part 3. add styling css to document head
add_action('wp_head', function(){
  //fires too soon for global, need to figure out how to make this dynamic like below - possibly write/read post_meta?
    //if( $colurls === 1 ){
    ?>
      <style type="text/css">.col-url{position:relative;}a.col-link{opacity:0;visibility:hidden;transition:all 300ms ease-in-out;}.col-url a.col-link{position:absolute;opacity:1;visibility:visible;margin:auto;top:0;right:0;bottom:0;left:0;width:100%;height:100%}</style>
    <?php
    //}
});

//part 4. add conditional script that identifies column links and moves them into the column w/ smooth css transiton
add_action('wp_footer', function(){
  global $colurls; //only if we have any columns with links
  if( $colurls === 1 ){
    ?>
    <script type="text/javascript">
    var link_columns = document.getElementsByClassName("col-url");
    for (var i = 0; i < link_columns.length; i++) {
      var link_column = link_columns[i];
      var link_wrapper = link_column.querySelectorAll(".elementor-widget-wrap.wrap-has-url");
      var link = link_column.previousElementSibling;
      link_wrapper[0].appendChild(link);
    }
    </script>
    <?php
  }
}, 999);