Benutzerdefiniertes JavaScript in Elementor: Page and Element Level JS hinzufügen
Die Erweiterung Benutzerdefinierte JS, Teil von Master Addons Pro, gibt Ihnen ein JavaScript-Feld in Elementor Hinzufügen von Code zu einer ganzen Seite von Seiteneinstellungen, oder fügen Sie ihn an ein einzelnes Widget, Abschnitt oder Container von seinem Reiter Erweitert Verwenden Sie es für kleine Interaktionen, bilden Sie Optimierungen oder verfolgen Sie Ereignisse, ohne Theme-Dateien zu bearbeiten oder Skripte in ein HTML-Widget zu stopfen.
Ein spezieller Codebereich für jede Seite
Stoppen Sie das Stopfen von Skripten in HTML-Widgets oder streuen Sie sie in globalen Dateien Diese Erweiterung fügt ein dediziertes benutzerdefiniertes JS-Feld in der hinzu Page Settings > Advanced tab. Jeder Code, den Sie hier schreiben, läuft nur auf dieser bestimmten Seite oder diesem Beitrag. Es ist die organisierte Art, mit einmaligen Skripten, A/B-Testverfolgung oder einzigartigen interaktiven Elementen umzugehen.
- Clean Separation: Halten Sie seitenspezifische Skripte von Ihrem siteweiten Code isoliert Kein Risiko, andere Seiten zu zerstören.
- Einfacher Zugriff: Finden Sie Ihren Code sofort in den Seiteneinstellungen und durchsuchen Sie das Widget-Panel.
- Integrierte Best Practice: Das Feld verarbeitet automatisch
$(document).ready()Für Sie, damit Sie Ihre Kernlogik direkt schreiben können.
JavaScript auf Seiten- und Elementebene
Code auf Seitenebene lebt in Seiteneinstellungen, Erweitert, Benutzerdefiniert JS und läuft nur auf dieser Seite Code auf Elementebene lebt in der Registerkarte Erweitert eines beliebigen Widgets, einer Spalte, eines Abschnitts oder Containers Im Code auf Elementebene wird das Wort selector CSS-Klasse dieses Elements getauscht wird, so dass das Skript nur dieses Element berührt.
- Kein <script> Tags und kein dokumentfertiger Wrapper: Der Code ist eingepackt
jQuery(document).readyFür dich, und$Werke. - Skripte werden in der Seitenfußzeile gedruckt, nachdem der Inhalt geladen wurde.
- Code läuft auf der Live-Seite, nicht in der Elementor-Editor-Vorschau, also überprüfen Sie die veröffentlichte Seite nach dem Speichern.
- Jede Instanz des Wortwählers wird im Code auf Elementebene ersetzt Verwenden Sie
$('selector')eher alsdocument.querySelectorDa.
So fügen Sie benutzerdefiniertes JavaScript in Elementor hinzu
Diese Schritte setzen voraus, dass Master Addons Pro aktiv ist und Ihre WordPress-Rolle ungefiltertes HTML veröffentlichen kann, was Administratoren standardmäßig tun können.
- Gehen Sie in Ihrem Dashboard zu Master-Addons, öffnen Sie die Registerkarte Erweiterungen, schalten Sie Benutzerdefinierte JS ein und speichern Sie.
- Bearbeiten Sie die Seite mit Elementor.
- Öffnen Sie für die gesamte Seite die Seiteneinstellungen, dann Erweitert und dann Benutzerdefiniertes JS. Wählen Sie es für ein Element aus und öffnen Sie die Registerkarte Erweitert.
- Fügen Sie Ihren Code ohne <script> Tags ein.
- Aktualisieren Sie die Seite und testen Sie sie unter der Live-URL.
Drei benutzerdefinierte JS-Beispiele für Elementoren
Fügen Sie eines davon in ein benutzerdefiniertes JS-Feld ein und ändern Sie die Klassennamen, um sie an Ihre Seite anzupassen.
1. Nach dem Scrollen (Seitenebene) eine Klasse in die Kopfzeile einfügen
$(window).on('scroll', function () {
$('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});2. Schalten Sie eine Klasse um, wenn ein Element angeklickt wird (Elementebene)
$('selector').on('click', function () {
$(this).toggleClass('is-open');
});3. Senden Sie ein Google Analytics-Ereignis, wenn ein Button angeklickt wird (Seitenebene)
$('.cta-button a').on('click', function () {
if (typeof gtag === 'function') {
gtag('event', 'cta_click', { location: 'pricing' });
}
});Möglichkeiten, JavaScript in Elementor hinzuzufügen, verglichen
Es gibt drei gängige Routen Die richtige hängt davon ab, wo das Skript laufen muss, wenn Sie auch Stile benötigen, die auf ein Element beschränkt sind, ist die freie Benutzerdefinierte CSS-Erweiterung Funktioniert genauso.
| HTML-widget | Elementor Pro Benutzerdefinierter Code | Master Addons Benutzerdefinierte JS | |
|---|---|---|---|
| Planen | Freier Elementor | Elementor Pro | Master Addons Pro |
| Geltungsbereich | Die Seite, auf der das Widget sitzt | Standortweit, mit Anzeigebedingungen | Eine Seite oder ein Element |
| Wo du es schreibst | Im Inneren ein Widget auf der Leinwand | Ein benutzerdefinierter Code-Bildschirm im Dashboard | Seiteneinstellungen oder die Registerkarte Erweitert des Elements |
| Skript-tags | Benötigt | Benötigt | Nicht gebraucht |
| Ein Element anvisieren | Schreiben Sie den Selektor selbst | Schreiben Sie den Selektor selbst | Verwenden Sie das Schlüsselwort des Selektors |
Häufig gestellte Fragen für benutzerdefinierte JS
Wann sollte ich das anstelle eines HTML-Widgets oder der Funktionen meines Themes verwenden.php?
Verwenden Sie es für Skripte, die zu einer Seite oder einem Element gehören, wie ein Taschenrechner, ein Scroll-Effekt oder ein Klick-Ereignis Für Code, den jede Seite benötigt, ist eine siteweite Option wie Ihr Theme oder ein Code-Snippets-Plugin ein besseres Zuhause Das HTML-Widget funktioniert auch, aber Skripte landen verstreut auf der Leinwand und sind später leicht zu übersehen.
Ist der Code minifiziert oder leistungsoptimiert?
Nein. Der Code wird hinzugefügt, während Sie ihn schreiben, also halten Sie ihn kurz und ordentlich Die einzige Änderung, die Master Addons vornimmt, besteht darin, das Auswahlschlüsselwort im Code auf Elementebene gegen die CSS-Klasse dieses Elements auszutauschen.
Was passiert, wenn ich defektes JavaScript schreibe? wird es meine ganze Seite kaputt machen?
Es kann. ein Syntaxfehler kann die Ausführung anderer Skripte auf dieser Seite verhindern Testen Sie zuerst den Code in Ihrer Browserkonsole und versuchen Sie es auf einer Staging-Site, wenn die Seite wichtig ist.
Kann ich das mit Dynamic Data oder Elementors Variablen verwenden?
Direkt, nicht innerhalb des JS-Feldes selbst Man kann jedoch JavaScript schreiben, das mit Elementen auf der Seite interagiert, die von dynamischen Daten bevölkert werden, man könnte zum Beispiel ein Skript schreiben, das Text aus einer dynamisch gefüllten Überschrift liest, man würde normale JavaScript-Selektoren verwenden, um diese Elemente anzusprechen.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
