Erstellen Sie Ihre eigenen Elementor-Widgets. Kein Code erforderlich.
Lernen Sie Widget Builder von Master Addons kennen. „Bearbeiten Sie eine leistungsstarke Brücke zwischen Ihrem benutzerdefinierten Code und dem Elementor-Editor. Verwandeln Sie einzigartige Designs, KI-generierte Schnittstellen oder interaktive CodePen-Schnipsel in voll funktionsfähige, wiederverwendbare Elementor-Widgets.
Der Widget Builder-Vorteil
Erstellen Sie wirklich einzigartige Widgets
Erstellen Sie Widgets genau nach den Anforderungen Ihres Projekts - etwas, das vorgefertigte Bibliotheken nicht bieten können.
Erwecken Sie KI- und CodePen-Designs zum Leben
Integrieren Sie benutzerdefinierte Benutzeroberflächen von KI-Tools oder Live-Prototypen von CodePen direkt als bearbeitbare Elementor-Widgets in Ihre Website.
Volle kreative Kontrolle
Sie besitzen den gesamten Stapel: Struktur (HTML), Stil (CSS) und Interaktivität (JS) sowie die Möglichkeit, externe Bibliotheken hinzuzufügen.
Wiederverwendung und Zeitersparnis
Erstellen Sie einmalig ein Widget, speichern Sie es in Ihrer Bibliothek und verwenden Sie es in jedem Projekt mit konsistenten, bearbeitbaren Einstellungen erneut.
Entwickelt für Stromnutzer
Wenn Sie Elementor kennen, können Sie Widget Builder verwenden Die bekannte tab-basierte Oberfläche macht die Widget-Erstellung visuell und intuitiv.
Benutzerdefinierte Widgets auf jeder Website
Erstellen Sie einmalig ein Widget und exportieren/importieren Sie es einfach, um es auf völlig anderen WordPress-Websites zu verwenden, was eine enorme Zeitersparnis bedeutet
Erstellen und benennen Sie Ihr Widget
Beginnen Sie mit der Feststellung der Identität Ihrer neuen Komponente Geben Sie ihr einen klaren Titel und organisieren Sie ihn innerhalb einer Kategorie für einen nahtlosen Zugriff, jedes Mal, wenn Sie Elementor verwenden.
- Weisen Sie Ihrem Widget einen eindeutigen und beschreibenden Titel zu.
- Kategorisieren Sie es für einen einfachen zukünftigen Zugriff im Editor-Panel.
- Richten Sie die Grundgrundlage für Ihr wiederverwendbares Element ein.
Gestalten Sie die Editor Experience
Konstruieren Sie die Schnittstelle, mit der Ihre Benutzer interagieren werden Durch das Hinzufügen von Steuerelementen wie Umschalthebeln und Farbwählern erstellen Sie visuell das Einstellungsfeld des Widgets, ohne Code zu schreiben.
- Steuerelemente (Text, Farbe, Auswahl) aus dem linken Bereich hinzufügen.
- Jedes Steuerelement wird in Elementor zu einer bearbeitbaren Option.
- Gestalten Sie das gesamte benutzerorientierte Einstellungsfeld visuell.
Kartensteuerungen zu Ihrem Code
Hier wird Ihr Widget dynamisch Der Builder generiert für jedes Steuerelement intelligente Shortcodes, die Sie in Ihren Vorlagen platzieren, um Live-Verbindungen zwischen Einstellungen und Ausgabe zu erstellen.
- Verwenden Sie automatisch generierte Kurzcodes wie {{color}}.
- Fügen Sie sie in Ihren HTML-, CSS- oder JS-Code ein.
- Erstellen Sie eine direkte Verbindung zwischen Editoreingaben und Front-End-Anzeige.
Speichern und überall verwenden
Nach dem Speichern ist Ihr benutzerdefiniertes Widget handlungsbereit Es erscheint im Elementor-Editor, bereit, in jede Seite gezogen und mit den von Ihnen erstellten Live-Einstellungen angepasst zu werden.
- Speichern, um es sofort zu Ihrem Elementor-Panel hinzuzufügen.
- Ziehen Sie das Widget per Drag & Drop auf eine beliebige Seite.
- Passen Sie die Live-Einstellungen an und sehen Sie sich das Design-Rendering sofort an.
Fertig hergestellte Widgets
Zwölf Pro-Layouts und acht kostenlose Importieren Sie das JSON, bearbeiten Sie es in Elementor.
Was kann man eigentlich bauen?
Von der KI zur Website
Generieren Sie eine komplexe Preiskarte oder einen Testimonial-Slider mit einem KI-Designtool, kopieren Sie den Code und stecken Sie ihn in den Widget Builder. Es ist jetzt ein überschaubares Elementor-Widget mit bearbeitbarem Text und Farben.
CodePen zur Produktion
Habe eine atemberaubende animierte Schaltfläche oder eine einzigartige Galerie auf CodePen gefunden? betten Sie es nicht einfach ein - verwandeln Sie es in ein natives Widget, in dem Sie alle Parameter steuern können.
Erstellen Sie Ihr eigenes UI-Kit
Erstellen Sie eine Reihe benutzerdefinierter Schaltflächen, Header oder Infokarten mit den einzigartigen Interaktionsmustern Ihrer Marke und verwenden Sie sie auf allen Client-Sites wieder.
Verfügbare Optionen
Text
Fügen Sie grundlegende Texteingaben hinzu.
Nur numerische Werte eingeben.
Für längere Texteinträge.
Rich visueller Texteditor.
Code-Schnipsel direkt eingeben.
Versteckte Hintergrunddaten speichern.
Eine Option ein-/ausschalten.
Popover für erweiterte Einstellungen öffnen.
Wählen Sie aus Dropdown-Optionen.
Wählen Sie jede Farbe visuell aus.
Wählen Sie eine Schriftfamilie aus.
Steuern Sie den gesamten Textstil.
Wählen Sie ein Datum/eine Uhrzeit aus.
Links eingeben oder auswählen.
Medien hochladen oder auswählen.
Mehrere Bilder zusammen auswählen.
Wählen Sie aus Icon Bibliothek.
Werte mit Schieberegler anpassen.
Polsterung, Rand usw. festlegen.
Schatteneffekte visuell anwenden.
Elemente Hintergrundeigenschaften festlegen.
Aus Bildoptionen auswählen.
Erstellen Sie sich wiederholende Inhaltsgruppen.
Inhalte in Tabs organisieren.
Fügen Sie Farboptionen in Ihr Widget hinzu.