Unterstützt von Awesome Motive.
Erfahren Sie mehr in unserem Seahawk-Blog.

Wie kann man benutzerdefinierte CSS in Elementor hinzufügen?

Wie man benutzerdefinierte CSS in Elementor hinzufügt

Wenn es Ihnen so geht wie mir, haben Sie viele Ideen für Ihre Website, die Sie gerne umsetzen möchten. Und obwohl Elementor es einfach macht, einzigartige Designs mit Drag-and-Drop-Funktionen und vorgefertigten Elementen zu erstellen, kann manchmal nichts die Macht von reinem CSS ersetzen. In diesem Artikel erfahren Sie, wie Sie in Elementor benutzerdefinierte CSS hinzufügen können, damit Sie Ihr Website-Design noch weiter verbessern können!

3 beliebte Möglichkeiten, benutzerdefinierte CSS in Elementor hinzuzufügen

Es gibt verschiedene Möglichkeiten, benutzerdefinierte CSS in Elementor hinzuzufügen. Werfen wir einen Blick auf unsere 3 besten Möglichkeiten, dies zu tun.

  • Verwenden Sie den WordPress Customizer
  • Verwenden Sie ein CSS-Plugin
  • HTML-Widget verwenden

Verwenden Sie den WordPress Customizer.

Um benutzerdefinierten CSS-Code in Elementor hinzuzufügen, folgen Sie diesen Schritten:

  • Gehen Sie zu Erscheinungsbild > Anpassen
  • Klicken Sie im WordPress Customizer auf Additional CSS.
  • Es öffnet sich der Abschnitt Zusätzliches CSS. Sie können hier Code hinzufügen, indem Sie ihn in das Textfeld einfügen oder auf die Schaltfläche Benutzerdefiniertes CSS hinzufügen klicken, um Ihre Datei auf Ihrem Computer zu suchen.

Verwenden Sie ein CSS-Plugin

Es gibt verschiedene Plugins auf dem Markt, wie Simple CSS, Custom CSS Pro und CSS Hero, mit denen Sie Elementor benutzerdefinierte CSS hinzufügen können.

Gehen Sie zunächst zu Custom CSS & JS > Add Custom CSS und klicken Sie auf Add CSS Code.

Auf der linken Seite wird ein einfacher CSS-Editor angezeigt. Sie können wählen, ob Sie den CSS-Code intern oder in einem externen Stylesheet laden möchten, indem Sie die Konfigurationsoptionen auf der rechten Seite nutzen. Außerdem können Sie wählen, ob der Code in die Kopf- oder in die Fußzeile gehört: 

Hinzufügen von benutzerdefiniertem Css in Wordpress

Sobald Sie mit der Bearbeitung des CSS-Codes fertig sind, klicken Sie auf die Schaltfläche Veröffentlichen

Hinweis: Wechseln Sie zu einer Front-End-Ansicht, um den Code in Aktion zu sehen.

HTML-Widget verwenden

Sie können ein HTML-Widget verwenden, um benutzerdefinierte CSS zu Elementor hinzuzufügen. Alles, was Sie für diese Option tun müssen, ist das HTML-Widget zu ziehen und abzulegen und Ihren CSS-Code in einem Style-Tag hinzuzufügen. 

Benutzerdefiniertes CSS ist eine Möglichkeit, benutzerdefinierten Code zu Ihrer Website hinzuzufügen. Er kann für viele Dinge verwendet werden, von der Änderung des Aussehens Ihrer Website bis zum Hinzufügen zusätzlicher Funktionen.

Da Sie nun wissen, wie Sie benutzerdefiniertes CSS hinzufügen können, können Sie es in Ihren Websites verwenden, indem Sie die folgenden Schritte ausführen:

  • Öffnen Sie das Editor-Fenster von Elementor und klicken Sie auf das "+"-Symbol oben links
  • Click ‘Custom Code’ and then paste in this piece of code: `.elementor-custom-css{display:none;}`. You can find this under Settings > Custom CSS or Appearance > Theme Options > Custom CSS (depending on which version of WordPress you have).

Schlussfolgerung

Jetzt, da Sie wissen, wie Sie benutzerdefinierte CSS hinzufügen können, können Sie die Flexibilität von Elementor nutzen. Wenn sich das nächste Mal etwas nicht wie erwartet verhält, versuchen Sie es mit dem Hinzufügen von CSS-Code, anstatt das Problem mit einem Plugin oder einer Theme-Änderung zu beheben, versuchen Sie es mit dem Hinzufügen von CSS-Code!

Relevanter Inhalt

Verwandte Beiträge

Lassen Sie uns über WordPress-Wartungsdienste sprechen! Der Betrieb einer Website bringt eine Reihe von Verpflichtungen mit sich

Benutzerdefinierte Felder oder erweiterte benutzerdefinierte Felder ermöglichen Ihnen das Hinzufügen zusätzlicher Daten oder

Angesichts der Zunahme von Cyber-Bedrohungen und Malware ist die Wartung von WordPress-Websites entscheidend für die Aufrechterhaltung

Komal Bothra 17. Mai 2024

23+ Beste WordPress Entwicklungsagenturen in Indien für 2024

Sind Sie auf der Suche nach den besten WordPress-Entwicklungsdienstleistungen in Indien? Sie müssen sich keine Sorgen machen

Agentur WordPress
Komal Bothra 10. Mai 2024

Wie Sie HTTPS auf Ihrer WordPress-Website erzwingen (3 einfache Methoden)

Jeder Klick, jeder Besucher ist wichtig. Doch eine Warnung "Nicht sicher" kann das Vertrauen schnell untergraben. Mit

WordPress
Komal Bothra 7. Mai 2024

Figma vs. WebFlow: Was ist besser im Jahr 2024?

Ob Sie nun Produktdesigner oder UI-Entwickler sind, beide sind für die Erstellung von Produkten verantwortlich

Vergleichen Sie Gestaltung

Erste Schritte mit Seahawk

Melden Sie sich in unserer App an, um unsere Preise einzusehen und Rabatte zu erhalten.