So erstellen Sie ein benutzerdefiniertes Elementor-Widget ohne Programmierkenntnisse

Elementor-Widgets helfen beim Hinzufügen von Seitenerstellungselementen wie einem Navigationsmenü, einer Schaltfläche, einem Bildfeld, einem FAQ-Bereich und vielem mehr. Obwohl mehrere Elementor-Add-ons mit Elementor-Widgets geliefert werden, ist es unwahrscheinlich, dass Sie in diesen Add-ons alle erforderlichen Widgets erhalten.

Hier benötigen Sie benutzerdefinierte Elementor-Widgets, um Ihre Anforderungen zu erfüllen. ElementsKit verfügt über die Funktionalitäten, mit denen Sie die erforderlichen Widgets im Handumdrehen erstellen können.

In diesem Beitrag erfahren Sie, wie Sie auf minimalistische Weise ein benutzerdefiniertes Elementor-Widget ohne Codierung erstellen.

Machen wir weiter... jetzt!

Was ist ein Widget?

Widget bezieht sich auf eine kleine GUI-Anwendung, die zum Erledigen einer bestimmten Aufgabe verwendet wird. Ein Widget kann ein beliebiges Element Ihrer Website sein, z. B. eine Schaltfläche, ein Kontrollkästchen, ein Dialogfeld, eine Bildlaufleiste, ein Suchfeld, eine Karte, eine Uhr, ein Besucherzähler usw.

Betrachten wir als Beispiel den Elementor-Seitenersteller. Dieser Seitenersteller ist mit zahlreichen ausgestattet integrierte Widgets. Sie können die besten kostenlosen Elementor-Widgets hinzufügen, um Ihre Webseite zu gestalten.

Bei Bedarf können Sie jedoch auch ein benutzerdefiniertes Widget für Elementor erstellen. Und das ElementsKit-Widget-Builder wird Ihnen dabei helfen!

Vorteile der Verwendung von ElementsKit Widget Builder zum Erstellen benutzerdefinierter Widgets

Wir alle wissen, dass Widgets Websites hervorragende Funktionalität verleihen. Es ist jedoch nahezu unmöglich, ein geeignetes Widget für die Erfüllung Ihrer benutzerdefinierten Aufgabe zu finden. In diesem Fall haben Sie keine andere Wahl, als ein benutzerdefiniertes Widget zu erstellen.

Und die Widget-Builder machen diesen benutzerdefinierten Widget-Erstellungsprozess einfacher als je zuvor. Werfen wir einen Blick auf die wichtigsten Vorteile der Verwendung eines Widget-Builders.

• Erstellen Sie benutzerdefinierte Widgets ohne Programmierkenntnisse
• Widgets reagieren vollständig
• Erstellen Sie die Widgets visuell durch Ziehen und Ablegen der Elemente
• Unterstützt strukturierte Inhalte
• Enthält einen eigenständigen Code-Editor
• Unterstützt mehrere Feldtypen usw.

Dies sind die Hauptvorteile des ElementsKit-Widget-Builders. 

Wie erstelle ich ein benutzerdefiniertes Elementor-Widget mit ElementsKit (kostenlos)?

Ein voll funktionsfähiges Widget kann Ihr Website-Erstellungserlebnis verbessern. Daher ist es wichtig, Ihr benutzerdefiniertes Elementor-Widget für Ihre Website zu erstellen.

Möchten Sie wissen, wie Sie ein benutzerdefiniertes Elementor-Widget erstellen? Hier ist der Schritt-für-Schritt-Prozess zum Erstellen eines kostenlosen benutzerdefinierten Elementor-Widgets mithilfe des ElementsKit-Widget-Builders.

Voraussetzung

Um ein benutzerdefiniertes Elementor-Widget zu erstellen, benötigen Sie die folgenden Plugins –

• Elementor
• ElementsKit

Sobald diese Tools auf Ihrer WordPress-Website installiert und aktiviert sind, ist es an der Zeit, mit der Erstellung des benutzerdefinierten Elementor-Widgets zu beginnen.

Schritt #1: Schalten Sie den Widget Builder ein

Um den Widget-Erstellungsprozess zu starten, stellen Sie sicher, dass Sie das Widget Builder-Modul im Dashboard-Bereich aktiviert haben.

Um es zu aktivieren, gehen Sie zum ElementsKit-Dashboard-Panel und klicken Sie dann auf MODULE. Suchen Sie im Abschnitt „Module“ nach dem Modul „Widget Builder“ und aktivieren Sie es.

So überprüfen Sie, ob der Widget-Builder aktiviert oder deaktiviert ist:

Aktivieren des Widget-Builders

Vergessen Sie nicht, auf das „Änderungen speichern'-Taste nach dem Ein- oder Ausschalten eines Moduls.

Schritt #2: Erstellen Sie ein Widget

Um ein neues Widget zu erstellen, fahren Sie mit fort ElementsKit > Widget-Builder. Auf der neuen Seite werden Sie eine neue Schaltfläche namens „Neue hinzufügen“. Wenn Sie auf diese Schaltfläche klicken, wird ein neues Widget in Ihrem linken Bereich von Elementor erstellt.

Erstellen eines neuen Widgets

Jetzt können Sie auf dieser Seite den Titel, das Symbol und die Kategorie des Widgets anpassen. Fügen Sie Ihrem benutzerdefinierten Widget einen Widget-Titel und ein Symbol hinzu. Sie können jedes Symbol aus der Font Awesome-Symbolbibliothek verwenden.

Anpassen des Widget-Titels und -Symbols

Achten Sie bei der Benennung Ihres Widgets darauf, dass es für Ihre Aufgabe relevant bleibt. Und fügen Sie Ihrem Widget ein relevantes Symbol hinzu.

Schritt #3: Anpassen des neuen Widgets

Die Entwicklung des Elementor-Widgets ist abgeschlossen, jetzt ist es Zeit für die Anpassung. Sie benötigen keine tiefgreifenden Programmierkenntnisse, um ein neues benutzerdefiniertes Widget für Elementor zu erstellen. Der ElementsKit-Widget-Builder macht den Prozess reibungsloser als je zuvor. 

Ziehen Sie einfach das ElementsKit-Widget aus dem linken Bereich und legen Sie es im mittleren Bereich ab. Das abgelegte Widget erstellt automatisch eine Variable auf der rechten Tafel.

Klicken Sie auf diese Variable und sie wird automatisch in den Code-Editor aufgenommen. Bei Bedarf können Sie über den Code-Editor zusätzliches HTML-, CSS- und JavaScript-Markup hinzufügen.

Nachdem Sie ein neues Widget erstellt oder Anpassungen vorgenommen haben, klicken Sie auf die Schaltfläche „Speichern“ und schon sind Sie fertig.

Hier ist der detaillierte Prozess –

Erstellen eines neuen Widgets

Sie können diese Steuerelemente auch zur Registerkarte „Stil“ oder „Erweitert“ hinzufügen.

Schritt #4: Ändern der Widget-Felder

Beim Erstellen des Widgets können Sie alle Widget-Felder oder -Elemente anpassen. Sie können beispielsweise den Etikettennamen, den Platzhalter, den Standardwert usw. anpassen.

Allerdings sind die Anpassungsmöglichkeiten nicht für jedes Panel gleich. Unterschiedliche Bedienfelder verfügen über unterschiedliche Eingabefelder.

Anpassen der Widget-Felder

Profi-Tipps: Beim mehrmaligen Hinzufügen desselben Steuerelements muss der Name eindeutig sein. Andernfalls entsteht ein Variablenkonflikt.

Schritt #5: Vorschau des neu erstellten Widgets

Das neu erstellte Widget funktioniert völlig ähnlich wie die vorhandenen Elementor-Widgets. Das frisch erstellte benutzerdefinierte Widget wird im Elementor-Bedienfeld verfügbar sein. Um das neue Widget zu überprüfen, öffnen Sie eine neue Webseite und ziehen Sie das Widget per Drag & Drop auf die neue Webseite.

Überprüfung des neuen Widgets

Profi-Tipps: Sie können jedes ElementsKit-Steuerelement hinzufügen, um das benutzerdefinierte Elementor-Widget über den Elementor-Widget-Builder zu erstellen. Holen Sie sich die Pro-Version von ElementsKit, um auf weitere Elementor-Steuerelemente zuzugreifen.

Sehen Sie sich das Video unten an, um mehr über den ElementsKit-Widget-Builder zu erfahren.

Liste der von ElementsKit unterstützten Steuerfelder

ElementKit bietet zahlreiche Steuerfelder zum Erstellen eines benutzerdefinierten Widgets. Hier ist die Liste der unterstützten Kontrollfelder –

• Text – Das Textfeld wird zur Texteingabe verwendet.
• Nummer – Benutzer können Nummern über das Nummernkontrollfeld eingeben.
• Textbereich – Das Textfeld dient der Eingabe von Zahlen, Texten, Symbolen usw.
• WYSIWYG – Es ist der Rich-Text-Editor WordPress TinyMCE.
• Code – Dieses Steuerelement fügt einen Code-Editor hinzu, der auf dem Ace-Editor basiert.
• Versteckt – Das versteckte Eingabefeld dient dazu, Daten direkt in der Datenbank zu speichern, ohne ein Eingabefeld im Control Panel bereitzustellen.
• Umschalter – Ein Switcher ist eine schicke Darstellung eines Kontrollkästchens. Es wird verwendet, um verschiedene Blöcke oder Elemente einer Webseite anzuzeigen/auszublenden.
• Wählen – Die Auswahloption bietet den Benutzern mehrere Optionen zur Auswahl. Es zeigt die Optionen in einem Dropdown-Menü an. 
• Wählen – „Auswählen“ wird verwendet, um eine Schaltfläche oder eine Gruppe von Schaltflächen mit Symbolen und anderen Stil- oder Ausrichtungseinstellungen anzuzeigen.
• Farbe – Es ermöglicht ein Farbauswahlfeld mit einem Alpha-Schieberegler.
• Schriftart – Mit der Schriftartensteuerung können Benutzer eine Schriftart aus der Google-Schriftartenbibliothek auswählen.
• Terminzeit – Die Datum-Uhrzeit-Bibliothek verwendet die Flatpickr-Bibliothek um ein Datum und eine Uhrzeit auszuwählen. 
• URL – Das URL-Feld stellt einen Link mit einer Schaltfläche bereit. Sie können die Schaltfläche so einstellen, dass der Link im selben oder einem neuen Tab geöffnet wird, und ihn auch auf „nofollow“ setzen.
• Medien – In diesem Abschnitt können Benutzer verschiedene Medien auswählen. Es werden die Mediendateien aus der WordPress-Medienbibliothek angezeigt.
• Symbole – Mit der Symbolsteuerung können Benutzer Symbole aus den Symbolbibliotheken Font Awesome und ElementsKit Lite hinzufügen. Benutzer können ihre benutzerdefinierte Symbolbibliothek auch aus der WordPress-Medienbibliothek hochladen.
• Schieberegler – Der Schieberegler ist eine verschiebbare Skala, die zur Auswahl zwischen einem Bereich numerischer Werte verwendet wird.
• Maße – Die Bemaßungssteuerung besteht aus vier Eingabefeldern, um einen geeigneten Platz für ein Element festzulegen. Die Eingabefelder sind oben, rechts, unten und links. 
• Grenze – Es ermöglicht dem Benutzer, den Rahmentyp, die Breite und die Farbe anzupassen.
• Hintergrund – Mit der Hintergrundsteuerung können Benutzer ein Hintergrundbild, ein Video und eine Farbe hinzufügen. Sie können dem Video statische Farben oder Verlaufsfarben hinzufügen.
• Box Schatten – Der Kastenschatten bietet fünf verschiedene Arten von Schatten rund um den Kasten. Es umfasst horizontale Schatten, vertikale Schatten, Schattenunschärfe, Schattenausbreitung und bunte Schatten.
• Textschatten – Wie der Boxschatten bietet auch das Textschatten-Steuerelement vier verschiedene Steuerelemente. Dies sind horizontaler Schatten, vertikaler Schatten, Schattenunschärfe und bunter Schatten um die Texte.
• Typografie – Die Typografie ermöglicht es den Benutzern, Schriftfamilie, Schriftgröße, Schriftstärke, Schriftstil, Zeilenhöhe, Texttransformation und Buchstabenabstand anzupassen.
• Bilddimension – Die Steuerung der Bildabmessungen besteht aus Bildhöhe, -breite und einer Schaltfläche zum Anwenden.
• Wählen Sie2 – Es erstellt auch ein Dropdown-Menü wie die Auswahlsteuerung, jedoch mit mehr Stil und Design.
• Hover-Animation – Dieses Steuerelement fügt Animationen zu verschiedenen Auswahlfeldern basierend auf der Hover.css-Bibliothek hinzu.
• Eingangsanimation – Mit der Eingangsanimationssteuerung kann der Benutzer das Erscheinungsbild einer Schaltfläche basierend auf der Animate.css-Bibliothek anpassen.

Dies sind die Steuerelemente des ElementsKit-Widget-Builders, die Sie beim Erstellen eines benutzerdefinierten Elementor-Widgets verwenden können.

Letzte Worte

So einfach können Sie ein benutzerdefiniertes Elementor-Widget erstellen, indem Sie auf ElementsKit tippen. ElementsKit enthält unzählige integrierte Widgets, die Ihren Aufwand beim Erstellen von Elementor-Seiten wahrscheinlich minimieren.

Gleichzeitig bietet es Ihnen auch eine minimalistische Methode zum Erstellen Ihrer bevorzugten benutzerdefinierten Elementor-Widgets. Jetzt sind Sie an der Reihe, ElementsKit zu installieren und in Anspruch zu nehmen und die Vorteile des Add-ons beim Erstellen benutzerdefinierter Elementor-Widgets zu nutzen.