Textfeld

Die Textfeld Ist diejenige, die Sie für jede Zeit erreichen ein benutzerdefiniertes Widget braucht eine Textzeile jemand kann bearbeiten: eine Überschrift, eine Beschriftung, eine kurze Beschriftung, ein Knopfwort In den Master Addons Widget-builder„Sie legen ein Textfeld in Ihr Widget-Panel, geben ihm einen Namen und dieser Name wird zu einem Shortcode, den Sie in Ihrem HTML, CSS oder JS platzieren. Was auch immer der Benutzer in Elementor eingibt, druckt direkt in Ihr Markup.

Wie jedes Widget Builder-Feld unterstützt das Text-Feld Bedingungen, so können Sie die Steuerung basierend auf dem Wert eines anderen Feldes ein - oder ausblenden, Ihre Ausgabe läuft auch durch die des Erbauers Twig-Syntax-Vorlagen-Engine„Da können Sie den Token einpacken {% if %} Prüfen oder Filter anwenden wie |upper. Beide Leitfäden behandeln das Setup und die Einschränkungen.

Es druckt jedoch mehr als nur eine einfache Zeichenfolge. Das Textfeld ist in die responsiven Steuerelemente und dynamischen Tags von Elementor eingebunden, sodass ein Feld auf Mobilgeräten eine andere Überschrift als auf dem Desktop speichern oder seinen Wert aus einer dynamischen Quelle wie dem Beitragstitel abrufen kann.

Was das Feld Text bewirkt #

Ein Textfeld rendert eine einzeilige Texteingabe im Optionsfeld des Widgets, wenn jemand Ihr benutzerdefiniertes Widget in Elementor bearbeitet, sieht er diese Eingabe, gibt einen Wert ein und Ihr Widget gibt ihn überall dort aus, wo Sie den passenden Shortcode platziert haben.

Es paart sich gut mit den anderen Eingabefeldern im Builder Bei längeren mehrzeiligen Inhalten greifen Sie nach dem Textbereich Feld. Für reichhaltig formatierte Inhalte verwenden Sie die WYSIWYG-Feld. Das Feld Text ist die richtige Wahl für kurze, einfache Zeichenfolgen Wenn Sie neu im Aufbau von Widgets sind, lesen Sie die Übersicht über Widget Builder Zuerst.

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, das im Widget Builder-Editor geöffnet ist.

So fügen Sie ein Textfeld hinzu #

Suchen Sie im Widget Builder-Editor das Feldfeld auf der linken Seite und ziehen Sie dann das Feld Text Feld in einen Abschnitt unter dem Inhalt, Stil, oder Fortgeschritten Tab. Die meisten Texteingaben gehören unter Inhalt, ist er einmal angebracht, öffnen sich links die Optionen des Feldes und dessen Shortcode zeigt sich in der Dokumentation Seitenleiste neben dem Code-Editor.

Textfeldoptionen erklärt #

Wählen Sie das Feld Text, um seine Einstellungen zu öffnen Diese Optionen steuern, wie die Eingabe im Elementor-Panel aussieht und sich verhält.

• Etikett: Der Text, der über dem Feld in Elementor erscheint Halten Sie es kurz und übersichtlich, wie “Überschrift” oder “Knopftext”.
• Name: Die eindeutige Kennung für das Feld Es darf nur Buchstaben, Zahlen und Unterstriche enthalten, also keine Leerzeichen oder Striche Dieser Name wird zu Ihrem Shortcode, also ein Feld namens heading Gibt dir {{heading}}.
• Beschreibung: Unter dem Feld angezeigter optionaler Helfertext Erklären Sie damit, was die Eingabe steuert.
• Platzhalter: Der ausgegraute Hinweis, der angezeigt wird, wenn das Feld leer ist, zum Beispiel “Schreibe deine Überschrift” Er führt den Benutzer, ohne einen echten Wert festzulegen.
• Standardwert: Der Wert, mit dem das Feld beginnt Stellen Sie so etwas wie “Build Better Experiences” ein, damit das Widget fertig aussieht, bevor es jemand bearbeitet.

Gemeinsame Einstellungen: responsive, dynamische und mehr #

Nach unten scrollen, um Gemeinsame Einstellungen Für die Steuerelemente, die entscheiden, wie flexibel das Feld ist Hier schalten Sie responsive Werte und dynamische Tags ein.

• Etikett anzeigen: Schalten Sie um, ob die Beschriftung über dem Feld erscheint.
• Beschriftungsblock: Anzeige des Etiketts in einer eigenen Zeile über dem Eingang statt daneben.
• Responsive Kontrolle: Schalten Sie dies ein, damit Benutzer einen anderen Wert für Desktop, Tablet und Mobilgeräte festlegen können. Gut für Überschriften, die auf kleinen Bildschirmen kürzer sein müssen.
• Dynamische Unterstützung: Schalten Sie dies ein, um Elementordynamische Tags zu aktivieren, damit das Feld seinen Wert aus einer Quelle wie dem Beitragstitel oder dem Autorennamen anstelle von statischem Text ziehen kann.
• Frontend Verfügbar: Stellen Sie den Wert des Steuerelements für Frontend-JavaScript zur Verfügung Aktivieren Sie ihn, wenn das JS Ihres Widgets den Wert lesen muss.
• Trenner: Stellen Sie ein, wo eine Trennlinie um das Steuerelement herum erscheint (None, Before, After, Default).
• Bedingungen: Dieses Feld basierend auf dem Wert eines anderen Steuerelements anzeigen oder ausblenden Klicken Sie Bedingung hinzufügen Regel zu setzen.

Verbinden Sie das Feld mit Ihrem Code #

Jedes Textfeld generiert einen Shortcode aus seinem Namen Fügen Sie ein Feld mit dem Namen hinzu heading und der Token {{heading}} Wird in der Seitenleiste Dokumentation angezeigt Geben Sie das Token in Ihr HTML, wo auch immer der Text hingehört.

Für eine Helden-Überschrift ist die Veränderung gering:

• Ersetzen Sie den statischen Text in Ihrem Inneren <h1> Mit {{heading}}.
• Speichern Sie das Widget. Jetzt wird die <h1> Druckt den Wert aus, den der Benutzer in Elementor festlegt.

Da der Shortcode nur ein Token ist, kann man den gleichen Feldwert auch in CSS oder JS wiederverwenden Ein Feld, viele Stellen.

Verwenden Sie die Textsteuerung in Elementor #

Ziehen Sie Ihr benutzerdefiniertes Widget auf eine Seite und öffnen Sie es im Elementor-Editor Das Textfeld wird als normales Steuerelement angezeigt, wobei Ihr Etikett, Ihr Platzhalter und Ihr Standardwert bereits vorhanden sind. Neben der Eingabe befinden sich zwei kleine Symbole: a Gerätesymbol Für responsive Werte und a Symbol für dynamische Tags Als Sie diese Optionen aktiviert haben.

Geben Sie einen neuen Wert ein und das Widget aktualisiert live Im folgenden Beispiel schreibt das Ändern des Überschriftenfeldes die Heldenüberschrift auf der Seite um Derselbe Feldtyp funktioniert genauso gut für einen Absatz, eine Schaltflächenbeschriftung oder jede andere kurze Zeichenfolge Das ist der ganze Punkt des Textfeldes: Überall dort, wo ein Widget Text drucken muss, ist dies die Steuerung, die Sie verwenden.

Ziehen Sie Text von einem dynamischen Tag #

Klicken Sie mit Dynamic Support auf das Symbol für dynamische Tags und wählen Sie eine Quelle aus Master Addons und Elementor listen gruppierte Tags wie Archivtitel, Autorenname, Autoreninfo und Kommentarnummer Wählen Sie eins aus und das Feld zieht Live-Daten anstelle von statischem Text, was Sie davor bewahrt, denselben Titel über Dutzende von Beiträgen hinweg zu bearbeiten.

Legen Sie einen anderen Wert pro Gerät fest #

Klicken Sie bei eingeschalteter Responsive Control auf das Gerätesymbol, um zwischen Desktop, Tablet und Mobile zu wechseln, und geben Sie dann für jeden einen separaten Wert ein Eine lange Desktop-Überschrift kann auf Telefonen kürzer werden, ohne die Desktop-Version zu berühren Wissenswert: Wenn Sie das Tablet oder den mobilen Wert leer lassen, fällt er auf den Desktop-Text zurück, sodass Sie nur die Haltepunkte außer Kraft setzen, die ihn tatsächlich benötigen.

Häufige Anwendungsfälle #

• Heldenschlagzeilen dass Editoren ändern können, ohne den Code zu öffnen.
• Abschnitt Absätze und Kurzbeschreibungen.
• Tasten- und CTA-Etiketten Link des Widgets gebunden.
• Abzeichen, Tags und kleine Bildunterschriften Wo keine Formatierung erforderlich ist.
• Dynamische Titel Die aus dem Beitrag oder Archiv für wiederverwendbare Vorlagen ziehen.

Tipps für die Arbeit mit dem Feld Text #

• Felder sinnvoll benennen. Der Name wird also zu Ihrem Shortcode heading Liest sich besser im Code als field_1.
• Legen Sie immer einen Standardwert fest. Dadurch sieht das Widget im Editor und beim ersten Drop vollständig aus.
• Schalten Sie Responsive und Dynamic nur ein, wenn Sie sie benötigen. Zusätzliche Bedienelemente überladen das Panel für einfachen Text.
• Verwenden Sie Platzhalter als Anleitung, nicht als Inhalt. Es wird nie auf die Seite gedruckt, verlassen Sie sich also nicht darauf, um echten Text zu erhalten.
• Erstellen Sie das Feld, bevor Sie auf seinen Shortcode verweisen. Der Token existiert erst, wenn sich das Feld auf dem Panel befindet.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Text ist die einfachste Möglichkeit, ein benutzerdefiniertes Elementor-Widget bearbeitbar zu machen, es zu benennen, seinen Shortcode in Ihrem Code zu verwerfen, eine Voreinstellung festzulegen und den responsiven oder dynamischen Support einzuschalten, wenn ein Projekt danach aufruft Danach kann jeder den Text von Elementor aktualisieren, ohne eine Codezeile zu berühren Schauen Sie sich den Rest des Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.