Schaltflächen und Links benötigen mehr als eine Webadresse Sie benötigen einen Open-in-New-Window-Toggle, eine Nofollow-Option und manchmal benutzerdefinierte Attribute Die URL-feld In den Master Addons Widget-builder Gibt Ihrem benutzerdefinierten Widget die gleiche Linksteuerung, die Elementor überall sonst verwendet, sodass Editoren einen bekannten Link-Picker anstelle eines Nur-Text-Felds erhalten.
Wie jedes Widget Builder-Feld unterstützt das URL-Feld Bedingungen. Sein Wert ergibt sich durch die Twig-Syntax-Vorlagen-Engine Mit gepunktetem Zugang, mit {{ link.url }}, {{ link.is_external }}(so landet jeder Teil im richtigen Attribut Beide Guides behandeln die Details.
Sie legen ein URL-Feld in Ihr Widget-Panel, wählen Sie aus, welche Linkoptionen Sie freilegen möchten, und verbinden Sie es mit Ihrem Markup mit einem Shortcode. Diese Anleitung konzentriert sich auf das URL-Feld, wird aber auch schnell angezeigt Textfeld So können Sie gleichzeitig die Button-Beschriftung festlegen.
Was das URL-Feld macht #
Das URL-Feld rendert die Linksteuerung von Elementor im Optionsfeld Ihres Widgets Editoren fügen einen Link ein, drehen die benötigten Optionen um und Ihr Widget gibt ein richtiges Anker-Tag aus Ein Textfeld mit einer Rohadresse kann das nicht tun Das URL-Feld verarbeitet die Ziel- und Rel-Attribute für Sie, sodass externe Links korrekt geöffnet werden und Nofollow einen Klick entfernt ist.
Es paart sich auf natürliche Weise mit einem Textfeld für die sichtbare Beschriftung, bei einem Call-to-Action-Button trägt das URL-Feld den Link und das Textfeld die Wörter auf dem Button.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Ein benutzerdefiniertes Widget öffnet sich im Widget Builder Editor, Wenn dies Ihr erstes ist, lesen Sie die Übersicht über Widget Builder Zuerst.
So fügen Sie ein URL-Feld hinzu #
Suchen Sie im Widget Builder-Editor das Feldfeld auf der linken Seite und ziehen Sie die URL Feld in einen Abschnitt unter dem Inhalt, Stil, oder Fortgeschritten Tab. Link-Steuerelemente leben in der Regel unter Content, sobald er steht, öffnen sich links die Optionen des Feldes und sein Shortcode wird im angezeigt Dokumentation Seitenleiste neben dem Code-Editor.
URL-Feldoptionen erklärt #
Wählen Sie das URL-Feld, um seine Einstellungen zu öffnen Die ersten paar Optionen stimmen mit den anderen Feldern überein, dann erhalten Sie eine Reihe von linkspezifischen Auswahlmöglichkeiten.
- Etikett: Der über dem Steuerelement in Elementor gezeigte Text, zum Beispiel “Url” oder “Button Link”.
- Name: Die eindeutige Kennung für das Feld Buchstaben, Zahlen, und Unterstriche nur Dies wird Ihr Shortcode, also ein Feld mit dem Namen
urlGibt dir{{url}}. - Beschreibung: Optionaler Helfertext, der unter dem Steuerelement angezeigt wird.
- Platzhalter: Der schwache Hinweis, der im Linkfeld angezeigt wird, wenn er leer ist.
- Standardwert: Ein Startlink, wenn der Button irgendwo zeigen soll, bevor ihn jemand bearbeitet.
URL-Optionen #
Die URL-Optionen Gruppe entscheidet, welche Teile der Linksteuerung in Elementor erscheinen Nur das ankreuzen, was das Widget benötigt:
- URL-Eingabe: Das Linkfeld selbst, wo der Editor die Adresse einfügt.
- In neuem Fenster öffnen: Ein Knebel, der setzt
target="_blank"Auf dem Link. - Nofollow hinzufügen: Ein Knebel, der hinzufügt
rel="nofollow", nützlich für gesponserte oder nicht vertrauenswürdige Links. - Benutzerdefinierte Attribute: ein Feld für zusätzliche Attribute in
key|valueFormat, praktisch für Analytics-Hooks oder Datenattribute.
Gemeinsame Einstellungen: responsive, dynamische und mehr #
Unterhalb der URL-Optionen erhalten Sie die gleichen Gemeinsame Einstellungen Wie jedes Feld im Builder: Label, Label Block, Responsive Control, Dynamic Support, Frontend Available, Separator, and Conditions anzeigen Dynamic Support ist hier der nützliche, da er den Link von einer dynamischen Quelle ziehen lässt Die Textfelddokumentation Erklärt jede einzelne davon im Detail.
Verbinden Sie das Feld mit Ihrem Code #
Das URL-Feld gibt Ihnen einen Shortcode plus ein paar Unter-Token, so können Sie jede Link-Option dem rechten HTML-Attribut zuordnen Für ein Feld mit dem Namen url:
{{url.url}}Gibt die Linkadresse für die aushrefAttribut.{{url.is_external}}Gibt das Ziel aus, so funktioniert der “Öffnen in neuem Fenster” - Kippschalter.{{url.nofollow}}Gibt den rel-Wert für den “Add nofollow” - Kippschalter aus.
Geben Sie diese in ein Anker-Tag und fügen Sie ein hinzu Textfeld Token wie {{button_text}} Für das sichtbare Etikett:
Der Anker zieht nun seinen Link, sein Ziel und sein rel aus dem Single URL-Steuerelement, und das Feld Text liefert die Wörter Speichern Sie das Widget und die Schaltfläche rendert mit allem, was der Editor setzt Wissenswertes: wenn Sie nur platzieren {{url}} Sie erhalten allein die Adresse, aber nicht das Ziel- oder Nofollow-Verhalten. Verwenden Sie daher die Untertoken, wenn diese wichtig sind.
Verwenden Sie die URL-Steuerung in Elementor #
Ziehen Sie Ihr benutzerdefiniertes Widget auf eine Seite und öffnen Sie es im Elementor-Editor Das URL-Feld wird als Standard-Link-Steuerelement angezeigt: ein Kästchen für die Adresse, plus die von Ihnen aktivierten Kippschalter Fügen Sie einen Link ein, schalten Sie bei Bedarf “In neuem Fenster öffnen” ein, und die Schaltfläche aktualisiert live.
In der Demo stellt das mit “Button Text” bezeichnete Textfeld den Button auf “Choose Your Plan”, und das URL-Feld zeigt ihn auf den Ziellink Zwei kleine Felder, und Sie haben einen vollständig bearbeitbaren Call-to-Action-Button, den jeder von Elementor aus aktualisieren kann.
Häufige Anwendungsfälle #
- Call-to-action-tasten Mit bearbeitbarem Link-, Text- und New-Window-Verhalten.
- Preis- oder Planschaltflächen Der Punkt zur Kasse.
- Weiterlesen Links auf Karten und Funktionsblöcken.
- Gesponserte oder Affiliate-Links Wo nofollow wichtig ist.
- Verfolgte Links Verwendung benutzerdefinierter Attribute für Analysedaten.
Tipps für die Arbeit mit dem URL-Feld #
- Legen Sie nur die Optionen offen, die Sie benötigen. Wenn eine Schaltfläche nie eine neue Registerkarte öffnet, lassen Sie diese Option deaktiviert, um die Steuerung sauber zu halten.
- Verwenden Sie die Unterpunkte, nicht nur
{{url}}. Karte{{url.url}},{{url.is_external}}, und{{url.nofollow}}Also macht jeder Knebel tatsächlich etwas. - Kombinieren Sie es mit einem Textfeld Für die Schaltflächenbeschriftung statt der Hardcodierung der Wörter in Ihrem HTML.
- Schalten Sie nofollow für gesponserte Links ein Suchrichtlinien auf der rechten Seite zu bleiben.
- Erstellen Sie das Feld, bevor Sie auf seinen Shortcode verweisen. Der Token existiert erst, nachdem sich das Feld auf dem Panel befindet.
Häufig gestellte Fragen #
Was ist das URL-Feld im Master Addons Widget Builder?
Das URL-Feld fügt die Linksteuerung von Elementor zu einem benutzerdefinierten Widget hinzu. Editoren fügen einen Link ein und schalten Optionen wie öffnen in neuem Fenster und nofollow um, und Ihr Widget gibt ein richtiges Anker-Tag mit dem Shortcode und den Unter-Tokens des Feldes aus.
Wie mache ich den “Öffnen in neuem Fenster” - Kippschalter in meinem benutzerdefinierten Widget zum Laufen?
Verwenden Sie den Unter-Token in Ihrem Anker-Tag Für ein Feld mit dem Namen url(einstellen target="{{url.is_external}}" Auf dem Link. Wenn der Editor den Umschalter in Elementor umdreht, wird das Zielattribut aktualisiert, sodass der Link in einem neuen Tab geöffnet wird.
Kann ich einem Link in einem Widget Builder-Widget nofollow hinzufügen?
Ja. Aktivieren Sie das Hinzufügen von nofollow in den URL-Optionen des Feldes und geben Sie dann aus rel="{{url.nofollow}}" Auf Ihrem Anker-Tag Wenn der Editor nofollow in Elementor einschaltet, wird das rel-Attribut automatisch hinzugefügt.
Wie stelle ich den Buttontext getrennt vom Link ein?
Fügen Sie ein Textfeld neben dem URL-Feld hinzu Das URL-Feld trägt den Link, und das Text-Feld trägt die sichtbare Beschriftung Platzieren Sie das Textfeld-Token, wie {{button_text}}, zwischen dem öffnenden und dem schließenden Ankeretikett.
Wofür werden benutzerdefinierte Attribute verwendet?
Mit benutzerdefinierten Attributen können Redakteure dem Link zusätzliche HTML-Attribute hinzufügen key|value Format. Sie sind nützlich für Analytics-Hooks, Datenattribute oder jedes Attribut, das Ihre Skripte oder Tracking-Tools auf dem Ankerelement benötigen.
Einwickelnd #
Das Widget Builder-URL-Feld verwandelt einen einfachen Link in einen vollständigen Elementor-Link-Steuerelement innerhalb Ihres eigenen benutzerdefinierten Widgets. Wählen Sie die Optionen zum Freilegen aus, leiten Sie die Untermoxe in Ihr Anker-Tag ein, koppeln Sie es mit einem Textfeld für das Etikett und Sie haben eine bearbeitbare Schaltfläche, die Links, neue Fenster und Nofollow ohne fest codierte Markierung verarbeitet. Schauen Sie sich den Rest an Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
