Wenn ein benutzerdefiniertes Widget mehr als eine einzige Zeile benötigt, ist die Textarea-feld Ist die zu verwendende Es gibt Redakteuren eine mehrzeilige Box für Absätze, Beschreibungen und jeden längeren Block von Klartext In den Master Addons Widget-builder„Sie legen ein Textarea-Feld in Ihr Widget-Panel, benennen es und sein Shortcode gibt alles aus, was der Benutzer in Ihr HTML, CSS oder JS eingibt.
Wie jedes Widget Builder-Feld unterstützt das Textarea BedingungenDas Steuerelement kann also nur erscheinen, wenn ein anderes Feld es aufruft. Sein Token druckt durch die Twig-Syntax-Vorlagen-Engine, wodurch Sie auch Filter wie erhalten |trim und {% if %} Prüft rund um die Ausgabe.
Es funktioniert wie die TextfeldMit einer zusätzlichen Steuerung: Reihen, die festlegt, wie hoch das Eingabefeld ist Verwenden Sie das Textfeld für kurze einzeilige Zeichenfolgen wie eine Überschrift und das Textarea-Feld für den Absatz, der darunter liegt.
Was das Feld Textarea macht #
Das Feld Textarea rendert eine mehrzeilige Texteingabe im Optionsfeld des Widgets, wenn jemand Ihr benutzerdefiniertes Widget in Elementor bearbeitet, gibt er in dieses Feld ein und Ihr Widget gibt den Text überall dort aus, wo Sie den passenden Shortcode platziert haben Zeilenumbrüche und längere Kopien sind kein Problem, was es vom einzeiligen Textfeld unterscheidet.
Für Text, der formatiert werden muss, wie Fettdruck, Links oder Listen, verwenden Sie die WYSIWYG-Feld Stattdessen Das Feld Textarea ist für einfachen mehrzeiligen Text Neu beim Erstellen von Widgets? mit dem beginnen Übersicht über Widget Builder.
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 Textarea-Feld hinzu #
Suchen Sie im Widget Builder-Editor das Feldfeld auf der linken Seite und ziehen Sie die Textbereich Feld in einen Abschnitt unter dem Inhalt, Stil, oder Fortgeschritten Tab. Beschreibung und Absatzfelder gehören in der Regel unter Inhalt, ist das Feld einmal an Ort und Stelle, öffnen sich links seine Optionen und sein Shortcode erscheint im Dokumentation Seitenleiste neben dem Code-Editor.
Textarea Feldoptionen erklärt #
Wählen Sie das Feld Textarea, um seine Einstellungen zu öffnen Diese Optionen steuern, wie die Eingabe in Elementor aussieht und sich verhält.
- Etikett: Der über dem Feld in Elementor gezeigte Text, zum Beispiel “Beschreibung”.
- Name: Die eindeutige Kennung für das Feld Es darf nur Buchstaben, Zahlen und Unterstriche enthalten Dieser Name wird zu Ihrem Shortcode, also ein Feld mit dem Namen
descriptionGibt dir{{description}}. - Beschreibung: Optionaler Helfertext, der unter dem Feld angezeigt wird, um zu erklären, was er steuert.
- Platzhalter: Der schwache Hinweis wird angezeigt, wenn die Box leer ist. Es führt den Editor, ohne einen echten Wert festzulegen.
- Reihen: Wie viele Zeilen das Eingabefeld hoch ist Standard ist 3. Bump it up für längere Kopie, damit Redakteure mehr Text auf einmal sehen können.
- Standardwert: Der Starttext Legen Sie hier einen Beispielabsatz fest, damit das Widget fertig aussieht, bevor es jemand bearbeitet.
Gemeinsame Einstellungen: responsive, dynamische und mehr #
Unterhalb des Standardwerts erhalten Sie dasselbe Gemeinsame Einstellungen Wie jedes andere Feld im Bauherren Die, die Sie am meisten erreichen werden:
- Etikett anzeigen und Beschriftungsblock: Kontrollieren, ob das Etikett angezeigt wird und wo es sitzt.
- Responsive Kontrolle: Lassen Sie Redakteure unterschiedlichen Text für Desktop, Tablet und Mobilgeräte festlegen.
- Dynamische Unterstützung: Aktivieren Sie dynamische Elementortags, damit das Feld seinen Wert aus einer Quelle wie dem Beitragsauszug ziehen kann.
- Frontend Verfügbar: Stellen Sie den Wert Front-End-JavaScript zur Verfügung, wenn das JS Ihres Widgets es lesen muss.
- Trenner und Bedingungen: Fügen Sie einen Teiler hinzu oder zeigen und verbergen Sie das Feld basierend auf einem anderen Steuerelement.
Diese verhalten sich auf dem Feld Text genauso wie sie, also die Textfelddokumentation Handelt sich jeweils ausführlich um.
Verbinden Sie das Feld mit Ihrem Code #
Jedes Textarea-Feld generiert einen Shortcode aus seinem Namen. Ein Feld namens description Den Token produziert {{description}} In der Seitenleiste Dokumentation. Lassen Sie das Token in Ihr HTML fallen, wo der Absatz hingehört, normalerweise innerhalb eines <p> Tag.
In einem Heldenlayout ist das Muster einfach: das Textfeld Token sitzt in der <h1>und der Textarea-Token sitzt im <p> Darunter Speichern Sie das Widget, und beide Zeilen drucken alle Werte aus, die der Benutzer in Elementor eingibt Das gleiche Token funktioniert auch in Ihrem CSS oder JS, wenn Sie den Text dort benötigen.
Verwenden Sie die Textarea-Steuerung in Elementor #
Ziehen Sie Ihr benutzerdefiniertes Widget auf eine Seite und öffnen Sie es im Elementor-Editor Das Textarea-Feld wird als mehrzeiliges Feld angezeigt, in dem Ihr Etikett, Ihr Platzhalter und Ihr Standardwert bereits ausgefüllt sind Geben Sie Ihre Kopie und die Widget-Updates live auf der Leinwand ein oder fügen Sie sie ein.
Da es sich um ein Standardelementor-Steuerelement handelt, sitzt es direkt neben den restlichen Feldern Ihres Widgets, wenn Sie den dynamischen Support eingeschaltet haben, wird das dynamische Tags-Symbol neben dem Feld angezeigt, damit Redakteure den Text aus einer Quelle ziehen können, anstatt ihn einzugeben Eine Kleinigkeit, die Sie beachten sollten: Der Textarea gibt Klartext aus, sodass ein Zeilenumbruch im Feld zu einem Zeilenumbruch wird, nicht zu einem neuen Absatz Wenn Sie echte Absatz-Tags benötigen, ist das eine Aufgabe für das WYSIWYG-Feld.
Textarea vs. Text vs. WYSIWYG #
Der Builder gibt Ihnen drei Texteingaben Wählen Sie die zum Inhalt passende aus:
| Feld | Am besten für | Formatierung |
|---|---|---|
| Text | Kurze einzeilige Zeichenfolgen (Schlagzeilen, Beschriftungen, Schaltflächentext) | Klartext, eine Zeile |
| Textbereich | Mehrzeiliger Klartext (Absätze, Beschreibungen) | Klartext, mehrere Zeilen |
| WYSIWYG | Reichhaltiger Inhalt, der gestylt werden muss | Fett, Links, Listen, Überschriften |
Häufige Anwendungsfälle #
- Heldenbeschreibungen Unter einer Überschrift.
- Abschnittsintros und Feature Klappentexte.
- Karte oder Zeugnistext.
- Kurzbios und über-uns-kopie.
- Jeder einfache Absatz Ein Editor sollte sich ohne Code ändern können.
Tipps für die Arbeit mit dem Feld Textarea #
- Legen Sie Zeilen fest, die zum Inhalt passen. Drei Reihen passen zu einem kurzen Klappentext. Verwenden Sie fünf oder mehr für längere Beschreibungen, damit die Redakteure nicht gegen eine winzige Box kämpfen.
- Fügen Sie immer einen Standardwert hinzu. Es sorgt dafür, dass das Widget vollständig aussieht, sobald es auf einer Seite verworfen wird.
- Nennen Sie das Feld deutlich.
descriptionLiest sich in deinem Code besser alsfield_2, und es wird zum Shortcode. - Greifen Sie nur dann nach WYSIWYG, wenn Sie eine Formatierung benötigen. Einfache Absätze bleiben in einem Textarea sauberer.
- 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 Textarea-Feld im Master Addons Widget Builder?
Das Feld Textarea fügt einem benutzerdefinierten Elementor-Widget ein mehrzeiliges Textfeld hinzu Sie benennen das Feld, platzieren seinen Shortcode in Ihrem Code, und was auch immer ein Benutzer in Elementor eingibt, druckt in Ihr Widget Es passt zu Absätzen und längerem Klartext.
Was ist der Unterschied zwischen dem Feld Text und dem Feld Textarea?
Das Textfeld ist eine einzeilige Eingabe für kurze Zeichenfolgen wie Überschriften und Beschriftungen. Das Textarea-Feld ist ein mehrzeiliges Feld für Absätze und Beschreibungen und fügt eine Zeilenoption hinzu, um die Höhe der Eingabe zu steuern.
Was macht die Option Reihen?
Zeilen legt fest, wie viele Zeilen hoch das Textarea-Feld im Elementor-Panel erscheint Standard ist 3. Durch Erhöhen erhält der Editor ein höheres Feld, sodass er beim Tippen mehr von einem langen Absatz sehen kann. Es schränkt nicht ein, wie viel Text er eingeben kann.
Kann das Textarea-Feld dynamische Tags verwenden?
Ja. Dynamische Unterstützung in den Gemeinsamen Einstellungen des Feldes einschalten In Elementor erscheint dann das Symbol für dynamische Tags neben dem Feld, sodass das Feld seinen Text aus einer dynamischen Quelle wie dem Beitragsauszug anstelle von statischem Inhalt ziehen kann.
Soll ich ein Textarea oder das WYSIWYG Feld verwenden?
Verwenden Sie das Feld Textarea für einfachen mehrzeiligen Text ohne Formatierung Verwenden Sie das Feld WYSIWYG, wenn der Inhalt fett, kursiv, verlinkt, listet oder überschriften benötigt, da es Redakteuren einen vollständigen visuellen Editor anstelle eines einfachen Feldes gibt.
Einwickelnd #
Das Feld Widget Builder Textarea ist die einfachste Möglichkeit, einen Absatz in einem benutzerdefinierten Elementor-Widget bearbeitbar zu machen, ihn zu benennen, die Zeilen festzulegen, eine Voreinstellung hinzuzufügen und seinen Shortcode in Ihrem Code zu verwerfen Danach kann jeder die Kopie von Elementor aktualisieren, ohne das Markup 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.
