Die Master Addons Widget Builder Verwandeln Sie Ihr eigenes HTML, CSS und JavaScript in ein echtes Elementor-Widget mit bearbeitbaren Steuerelementen im Elementor-Panel. Sie entwerfen das Optionsfeld, verbinden es mit Shortcodes mit Ihrem Code, und das Widget verhält sich wie jedes native Elementor-Element. Kein PHP, kein Plugin-Boilerplate, kein separater Code-Editor zum Jonglieren.
Unter allem, was hier beschrieben wird, laufen zwei Systeme: Bedingungen Lassen Sie jede Kontrolle basierend auf dem Wert eines anderen Feldes anzeigen oder ausblenden, und die Twig-Syntax-Vorlagen-Engine Verwandeln Sie Ihre Feldnamen in Token {% if %} Kontrollen, und {% for %} Schleifen in den Registerkarten HTML, CSS und JS. Beide Leitfäden behandeln Einrichtung und Einschränkungen.
Diese Anleitung geht durch das Widget Builder-Optionsfeld genau so, wie es auf dem Bildschirm erscheint: Hinzufügen eines neuen Widgets, Ziehen von Feldern in die Registerkarten Inhalt, Stil und Erweitert, Schreiben von Code, Verwenden der dynamischen Shortcodes, Laden von CDN-Bibliotheken und schließlich Exportieren oder Importieren eines Widgets als JSON-Datei. Sie finden die Funktion auf der Widget Builder-Seite Und im Inneren das Ganze Widgets und Erweiterungen Liste.
Was der Widget Builder macht #
Die meisten Addons geben Ihnen einen festen Satz von Widgets Diese gibt Ihnen die Werkzeuge, um Ihre eigenen zu machen Sie bauen ein Optionspanel aus vorgefertigten Feldtypen (Überschrift, Text, Farbe, Anzahl, Abmessungen, Umschalter, und mehr) zusammen, legen Ihren Code ein, und binden die Felder mit einfachen Shortcode-Token an diesen Code Speichern Sie das Widget und Master Addons registriert sowohl einen Shortcode als auch ein Elementor-Widget, das Sie auf jede Seite ziehen können.
Betrachten Sie es als die Brücke zwischen einem Snippet im CodePen-Stil und einem vollständig bearbeitbaren Elementor-Widget. Sobald es erstellt ist, kann jeder in Ihrem Team die Farben, Abstände und Texte des Elementor-Editors optimieren, ohne jemals die Quelle zu öffnen.
Bevor Sie beginnen #
- WordPress Mit der Elementor Seitenersteller installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
- Basis-HTML und CSS. JavaScript ist optional und wird nur für interaktive Widgets benötigt.
Öffnen Sie den Widget Builder und fügen Sie ein neues Widget hinzu #
Gehen Sie vom WordPress-Dashboard aus zu Master-Addons → Widget Builder. Damit öffnet sich die Master Addons Widgets Bildschirm, der jedes benutzerdefinierte Widget auflistet, das Sie zusammen mit seiner Kategorie, dem Autor und dem generierten Shortcode erstellt haben. Oben sehen Sie drei Schaltflächen: Neues Widget hinzufügen, Widget importieren, und Video-Tutorial.
Klicken Sie auf Neues Widget hinzufügenA Neues Widget erstellen Dialog erscheint mit zwei Feldern:
- Widget-titel (erforderlich): eine beschreibende Bezeichnung für Ihr Widget, zum Beispiel “Hero Section” Das wird später im Elementor-Panel gesucht, also machen Sie es zu etwas, das Sie erkennen werden.
- Widget-kategorie: die Elementorkategorie, unter der das Widget gruppiert ist (Standardmäßig Favoriten).Kategorien halten Ihre benutzerdefinierten Widgets im Editor organisiert.
Geben Sie einen Titel ein, wählen Sie eine Kategorie aus und klicken Sie auf Änderungen speichern. Master Addons öffnet den Widget Builder Editor für Ihr neues Widget.
Innerhalb der Widget Builder-Schnittstelle #
Der Bauherr ist von links nach rechts in drei Arbeitsbereiche unterteilt:
- Feldblende (links): Eine durchsuchbare Bibliothek von Steuertypen, die Sie in Ihr Widget ziehen, wie z. B. Überschrift, Text, Textbereich, URL, Farbe, Nummer, Switcher, Auswählen, Wählen, WYSIWYG, Code und Datumszeit.
- Einstellungsfeld (Mitte): Die Inhalt, Stil, und Fortgeschritten Registerkarten, auf denen Sie diese Felder in Abschnitte anordnen Dies ist das eigentliche Optionspanel, das Ihre Benutzer in Elementor sehen werden.
- Codepanel (rechts): Die HTML, CSS, JS, und BEINHALTET Registerkarten, auf denen Sie das Markup, Stile, Skripte und Bibliotheksreferenzen schreiben.
In der oberen Leiste befindet sich der Widget-Name mit einem Einstellungszahnradsymbol daneben, zzgl Vorschau und Einstellungen speichern Knöpfe.
Erstellen Sie das Optionsfeld: Inhalts-, Stil- und Erweiterungsregisterkarten #
Hier gestalten Sie die Bedienelemente Wählen Sie ein Feld aus dem linken Feld und ziehen Sie es in einen Abschnitt unter dem Inhalt, Stil, oder Fortgeschritten Tab. Folgen Sie der gleichen Logik, die Elementor verwendet: Text und Links unter Inhalt, Farben und Typografie unter Stil, Abstand und Layout unter Erweitert.
Jeder Abschnitt hat eine Abschnitt Titel (die im Abschnittskopf angezeigte Beschriftung) und a Abschnittsname„Eine eindeutige Kennung, auf die Sie in Ihrem Code verweisen. Fügen Sie so viele Abschnitte und Felder hinzu, wie das Widget benötigt.
Lassen Sie zum Beispiel a fallen Farbfeld In die Registerkarte Stil, damit Benutzer das Widget neu einfärben können, und a Maße Feld In den Reiter Erweitert, um das Padding auf allen vier Seiten zu steuern Jeder Feldtyp hat seine eigene Dokumentation, wenn Sie die vollständige Liste der Optionen wünschen.
Dynamische Shortcodes: Verbinden Sie Felder mit Ihrem Code #
Das ist der Teil, der alles miteinander verbindet Jedes Feld, das du hinzufügst, generiert ein Shortcode-tokenund diese Token tauchen im auf Dokumentation Seitenleiste neben dem Code-Editor Fügen Sie ein Farbfeld hinzu und Sie erhalten {{color}}. Fügen Sie ein Feld Maße hinzu und Sie erhalten {{dimensions}}.
Geben Sie diese Token in Ihren HTML, CSS oder JS, wo immer Sie möchten, dass der Wert des Feldes landet Wenn ein Benutzer diese Steuerung in Elementor ändert, tauscht Master Addons das Token gegen den Live-Wert, damit Ihr Code dynamisch bleibt Eines, das Sie beachten sollten: Das Token existiert erst, wenn das passende Feld auf dem Panel ist, also bauen Sie zuerst das Feld auf und verweisen Sie dann auf seinen Shortcode.
Fügen Sie Ihr HTML, CSS und JS hinzu #
Wenn das Panel und die Kurzcodes bereit sind, wechseln Sie zu den Code-Registern auf der rechten Seite und fügen Sie Ihr Markup, Ihre Stile und Skripte ein.
HTML-Tab: Schreiben Sie die Widget-Struktur und platzieren Sie Shortcode-Tokens dort, wo dynamische Werte hingehören.
CSS-Tab: Stil das Markup Referenzieren Sie die gleichen Shortcode-Token, um die im Panel gewählten Farben und Abmessungen einzugeben.
JS-Tab: JavaScript für jedes interaktive Verhalten hinzufügen, wie Hover-Effekte oder einen Schieberegler Einfarbiges Vanille-JS funktioniert, und jQuery auch, sobald Sie es unter Includes laden.
Wenn Sie nur ein Codefeld innerhalb des Panels und nicht den Haupteditor benötigen, ist der Codefeld Lässt eine syntax-hervorgehobene Eingabe in Ihre Steuerelemente fallen.
Beinhaltet: Laden Sie CDN-CSS- und JS-Bibliotheken #
Öffnen Sie die BEINHALTET Tab zum Anhängen externer Bibliotheken, von denen Ihr Widget abhängt Es gibt zwei Listen: CSS-Bibliotheken und JS-Bibliotheken. Für jeden fügen Sie ein Griff (ein eindeutiger Name) und ein Quell-URL oder registrierter GriffKlicken Sie dann Css hinzufügen oder Js hinzufügen.
So zieht man so etwas wie Font Awesome von einem CDN, oder jQuery, ohne sein Theme zu bearbeiten Master Addons stellt die Bibliothek nur dann in die Warteschlange, wenn das Widget tatsächlich auf der Seite ist, so bleiben deine anderen Seiten sauber.
Benötigen Sie Symbole im Widget? Master Addons versendet außerdem acht gebündelte Symbolbibliotheken Sie können ohne externen CDN-Aufruf verwenden.
Widget-Einstellungen: Titel, Symbol, Kategorie und Export #
Klicken Sie auf die Zahnradsymbol Neben dem Widget-Namen in der oberen Leiste zum Öffnen Widget-einstellungen Im linken Panel. von hier aus steuern Sie, wie sich das Widget im Inneren von Elementor präsentiert:
- Widget-titel: Widget umbenennen Dieser Titel wird in der Elementor-Widget-Liste angezeigt.
- Widget-symbol: Klicken Sie auf Symbol ändern Um ein Symbol aus dem Master Addons Icon Picker auszuwählen Sie können jedes enthaltene Icon oder eine Font Awesome Klasse verwenden.
- Widget-kategorie: Wählen Sie die Elementorkategorie, unter der das Widget angezeigt wird, und gruppieren Sie sie mit zugehörigen Widgets.
- Widget exportieren: Exportieren Sie die gesamte Widget-Konfiguration als JSON-Datei, die Sie speichern, sichern oder mit jedem teilen können.
Der Symbolauswahlspieler gruppiert Tausende von Symbolen in Kategorien wie Alle Symbole, Elementorsymbole, einfache Zeilensymbole, ikonische Schriftartensymbole, lineare Symbole und Materialsymbole. Filtern Sie nach Namen, wählen Sie eines aus und klicken Sie auf Einfügen.
Importieren Sie ein Widget aus einer JSON-Datei #
Teilen funktioniert in beide Richtungen Zurück auf der Master Addons Widgets Bildschirm, klicken Sie auf die Widget importieren Schaltfläche. Mit dem Dialog können Sie ein ziehen und fallen lassen .json Datei, oder danach stöbern Nur .json Vom Widget Builder exportierte Dateien werden unterstützt.
Jeder mit der JSON-Datei eines Widgets kann es importieren, Panel, Code, Includes, und alles, dann verwenden Sie es auf ihrer eigenen Seite in Sekunden Das macht den Widget Builder eine ordentliche Möglichkeit, Widgets projektübergreifend wiederzuverwenden oder an einen Client zu übergeben.
Tipps zum Erstellen zuverlässiger benutzerdefinierter Widgets #
- Abschnitte klar benennen. Der Abschnittsname landet in Ihrem Code, also halten Sie ihn kurz und aussagekräftig.
- Fügen Sie ein Feld hinzu, bevor Sie auf den Shortcode verweisen. Token gibt es erst, nachdem das passende Feld auf dem Panel ist.
- Verwenden Sie Preview häufig. Überprüfen Sie die Live-Vorschau vor dem Speichern, damit Sie einen fehlenden Token frühzeitig statt auf der Live-Seite erkennen.
- Laden Sie Bibliotheken über Includes, nicht inline. Es hält Ihren Code sauber und lädt Skripte nur dort, wo sie benötigt werden.
- Exportieren Sie, während Sie gehen. Ein JSON-Export dient gleichzeitig als Ihr Backup und Ihre Freigabedatei.
- Sie sehen Ihr Widget nicht in Elementor? Überprüfen Sie die Fehlerbehebungsleitfaden für Sichtkorrekturen.
Häufig gestellte Fragen #
Was ist der Master Addons Widget Builder?
Der Widget Builder ist ein Tool in Master Addons for Elementor, das aus eigenem HTML, CSS und JavaScript ein bearbeitbares Elementor-Widget macht Sie entwerfen ein Optionsfeld aus Drag-and-Drop-Feldern und verbinden es mit Ihrem Code mit Shortcode-Tokens, kein PHP erforderlich.
Wie funktionieren die Kurzcodes {{color}} und {{dimensions}}?
Jedes Feld, das Sie dem Optionsfeld hinzufügen, generiert ein Shortcode-Token, z {{color}} oder {{dimensions}}. Sie platzieren das Token in Ihrem HTML, CSS oder JS, und Master Addons ersetzt es durch den Wert, den der Benutzer in Elementor festlegt, was das Widget dynamisch macht.
Kann ich einem benutzerdefinierten Widget externe CSS- und JS-Bibliotheken hinzufügen?
Ja. Öffnen Sie die Registerkarte Inklusive, fügen Sie einen Handle und eine CDN-Quell-URL unter CSS-Bibliotheken oder JS-Bibliotheken hinzu, und klicken Sie dann auf Hinzufügen. Master Addons lädt die Bibliothek nur auf Seiten, die das Widget verwenden, sodass sie den Rest Ihrer Website nicht verlangsamt.
Wie teile ich ein benutzerdefiniertes Elementor-Widget?
Widget-Einstellungen über das Zahnrad-Symbol öffnen und auf Widget exportieren klicken, um eine JSON-Datei herunterzuladen, Jeder kann dann die Schaltfläche Widget importieren auf dem Widget Builder-Bildschirm verwenden, um diese JSON-Datei einzuziehen und das Widget auf seiner eigenen Website zu verwenden.
Ist der Widget Builder kostenlos dabei?
Der Widget Builder ist Teil von Master Addons for Elementor Siehe die Preisseite Für die aktuelle Planaufschlüsselung und welche Funktionen in jeder Ebene enthalten sind.
Einwickelnd #
Der Master Addons Widget Builder schließt die Lücke zwischen einem Code-Snippet und einem Production Elementor Widget Baue das Panel auf, schreibe dein HTML, CSS und JS, verkabele es mit Shortcode-Tokens, lade alle Bibliotheken, die du brauchst, und exportiere oder importiere das Ergebnis dann als JSON. Schau dir den Rest an Master Addons Widget-Bibliothek zu sehen, was man noch bauen kann.
