Wenn es Ihnen ähnlich geht wie mir, haben Sie viele Ideen für Ihre Website, die Sie gerne umsetzen möchten. Elementor macht es zwar einfach, mit Drag-and-Drop-Funktionen und vorgefertigten Elementen einzigartige Designs zu erstellen, doch manchmal geht nichts über die Möglichkeiten von reinem CSS. In diesem Artikel erfahren Sie, wie Sie benutzerdefiniertes CSS in Elementor hinzufügen, um Ihr Website-Design noch weiter zu verbessern!
3 beliebte Methoden zum Hinzufügen von benutzerdefiniertem CSS in Elementor
Es gibt verschiedene Möglichkeiten, benutzerdefiniertes CSS in Elementor hinzuzufügen. Schauen wir uns unsere drei besten Methoden an.
- Verwenden Sie den WordPress-Customizer
- Verwenden Sie ein CSS-Plugin
- Verwendung des HTML-Widgets
Verwenden Sie den WordPress-Customizer.
Um benutzerdefinierten CSS-Code in Elementor hinzuzufügen, befolgen Sie diese Schritte:
- Gehen Sie zu Darstellung > Anpassen
- Klicken Sie im WordPress Customizer auf „Zusätzliches CSS“.
- Der Bereich „Zusätzliches CSS“ wird geöffnet. Hier können Sie Code hinzufügen, indem Sie ihn in das Textfeld einfügen oder auf die Schaltfläche „Benutzerdefiniertes CSS hinzufügen“ klicken, um Ihre Datei von Ihrem Computer auszuwählen.
Verwenden Sie ein CSS-Plugin
Auf dem Markt sind verschiedene Plugins erhältlich, wie Simple CSS, Custom CSS Pro und CSS Hero, mit denen Sie Elementor benutzerdefiniertes CSS hinzufügen können.
Gehen Sie zunächst zu Benutzerdefiniertes CSS & JS > Benutzerdefiniertes CSS hinzufügen und klicken Sie auf CSS-Code hinzufügen.
Links erscheint ein einfacher CSS-Editor. Über die Konfigurationsoptionen auf der rechten Seite können Sie festlegen, ob der CSS-Code intern oder in einem externen Stylesheet geladen werden soll. Zusätzlich können Sie auswählen, ob der Code in den Header oder den Footer gehören soll
Sobald Sie die Bearbeitung des CSS-Codes abgeschlossen haben, klicken Sie auf die „Veröffentlichen“ .
Hinweis: Wechseln Sie zur Frontend-Ansicht, um den Code in Aktion zu sehen.
Verwendung des HTML-Widgets
Sie können ein HTML-Widget verwenden, um Elementor benutzerdefiniertes CSS hinzuzufügen. Dazu müssen Sie lediglich das HTML-Widget per Drag & Drop in die Umgebung ziehen und Ihren CSS-Code innerhalb eines Style-Tags einfügen.
Benutzerdefiniertes CSS ermöglicht es Ihnen, Ihrer Website eigenen Code hinzuzufügen. Es kann für viele Zwecke verwendet werden, von der Änderung des Erscheinungsbilds Ihrer Website bis hin zum Hinzufügen zusätzlicher Funktionen.
Nachdem Sie nun wissen, wie Sie benutzerdefiniertes CSS hinzufügen, können Sie es auf Ihren Webseiten verwenden, indem Sie diese Schritte befolgen:
- Öffne das Editorfenster von Elementor und klicke auf das „+“-Symbol oben links
- Klicken Sie auf „Benutzerdefinierter Code“ und fügen Sie dann diesen Code ein: `.elementor-custom-css{display:none;}`. Sie finden ihn unter Einstellungen > Benutzerdefiniertes CSS oder Design > Theme-Optionen > Benutzerdefiniertes CSS (je nach Ihrer WordPress-Version).
Abschluss
Nachdem Sie nun wissen, wie man benutzerdefiniertes CSS hinzufügt, können Sie die Flexibilität von Elementor voll ausnutzen. Wenn also das nächste Mal etwas nicht wie erwartet funktioniert, versuchen Sie, etwas CSS-Code hinzuzufügen, anstatt das Problem mit einem Plugin oder einer Theme-Änderung zu beheben!
Relevante Inhalte
- Was ist ein CSS-Framework?
- Wie entfernt man ungenutztes CSS in WordPress?
