Title

Elementor CSS clickable column

description

Apply a link from a widget to the entire column

Published 2022-08-11

Modified 2022-08-19

content

  1. Add class ‘clickable‘ to the column under advanced settings
  2. The widget containing the link to apply to the column should and will be the -only- link: add the class ‘full-link‘ added under advanced settings to that widget
  3. Add the following CSS to the site/page/section:
				
					/* COLUMN CLICKABLE */
.elementor-column.clickable .full-link a:after {
   content: "";
   display: block; 
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2; 
}
.elementor-column.clickable .elementor-widget, .elementor-column.clickable .elementor-widget-wrap {
   position: static;
}

/*If the link needs to extend outside of the column, add margin:*/
.elementor-column.clickable .full-link a:after {
   margin-top:-58px;
}
				
			

Sources & References