Elementor Widget erstellen mit Unlimited Elements
WPC - Dein WordPress Blog

Eigenes Elementor Widget erstellen ohne Code-Kenntnisse

Das war ein sehr interessanter Vortrag, den Jaqueline Borkowski beim letzten Elementor Meetup in München gehalten hat. Sie stellte das Elementor Addon Unlimited Elements vor und zeigte, wie man mit dem Widget Creator ein eigenes Elementor Widget ohne Programmierkenntnisse erstellen kann.

Elementor Meetup München - Eigenes Elementor Widget erstellen
Elementor Meetup München – Ein eigenes Elementor Widget erstellen

Ob du nun Code-Kenntnisse benötigst oder nicht, ist natürlich von der Komplexität deines Widgets abhängig. Es ist auf jeden Fall vorteilhaft, sich zumindest ein wenig mit HTML und CSS auszukennen.

(*) = Affiliate Partner Links

Dieser Beitrag zeigt dir Ideen und Tipps, wann es Sinn machen könnte, ein eigenes Widget zu erstellen und was du dabei beachten solltest. Eine Schritt-für-Schritt Anleitung findest du in dem folgenden Elementor Video Tutorial.

Video Tutorial: Eigenes Elementor Widget erstellen

In diesem YouTube Tutorial zeige ich dir, wie du mit dem Widget Creator ein eigenes Elementor Widget erstellen kannst. Dabei greifen wir einen der Webdesign Trends auf und erstellen gemeinsam Schritt-für-Schritt ein Blob Widget:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Unlimited Elements for Elementor

Das Plugin wirbt damit, die größte und beste Widget Sammlung für Elementor zu haben. Solche Behauptungen, ohne einen Nachweis mitzuliefern, empfinde ich persönlich eher arrogant, weshalb ich mich vor dem Meetup nicht näher mit dem Addon beschäftigt habe. Die 800 Widgets, die das Plugin zum Zeitpunkt der Artikelveröffentlichung im Sortiment hat, können wahrscheinlich auf 80 bis 100 Widgets reduziert werden, wenn man die ganzen Widgets-Variationen abzieht. Das Elementor Addon Happy Addons hat das meiner Meinung nach mit den sogenannten Presets (vordefinierte Design-Sets)* viel besser gelöst.

Widget Creator

Was das Plugin Unlimited Elements aber besonders macht, ist der Widget Creator. Damit bietet dir das Plugin eine einfache Benutzeroberfläche, mit der du deine eigenen Elementor Widgets erstellen kannst.

Eigenes Elementor Widget erstellen mit dem Widget Creator von Unlimited Elements
Eigenes Elementor Widget erstellen mit dem Widget Creator von Unlimited Elements

Anregungen für eigene Elementor Widgets

Bei der Menge an Drittanbietern und Addons für Elementor und der Fülle an Elementor Widgets, könnte man sich schon die Frage stellen, warum sollte ich überhaupt ein eigenes Elementor Widget erstellen wollen?

Hier sind ein paar Anregungen und Ideen, die für ein eigenes Widget sprechen:

Einzigartige Designs umsetzen

Die einfache Handhabung von Elementor macht gefühlt jeden User zu einem Webdesigner. Dadurch wird es immer schwieriger, sich mit eigenen Designs vom Rest abzusetzen. Deshalb kann es durchaus sinnvoll sein, sich mit Design-Lösungen zu beschäftigen, die nicht jeder mit Drag & Drop realisieren kann. Geeignete Quellen, um solche Designs zu finden wären z. B. ein jQuery Plugin oder ein Pen auf CodePen, den es noch nicht als WordPress Plugin bzw. Elementor Widget gibt.

Kosten vermeiden

Der Widget Creator von Unlimited Elements ist bereits in der kostenlosen Version verfügbar. Dieser funktioniert auch hervorragend mit der kostenlosen Version von Elementor. Das bedeutet, um ein eigenes Elementor Widget zu erstellen, entstehen keine zusätzlichen Kosten. Das ist ein klarer Vorteil gegenüber kostenpflichtigen Premium Addons.

Schema Markup in ein Widget integrieren

Als ich den Vortrag von Jaqueline gehört habe, war das der erste Gedanke, der mir in den Sinn kam: Ein Widget erstellen, welches ich je nach Schema Typ mit strukturierten Daten ergänzen kann. Ähnlich wie es bereits PowerPack Elements mit dem HowTo Schema und FAQ Schema Widgets* gelöst haben, nur eben kostenlos.

Eigene Widget Bibliothek aufbauen

Das ist natürlich ein Argument für Webdesigner und Agenturen, die Websites für Kunden realisieren. Diese könnten sich ihre eigene Widget Bibliothek aufbauen und ihre Lieblingsdesigns durch eine einfache Export/Import-Funktion auf mehreren Websites immer wieder verwenden.

Tipps im Umgang mit dem Widget Creator von Unlimited Elements

Elementor Einstellungen nutzen / „Stil“-Tab aktivieren

Wenn du Text in deinen Widgets anwendest, solltest du unbedingt die Einstellung Allow Font Edit aktivieren. Damit wird der Reiter „Stil“ in der Elementor Bearbeitungsmaske eingeblendet und du kannst die bekannten Elementor Einstellungen für deinen Widget-Text nutzen.

Elementor Settings für Text anwenden - Tab "Stil"
Elementor Settings für Text anwenden – Tab „Stil“

Dynamische ID verwenden

Wenn du dein Widget auf einer Seite öfters verwenden möchtest, ist es wichtig, dass sich das Design jedes dieser Widget-Instanzen einzeln anpassen lässt. Dafür musst du eine dynamische ID verwenden, die jedes Mal, wenn man das Widget auf die Webseite zieht, neu vergeben wird. Wie du dem Elementor Video Tutorial entnehmen kannst, verwendet man dafür das Attribut uc_id.

Bereits vorhandene Elemente nicht im eigenen Widget einsetzen

Bevor du anfängst, dein Widget zu erstellen, solltest du dir Gedanken machen, was an deinem Widget wirklich einzigartig ist. Darauf solltest du dich auch fokussieren. Wenn dein Widget bekannte Elemente wie Texte oder Bilder enthält, können diese auch mit den bereits vorhandenen Elementor Widgets hinzugefügt werden.

Copy & Paste funktioniert nicht immer

Die Wahrscheinlichkeit ist hoch, dass ein Code-Beispiel von CodePen im Elementor Kontext nicht funktionieren wird. Die Styles des Page Builders könnten den eigenen Styling-Optionen in die Quere kommen, man muss sich mit der richtigen Positionierung der Elemente auseinandersetzen und man muss auch Browser-Präfixe sowie CSS-Anweisungen für Responsive Design berücksichtigen. Es kann deshalb durchaus sein, dass du dich ein bisschen mehr mit CSS beschäftigen musst, damit dein eigenes Elementor Widget eine gute Figur abgibt.

Fazit

Nochmal ein großes Dankeschön an Jaqueline, denn ohne ihren Vortrag hätte ich mir wahrscheinlich das tolle Plugin Unlimited Elements nicht näher angesehen. Die Funktion Widget Creator eignet sich prima dafür, eigene Elementor Widgets problemlos umzusetzen. Auch wenn der Erstellungsvorgang nicht ganz so einfach erfolgt, wie es auf den ersten Blick scheint, so ist dieser Weg erheblich schneller als ein Elementor Widget von Grund auf neu zu programmieren.

Vielen Dank fürs Teilen dieser Seite

Kommentar verfassen

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

Table of Contents

QUIZ: Teste dein WordPress Wissen!

0%

Wann erschien die erste Version von WordPress?

Correct! Wrong!

Die erste Version von WordPress erschien am 27.03.2003. Damit ist WordPress älter als Facebook und Twitter.

Welches der genannten Optionen ist kein WordPress Page-Builder?

Correct! Wrong!

Gravity Forms ist eins der beliebtesten Premium Formular Plugins.

In welcher Datei befinden sich die Sicherheitsschlüssel?

Correct! Wrong!

In der wp-config.php Datei.

Wie werden WordPress Themes wie Genesis und Beans noch genannt?

Correct! Wrong!

Ein Theme Framework ist ein vorprogrammiertes Set an Funktionen und Features, um die (Child) Theme Entwicklung zu beschleunigen.

Um den Adminbereich aufzurufen, muss die eigene Domain wie folgt erweitert werden:

Correct! Wrong!

Um beispielsweise von der Domain https://wpconsultant.de den Adminbereich aufzurufen, muss die Domain wie folgt ergänzt werden: https://wpconsultant.de/wp-admin. Möglich ist auch die URL-Endung https://deine-domain.de/wp-login.php

Welche Dateien braucht ein WordPress Theme mindestens, um zu funktionieren?

Correct! Wrong!

Damit ein WordPress Theme richtig funktioniert, benötigt es mindestens 2 Dateien: index.php und style.css. Die index.php Datei ist das Standard Template für das Theme und im Header der style.css Datei werden die notwendigen Informationen über das Theme eingetragen wie z. B. Name, Autor etc.

Was ist kein typischer Anwendungsfall für eine WordPress Multisite?

Correct! Wrong!

Um eine Landing Page zu erstellen, benötigt man nicht die Multisite Installation. Dafür reicht entweder ein wenig HTML und CSS oder eins der vielen Landing Page Plugins. Mein Tipp: Mit dem kostenlosen Plugin Elementor kannst du professionelle Landing Pages schnell erstellen. Hier erfährst du mehr über WordPress Multisite - Anwendung & Installation.

Welche Sprache spricht die WordPress Software nicht?

Correct! Wrong!

Die WordPress Software basiert auf den Sprachen PHP und MySQL. 10% der Software besteht mittlerweile aus Javascript (Tendenz steigend).

Was ist kein typischer Anwendungsfall für ein Child-Theme?

Correct! Wrong!

Eine Kopie der gesamten Website erstellt man z. B. mit dem Plugin Duplicator. Die verschiedenen Anwendungsfälle eines Child Themes und die richtige Erstellung erfährst du in dem Artikel WordPress Child Theme erstellen 2020.

Was ist ein WordPress Loop?

Correct! Wrong!

Eine Funktion, die Daten aus der Datenbank holt und sie verändert, bevor sie im Browser angezeigt werden, nennt man in WordPress einen Filter bzw. einen Filter-Hook. Eine Aktion, die an einer bestimmten Stelle im Programmablauf ausgeführt wird nennt man Action oder Action-Hook. Ein Loop ist ein PHP Code, der vordefinierte Beiträge (oder Custom Post Types) aus der Datenbank holt, um sie auf speziellen Template Dateien innerhalb eines Themes anzuzeigen.

In welchen Ordner (Verzeichnis) werden Medien wie z. B. Bilder hochgeladen?

Correct! Wrong!

In der Regel besteht der uploads-Ordner aus den einzelnen Jahres-Ordnern, die wiederum aus mehreren Monats-Ordnern bestehen.

Welches Feature ist keine Empfehlung für das WordPress Hosting (gemäß wordpress.org)?

Correct! Wrong!

Auf wordpress.org unter Requirements findest du die Empfehlung für das WordPress Hosting. Hier auf WPC findest du auch meine Hosting Empfehlung für 2020.

Welche Einstellungen gehören nicht in die wp-config.php Datei?

Correct! Wrong!

Die Integration von Javascript- und CSS-Dateien in das jeweilige Theme erfolgt in der functions.php Datei und zwar mittels wp_enqueue_scripts bzw. wp_enqueue_style.

Welche Rolle gehört nicht zu den 6 Standard User-Rollen?

Correct! Wrong!

Die 6 User Rollen in WordPress sind: Super Admin, Administrator, Editor, Author, Contributor und Subscriber.

Was kann man unter dem Menüpunkt "Einstellungen" im Adminbereich nicht tun?

Correct! Wrong!

Website Daten exportieren erfolgt unter dem Menüpunkt "Werkzeuge".

WordPress Quiz
Kein Grund zur Sorge!

Schau doch öfters mal hier auf WPC vorbei und melde dich am besten gleich für unseren Newsletter an! Du kannst auch den WPC YouTube Kanal abonnieren mit vielen kostenlosen WordPress und Elementor Tutorials. Und falls es ein bisschen mehr sein darf, gibt es da noch den WordPress Kurs von WPC ;-)
Gar nicht so schlecht!

Du weißt schon einiges über WordPress! Um dein Wissen noch weiter auszubauen, empfehle ich dir die Beiträge hier auf WPC, meinen YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinen WordPress Kurs von WPC :-)
Wow! Das kann sich sehen lassen!

Herzlichen Glückwunsch! Du bist auf dem besten Weg, ein WordPress Experte zu werden. Bleib am Ball, am besten mit den Beiträgen hier auf WPC, meinem YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinem WordPress Kurs von WPC :-)
Hast du dich gerade ein wenig gelangweilt? :-)

Aber keine Sorge, bald erscheint hier auf WPC ein Quiz für Fortgeschrittene WordPress User. Am besten du meldest dich gleich für den Newsletter an, damit du es nicht verpasst! ;-) In der Zwischenzeit kannst du ja mal dein Datenschutz-Wissen mit dem DSGVO Quiz testen.
Related Posts

Ähnliche Beiträge