Backed by Awesome Motive.
Learn more on our 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

Developing WordPress websites often involves a delicate balance between creativity and technical precision. A safe

Are you eager to dive into WordPress and stay updated with its latest trends and

Want to create a thriving online community on your WordPress website? Connect with your audience,

Komal Bothra November 30, 2023

How To Set Up A WordPress Development Environment?

Developing WordPress websites often involves a delicate balance between creativity and technical precision. A safe

WordPress
Komal Bothra November 29, 2023

12 Amazing WordPress Blogs To Follow In 2024

Are you eager to dive into WordPress and stay updated with its latest trends and

WordPress
Komal Bothra November 26, 2023

Fix “There Has Been A Critical Error On Your WordPress Website”

An unsettling notice that reads, "There has been a critical error on your WordPress website"

WordPress

Erste Schritte mit Seahawk

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