Einfache Anleitung für eine Elementor-Sektion: vollständig klickbare Sektion

By Tim ChristophersenElementor, Anleitungen

Einfache Anleitung für eine Elementor-Sektion: vollständig klickbare Sektion

Wenn Sie eine Website mit Elementor erstellen, möchten Sie möglicherweise bestimmte Abschnitte auf Ihrer Seite vollständig klickbar machen, beispielsweise eine Box mit mehreren Elementen oder Text. Obwohl Sie in Elementor Schaltflächen und Bilder direkt klickbar machen können, können Sie einen ganzen Abschnitt nicht vollständig klickbar machen. In diesem Fall benötigen Sie JavaScript-Code, um das Klickereignis zu verarbeiten und sicherzustellen, dass der Abschnitt als Ganzes klickbar ist. Der Code ermöglicht es dem Benutzer, den Abschnitt als eine Einheit zu klicken und auf eine andere Seite weitergeleitet zu werden, was die Benutzererfahrung verbessert.

Dieser Code wird in Elementor in eine Sektion eingefügt, die vollständig klickbar sein soll und in diesem Fall in einem neuen Fenster geöffnet werden soll. Hier ist eine kurze Anleitung, wie Sie den Code verwenden können:

Schritt 1:

Öffnen Sie Elementor und navigieren Sie zu der Sektion, die Sie klickbar machen möchten.

Schritt 2:

Geben Sie dieser Sektion eine eindeutige ID. In diesem Beispiel wird die ID „box1“ verwendet.

Schritt 3:

Ziehen Sie ein HTML-Element (z.B. einen Texteditor oder einen HTML-Code-Block) in die Sektion.

Schritt 4:

Fügen Sie den folgenden JavaScript-Code in das HTML-Element ein:

<script type="text/javascript">
    let boxes1 = document.getElementsByClassName("box1");

Array.from(boxes1).forEach(box => {
  box.addEventListener("click", () => {
    window.open("https://fourcode.net", '_blank').focus();
  });
});
</script>

Schritt 5:

Ändern Sie bei Bedarf die ID im JavaScript-Code, um sicherzustellen, dass der Code für die richtige Sektion funktioniert. Wenn Sie mehrere Sektionen auf Ihrer Website haben, die klickbar sein sollen, müssen Sie sicherstellen, dass jede Sektion eine eindeutige ID hat. Wenn Sie beispielsweise eine zweite klickbare Sektion hinzufügen möchten, müssen Sie die ID im JavaScript-Code von „box1“ auf „box2“ ändern. Andernfalls funktioniert der Code möglicherweise nicht richtig und die klickbaren Bereiche können auf Ihrer Website nicht korrekt verarbeitet werden. Es ist wichtig, sorgfältig auf die IDs zu achten und sicherzustellen, dass sie eindeutig und korrekt im JavaScript-Code verwendet werden.

Um Ihre eigene URL einzufügen, ändern Sie einfach den Text in Anführungszeichen in der Zeile, die „window.open“ enthält. Ersetzen Sie „https://fourcode.net“ durch die URL, die Sie verwenden möchten.

Schritt 6:

Speichern Sie die Änderungen und veröffentlichen Sie Ihre Website.

Wenn ein Benutzer auf den klickbaren Bereich klickt, öffnet sich ein neues Fenster mit der angegebenen URL. Der Code verwendet die „window.open“ -Funktion, um ein neues Fenster zu öffnen, und „focus ()“, um das neue Fenster zu aktivieren und in den Vordergrund zu bringen.

Ein wichtiger Hinweis:

Der JavaScript-Code, den Sie in Elementor einfügen, funktioniert auch im Editor. Das bedeutet, dass der Code möglicherweise unbeabsichtigte Auswirkungen auf Ihre Website haben kann, wenn er aktiv bleibt, während Sie Änderungen an Ihrer Website vornehmen.

Wenn Sie Änderungen an Ihrer Website vornehmen möchten, ist es eine gute Idee, den Code vorübergehend zu deaktivieren, um sicherzustellen, dass er keine unerwünschten Auswirkungen hat. Sie können den Code deaktivieren, indem Sie das HTML-Element auswählen, das den Code enthält, und es vorübergehend aus der Sektion entfernen oder den gesamten HTML-Code löschen.

Denken Sie daran, den Code nach Abschluss Ihrer Änderungen wieder zu aktivieren, damit die klickbaren Bereiche auf Ihrer Website wie beabsichtigt funktionieren.

Insgesamt ist es einfach, JavaScript-Code in eine Elementor-Sektion zu integrieren, um klickbare Bereiche auf Ihrer Website zu erstellen. Wenn Sie jedoch nicht mit JavaScript vertraut sind, sollten Sie einen Entwickler um Hilfe bitten, um sicherzustellen, dass Ihr Code korrekt funktioniert und Ihre Benutzererfahrung verbessert.