Bei meinem aktuellen Kundenprojekt hatte ich zwei Anwendungsfälle in denen ich zum ersten Mal mit CSS-Klassen in Elementor arbeiten durfte.
Eckdaten:
- Theme: Astra Free Theme + Child Theme
- Page Builder: Elementor Pro (ohne Container)
- erwähnte WordPress Plugins: Classic Editor, Advanced Editor Tools
Dank ChatGPT habe ich mich da reingefuchst und folgende Probleme gelöst:
Fall 1: helle Schrift auf dunklem Hintergrund im Elementor Standard-Seiten-Design
Im Theme Builder waren verschiedene Vorlagen angelegt. Z.B. auch für das Design einer Standard-Seite. Dies war mit dunklem Hintergrund und heller Schrift. Die Beitragsseiten waren mit dunkler Schrift und hellem Hintergrund.
In Astra (Customizer) war die Standardfarbe für TEXT mit dunkelgrau hinterlegt.
In der Elementor Standardseiten-Vorlage ist die Beitragstitel als Widget sowie der Beitragsinhalt als Widget hinterlegt (=die Widgets, wo es sich den Inhalt automatisch zieht (dynamische Widgets quasi)). Der Beitragstitel und Beitragsinhalt wurde mit Schriftfarbe hell (=Brandfarbe #fbfbfb) hinterlegt.
Problem:
Wenn jetzt Seiteninhalte mit Unterüberschriften über den Classic Editor eingefügt werden, dann macht es die H2-H5 wieder in Dunkelgrau statt weiß. Also dunkle Schrift auf dunklem Hintergrund. Allerdings nur ab der H2. Der Normaltext und die H1 sind in heller Schrift.
Ein Blick im Browser auf „Untersuchen“ der Überschrift hat gezeigt, dass die globalen Farbeinstellungen von Astra hier querschießen. (Danke ChatGPT… Nicht. Hätte er mich ja mal drauf hinweisen können, da nachzuschauen, hat er aber nicht…)
Nachdem ich diesen Screenshot also wieder eingefügt habe, wurde diese Lösung gefunden, die auch zu funktionieren scheint.
Lösung:
CSS-Klasse in der Elementor Vorlage festlegen.
Über Abschnitt > Erweitert > CSS-Klasse (Hier unbedingt den Abschnitt wählen, den das betrifft mit den Farben. Nicht die Spalte!)
Hier „single-page-design“ (oder einen anderen eigenen Namen vergeben. Diesen merken, weil brauchen wir dann später noch)
Danach im Customizer diese Zeilen als CSS einfügen (Wichtig: Zugehörige Definition im CUSTOMIZER als CSS einfügen, nicht im Elementor CSS der Seitenvorlage, da es dort nicht die Standardeinstellungen von Astra überschreibt!)
.single-page-design h1,
.single-page-design h2,
.single-page-design h3,
.single-page-design h4,
.single-page-design h5,
.single-page-design h6,
.single-page-design p {
color: #fbfbfb !important;
}
Fall 2: Zeilenabstand der WordPress Tabellen (Texteditor) über Elementor anpassen
Im zweiten Fall hatte ich mehrere Tabellen mit Daten eingefügt. Diese habe ich in Elementor über den Texteditor eingefügt. Das geht, weil ich das Advanced Editor Tools-Plugin (ehemals TinyMCE Advanced) installiert habe.
Das Problem:
Die Tabellen hatten nun einen seehr großen Innenabstand. Über die Tabelleneigenschaften konnte ich den Innenabstand zwar von der Theorie her ändern, in der Praxis ist da aber Null passiert. Sieht halt eher uncool aus.
Deswegen habe ich ChatGPT befragt, was er mir hier anbieten kann um die Zeilenabstände „enger“ darzustellen.
Lösung:
Auch hier die Lösung über eine CSS-Klasse. Ich habe hier für jede Tabelle eine eigene CSS-Klasse erstellt, weil ich die beiden Tabellen unterschiedlich anpassen wollte.
Schritt 1:
Zuerst wurde wieder im Elementor eine CSS-Klasse benannt. Hierfür einfach den Texteditor mit der entsprechenden Tabelle drin anklicken > Erweitert > CSS-Klassen > Namen vergeben und kopieren.
Ich habe meine hier im Beispiel „about-tabelle-weiterbildung“ genannt.
Schritt 2:
Danach im gleichen Elementor-Reiter nach unten scrollen und unter „Eigenes CSS“ diesen Code eingeben:
.about-tabelle-weiterbildung td {
padding-top: 2px;
padding-bottom: 2px;
line-height: 1.5;
}
Den Namen natürlich an den eigenen vergebenen Namen anpassen und je nach Bedarf die line-height, und padding anpassen. Ich habe mich hier für 2px jeweils und eine line-height von 1,5 entschieden. Wichtig zu wissen, die line-height bezieht sich auf den Text innerhalb der Zeile, nicht den Abstand der Zeilen zueinander. Das wird über das Padding geregelt.
Bei der zweite Tabelle habe ich die CSS-Klasse „meine-tabelle-ausstellungen“ genannt und mit etwas mehr Zeilenabstand nach unten angepasst. Da in der Tabelle pro Zeile mehr Inhalte waren, war hier eine bessere optische Abgrenzung zwischen den einzelnen Zeilen notwendig. Deswegen das Padding nach unten mit 10px. line-height hier 1.4, um einen bessere Zugehörigkeit des Textes zu schaffen.
.meine-tabelle-ausstellungen td {
padding-top: 3px;
padding-bottom: 10px;
line-height: 1.4;
}
Hier das Ergebnis:
Problembehebung:
Eigentlich hätte jetzt alles Schicki sein sollen, war’s dann aber doch nicht. Denn als ich die Website in Firefox aufrief, wurden die Tabellen völlig falsch dargestellt.
Während in Safari alles korrekt aussah, sah die Darstellung in allen anderen Browsern aus, wie ne zertretene Pommes.
Nach kurzer Recherche mit ChatGPT gab es hier aber eine schnelle Lösung. In den Tabelleneigenschaften war die Breite auf 0 Prozent gesetzt. Nach Umstellung auf 100 Prozent sah alles wieder picobello aus.
Fazit
CSS-Klassen sind gar nicht so kompliziert, wie gedacht. Gerade um individuelle Anpassungen vorzunehmen, sind sie super nützlich, ohne gleich alles global ändern zu müssen.
Elementor macht es einem hier sehr leicht eigene CSS-Klassen zu erstellen und anzupassen. Besonders wenn, wie in meinem Beispiel, die globalen Theme-Einstellungen mit reingrätschen lohnt es sich mal mit ChatGPT zu reden, was dahinter stecken könnte. Und ja, ein zweiter Browser zum Gegenchecken kann einem manchmal wirklich vor peinlichen Situationen beim Kunden bewahren.
