Eigene CSS - wohin damit?
Am Anfang des Web war alles einfacher: wer die Inhalte auf seiner Webseite mit CSS gestalten wollte hat diese entweder in eine externe Datei geschrieben und diese im HTML-Dokument eingebunden. Oder man hat mit style einen HTML-Tag verwendet, oder man hat Stil-Attribute innerhalb eines HTML-Tags gesetzt. Wer mit WordPress arbeitet hat dann die CSS-Definitionen im Theme-Ordner in der Datei style.css gesetzt. Oder im Customizer oder in einem Settings-Bereich des jeweiligen Themes.
All das funktioniert noch immer. Aber mit Elementor geht es auch deutlich eleganter und auch ein wenig einfacher. Wer CSS lernen will findet Unmengen an Tutorials, zum Nachschlagen ist
https://www.w3schools.com/css/ immer ein guter Tip. Was man mit CSS alles machen kann ist nicht Teil dieses Artikels.
Folgende Tabelle soll illustrieren, wo man eingreifen kann, wenn die anderen Einstellmöglichkeiten (also der Tab
Stil eines Widgets) nicht ausreichen. Um diese Optionen nutzen zu können verlangt
Elementor nach der Pro-Lizenz.
| CSS Ebene | Auswirkung |
| Widget ID | nur dieses Widget |
| Widget CLASS | alle Anwendungen der Klasse |
| Post CSS | diese Seite oder dieser Beitrag |
| Theme Style | alle Seiten und Beiträge die Elementor verwenden |
| Child Theme | alle Inhalte der Website |
| Theme | alle Inhalte der Website |
CSS über die Widget ID (1) - selector
Es gibt 2 Möglichkeiten, die ID eines Elements zu erfahren: man kann sie definieren oder man kann herausfinden, welche ID sie bereits hat. Elementor baut um jedes Widget (im Bild hier der
H1-Tag mit dem Inhalt
Über uns) ein <DIV> namens
elementor-widget-container. Um das herum gibt es ein <DIV> namens
elementor-element. Elementor vergibt an jedes einzelne Element automatisch eine ID. Diese kann man ansprechen.
Elementor hat dazu einen magischen Tag eingebaut: selector. Wenn man diesen im Tab Erweitert des Widgets eingibt wird der eingegebene Stil entsprechend angewendet. Das folgende Video demonstriert das (aktiviere ein Widget, gehe auf Erweitert und dann auf Eigenes CSS, dort gib selector ein):
CSS über die Widget ID (2) - custom ID
Die zweite Möglichkeit ein Element direkt anzusprechen liegt darin, eine ID händisch zu vergeben. Dazu bei aktiviertem Widget den Tab Erweitert und darunter wiederum Erweitert auswählen. Die ID wird in das Feld CSS ID eingetragen.
Danach ganz unten unter Eigenes CSS den gewünschten Code eingeben. In dem Beispiel am Bild:
CSS ID: titel_uber
Eigenes CSS: #titel_uber {background-color: red;}
Da wir hier eine ID verwenden muss im CSS-Feld eine Raute/Hash # voran gestellt werden.
CSS über die Widget Class
Wenn ich keine ID sondern eine Klasse anlegen will geht das im Wesentlichen genau so. Der Unterschied in der Anwendung liegt darin, dass eine Klasse (class) auf der Seite öfter als 1 x angewendet werden kann. Ich kann also bei einem Widget einen Style definieren und durch eintragen der entsprechenden Klasse auch auf anderen Widgets den Stil anwenden.
Vorsicht! Man verliert schnell den Überblick, wo man den eigenen CSS-Code hingeschrieben hat. Besser wäre es in so einem Fall den CSS-Code auf Seitenebene einzufügen.
Der Name der Klasse wird im Feld CSS Klassen eingetragen.
Danach im Eigenes CSS den gewünschten Code eingeben. In dem Beispiel am Bild:
CSS Klassen: titel_back
Eigenes CSS: .titel_back {background-color: orange;}
Da wir hier eine Klasse verwenden, muss im CSS-Feld ein Punkt/dot . voran gestellt werden.
Seiteneinstellung CSS
Die darunter liegende Ebene der CSS-Einstellungen liegt auf den Seiten (Beitrag). Dazu bei geöffnetem Elementor links unten auf das Zahnrad klicken
Seite Einstellungen > Erweitert > Eigenes CSS
Im Beispiel im Bild wurde der CSS-Code für H1 verändert:
h1 {background-color: yellow;}
Es werden also alle Vorkommen von H1 auf dieser Seite mit gelbem Hintergrund dargestellt.
CSS mit Theme Style
Auf die Möglichkeit mit Theme Style CSS anzugeben bin ich u.a. im Artikel
Elementor Einstellungen schon ausführlich eingegangen. Grundsätzlich gilt hier, das Einstellungen die ich hier treffe auf alle Inhalte der Webseite angewendet werden -
so ferne sie nicht overruled werden. Wenn also CSS-Angaben wie wir sie zuvor getätigt haben durchgeführt werden, so überschreiben diese die im Theme Style vorgenommenen Angaben.
Ganz praktisch heisst das: im Theme Style mache ich grundlegende Definitionen für Schriften, Hintergrund. Wenn benötigt auch Buttons, Bilder und Formular-Felder. Wenn ich eine eigene Klasse immer wieder benötige die ich nirgends wo einstellen kann oder eine zusätzliche Farbe anwenden will so kann ich sie hier in einer Klasse unter Eigenes CSS definieren.
Beispiel: ich definiere eine Aktionsfarbe im Theme Style > Eigenes CSS:
.aktionsfarbe {color: pink; background-color: black;}
Ab sofort kann ich bei jedem Widget in den Erweiterten Einstellungen die CSS-Klasse aktionsfarbe eintragen.
Wenn ich nun eine andere Aktionsfarbe für eine neue Aktion will, muss ich nur 1 Mal die Farbdefinition im Eigene CSS unter Theme Style ändern.
Inhalt kopieren - Style einfügen
An dieser Stelle will ich auf eines der besten Features im Elementor hinweisen: die Möglichkeit einen Stil eines kopierten Objektes einzufügen. Elementor hat hier den Rechts-Klick bzw CTRL-Klick eingebaut. Dazu hier drüberlesen:
In dem Beispielvideo hier habe ich die Überschrift mit Farbe, Schatten etc. gestaltet. Mit einem Rechts-Klick kopiert und dann bei der 2. Überschrift den Stil eingefügt. Super praktisch, auch wenn es um Margins, Paddings etc. geht.
FAQ
Wo kann man CSS in Elementor einfügen?
Unter … Erweitert > Eigenes CSS kann für jedes Widget CSS eingefügt werden. Ausserdem kann man in den Seiteneinstellungen (Links unten im Panel) und in den Website Einstellungen jeweils eigenes CSS eingeben.
Der Begriff selector ist ein von Elementor programmiertes Schlüsselwort. Es bedeutet „nimm genau dieses Widget“, es ersetzt also die mühsame Suche nach der ID eines Elements und vereinfacht dadurch die CSS Eingabe.
Wie finde ich die ID eines Elementes?
Die ID für jedes Element wird in Elementor dynamisch erzeugt. Wenn du ein Element über die ID ansprechen willst kannst du entweder den Begriff selector verwenden oder du kannst auch unter … Erweitert > Layout > CSS ID eine eigene ID für ein Element definieren.
Kann ich in Elementor mehrere Klassen einem Element zuweisen?
Ja. Dazu musst du die Klassen in … Erweitert > Layout > CSS-Klassen die Namen der Klassen (ohne(!) Punkt davor) getrennt durch Komma eingeben.
Wie lautet das CSS für Silbentrennung?
Wenn du für die gesamte Website die Silbentrennung aktivieren willst kannst du diesen CSS-Code unter Website-Einstellungen > Eigenes CSS eingeben:
body {
hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
}
Fazit
Man benötigt bei der Arbeit mit Elementor eigenes CSS nicht häufig, es ist eher die Ausnahme. Bitte gründlich überlegen auf welcher Ebene man das einbaut. Immer wieder kommt es zu CSS-Konflikten (gerne bei Link-Farben, Überschrift-Gestaltungen) weil sehr tief unten in der Hierarchie eine Definition vergessen wurde oder aber zu früh getroffen wurde. Nutzt die Editor-Möglichkeiten des
Elementor!
3 Kommentare
Carsten
Hallo,
sehr guter Beitrag zu Elementor!
Was aber komplett fehlt, ist wie man mit CSS nicht den „Inhalt von Elementor“ sondern „Die Oberfläche (Menu) von Elementor“ abändern kann.
Beispiel: Ich möchte über CSS nicht benötigte „Elementor-Widgets“ (z.B. das Widget Fortschrittsbalken) ausblenden CSS = „display: none !important“
Wie geht das?
Gruss Carsten
Harry Martin
Hallo,
danke für dein Kommentar!
Elementor selber zu verändern würde ich sicher nicht einfach über CSS, es haben sich aber (natürlich) schon mehrere Menschen darüber Gedanken gemacht, wie man Elementor für den Enduser auch einfacher gestalten kann:
Die Anleitung:
https://www.youtube.com/watch?v=hKuq67SYQgE
Quelle
https://github.com/helloideabox/elementor-widget-manager
Damit solltest du dein Ziel erreichen können.
Harry
Carsten
Hallo wf_admin,
danke für die schnelle Antwort.
Deine Anwort trifft leider nicht den „Kern der CSS Frage“, sondern das Plugin ist maximal ein schlechter Workaround der mir schon bekannt war.
Trotzdem Danke 😉