Springe zum Hauptinhalt

So fügen Sie Free Elementor benutzerdefiniertes CSS hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

 
add_action ('wp_head', Funktion () {?>

//VOTRE CODE ICI


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 WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

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

1. FileBird

Filebird

Haben Sie jemals Probleme gehabt, Tausende von Bild-, Video- oder Dokumentdateien zu verwalten, die Sie auf Ihr WordPress-FTP hochgeladen haben? Ja oder Nein, was auch immer, das Wichtigste ist zu wissen, dass das WordPress FileBird-Plugin Ihnen hilft, Ihre Mediendateien mühelos zu verwalten und mehr Leistung in Ihre Bibliothek zu bringen.

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 Medienbibliothekkönnte das FileBird WordPress Plugin Ihre Geheimwaffe sein.

DownloadDemo | Web-Hosting

2. Ultimate WooCommerce Erweiterbare Kategorien

Ultimative erweiterbare Woocommerce-Kategorien

Mit diesem WordPress-Plugin können Sie auf einfache Weise lange Listen mit nervigen WooCommerce-Kategorien bearbeiten und diese durch verschiedene Ebenen von Unterelementen in einem Akkordeon-Menü 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.

Download | Demo | Web-Hosting

3. Waveplayer

Wie Sie dem Namen entnehmen können, ist WavePlayer ein Audio-Player-Plugin, das die Wellenform der wiedergegebenen Audiodatei übernimmt. Mit diesem Plugin können Sie Tracks hosten oder einfach in andere Cloud-Hosting-Dienste wie SoundCloud integrieren.

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.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

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

Fazit

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.

...  

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren