Tilføj brugerdefineret JavaScript i Elementor: Side og Element Level JS
Custom JS-udvidelsen, en del af Master Addons Pro, giver dig et JavaScript-felt inde i Elementor. Tilføj kode til en hel side fra Sideindstillinger, eller vedhæft den til en enkelt widget, sektion eller beholder fra dens Avanceret fane. Brug den til små interaktioner, formular tweaks eller sporing af begivenheder uden at redigere temafiler eller fylde scripts i en HTML-widget.
En dedikeret kodeplads til hver side
Stop med at fylde scripts i HTML-widgets eller sprede dem i globale filer. Denne udvidelse tilføjer et dedikeret Custom JS-felt i Page Settings > Advanced tab. Enhver kode, du skriver her, kører kun på denne specifikke side eller post. Det er den organiserede måde at håndtere engangsscripts, A/B-testsporing eller unikke interaktive elementer.
- Ren adskillelse: Hold sidespecifikke scripts isoleret fra din kode for hele webstedet. Ingen risiko for at bryde andre sider.
- Nem adgang: Find din kode med det samme i sideindstillingerne - ingen gravning gennem Widgets Panel.
- Indbygget Best Practice: Feltet håndterer automatisk
$(document).ready()for dig, så du kan skrive din kernelogik direkte.
JavaScript på sideniveau og elementniveau
Side-niveau kode bor i Sideindstillinger, Avanceret, Brugerdefineret JS, og kører på den side kun. Element-niveau kode bor i fanen Avanceret af enhver widget, kolonne, sektion eller container. I element-niveau kode, ordet selector er byttet til det elements CSS-klasse, så scriptet kun rører det element.
- Ingen <script> tags og ingen dokumentklar indpakning: koden er pakket ind
jQuery(document).readyfor dig, og$works. - Scripts udskrives i sidefoden, efter at indholdet er indlæst.
- Kode kører på live-siden, ikke inde i Elementor editor preview, så tjek den offentliggjorte side efter at have gemt.
- Hver forekomst af ordvælgeren erstattes i kode på elementniveau. Brug
$('selector')snarere enddocument.querySelectorthere.
Sådan tilføjes brugerdefineret JavaScript i Elementor
Disse trin antager, at Master Addons Pro er aktiv, og din WordPress-rolle kan udgive ufiltreret HTML, som administratorer som standard kan.
- I dit dashboard skal du gå til Master Addons, åbne fanen Extensions, slå Custom JS til og gemme.
- Rediger siden med Elementor.
- For hele siden skal du åbne Sideindstillinger og derefter Avanceret og derefter Brugerdefineret JS. For et element skal du vælge det og åbne dets Avancerede fane.
- Indsæt din kode uden <script> tags.
- Opdater siden og test den på live-URL'en.
Tre Elementor brugerdefinerede JS eksempler
Indsæt nogen af disse i et brugerdefineret JS-felt, og skift klassenavnene, så de passer til din side.
1. Tilføj en klasse til overskriften efter rulning (sideniveau)
$(window).on('scroll', function () {
$('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});2. Skift en klasse, når der klikkes på et element (elementniveau)
$('selector').on('click', function () {
$(this).toggleClass('is-open');
});3. Send en Google Analytics-hændelse, når der klikkes på en knap (sideniveau)
$('.cta-button a').on('click', function () {
if (typeof gtag === 'function') {
gtag('event', 'cta_click', { location: 'pricing' });
}
});Måder at tilføje JavaScript i Elementor sammenlignet
Der er tre fælles ruter. Den rigtige afhænger af, hvor scriptet skal køre. Hvis du også har brug for stilarter scoped til ét element, den gratis Brugerdefineret CSS-udvidelse fungerer på samme måde.
| HTML- widget | Elementor Pro Custom Code | Master Addons Brugerdefineret JS | |
|---|---|---|---|
| Plan | Gratis Elementor | Elementor Pro | Master Addons Pro |
| Omfang | Siden widgetten sidder på | Hele webstedet, med visningsforhold | En side eller et element |
| Hvor du skriver det | Inde i en widget på lærredet | En brugerdefineret kodeskærm i instrumentbrættet | Sideindstillinger eller elementets fane Avanceret |
| Script- tags | Nødvendig | Nødvendig | Ikke nødvendig |
| Målret mod ét element | Skriv selv vælgeren | Skriv selv vælgeren | Brug søgeordet selector |
Ofte stillede spørgsmål til brugerdefineret JS
Hvornår skal jeg bruge dette i stedet for en HTML-widget eller mit temas functions.php?
Brug det til scripts, der tilhører en side eller et element, som en lommeregner, en rulleeffekt eller en klikbegivenhed. For kode, som hver side har brug for, er en mulighed for hele webstedet, såsom dit tema eller et kodestykker plugin, et bedre hjem. HTML-widgeten fungerer også, men scripts ender spredt ud over lærredet og er nemme at gå glip af senere.
Er koden minificeret eller optimeret til ydeevne?
Nej. Koden tilføjes, mens du skriver den, så hold den kort og ryddelig. Den eneste ændring, Master Addons foretager, er at bytte vælgerens søgeord i elementniveaukode til det pågældende elements CSS-klasse.
Hvad sker der, hvis jeg skriver ødelagt JavaScript? Vil det bryde hele min side?
Det kan det. En syntaksfejl kan stoppe andre scripts på den side i at køre. Test koden i din browserkonsol først, og prøv den på et iscenesættelsessted, hvis siden betyder noget.
Kan jeg bruge dette med Dynamic Data eller Elementors variabler?
Direkte, ikke inden for selve JS-feltet. Du kan dog skrive JavaScript, der interagerer med elementer på siden, der er udfyldt af dynamiske data. For eksempel kan du skrive et script, der læser tekst fra en dynamisk udfyldt overskrift. Du ville bruge normale JavaScript-vælgere til at målrette mod disse elementer.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
Post/Page Duplicator
