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

Suchen Sie nach Möglichkeiten, benutzerdefiniertes CSS in Elementor hinzuzufügen?

Das Erweitern der bereits erstaunlichen Elementor-Designs durch Hinzufügen von benutzerdefiniertem CSS kann Ihnen 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, richtig?

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

Aber wie füge ich benutzerdefiniertes CSS zum Drag & Drop-Elementor-Seitenersteller hinzu?

Nun, Sie können in Elementor auf viele Arten benutzerdefiniertes CSS hinzufügen. Um mehr Details darüber zu erfahren, wie man benutzerdefiniertes CSS in Elementor hinzufügt, lesen Sie weiter…

Was ist CSS?

CSS (Cascading Style Sheets) ist eine regelbasierte Stylesheet-Sprache, die verwendet wird, um das Layout und Aussehen von Webseiten zu ändern, 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 auf der Elementor-Site hinzufügen ?

Nun, es ist nicht zwingend erforderlich, da Elementor selbst alle Anpassungsoptionen bietet, die Sie zum Erstellen schöner Websites benötigen. Wenn Sie jedoch jemand sind, der weiß, wie man codiert, und Ihre Kreativität einsetzen möchten, um das Aussehen 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 Aussehen einer Seite, die Ihr Design bietet, aber Sie möchten das Layout in einem Abschnitt ein wenig ändern, dann können Sie die Hilfe von Elementor Custom CSS nutzen, um dies zu tun.

• In ähnlicher Weise können Sie auch das Design der vorgefertigten Elementor-Vorlage mit den benutzerdefinierten CSS-Code-Snippets überschreiben.

• Sie können Ihre Website auch so gestalten, dass sie auf verschiedenen Geräten anders 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 mit verschiedenen Methoden benutzerdefiniertes CSS in Elementor hinzufügen. Hier teile ich mit Ihnen die 4 sichersten Möglichkeiten, benutzerdefiniertes CSS von Elementor hinzuzufügen.

Fügen Sie CSS mit den 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. Diese Option ist jedoch nur mit Elementor Pro verfügbar.

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

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.

Verwenden Sie das HTML-Widget, um benutzerdefiniertes CSS von Elementor 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. Ziehen Sie für diese Option einfach das HTML-Widget per Drag-and-Drop und fügen Sie dann Ihren CSS-Code in ein Style-Tag ein.

Hinweis: Sie können mit dem HTML-Tag sowohl Inline- als auch Standalone-CSS hinzufügen. Und keine Sorge, nur die Stile werden auf der Seite wiedergegeben, der Rohcode ist nicht sichtbar.

Fügen Sie benutzerdefiniertes CSS in den Website-Einstellungen von Elementor hinzu

Sie können auch benutzerdefiniertes CSS in Elementor hinzufügen, indem Sie die Website-Einstellungsoption verwenden. Klicken Sie auf das Hamburger-Menü in der oberen linken Ecke und dann unter Einstellungen auf die Option Website-Einstellungen, um Zugriff auf die globalen Website-Einstellungsoptionen zu erhalten.

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

Fügen Sie benutzerdefiniertes CSS in Elementor aus den 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 WordPress-Site anpassen können. Scrollen Sie nach unten und öffnen Sie die Registerkarte Zusätzliches CSS , um Ihrer Website benutzerdefiniertes CSS hinzuzufügen.

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

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

CSS neu generieren

Das Regenerieren von CSS kann dieses Problem lösen. Um CSS neu zu generieren, navigieren Sie zu Elementor ⇒ Tools und klicken Sie auf CSS & Daten neu generieren und dann auf Änderungen speichern.

Löschen Sie den Website-Cache und den Browser-Cache

Löschen Sie den Cache der Website mit allen WordPress-Cache-Plugins. Sie können auch jeden Cache auf Serverebene löschen, falls Sie einen haben. Löschen Sie nach dem Löschen des Website-Cache Ihren Browser-Cache und aktualisieren Sie die Website, um zu überprüfen, ob das CSS funktioniert oder nicht.

Theme-Inkompatibilität

Manchmal kann die Inkompatibilität von Elementor-Designs der Grund dafür sein, dass benutzerdefiniertes CSS nicht im Frontend angezeigt wird. Sie können versuchen, zu einem beliebigen Standarddesign zu wechseln, um zu überprüfen, ob das CSS funktioniert. Wenn das CSS im Frontend mit einem Standarddesign angezeigt wird, sprechen Sie mit Ihrem Designentwickler über das Kompatibilitätsproblem.

Verwenden 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 können und der andere Seitenersteller das benutzerdefinierte CSS von Elementor überschreiben kann. In solchen Fällen sollten Sie nur den Seitenersteller von Elementor verwenden.

Häufig gestellte Fragen

Werfen Sie einen Blick auf einige der beliebtesten Fragen zu benutzerdefiniertem Elementor-CSS mit Antworten:

Wie verwende ich benutzerdefiniertes CSS in Elementor?

Sie können benutzerdefiniertes CSS in Elementor auf 4 Arten hinzufügen. Diese Möglichkeiten verwenden HTML-Block, benutzerdefiniertes CSS-Snippet von Elementor, WordPress-Anpassungsoptionen und Elementor-Site-Erstellungseinstellungen.

Wie kann ich benutzerdefiniertes CSS kostenlos zu Elementor hinzufügen?

Aus den WordPress-Anpassungsoptionen können Sie kostenlos benutzerdefiniertes CSS auf der Elementor-Website hinzufügen.

Abschluss mit benutzerdefiniertem CSS von Elementor

Jetzt kennen Sie 4 Möglichkeiten, wie 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 erhält ein Inline-Stil immer eine höhere Priorität gegenüber CSS, das auf Seiten- oder Website-Ebene geschrieben wurde.

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

Wenn Sie jedoch ein CSS-Profi sind, brauchen Sie sich keine Sorgen zu machen. Sie können die in diesem Blog beschriebenen Methoden verwenden, um Ihr benutzerdefiniertes CSS hinzuzufügen und das Aussehen Ihrer Website erfolgreich zu ändern.