Vor kurzem hat uns einer unserer Leser, der die Pro-Version von Elementor nicht hatte, herausgefordert, wie er seiner Website benutzerdefiniertes CSS hinzufügen kann.

Da das Problem etwas komplexer ist, dachten wir, dass mehrere Benutzer mit diesem Problem konfrontiert sein könnten. Deshalb haben wir uns entschlossen, einen ausführlichen Artikel darüber zu veröffentlichen, wie Sie dorthin gelangen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach benutzerdefiniertes CSS zu einer Elementor-Seite oder -Website hinzufügen.

Die drei Möglichkeiten, benutzerdefiniertes CSS zu einer Elementor-Seite oder -Website hinzuzufügen, sind wie folgt:

  • CSS-Code über das HTML-Element hinzufügen.
  • Über das Plugin Snippet-Code.
  • Verwenden des Theme Customizers von Elementor

Methode 1: CSS-Code aus dem HTML-Element von Elementor hinzufügenor

Verwenden Sie diese Methode, wenn Sie CSS nur zu einer einzelnen Seite hinzufügen möchten.

Schritt 1: Ziehen Sie das HTML-Element des Elementors und legen Sie es ab

Sie können dieses HTML-Element an einer beliebigen Stelle auf der Seite platzieren und es funktioniert einwandfrei.

Schritt 2: Klicken Sie auf das Symbol HTML bearbeiten

Klicken Sie auf das Symbol HTML bearbeiten rechts neben dem Elementor HTML-Element. Wenn Sie darauf klicken, wird eine HTML-Bearbeitungs-Toolbox auf der linken Seite des Bildschirms angezeigt.

Schritt 3: CSS-Code hinzufügen

  1. Klicken Sie auf die Registerkarte Inhalt und öffnen Sie die Dropdown-Liste HTML-Code.
  2. Platzieren Sie Ihren CSS-Code in der Leuchtfeuer.

Methode 2: Benutzerdefiniertes CSS für Elementor über das Code-Snippets-Plugin

Vorteile der Verwendung des Code-Snippets-Plugins:

  • Wenn Sie Ihr WordPress-Theme ändern oder aktualisieren möchten, wird immer das CSS angewendet.
  • Dies ist die bequemste und effizienteste Möglichkeit, CSS-Code hinzuzufügen, da Sie CSS-Code wie Plugins aktivieren oder deaktivieren können.

Schritt 1: Öffnen Sie das Erweiterungsmenü in Ihrem Dashboard

Schritt 2: Fügen Sie ein neues Plugin hinzu

Klicken Sie auf die Schaltfläche hinzufügen »Um auf die Seite zum Hinzufügen neuer Plugins zuzugreifen.

  1. Suchen Sie nach dem Plugin " Code Snippets ".
  2. Installieren Sie es, indem Sie auf die Schaltfläche klicken jetzt installieren sobald die Forschungsergebnisse positiv sind.

Schritt 3: Aktivieren Sie das Plugin

Benutzerdefiniertes CSS bei Elementor

Klicken Sie auf die Schaltfläche Aktivieren »Sobald die Installation abgeschlossen ist, um das Plugin zu aktivieren Code Ausschnitte.

Schritt 4: Öffnen Sie die Plugin-Seite und fügen Sie ein Code-Snippet hinzu

  1. Öffnen Sie das Menü Extrakte von deinem Dashboard
  2. Klicken Sie auf die Schaltfläche Neu um ein neues Code-Snippet hinzuzufügen

Schritt 5: Erstellen Sie ein Snippet und aktivieren Sie es

  1. Geben Sie Ihrem Code-Snippet einen Namen.
  2. Schreiben Sie Ihren Code in das Tag. Dieser Code steht unten zum Kopieren bereit.
  3. Klicken Sie auf die Schaltfläche Änderungen speichern Um das Code-Snippet zu speichern.
  4. Klicken Sie nach dem Speichern des CSS auf " Aktivieren Um den CSS-Code zu aktivieren.

Kopieren Sie den Code

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

Methode 3: Verwenden Sie den Elementor Theme Customizer

Hinweis: Seien Sie vorsichtig, bevor Sie diese Methode verwenden, da Sie dieses benutzerdefinierte CSS verlieren, wenn Sie das Design ändern.

Schritt 1: Öffnen Sie den Theme-Anpasser

Benutzerdefiniertes CSS bei Elementor

Gehen Sie zu Ihrer Website und klicken Sie auf die Option zum Anpassen in der oberen Navigationsleiste. Dies öffnet ein Theme-Anpassungsfenster.

Schritt 2: Klicken Sie auf den zusätzlichen CSS-Tab


Dies öffnet die CSS-Eingabeseite.

Schritt 3: CSS-Code hinzufügen

Benutzerdefiniertes CSS bei Elementor

Gut ! Jetzt wissen Sie, wie Sie ganz einfach benutzerdefiniertes CSS zu einer Elementor-Seite oder -Website hinzufügen. Dadurch wird das Design einzigartiger Webseiten in Elementor Free flexibler.

Holen Sie sich jetzt Elementor Pro!

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. FileBird

Filebird

Hatten Sie jemals Probleme, Tausende von Bild-, Video- oder Dokumentdateien zu verwalten, die Sie auf Ihr WordPress-FTP hochgeladen haben? ja oder nein, egal, wichtig ist zu wissen, dass die WordPress Plugin FileBird hilft Ihnen dabei, Ihre Mediendateien einfach zu verwalten und bringt mehr Leistung in Ihre Bibliothek.

Dank der nahtlosen Benutzeroberfläche und des Kontextmenüs können Benutzer Dateien in Ordner ziehen und ablegen oder verfügen über die erforderlichen Rechte, um Ordner auf die gleiche Weise wie auf Ihrem Computer schnell zu erstellen, umzubenennen oder zu löschen.

Mit diesem Plugin werden Ihre Mediendateien systematisch organisiert und Sie können ganz einfach ein Bild auswählen, das in eine Seite eingefügt oder veröffentlicht werden soll. Darüber hinaus ist dieses Plugin vollständig kompatibel mit den beliebtesten Plugins, insbesondere mit WooCommerce, und unterstützt auch eine große Anzahl von Sprachen.

Um mehr zu erfahren, besuchen Sie Wie die Verwaltung von Dateien und Ordnern Wordpress

Also, wenn Sie dem einen Schub geben wollen Verwalten Ihrer Medienbibliothek, die WordPress Plugin FileBird könnte Ihre Geheimwaffe sein.

HerunterladenDemo | Web-Hosting

2. Ultimate WooCommerce Erweiterbare Kategorien

Ultimative erweiterbare Woocommerce-Kategorien

Ce WordPress Plugin ermöglicht es Ihnen, die langen Listen langweiliger WooCommerce-Kategorien einfach zu ändern und sie durch verschiedene Ebenen von Unterelementen in einem Akkordeon-Menü zu ersetzen.

Seine Hauptfunktionen sind: die Möglichkeit, es zu aktivieren und schließlich, dass es automatisch funktioniert (keine Parameter erforderlich!), Die Unterstützung für mehrere Ebenen von Kategorien (Kategorien, Unterkategorien usw.), das Hervorheben von aktive Kategorie, Öffnen aller übergeordneten Kategorien, wenn sich die aktuelle Kategorie darin befindet, Kompatibilität mit einer beliebigen WooCommerce-Themaauf wunsch kostenlose Updates und eine sehr aktive Kundenbetreuung.

Herunterladen | Demo | Web-Hosting

3. Waveplayer

Wie der Name schon vermuten lässt, handelt es sich bei WavePlayer um ein Audioplayer-Plugin, das die Wellenform der abgespielten Audiodatei übernimmt. Mit diesem Plugin können Sie Tracks hosten oder es einfach in andere Dienste integrieren.Cloud-Hosting, wie zum Beispiel SoundCloud.

Waveplayer Premium WordPress Plugins fügen Audio-Player hinzu

Es kann auch für Podcasting-Zwecke verwendet werden und bietet weitere Funktionen wie HTML5-Unterstützung, responsives Layout, WooCommerce-Integration usw.

Sie können eine Wiedergabeliste auch visuell erstellen, bevor Sie sie veröffentlichen. Ein weiteres wesentliches Merkmal ist die Geschwindigkeit und Effizienz.

Herunterladen | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Zusammenfassung

Hier ! Das war's für dieses Tutorial. Wir hoffen, es hilft Ihnen, benutzerdefiniertes CSS kostenlos zu Elementor hinzuzufügen. Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

...