Før eller senere rammer hver Elementor build en væg, som panelkontrollerne ikke kan klatre: en svæveeffekt, som fanen Stil ikke tilbyder, eller en keyframe-animation, du fandt i en tutorial. Elementor holder per-element brugerdefineret CSS bag en Pro-licens. Den Brugerdefineret CSS forlængelse i Master Addons til Elementor fjerner den væg: en CSS-editor på hver sektion, container, kolonne og widget i den gratis editor.
Her er det i redaktøren. CSS lander i kassen, og testimonial-kortene begynder at glide hen over lærredet i samme sekund:
Hvad Custom CSS-udvidelsen gør #
Når det er aktiveret, får hvert element i Elementor-editoren en Brugerdefineret CSS afsnit under dens Advanced fane. Inde sidder en kodeeditor med syntaksfremhævning og linjenumre. Uanset hvad du skriver der gælder kun for det element, og lærredet forhåndsviser det live, så du ser reglen træde i kraft, mens du skriver.
Redaktøren støtter selector nøgleord, som står for elementets egen indpakning. Skriv selector { } og reglen er rettet mod præcis denne sektion eller widget, ingen jagt efter Elementors genererede klassenavne. Børnevælgere arbejder også: selector .some-class når ind i elementet.
Før du starter #
- WordPress med Elementor installeret og aktiv. Den gratis version er nok.
- Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning first.
- Custom CSS er en gratis udvidelse, så der kræves ingen Pro-licens.
- Nogle CSS. Selv copy-pastede uddrag fungerer, da vælgerens søgeord fjerner den hårde del.
Sådan aktiveres Custom CSS-udvidelsen #
Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Brugerdefineret CSS sidder i Hjælpeværktøjer Widgets gruppe med et Populært badge, ved siden af Custom JS og Post/Page Duplicator. Klik på dens toggle, så den bliver lilla, og derefter slå Gem ændringer og vent på den grønne “Indstillinger gemt med succes”-meddelelse.
Åbn Custom CSS editor på et element #
Vælg et hvilket som helst element i Elementor-editoren, en hel beholder i demoen, og åbn Advanced fane. Rul til Brugerdefineret CSS sektion med det lilla MA-badge og udvid det. En tom kodeeditor vises, med et hint under det: brug “selector” nøgleordet til at målrette indpakningselementet.
Skriv eller indsæt CSS #
Demoen forvandler en statisk række af testimonial-kort til et bevægeligt telt med én keyframe-animation:
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}Indsæt det, og lærredet adlyder med det samme: Kortene begynder at glide fra højre mod venstre, omvendt til sidst og loop, præcis som GIF øverst på denne side viser. Der er ikke noget at gemme eller opdatere først. Den selector søgeord fastgør animationen til denne ene beholder, så intet andet på siden berøres.
Resultatet på siden #
Hit Publicere og frontenden kører den samme animation: testimonial-rækken driver hen over viewporten, sætter retningen på pause i hver ende og bliver ved med at cykle af sig selv.
En vane, der er værd at beholde: CSS'en lever på elementet, ikke i et globalt stylesheet. Dupliker sektionen på en anden side, og animationen rejser med den.
Hvor per-element brugerdefineret CSS hjælper #
- Keyframe animationer. Telt, pulserende knapper, flydende badges, alt hvad panelet kontrollerer ikke kan udtrykke.
- Hover stater.
selector:hoverregler for løft, skygger og farveskift på kort. - Uddragsrettelser. Det ene Stack Overflow-svar, der løser din layoutfejl, anvendt præcis, hvor fejlen bor.
- Responsive tweaks. En medieforespørgsel på én sektion i stedet for en redigering af et typografiark for hele webstedet.
- Design eksperimenter. Test en regel live på lærredet, før du promoverer den til dit temas CSS.
Video Tutorial #
Se hele flowet, fra at aktivere udvidelsen til de animerede kort, der kører på den offentliggjorte side.
Ofte stillede spørgsmål #
Hvordan tilføjer jeg brugerdefineret CSS i Elementor uden Pro?
Aktiver Custom CSS-udvidelsen i fanen Master Addons Extensions, vælg et hvilket som helst element i editoren, og åbn Custom CSS under fanen Advanced. Skriv eller indsæt CSS i kodeeditoren, og det gælder for det element med en live-forhåndsvisning, ingen Pro-licens nødvendig.
Hvad gør selector keyword?
Det står for indpakningen af det element, du redigerer. En regel som selector { farve: rød; } målretter præcis denne sektion eller widget uden at kende Elementors genererede klassenavne, og selector .child når elementer inde i den.
Gælder CSS for hele webstedet eller kun ét element?
Bare det element, der bærer det. Hver sektion, kolonne eller widget har sin egen Brugerdefineret CSS boks, så regler forbliver scoped. Duplikering af elementet kopierer sin CSS sammen med det, som holder effekter bærbare mellem sider.
Kan jeg køre CSS-animationer med denne udvidelse?
Ja. Redaktøren accepterer fuld CSS inklusive @keyframes, medieforespørgsler og pseudo-klasser som hover. Demoen på denne side kører en keyframe-teltanimation på en testimonial-række, forhåndsvist live i editoren før udgivelse.
Er Custom CSS-udvidelsen gratis?
Ja. Brugerdefineret CSS leveres med den gratis version af Master Addons for Elementor, i Utilities Widgets gruppe af fanen Extensions. Prissiden dækker, hvad Pro planerne tilføjer.
Indpakning #
Custom CSS-udvidelsen giver gratis Elementor den escape-luge, som ethvert rigtigt projekt til sidst har brug for: en scoped CSS-editor på ethvert element, med live preview og et selector-søgeord, der skåner dig for klassenavnsarkæologien. Par det med Animated Gradient Background udvidelse (Pro) til bevægelse uden at skrive keyframes overhovedet, og gennemse det fulde sæt af Master Addons widgets og udvidelser til resten af værktøjskassen.
