Eigene Elementor Widgets selber bauen mit Unlimited Elements
Es gibt unzählige Drittanbieter Addons und Plugin Bundles mit einer Vielzahl nützlicher Widgets für den Elementor Pagebuilder.
Viele der Widgets in diesen Bundels überschneiden sich aber oftmals mit denen anderer Anbieter. So kommt es vor, dass einem als stolzer Besitzer mehrerer Elementor Plugin Pakete, nicht selten mehr oder weniger identische Widgets gleich mehrfach zur Verfügung stehen und dabei mehr Verwirrung als Nutzen stiften.
Dazu sei gesagt, dass jedes Widget das beim Aufbau des Elementor Editors geladen werden muss, unmittelbaren Einfluss auf die Ladezeit des Editors hat. Kurz gesagt, je mehr Widgets (durch zusätzliche Plugins), desto mehr Speicherplatz wird benötigt und umso höher die Ladezeiten.
Oftmals benötigt man auch nur ein ganz bestimmtes Widget – Hier den vollen Preis für ein Paket zu bezahlen, von dem höchst wahrscheinlich nur ein Widget genutzt wird, ist für viele Elementor Nutzer keine Option.
An dieser Stelle kommt der Plugin Entwickler bloxthemes in Spiel! Schluss mit ewigen Suchen nach dem richtigen Plugin oder Paket welches das gewünschte Widget beinhaltet. Bau dir dein eigenes Elementor Widget!
Widget Creator von Unlimited Elements
Mit dem kostenlosen Plugin „Unlimited Elements“ für Elementor und dem darin enthaltenen „Widget Creator“ sind deiner Kreativität keine Grenzen gesetzt. Das Tool erlaubt es dem versierten Nutzer eigene Elemetor Widgets mithilfe von HTML, CSS und JavaScript zu erstellen. Vom einfachen Button-Hover-Effekt, bis hin zu aufwendigen Post-Slidern uvm. – alles ist möglich. Die Bedienung ist sehr intuitiv und denkbar einfach.
In 5 Schritten zum eigenen Widget
Schritt Nr 1: Widgetkategorie erstellen
Innerhalb von Unlimited Elements haben wir die Möglichkeit eigene Widget Kategorien anzulegen. Kategorien dienen dazu (bei einer großen Anzahl von Widgets) Ordnung zu schaffen und die einzelnen Widgets besser auffindbar zu machen. Denkbar wäre z.B eine Widget Kategorie für Slider oder Button-Effekte.
Schritt Nr. 2: Widget anlegen und benennen.
Nachdem wir festgelegt haben, zu welcher Kategorie unser Widget gehört, wählen wir im Anschluss einen passenden Namen für unser Widget. Wobei der „Addon Title“ darüber bestimmt, unter welchem Namen unser Widget später im Elementor Editor erscheint und der „Addon Name“ für die Generierung des Shortcodes zuständig ist und nur Kleinbuchstaben beinhalten darf.
Schritt 3: Elementor Widget selber bauen
Wie eingangs erwähnt, lassen sich mit Unlimited Elements Widgets mittels HTML, CSS und JavaScript erstellen. Für eben diese 3 genannten Codesprachen stellt einem das Plugin jeweils einen eigenen Editor zur Verfügung, in den wir den jeweiligen Code einfügen können. Je nach Widget und dessen gewünschter Funktionalität kann HTML und CSS ausreichend sein. Für Komplexere Widgets wird man um den Einsatz von JavaScript nicht herumkommen.
Schritt 4: Widget Attribute anlegen
Über den Menüpunkt „Attributes“ (siehe obiges Bild) lässt sich bestimmen, welche Eigenschaften unseres zukünftigen Widgets über den Elementor Editor gesteuert werden sollen. Neben Größen, Farben und Arten von Schriften stehen noch zahlreiche weitere Individualisierungsmöglichkeiten zur Verfügung. Ingesamt kann man aktuell (Stand: Mai 2019) aus 17 verschiedenen Attribute wählen.
Nach der Wahl des passenden Attributs muss diesem ein individueller Titel bzw Name zugeordnet werden. Aus diesem Namen (für unser Beispiel: „Titelfarbe“) wird nach dem Speichern, der Shortcode für unser Attribut generiert, welchen wir in unseren HTML, CSS oder JS Code je nach Bedarf einfügen können.
Möchte man beispielsweise die Schriftfarbe eines Textelements (in diesem Beispiel der Titel) innerhalb eines Widgets über Elementor steuern können, so wählt man das Attribut „Color Picker„
Schritt 5: Attribute per Shortcode einfügen
Mit diesem Attribut lässt sich dem Widget (bzw den einzelnen Teilen davon) in gewohnter Elementor Manier eine eigene Farbe über den Elementor Editor zuordnen. Hierzu nimmt man den Shortcode für das erstellte „Color Picker Attribut“ (Name: titelfarbe) – und fügt ihn innerhalb der CSS Datei an der Stelle ein, an der, der aktuelle Farbcode (Hexcode) des zu verändernden Elements steht. Der Shortcode sieht in der regel so aus: {{deinattributname}}
Nach einem Klick auf den Update Button haben wir nun die Möglichkeit die Textfarbe unseres Widgets (in unserem Beispiel ein Button mit der CSS Klasse „mein_widget“) direkt im Elementor Editor zu bearbeiten. Je mehr Attribute man anlegt, desto mehr Möglichkeit hat man bei der individuellen Gestaltung seines Widgets.
Um das Ganze noch deutlicher zu machen, legen wir nun ein zweites Attribut für die Hintergrundfarbe unseres Widgets bzw. Buttons fest. Wir wählen unter „Attributes“ erneut den „Color Picker“ und geben unserem Attribut einen passenden Namen (hier: „Hintergrundfarbe“).
Zurück in unserer Custom CSS Datei haben wir nun am rechten Rand in der Liste aller verfügbarer Shortcodes unseren neuen Shortcode {{hintergrund_farbe}}. Diesen fügen wir nun an der passenden Stelle in unseren CSS Code ein.
Wie man feststellen wird, ist im Elementor Editor für unser Widget ein neues Attribut erschienen. Nun haben wir neben der Schriftfarbe auch die Möglichkeit die Hintergrundfarbe unseres Widgets zu bearbeiten.
Möchte man nun beispielsweise den Inhalt und nicht den Style des Widgets beeinflussen, geschieht dies auf dieselbe Weise, mit dem Unterschied, dass man das erzeugte Shortcode Attribut nicht in die CSS Datei, sondern in das HTML Dokument einfügt. Der aktuelle Text „Press me!“ ist hard gecoded und kann aktuell nicht bearbeitet werden. Um dies zu ändern, legen wir im nächsten Schritt ein neues Attribut an.
Zur Erinnerung: In den ersten beiden Fällen haben wir das Color Picker Attribut gewählt – um die Farben unseres Widgets zu beeinflussen. Um nun den Inhalt, sprich den Text, zu ändern, müssen wir dieses Mal das „Text-Field“ Attribut auswählen und wie schon zuvor Name und Titel dafür vergeben.
Durch das Setzen des Hakens bei „Allow Font Edit“ (Bild oben) – erhalten wir die bekannten Elementor Editier-Funktionen für unseren Text-Input. Damit können wir also nicht nur den Text an sich sondern unter anderem Schriftgröße, Farbe, Schriftschnitt, usw. verändern. Diese Punkte finden wir, wie gewohnt, im „Style“ Tab des Elementor Editors. Achtung: um die Editierfunktion für Texte zu nutzen muss an den regulären Shortcode ein „|raw“ angehängt werden. z.B. {{dein_attributname|raw}}
Im nächsten Schritt ersetzen wir den Text „Press me!“ durch unseren „Text-Field-Attribut“ – Shortcode, um über Elementor Zugriff auf den Inhalt zu haben und den Text beliebig ändern zu können.
Unser Beispiel ist an dieser Stelle natürlich bewusst einfach gehalten und könnte beliebig weitergeführt werden (Hoverfarbe, Rahmen,Ecken etc..)! Ziel ist es die Grundprinzipien des Widget Creator von Unlimited Elements zu verstehen. Je mehr HTML, CSS und JavaScript Know-how man mitbringt , desto komplexer individueller lassen sich die Widgets gestalten. Wie bereits zu Beginn des Artikels erwähnt, sind der eigenen Kreativität hier keine Grenzen gesetzt.
Zusammenfassung:
Mit dem Plugin Unlimited Elements von Bloxthemes können versierte Webdesigner Ihre eigenen Elementor Widgets selber bauen. Hierfür stellt einem das Tool insgesamt 3 verschiedene Editoren (für HTML, CSS und JavaScript) zur Verfügung. Die jeweiligen Codes werden in den entsprechenden Editor eingetragen und das Plugin erledigt den Rest. Die selbst erstellten Custom Widgets lassen sich über eigene Attribute innerhalb des Editors von Elementor bearbeiten. Welche Attribute (Farbcodes, Texte, Zahlen, Größen etc.) hierbei verwendet werden, entscheidet der Nutzer selbst.
Die fertigen Widgets lassen sich exportieren und auf beliebig vielen Webseiten mit dem Elementor Pagebuilder einsetzen.
Die Free Version von Unlimited Elements bringt neben dem Widget Creator auch eine Vielzahl an bereits fertigen Widgets mit. Das Tolle daran ist, dass man auch die bereits fertigen Widgets ganz bequem nach seinen Wünschen direkt über den Widget Creator editieren und individualisieren kann. Wer sich für die Unlimited Elements Pro Version entscheidet, erhält zusätzlich zum Widget Creator und den standardmäßigen Widgets der kostenlosen Free Version, insgesamt über 700 weitere vorgefertigte Elementor Widgets.
Eigene Elementor Widgets exportieren
Ist man fertig und zufrieden mit seinem eigenen Elementor Widget, kann man dieses direkt über „Unlimited Elements“ exportieren und so für alle weiteren Projekte nutzen. Dazu klickt man einfach auf das zuvor erstelle Widget ,woraufhin sich mehrere Tabs innerhalb des Interface öffnen. Um das Widget nun zu exportieren klickt man einfach auf „Export Addon“ und speichert das Ganze als Zip.Datei auf dem Computer.
Selbstverständlich funktioniert das Ganze auch in die andere Richtung. So kann man, sofern Unlimted Elements installiert ist, ganz bequem eigene (oder fremde) Widgets auf jeder beliebigen Webseite importieren und in Verbindung mit Elementor nutzen.
Das erste eigene Elementor Widget
Anbei ein Beispiel für ein von uns mit Ultimate Elements erstelltes Slider-Widget! Gefällt dir der Slider? Hol Ihn dir! Infos weiter unten!