Früher oder später trifft jeder Elementor-Build auf eine Wand, die das Bedienfeld nicht erklimmen kann: einen Hover-Effekt, den die Registerkarte Stil nicht bietet, oder eine Keyframe-Animation, die Sie in einem Tutorial gefunden haben Elementor behält pro Element benutzerdefiniertes CSS hinter einer Pro-Lizenz Die Benutzerdefiniertes CSS Erweiterung in Master-Addons für Elementor Entfernt diese Wand: einen CSS-Editor für jeden Abschnitt, Container, jede Spalte und jedes Widget im kostenlosen Editor.
Hier ist es im Editor Das CSS landet in der Box, und die Testimonialkarten beginnen in derselben Sekunde über die Leinwand zu gleiten:
Was die Custom CSS-Erweiterung bewirkt #
Sobald aktiviert, erhält jedes Element im Elementor-Editor ein Benutzerdefiniertes CSS Abschnitt unter seiner Fortgeschritten Tab. Drinnen sitzt ein Code-Editor mit Syntaxhervorhebung und Zeilennummern, was auch immer Sie dort schreiben, gilt nur für dieses Element, und die Leinwand gibt eine Vorschau live, so dass Sie die Regel beim Tippen wirksam werden sehen.
Der Editor unterstützt die Wähler Stichwort, das für den elementeigenen Wrapper steht Schreiben selector { } Und die Regel zielt genau auf diesen Abschnitt oder Widget, keine Jagd auf die generierten Klassennamen von Elementor Kinderwähler funktionieren auch: selector .some-class Elementinneren reicht.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv Die kostenlose Version reicht.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
- Custom CSS ist eine kostenlose Erweiterung, daher ist keine Pro-Lizenz erforderlich.
- Einige CSS. Sogar kopierte Snippets funktionieren, da das Auswahlschlüsselwort den harten Teil entfernt.
So aktivieren Sie die Custom CSS-Erweiterung #
Gehen Sie von Ihrem WordPress-Dashboard aus zu Master Addons Und öffnen Sie die Erweiterungen Tab. Benutzerdefiniertes CSS sitzt im Dienstprogramme Widgets Gruppe mit einem beliebten Abzeichen, neben Custom JS und Post-/Seitenduplikator. Klicken Sie auf den Knebel, damit er violett wird, und schlagen Sie dann Änderungen speichern und warten auf den grünen Hinweis “Einstellungen erfolgreich gespeichert”.
Öffnen Sie den Custom CSS-Editor für ein Element #
Wählen Sie ein beliebiges Element im Elementor-Editor, einen ganzen Container in der Demo aus und öffnen Sie die Fortgeschritten Tab. Scrollen Sie zum Benutzerdefiniertes CSS Abschnitt mit dem lila MA-Abzeichen und erweitern Sie diesen Es erscheint ein leerer Code-Editor, darunter ein Hinweis: Verwenden Sie das Schlüsselwort “selector”, um das Wrapper-Element anzuvisieren.
Schreiben oder fügen Sie das CSS ein #
Die Demo verwandelt eine statische Reihe von Testimonialkarten in ein bewegliches Festzelt mit einer Keyframe-Animation:
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}Einfügen und die Leinwand gehorcht sofort: Die Karten beginnen von rechts nach links zu gleiten, am Ende umzukehren, und Schleife, genau wie das GIF oben auf dieser Seite zeigtEs gibt nichts zu speichern oder zuerst aufzufrischen Die selector Stichwort pinnt die Animation in diesen einen Container, so dass nichts anderes auf der Seite berührt wird.
Das Ergebnis auf der Seite #
Treffer Veröffentlichen und am vorderen Ende läuft die gleiche Animation: Die Testimonialreihe driftet über den Ansichtsfenster, unterbricht an jedem Ende die Richtung und fährt selbstständig weiter.
Eine Gewohnheit, die es wert ist, beibehalten zu werden: Das CSS lebt auf dem Element, nicht in einem globalen Stylesheet Duplizieren Sie den Abschnitt auf eine andere Seite und die Animation reist mit.
Wo benutzerdefiniertes CSS pro Element hilft #
- Keyframe-animationen. Festzelte, pulsierende Knöpfe, schwebende Abzeichen, alles, was die Bedienelemente des Panels nicht ausdrücken können.
- Schwebezustände.
selector:hoverRegeln für Lifte, Schatten und Farbverschiebungen auf Karten. - Schnipselfixes. Diese eine Stack Overflow-Antwort, die Ihren Layout-Fehler löst und genau dort angewendet wird, wo der Fehler lebt.
- Responsive Optimierungen. Eine Medienabfrage in einem Abschnitt anstelle einer standortweiten Stylesheet-Bearbeitung.
- Entwurfsexperimente. Testen Sie eine Regel live auf der Leinwand, bevor Sie sie im CSS Ihres Themas bewerben.
Video-Tutorial #
Beobachten Sie den gesamten Ablauf, vom Aktivieren der Erweiterung bis hin zu den animierten Karten, die auf der veröffentlichten Seite ausgeführt werden.
Häufig gestellte Fragen #
Wie füge ich benutzerdefiniertes CSS in Elementor ohne Pro hinzu?
Aktivieren Sie die Custom CSS-Erweiterung im Reiter Master Addons Extensions, wählen Sie ein beliebiges Element im Editor aus und öffnen Sie Custom CSS unter dem Reiter Erweitert Schreiben oder fügen Sie CSS in den Code-Editor ein und es gilt für dieses Element mit einer Live-Vorschau, keine Pro-Lizenz erforderlich.
Was macht das Selektor-Keyword?
Es steht für den Wrapper des Elements, das Sie bearbeiten Eine Regel wie Selektor {Farbe: rot; } zielt genau auf diesen Abschnitt oder Widget ab, ohne die generierten Klassennamen von Elementor zu kennen, und Selektor .child erreicht Elemente darin.
Gilt das CSS für die gesamte Website oder nur für ein Element?
Nur das Element, das es trägt Jeder Abschnitt, jede Spalte oder jedes Widget hat seine eigene benutzerdefinierte CSS-Box, sodass Regeln begrenzt bleiben. Durch Duplizieren des Elements wird sein CSS zusammen mit ihm kopiert, wodurch Effekte zwischen den Seiten portabel bleiben.
Kann ich mit dieser Erweiterung CSS-Animationen ausführen?
Ja. Der Editor akzeptiert vollständiges CSS einschließlich @keyframes, Medienabfragen und Pseudoklassen wie hover. Die Demo auf dieser Seite führt eine Keyframe-Marquee-Animation in einer Testimonialzeile aus, die vor der Veröffentlichung live im Editor angezeigt wird.
Ist die Custom CSS-Erweiterung kostenlos?
Ja. Benutzerdefiniertes CSS wird mit der kostenlosen Version von Master Addons for Elementor ausgeliefert, in der Gruppe Utilities Widgets des Reiters Erweiterungen Die Preisseite behandelt, was die Pro-Pläne hinzufügen.
Einwickelnd #
Die Custom CSS-Erweiterung gibt Elementor die Notluke, die jedes echte Projekt irgendwann braucht: einen CSS-Editor mit Skopierung auf jedem Element, mit Live-Vorschau und einem Auswahlschlüsselwort, das Ihnen die Archäologie mit Klassennamen erspart Koppeln Sie es mit dem Hintergrunderweiterung für animierte Gradienten (Pro) für Bewegung, ohne überhaupt Keyframes zu schreiben, und durchsuchen Sie den gesamten Satz von Master Addons Widgets und Erweiterungen Für den Rest der Toolbox.
