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.
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:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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.
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.
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.
