So fügen Sie Elementor einen Codepen hinzu

In diesem Artikel werden wir besprechen, wie man einen Codepen zu Elementor hinzufügt.

Codepen ist ein Repository mit Millionen hochwertiger Codeschnipsel, mit denen Sie jeder blauen Website einzigartige Elemente und Effekte hinzufügen können.

Elementor ist bekannt als Seitenersteller, der erstellt wurde, um die Verwendung von Code zu minimieren, aber manchmal erweisen sich blaue Ausschnitte als die beste Lösung. Wir haben diesen Artikel geschrieben, um Ihnen zu zeigen, dass das Hinzufügen eines Codepen-Snippets nicht kompliziert sein muss und nur aus strategischem Kopieren und Einfügen besteht.

In diesem Tutorial wird genau beschrieben, wie wir einer Elementor-Website drei Codepens unterschiedlicher Komplexität hinzugefügt haben. Am Ende sollten Sie ein gutes Verständnis dafür haben, wie Sie dies in Ihrer eigenen Elementor-Installation tun.

Hinzufügen eines Codepen zu Elementor: Das All-Inclusive-Beispiel

Für unseren ersten Stift werden wir dieses einzigartige Muster hinzufügen, das HTML, CSS und HS verwendet, um seine Wirkung zu erzielen. Der Grund, warum wir dies für diesen Artikel ausgewählt haben, ist, dass es alle drei Codesprachen verwendet. Auf diese Weise können wir Ihnen genau zeigen, wie wir den grünen Code ändern und ihn so manipulieren, dass er auf einer blauen Website funktioniert. Hier ist zunächst das Grün selbst:

Wir empfehlen, den Codepen in einem neuen Tab zu öffnen und sich den gesamten Code und den endgültigen Effekt anzusehen.

Der erste Schritt des Prozesses besteht darin, zu verstehen, ob Sie den Codepen auf einer Elementor-Website verwenden können. Wenn es HTML5, formatierbares CSS und Vanilla-JavaScript enthält, sollten Sie im Wesentlichen startklar sein.

Technisch gesehen können Sie alles auf Codepen zu Elementor hinzufügen, aber da dies ein Anfänger-Tutorial ist, ist das Einbinden von JavaScript-Bibliotheken von Drittanbietern etwas außerhalb des Rahmens dieses Artikels.

Häufig hat Ihr HTML oder CSS ein anderes Format als das Standardformat. WordPress mag die Basisversion von HTML-Markup und direktes CSS, kein PUG oder SCSS.

Um sicherzustellen, dass alles korrekt formatiert ist, klicken Sie einfach auf den Dropdown-Pfeil in der oberen rechten Ecke jedes Codeelements und dann auf „HTML/CSS formatieren“.

Dadurch sollte der gesamte Code auf einer Elementor-Website verwendbar sein. Sobald dies fertig ist, ist es an der Zeit, den eigentlichen Code, aus dem der Codepen besteht, in Ihre Website zu integrieren.

Wir werden hier keine Add-On-Pakete von Drittanbietern verwenden, wir werden lediglich ein HTML-Element verwenden, das mit der nativen Installation von Elementor geliefert wird. Je nach Codepen empfehlen wir, das HTML-Element in einen eigenen Abschnitt oder eine eigene Spalte zu ziehen.

Abhängig von der Implementierung werden wir den gesamten Code direkt in diese einzelne HTML-Eingabe installieren. Natürlich könnten Sie Codeschnipsel, PHP oder etwas anderes verwenden, um den Code, aus dem ein Codepen besteht, in einer dauerhafteren Lösung hinzuzufügen, aber wenn Sie eine kleine Sammlung von Code von einem Grün in eine einzelne Elementor-Seite integrieren möchten , diese Methode ist mehr als ausreichend.

Kopieren Sie zunächst den HTML-Code aus dem Grün und fügen Sie ihn direkt in das HTML-Code-Element in Elementor ein. Als nächstes kommt das CSS, das etwas mehr Aufwand erfordert. Zuerst werden wir es direkt in unser HTML-Element einbauen, indem wir <style-Tags verwenden.

Viele Codepen-Snippets enthalten globale Stile sowie Körperstile. Meistens müssen Sie sie identifizieren und löschen, sonst bringen sie die Gesamtstruktur Ihrer Seite durcheinander.

In diesem Beispiel fügen wir kein CSS ein, das in den folgenden Selektoren enthalten ist:

*{}, Karosserie{}

Schließlich fügen wir unser JavaScript mithilfe des HTML5-Script-Tags hinzu.

Genau wie das CSS, am Tag und dann den Code wörtlich einfügen. In vielen Fällen macht das JavaScript den Codepen einzigartig. Normalerweise wird JavaScript geladen, wenn die Seite geladen wird, was bedeutet, dass es nicht sofort in Ihrer Elementor-Leinwand angezeigt wird. Wenn Sie jedoch eine Vorschau der Seite im Frontend anzeigen, wird der Effekt wahrscheinlich angezeigt.

Einige häufige Probleme, auf die Sie stoßen können, wenn Sie versuchen, einen Codepen in eine Elementor-Website zu integrieren, ist der Clash of Code. Wenn CSS-Styling oder JavaScript den zugrunde liegenden Code durcheinander bringt, der Ihr Design oder Ihr Website-Styling ausmacht, könnten die Dinge am Frontend kaputt aussehen.

Stellen Sie sicher, dass Sie für Ihren Codepen keine CSS-Selektoren verwenden, die auch für andere Elemente einer Website gelten.

Das Beste an der Verwendung von HTML, CSS und JavaScript ist, dass Sie es einfach anpassen können. Wenn Sie also eine Kollision von Selektoren haben, ändern Sie einfach den Selektor für das Codepen-Element. Das ist relativ einfach – suchen und ersetzen Sie einfach jedes Vorkommen des Begriffs.

Dieses erste Beispiel wurde entwickelt, um Ihnen zu zeigen, wie Sie ein komplexes Element aus Codepen direkt in eine Elementor-Website integrieren können. Wie Sie sehen, können Sie mithilfe des HTML-Elements ganz einfach HTML, CSS und JavaScript hinzufügen. In Sekundenschnelle können Sie einen hochwertigen Effekt direkt in Ihre Website implementieren.

Hinzufügen eines Codepens zu Elementor: Das einfache Schaltflächenbeispiel

Was ist mit einem einfacheren Anwendungsfall, wie dem Hinzufügen einer einfachen Schaltfläche?

Dies ist ein einzigartiger Knopfstil, den Sie nirgendwo anders finden würden. Es besteht aus einer reinen HTML-Schaltfläche und SCSS-Styling.

Um es zu installieren, müssen wir zuerst das CSS konvertieren und kompilieren. Wie bereits erwähnt, klicken Sie einfach auf das Dropdown-Menü in der oberen rechten Ecke und klicken Sie auf Format und kompilieren Sie dann CSS.

Dieser Codepen importiert eine Google-Schriftart, hat Catch-All-CSS-Effekte und Body-CSS-Effekte. Wir werden diese CSS-Stilregeln nicht in unser Kopieren und Einfügen einbeziehen, da WordPress sie bereits für uns angewendet hat (das heißt, wenn es darum geht, das CSS zu kopieren, beginnen wir bei der Schaltfläche).

Kopieren Sie einfach den HTML- und CSS-Code und fügen Sie ihn in Ihr Elementor-HTML-Element ein, und Sie sollten loslegen können.

Sie können diese Schaltfläche überall hinzufügen!

Hinzufügen eines Codepen zu Elementor: Das komplexe Beispiel

Und als letzten Effekt fügen wir einer bereits bestehenden Elementor-Site eine einzigartige Grafik hinzu.

Dieser Codepen ist ein sehr ordentliches 3D-Radio (es spielt Musik, klicken Sie oben auf die Lautstärke), das mit CSS, HTML und JavaScript erstellt wurde. Es ist ein großartiges letztes Beispiel dafür, wie Sie eine grüne in eine blaue Website integrieren können, da das HTML in PUG und das CSS in SCSS formatiert ist.

Zuerst werden wir den HTML-Code in CSS neu formatieren, um ihn auf einer Elementor-Website verwendbar zu machen.

Dazu klicken wir auf HTML formatieren und zeigen dann kompiliertes HTML an. Dadurch wird die Pug-Formatierung in direktes HTML konvertiert, das wir in Elementor verwenden werden.

Wie Sie sehen können, enthält der HTML-Code einen Header-Abschnitt, der es ermöglicht, diesen Codepen in seine eigene Seite einzubetten. Wir fügen es jedoch bereits in eine Elementor-Seite ein, die mit einem Header geliefert wird, und um Konflikte zu vermeiden, werden wir diesen Aspekt des Codes einfach nicht einbeziehen, wenn wir ihn in einen Elementor-HTML-Block einfügen.

Wir führen den gleichen Prozess für das CSS aus, formatieren es und kompilieren es dann. Wir werden hier alles außer dem Styling für den Körper einschließen.

Jetzt ist alles bereit zum direkten Kopieren und Einfügen in das HTML-Element auf unserer Elementor-Website.

In diesem Beispiel fügen wir dieses 3D-Radiomodell in eine Spalte neben einigen Inhalten ein, so wie wir es wahrscheinlich in eine Produktionsversion einer Website einfügen würden. Zuerst fügen wir einen neuen Abschnitt hinzu und stellen die Spaltenposition auf Strecken ein. Dieser neue Abschnitt hat eine Mindesthöhe von 400 Pixel.

Die Überschrift im Textinhalt wird einer der Spalten hinzugefügt, während ein HTML-Block der anderen hinzugefügt wird.

Genau wie in den vorherigen 2 Beispielen kopieren wir einfach den HTML-, CSS- und JavaScript-Code und fügen ihn direkt in diesen HTML-Block ein.

Wir mussten einen Teil des Codes aus dem body-Tag an ein div mit dem Titel #radio-wrap anpassen. Denken Sie auch daran, dass Sie sowohl mit dem Styling-Aspekt des Elementor-Abschnitts und der Spalte, die den HTML-Code enthalten, als auch mit dem CSS-Styling aus dem Codepen herumspielen müssen.

Beispielsweise verwenden wir die Spaltenpositionierung aus der nativen Elementor-Oberfläche, um unser HTML-Radio direkt in der Mitte der Spalte zu platzieren. Wir haben auch den Spaltenhintergrund so eingestellt, dass er den Codependent-Hintergrund widerspiegelt, anstatt dies mit benutzerdefiniertem CSS zu tun.

Indem Sie sowohl das im Code-Pan enthaltene CSS als auch das Styling in den Elementor-Abschnitten verwenden, die das HTML-Element umgeben, können Sie den Codepen besser in Ihre Elementor-Site einfügen.

Abschließende Gedanken

Dieser Artikel soll als Einführung in das Einbinden und Einbinden von Code von Drittanbietern auf einer Elementor-Website dienen. Es gibt viele Möglichkeiten, dies in WordPress zu tun, und in den meisten Fällen können alternative Methoden zu einer besseren Leistung und Integration in die Website führen.

Wenn Sie jedoch nach einer schnellen und einfachen Möglichkeit suchen, einen Codepen in eine Elementor-Website einzufügen, und nichts im Zusammenhang mit Code verstehen, ist dies wahrscheinlich der einfachste Weg, dies zu tun.

Zur Überprüfung:

1. Fügen Sie Ihrer Website ein HTML-Element hinzu
2. Codepen-Code kompilieren
3. Kopieren Sie nur den Code, der für das Element gilt (also keine Body-CSS-Stile)
   1. Gleichzeitig müssen Sie das Element möglicherweise in ein div-Element einschließen und auf diese Weise etwas von diesem Body-Styling anwenden
4. Fügen Sie es in das HTML-Elementor-Widget ein:
   1. HTML wird direkt eingefügt
   2. CSS wird in ein STYLE-Tag eingefügt
   3. JS wird in ein SCRIPT-Tag eingefügt
5. Testen Sie das Frontend, um sicherzustellen, dass das Element erfolgreich zu Ihrer Website hinzugefügt wurde

In vielen Fällen wäre es eine bessere Option, das JavaScript in den HEAD Ihrer WordPress-Website einzufügen, insbesondere wenn es auf mehr als einer Seite verwendet wird.

CSS kann global mit einem Tool wie YellowPencil oder CSSHero hinzugefügt werden:

https://isotrop.co/yellowpencil-and-elementor-redundant-or-genius/

https://isotrop.co/csshero-and-elementor-powerful-custom-css/

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, ein Codepen-Element direkt in eine Elementor-Website einzufügen. Wenn Sie Fragen dazu haben, wenden Sie sich an unseren Kommentarbereich.