Elementor Column Elementor Section klickbar und verlinkt

Elementor Column oder Section klickbar/verlinken

Ich habe jetzt bereits ein paar Mal gesehen, dass extra ein Plug-In dafür installiert wird, um eine ganze Elementor-Column klickbar zu machen also zu verlinken. Das ist gar nicht unbedingt nötig. Mit ein bisschen CSS kann man eine ganze Elementor-Column oder auch eine ganze Elementor-Section klickbar machen.

Schritt 1

Zunächst fügt man in die Section bzw. die Column, die klickbar gemacht werden soll ein Element ein, das die gewünschte Verlinkung enthält – zum Beispiel einen Button. Diesem Button gibt man dann eine ID oder eine Klasse, um ihn eindeutig selektieren zu können – zum Beispiel: clickable-elementor-column

Elementor Column Elementor Section klickbar und verlinkt Button

Schritt 2

Mit dem folgenden CSS-Code macht man den Button nun unsichtbar und legt dem ihm zugeordneten Link über die komplette Spalte bzw. Section.

Das war’s schon. 👍

				
					.clickable-elementor-column {
    position: unset;
}

.clickable-elementor-column a.elementor-button-link.elementor-button {
    background-color: transparent;
    font-size: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    cursor: pointer;
}
				
			

Demo

(Hinweis: Ich habe eine Hintergrundfarbe vergeben, um den klickbaren Bereich besser sichtbar zu gestalten.)

Diese Elementor-Section bzw. Elemento-Column ist komplett klickbar/verlinkt.