CSS mit Elementor

CSS mit Elementor

tl;dr: Obwohl du eine Elementor-Seite ohne Kenntnisse in CSS erstellen und gestalten kannst – um ein perfektes Design zu erreichen sind oft kleine Anpassungen auch in den Cascading Style Sheets [CSS] notwendig. Wo genau man da eingreifen kann ist Inhalt dieses Artikels.

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 einen HTML-Tag verwenden, 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.

Die Designhierarchie bei WordPress mit Elementor
Die Designhierarchie bei WordPress mit Elementor
CSS EbeneAuswirkung
Widget IDnur dieses Widget
Widget CLASSalle Anwendungen der Klasse
Post CSSdiese Seite oder dieser Beitrag
Theme Stylealle Seiten und Beiträge die Elementor verwenden
Child Themealle Inhalte der Website
ThemeAlle 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 Code Beispiel
Jedes Widget im Elementor besteht aus 2 DIV-Tags und automatisch vergebener ID.

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):

selector Elementor
Video abspielen

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.

In eigener Sache:
werkform hilft bei der grafischen Konzeption einer Webseite und der Gestaltung von Seiten und Templates. Drücke auf den Button um ein Angebot zu bekommen.
Werbung

CSS mit Theme Style

Auf die Möglichkeit mit den neuen Theme Style CSS anzugeben bin ich u.a. in den Artikeln:

schon ausführlich eingegangen. Grundsätzlich gilt hier, das Einstellungen die ich hier treffe auf alle Inhalte der Webseite angewendet werden – soferne 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.

Theme Style CSS
Unter CSS Klassen kann ich überall meine Aktionsfarbe eintragen und bekomme schwarzen Hintergrund und pinken Text.

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 eigebaut. Dazu hier drüberlesen:

https://docs.elementor.com/article/363-meet-right-click

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.

Kontextmenu Elementor
Video abspielen

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 Antworten

  1. 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

      1. 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 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.