Einer der größten Vorteile von Seitenerstellern wie Elementor ist, dass du Zugang zu vorgefertigten Seitenelementen, den sogenannten Widgets, hast. Die Widgets von Elementor bieten eine Vielzahl von Anpassungs- und Gestaltungsmöglichkeiten. Manchmal ist jedoch die einzige Möglichkeit, einen bestimmten Stil anzuwenden, die Verwendung von Cascading Style Sheets (CSS).
Mit CSS hast du ein erstaunliches Maß an Kontrolle über jede Komponente deiner Webseite. Wenn du mit der Sprache vertraut bist, ist das Hinzufügen von CSS zu WordPress ganz einfach. Elementor bietet außerdem mehrere Optionen zum Hinzufügen von benutzerdefiniertem CSS.
Schau dir unsere Videoanleitung zum Hinzufügen eines benutzerdefinierten CSS zu Elementor an
In diesem Artikel erklären wir dir, was CSS ist und wie du Elementor ein eigenes Styling hinzufügen kannst. Zum Schluss gehen wir noch auf einige Best Practices für die Verwendung von CSS in WordPress ein. Los geht’s!
Was ist CSS?
CSS ist eine so genannte „Stylesheet“-Sprache. Mit CSS-Stylesheets kannst du HTML- oder XML-Dokumenten ein eigenes Styling verpassen. Mit CSS kannst du eine einfache HTML-Seite in ein modernes Design verwandeln.
Stell dir CSS als eine Sprache vor, die beschreibt, wie Elemente in einem Browser aussehen sollen. Sie funktioniert in jedem Browser und ist eine der Kernsprachen des Internets.
Dies ist zum Beispiel der CSS-Code, mit dem du dem Textkörper eines HTML-Dokuments eine Hintergrundfarbe zuweisen kannst:
body {
background-color: red;
}Du kannst CSS verwenden, um Stile auf bestimmte Komponenten, Klassen und IDs in HTML anzuwenden. Das folgende Snippet würde zum Beispiel eine bestimmte Textfarbe und -ausrichtung auf alle H2s auf einer Seite anwenden:
h2 {
color: black;
text-align: left;
}Wenn du eine HTML-Seite lädst, wird in der Regel auch ein separates Stylesheet geladen, das den gesamten CSS-Code enthält. Das bedeutet, dass du Stylesheets auf mehreren Seiten wiederverwenden kannst.
Es steht dir frei, CSS-Code direkt auf jede HTML-Seite anzuwenden. Du kannst ihn auch „inline“ verwenden. Das ist ein Begriff, der sich auf CSS-Code bezieht, der auf ein einzelnes HTML-Element angewendet wird und sich in dieser Datei befindet.
Hier ist ein Beispiel für Inline-CSS für eine bestimmte H2-Überschrift:
<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>Es gilt als Best Practice, CSS in einem separaten Stylesheet hinzuzufügen. Einer der vielen Vorteile von WordPress und Elementor ist jedoch, dass du CSS hinzufügen kannst, ohne Dateien manuell bearbeiten zu müssen. Schauen wir uns einmal genauer an, wie das funktioniert.
Benutzerdefinierte CSS-Optionen in Elementor
Wenn du mit Elementor vertraut bist, weißt du, dass der Builder Abschnitte, Spalten und Widgets verwendet, um dir bei der Erstellung von Seiten zu helfen. Abschnitte enthalten eine oder mehrere Spalten, und jede Spalte kann mehrere Module enthalten:
Das Beste an Elementor ist, dass du auf der Ebene des Abschnitts, der Spalte und des Widgets eigenen CSS-Code hinzufügen kannst. Wenn du mit dem Mauszeiger über einen Abschnitt fährst, kannst du das Sechs-Punkte-Symbol auswählen, um das Menü Abschnitt bearbeiten auf der linken Seite des Bildschirms zu öffnen:
Wenn du im Menü “ Abschnitt bearbeiten “ auf die Registerkarte “ Erweitert“ gehst, siehst du einen Abschnitt “ Benutzerdefiniertes CSS“ . Darin findest du ein Feld, mit dem du Code für diesen speziellen Abschnitt hinzufügen kannst:
Wenn du Spalten und Widgets bearbeitest, wirst du feststellen, dass du in den jeweiligen Einstellungsmenüs Zugriff auf dieselben drei Registerkarten hast. Abschnitte, Spalten und Widgets enthalten alle Layout-, Stil- und erweiterte Einstellungen.
Um benutzerdefiniertes CSS zu einer Spalte hinzuzufügen, fahre mit dem Mauszeiger über die Spalte und wähle das zweispaltige Symbol in der oberen rechten Ecke des Elements. Navigiere dann zu der Option Erweitert und öffne den Abschnitt Benutzerdefiniertes CSS :
Auf die gleiche Weise kannst du benutzerdefinierte CSS zu einem Elementor-Widget hinzufügen. Wähle einfach das Widget aus, das du anpassen möchtest, und gehe direkt zum Reiter Erweitert > Benutzerdefiniertes CSS :
Das Hinzufügen von benutzerdefiniertem CSS zu bestimmten Elementen im Elementor Page Builder ist sehr einfach. Beachte aber, dass das Styling nur für diese Elemente gilt. Wenn du benutzerdefiniertes CSS für deine gesamte Webseite hinzufügen möchtest, musst du einen anderen Ansatz wählen.
So fügst du mit Elementor benutzerdefiniertes CSS hinzu (5 Methoden)
In diesem Abschnitt stellen wir dir verschiedene Möglichkeiten vor, wie du mit Elementor benutzerdefiniertes CSS hinzufügen kannst. Wir stellen Methoden vor, mit denen du CSS auf deine gesamte Webseite, auf bestimmte Seiten und auf Elementor-Widgets anwenden kannst.
Methode 1: Verwende das Elementor HTML Widget
Elementor ermöglicht es dir, benutzerdefiniertes CSS zu jedem seiner Widgets hinzuzufügen. In manchen Fällen möchtest du aber vielleicht Elemente manuell mit HTML und CSS hinzufügen. In diesen Fällen musst du das HTML-Widget verwenden:
Das HTML-Widget kann HTML, CSS und JavaScript parsen. Du kannst jeden beliebigen Code in das HTML-Code-Feld einfügen und wenn er gültig ist, zeigt Elementor ihn als Widget an:
Das HTML-Widget unterstützt sowohl Inline- als auch Standalone-CSS. Jeder Code, den du über das Widget hinzufügst, wirkt sich nur auf dieses eine Element aus.
Methode 2: Verwende das Menü Elementor Site Settings
Elementor enthält eine Sammlung von globalen Einstellungen, die den Optionen im WordPress Customizer ähneln. Um auf das Elementor Site Settings Menü zuzugreifen, öffne den Editor und klicke auf das Hamburger-Menü in der oberen linken Ecke des Bildschirms:
Auf der nächsten Seite wählst du die Option Site Settings :
Hier siehst du eine Sammlung von Einstellungen, mit denen du den Stil deiner Seite anpassen kannst. Alle Änderungen, die du in diesem Menü vornimmst, gelten für deine gesamte Webseite, auch wenn du technisch gesehen nur eine einzige Seite bearbeitest.
Auf der offiziellen Elementor-Webseite erfährst du, wie du das Menü “ Site Settings „ zur Anpassung deiner Seite verwendest. Der einzige Bereich, der uns interessiert, ist die Registerkarte Custom CSS . Wenn du ihn öffnest, siehst du ein Feld, das genauso aussieht wie die benutzerdefinierten CSS-Optionen für Abschnitte, Widgets und Spalten:
Jedes benutzerdefinierte CSS, das du hier hinzufügst, wirkt sich auf deine gesamte Webseite aus. Wenn du nur bestimmte Elemente anpassen willst, empfehlen wir dir, einen gezielteren Ansatz zu wählen (z. B. CSS direkt in ein Widget einzufügen).
Methode 3: Nutze den WordPress Customizer
Der WordPress Customizer ermöglicht es dir auch, CSS für die gesamte Seite hinzuzufügen. Dazu gehst du zu Darstellung > Anpassen und wählst im linken Menü die Option Zusätzliches CSS :
Allerdings sind die Elementor-Codefelder benutzerfreundlicher als die Felder im Customizer. Wenn du Elementor bereits für die Webseiten-Erstellung verwendest, gibt es keinen Grund, benutzerdefiniertes CSS über den Customizer hinzuzufügen.
Methode 4: Benutzerdefinierte CSS-Dateien einbinden
Wenn du mit der Bearbeitung von WordPress-Dateien vertraut bist und über einen FTP-Client (File Transfer Protocol) auf deine Webseite zugreifst, kannst du ein CSS-Stylesheet in die Warteschlange stellen, um es mit Elementor zu laden. Bei dieser Methode musst du Code in die WordPress-Datei functions.php einfügen.
Um auf die Datei functions.php zuzugreifen, verbindest du dich per FTP mit deiner Webseite und gehst zum WordPress-Stammverzeichnis . Öffne den Ordner, suche die Datei functions.php und bearbeite sie.
Hier ist ein Beispiel für den Code, den du in die Datei einfügen möchtest:
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );Dieser Code verwendet den before_enqueue_scriptshook, um ein Stylesheet namens custom-stylesheet zu laden. Außerdem verwenden wir die Funktion get_stylesheet_urifunction, um den Speicherort des Stylesheets auf dem Server zu ermitteln.
Idealerweise fügst du das benutzerdefinierte Stylesheet in das Verzeichnis deines Child-Themes oder in den Themes-Ordner selbst ein. Das Stylesheet kann jeden Elementor-CSS-Code enthalten, den du möchtest. Das Snippet, das du der functions.php hinzugefügt hast, stellt sicher, dass der Code nur geladen wird, wenn Elementor auf deiner Webseite aktiv ist.
Methode 5: Verwende ein CSS-Plugin
Es gibt verschiedene Plugins, mit denen du deiner Webseite benutzerdefinierten CSS-Code hinzufügen kannst, ohne den Customizer oder die Page Builder zu benutzen. Eines unserer Lieblingstools für diese Aufgabe heißt Simple Custom CSS and JS:
Mit Simple Custom CSS and JS hast du die Möglichkeit, Code direkt in die Kopf- und Fußzeilen deines Themes einzufügen. Gehe dazu zu Benutzerdefiniertes CSS & JS > Benutzerdefiniertes CSS hinzufügen und klicke auf CSS-Code hinzufügen.
Auf der linken Seite wird ein einfacher CSS-Editor angezeigt. Auf der rechten Seite kannst du festlegen, ob der CSS-Code in einem externen Stylesheet oder intern geladen werden soll. Du kannst auch entscheiden, ob der Code in der Kopf- oder Fußzeile erscheinen soll:
Wenn du mit der Bearbeitung des CSS-Codes fertig bist, klicke auf die Schaltfläche Veröffentlichen . Möglicherweise musst du zur Frontend-Ansicht wechseln, um den Code in Aktion zu sehen.
Best Practices für die Erstellung von benutzerdefiniertem CSS mit Elementor
Wenn du mit benutzerdefiniertem CSS arbeitest oder irgendeinen Code zu deiner Webseite hinzufügst, solltest du die folgenden Best Practices im Hinterkopf behalten. Beginnen wir mit der Verwendung eines Child-Themes.
Verwende ein WordPress Child Theme
Wenn du den Stil deines Themes mit CSS ändern möchtest, empfehlen wir dir, ein Child-Theme zu verwenden. Ein „Child“-Theme ist eine Vorlage, die alle Stile eines bestimmten Themes erbt.
Wenn du also Änderungen am Original-Theme vornimmst, wirken sich diese nicht auf die Anpassungen aus, die du im Child-Theme vornimmst. Und wenn du dein Theme aktualisierst, bleiben diese Änderungen erhalten.
Verwende einen Code-Präprozessor, um das Schreiben zu vereinfachen
Eine der größten Herausforderungen beim Hinzufügen von Code in WordPress oder bei der Verwendung von Elementor ist, dass du nicht auf alle Funktionen moderner Code-Editoren zugreifen kannst. Anstatt den Code mit einfachen Editoren vor Ort zu bearbeiten, empfehlen wir dir, deinen bevorzugten Präprozessor zu verwenden. Dann kannst du deinen Code einfach kopieren und in WordPress einfügen.
Erwäge den Einsatz einer Staging-Webseite
Wenn du große Änderungen an WordPress vornehmen willst, empfehlen wir dir, eine Staging-Webseite zu verwenden. Mit Staging-Webseiten kannst du Änderungen an Stil und Funktionalität testen, ohne dass du Gefahr läufst, etwas auf deiner Live-Webseite kaputt zu machen.
Bei einigen Webhostern kannst du über dein Control Panel auf die Staging-Funktion zugreifen. Wenn du Kinsta nutzt, kannst du deine Webseite über das MyKinsta-Dashboard auswählen und zwischen der Live- und der Staging-Umgebung hin und her wechseln:
Wenn dein Webhoster keine Staging-Funktionalität anbietet, kannst du eine lokale WordPress-Entwicklungsumgebung wie DevKinsta für Testzwecke nutzen. Alternativ kannst du auch einen Wechsel des Hosting-Anbieters in Betracht ziehen.
Zusammenfassung
Das Hinzufügen von benutzerdefiniertem CSS in Elementor ist einfacher, als du vielleicht denkst. Der Page Builder bietet mehrere Methoden, um Code zu Abschnitten, Spalten, Widgets und für deine gesamte Webseite hinzuzufügen.
Hier sind die fünf wichtigsten Möglichkeiten, um Elementor (oder deiner Webseite im Allgemeinen) benutzerdefiniertes CSS hinzuzufügen:
- Verwende das Elementor HTML Widget.
- Verwende das Menü Elementor Site Settings.
- Verwende den WordPress Customizer.
- Binde benutzerdefinierte CSS-Dateien ein.
- Verwende ein CSS-Plugin.
Bei Kinsta helfen wir dir mit unseren Plänen dabei, die Webseite deiner Träume mit Page Buildern wie Elementor zu erstellen. Schau dir unsere Pläne an oder sprich mit dem Vertrieb, um den richtigen Plan für dich zu finden.
Schreibe einen Kommentar