So fügen Sie benutzerdefiniertes CSS in Elementor hinzu: 4 einfache Methoden

Auf der Suche nach Wegen dazu Benutzerdefiniertes CSS in Elementor hinzufügen?

Durch die Erweiterung der bereits erstaunlichen Elementor-Designs durch das Hinzufügen von benutzerdefiniertem CSS können Sie sich einen unschlagbaren Vorteil gegenüber Ihren Mitbewerbern verschaffen.

Warum also nicht ein benutzerdefiniertes Elementor-CSS verwenden und sich in dieser hart umkämpften digitalen Welt von der Masse abheben?

Es gibt keinen Grund, warum Sie das nicht tun sollten.

Aber wie fügt man benutzerdefiniertes CSS zum Drag-and-Drop-Elementor-Seitenersteller hinzu?

Nun, Sie können in Elementor auf viele Arten benutzerdefiniertes CSS hinzufügen. Um mehr Details zu erfahren So fügen Sie benutzerdefiniertes CSS in Elementor Keep hinzu beim Lesen…

Was ist CSS?

CSS (Cascading Style Sheets) ist eine regelbasierte Stylesheet-Sprache, die zum Ändern des Layouts und Aussehens von Webseiten verwendet wird, die mit einer Auszeichnungssprache wie HTML oder XML erstellt wurden. Die Verwendung von CSS ist eine effiziente Art des Webdesigns, da sowohl Inhalt als auch Stil in einer separaten Datei gespeichert werden, was Ihnen die größte Flexibilität und Benutzerfreundlichkeit bietet.

Warum sollten Sie benutzerdefiniertes CSS zur Elementor-Site hinzufügen??

Nun, es ist nicht obligatorisch, weil Elementor selbst bietet alle Anpassungsoptionen, die Sie zum Erstellen schöner Websites benötigen. Wenn Sie sich jedoch mit dem Programmieren auskennen und Ihrer Kreativität freien Lauf lassen möchten, um das Erscheinungsbild der Website zu verbessern, können Sie benutzerdefiniertes CSS in Elementor hinzufügen.

• Mit benutzerdefiniertem CSS in Elementor können Sie den Stil des Themas überschreiben, um einen neuen Stil zu implementieren. Angenommen, Sie lieben das gesamte Erscheinungsbild einer Seite, die Ihr Theme bietet, möchten aber das Layout in einem Abschnitt ein wenig ändern, dann können Sie dazu die Hilfe von benutzerdefiniertem CSS von Elementor nutzen.

• Ebenso können Sie das Design der vorgefertigten Elementor-Vorlage mithilfe der benutzerdefinierten CSS-Codefragmente überschreiben.

• Sie können Ihre Website auch individuell so gestalten, dass sie auf verschiedenen Geräten unterschiedlich aussieht, indem Sie benutzerdefinierte CSS-Code-Snippets zu Elementor hinzufügen.

So fügen Sie benutzerdefiniertes CSS in Elementor hinzu: 3 verschiedene Methoden

Das Hinzufügen von benutzerdefiniertem CSS ist überhaupt keine schwierige Aufgabe. Tatsächlich können Sie in Elementor mit verschiedenen Methoden benutzerdefiniertes CSS hinzufügen. Hier teile ich mit Ihnen die sichersten 4 Möglichkeiten, benutzerdefiniertes Elementor-CSS hinzuzufügen.

1️⃣ Fügen Sie CSS mithilfe der benutzerdefinierten CSS-Code-Snippets von Elementor hinzu

Elementor bietet Ihnen eine erweiterte Option zum Hinzufügen von benutzerdefiniertem CSS zu Ihren Abschnitten, Spalten und Widgets. Jedoch, Diese Option ist nur mit verfügbar Elementor Pro.

Um benutzerdefiniertes CSS zu einem beliebigen Abschnitt/inneren Abschnitt Ihrer Elementor-Website hinzuzufügen, Klicken Sie auf die sechs Punkte, um in den Bearbeitungsmodus zu gelangen, dann gehen Sie zu Registerkarte „Erweitert“ ⇒ Benutzerdefiniertes CSS. Erweitern Sie nun die Registerkarte „Benutzerdefiniertes CSS“ und fügen Sie Ihren benutzerdefinierten Code hinzu.

Ebenso können Sie benutzerdefiniertes CSS auch in Elementor-Widgets hinzufügen. Klicken Sie dazu auf das Widget, um in den Bearbeitungsmodus zu wechseln, und wechseln Sie dann zur Registerkarte „Erweitert“ ⇒ Benutzerdefiniertes CSS. Erweitern Sie nun die Registerkarte „Benutzerdefiniertes CSS“ und fügen Sie Ihren benutzerdefinierten Code hinzu.

2️⃣ Verwenden Sie das HTML-Widget, um benutzerdefiniertes Elementor-CSS hinzuzufügen

Die zweite Option, mit der Sie benutzerdefiniertes Elementor-CSS zu Ihrer WordPress-Website hinzufügen können, ist die Verwendung des HTML-Widgets. Für diese Option einfach Ziehen Sie das HTML-Widget per Drag & Drop und fügen Sie dann Ihren CSS-Code innerhalb eines Style-Tags hinzu. 

Notiz: Mithilfe des HTML-Tags können Sie sowohl Inline- als auch Standalone-CSS hinzufügen. Und keine Sorge, nur die Stile werden auf der Website angezeigt, der Rohcode ist nicht sichtbar.

3️⃣ Fügen Sie benutzerdefiniertes CSS in den Elementor-Site-Einstellungen hinzu

Sie können in Elementor auch benutzerdefiniertes CSS hinzufügen, indem Sie die Option „Site-Einstellungen“ verwenden. Klicken Sie oben links auf das Hamburger-Menü und dann unter „Einstellungen“ Klicken Sie auf die Option „Site-Einstellungen“, um Zugriff auf die globalen Site-Einstellungsoptionen zu erhalten.

Jetzt Scrollen Sie nach unten zur Option „Benutzerdefiniertes CSS“., öffnen Sie die Registerkarte und fügen Sie hier Ihre benutzerdefinierten Stile hinzu.

4️⃣ Fügen Sie benutzerdefiniertes CSS in Elementor über die WordPress-Anpassungseinstellungen hinzu

Sie müssen nicht unbedingt die von Elementor bereitgestellten Optionen verwenden, um benutzerdefiniertes CSS hinzuzufügen. Sie können auch die WordPress-Anpassungsoptionen verwenden, um benutzerdefiniertes CSS hinzuzufügen.

Gehen Sie dazu zu WordPress-Dashboard ⇒ Aussehen ⇒ Anpassen. 

Jetzt finden Sie viele Einstellungen, mit denen Sie Ihre anpassen können WordPress-Site. Scrollen Sie nach unten und öffnen Sie die Zusätzliche CSS-Registerkarte um Ihrer Website benutzerdefiniertes CSS hinzuzufügen.

So beheben Sie das Problem, dass das benutzerdefinierte Elementor-CSS nicht funktioniert

Manchmal wird das Hinzufügen von benutzerdefiniertem CSS in Elementor aufgrund technischer Probleme nicht sofort auf der Website angezeigt. Hier sind die Schritte, die Sie ergreifen können, um dieses Problem zu lösen:

✅CSS neu generieren

Durch die Neugenerierung von CSS kann dieses Problem gelöst werden. Um CSS neu zu generieren, navigieren Sie zu Elementor ⇒ Tools und klicken Sie auf CSS & Daten neu generieren und klicken Sie dann auf Änderungen speichern.

✅ Website-Cache und Browser-Cache löschen

Leeren Sie den Cache der Website mit einem beliebigen WordPress Cache-Plugins. Sie können auch jeden Cache auf Serverebene löschen, sofern Sie einen haben. Nachdem Sie den Website-Cache geleert haben, leeren Sie Ihren Browser-Cache und aktualisieren Sie die Website, um zu überprüfen, ob das CSS funktioniert oder nicht.

✅ Theme-Inkompatibilität

Manchmal Elementor-Thema Inkompatibilität kann der Grund dafür sein, dass benutzerdefiniertes CSS nicht im Frontend angezeigt wird. Sie können versuchen, zu einem beliebigen Standardthema zu wechseln, um zu überprüfen, ob das CSS funktioniert, wenn das CSS im Frontend mit einem angezeigt wird Standardthema Sprechen Sie dann mit Ihrem Theme-Entwickler über das Kompatibilitätsproblem.

✅ Verwendung eines anderen Seitenerstellers zusammen mit Elementor

Die gleichzeitige Verwendung mehrerer Seitenersteller kann dazu führen, dass Ihr benutzerdefiniertes CSS nicht funktioniert. Der einfache Grund ist, dass CSS von verschiedenen Seitenerstellern miteinander in Konflikt geraten kann und der andere Seitenersteller das benutzerdefinierte CSS von Elementor überschreiben kann. In solchen Fällen sollten Sie nur den Elementor-Seitenersteller verwenden.

Häufig gestellte Fragen

Sehen Sie sich einige der häufigsten Fragen im Zusammenhang mit benutzerdefiniertem Elementor-CSS mit Antworten an:

Wie verwende ich benutzerdefiniertes CSS in Elementor?

Sie können in Elementor auf vier Arten benutzerdefiniertes CSS hinzufügen. Diese Möglichkeiten umfassen die Verwendung von HTML-Blöcken, benutzerdefinierten Elementor-CSS-Snippets, WordPress-Anpassungsoptionen und Elementor-Site-Erstellungseinstellungen.

Wie kann ich Elementor kostenlos benutzerdefiniertes CSS hinzufügen?

Über die WordPress-Anpassungsoptionen können Sie kostenlos benutzerdefiniertes CSS zur Elementor-Website hinzufügen.

Abschluss mit benutzerdefiniertem Elementor-CSS

Jetzt kennen Sie vier Möglichkeiten, mit denen Sie benutzerdefiniertes CSS in Elementor hinzufügen können. Obwohl Sie alle verwenden können, sollten Sie die CSS-Prioritätshierarchie im Auge behalten. Beispielsweise hat ein Inline-Stil immer Vorrang vor CSS, das auf Seiten- oder Website-Ebene geschrieben wurde.

Daher würde ich empfehlen, benutzerdefiniertes CSS nur dann zu verwenden, wenn Sie sich sehr gut mit CSS auskennen. Andernfalls können Sie mehr schaden als nützen und am Ende das Aussehen und Layout Ihrer Website beeinträchtigen.

Wenn Sie jedoch ein CSS-Profi sind, müssen Sie sich keine Sorgen machen. Sie können die in diesem Blog beschriebenen Möglichkeiten nutzen, um Ihr benutzerdefiniertes CSS hinzuzufügen und so das Erscheinungsbild Ihrer Website erfolgreich zu ändern.