Lorsqu'un widget personnalisé a besoin de plus d'une seule ligne, le Champ de zone de texte est celui à utiliser Il donne aux éditeurs une boîte multi-lignes pour les paragraphes, les descriptions, et tout bloc plus long de texte brut À l'intérieur des addons principaux Constructeur de widgets: vous déposez un champ Textarea dans votre panneau de widget, nommez-le et son shortcode imprime tout ce que l'utilisateur tape dans votre HTML, CSS ou JS.
Comme chaque champ Widget Builder, Textarea prend en charge Conditions(traduction), donc le contrôle peut apparaître seulement quand un autre champ l'appelle Son jeton imprime à travers le Moteur de modèles de syntaxe Twig, ce qui vous donne aussi des filtres comme |trim et {% if %} vérifie autour de la sortie.
Ça marche comme le Champ texte, avec un contrôle supplémentaire : Lignes(en anglais), qui définit la hauteur de la zone de saisie Utilisez le champ Texte pour les chaînes courtes d'une seule ligne comme un titre, et le champ Textarea pour le paragraphe qui se trouve en dessous.
Ce que fait le champ Textarea #
Le champ Textarea restitue une entrée de texte multi-lignes dans le panneau d'options du widget Lorsque quelqu'un modifie votre widget personnalisé dans Elementor, il saisit cette case et votre widget génère le texte partout où vous avez placé le shortcode correspondant Les sauts de ligne et la copie plus longue ne posent aucun problème, c'est ce qui le distingue du champ Texte à une seule ligne.
Pour le texte nécessitant un formatage en gras, en liens ou en listes, utilisez le Champ WYSIWYG au lieu de. Le champ Textarea est destiné au texte simple multiligne. Nouveau dans la construction de widgets ? Commencez par le Aperçu du constructeur de widgets.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Un widget personnalisé s'ouvre dans l'éditeur Widget Builder.
Comment ajouter un champ Textarea #
Dans l'éditeur Widget Builder, recherchez le panneau de champs à gauche et faites glisser le Zone de texte champ dans une section sous le Contenu, Style; ou Avancé onglet. Les champs de description et de paragraphe appartiennent habituellement sous Contenu Une fois le champ en place, ses options s'ouvrent à gauche et son shortcode apparaît dans le Documentation barre latérale à côté de l'éditeur de code.
Options du champ Zone de texte expliquées #
Sélectionnez le champ Textarea pour ouvrir ses paramètres Ces options contrôlent l'apparence et le comportement de l'entrée dans Elementor.
- Étiquette: le texte affiché ci-dessus le champ dans Elementor, par exemple “Description”.
- Nom: l'identifiant unique du champ Il doit contenir uniquement des lettres, des chiffres et des traits de soulignement Ce nom devient votre shortcode, donc un champ nommé
descriptionvous donne{{description}}. - Description: texte d'aide facultatif affiché sous le champ pour expliquer ce qu'il contrôle.
- Espace réservé : le faible indice affiché lorsque la boîte est vide Il guide l'éditeur sans définir de valeur réelle.
- Lignes: combien de lignes la zone de saisie mesure. La valeur par défaut est 3. augmentez-la pour une copie plus longue afin que les éditeurs puissent voir plus de texte à la fois.
- Valeur par défaut : le texte de départ Définissez ici un exemple de paragraphe pour que le widget ait l'air terminé avant que quiconque ne le modifie.
Paramètres communs : réactif, dynamique, et plus #
En dessous de la valeur par défaut, vous obtenez la même chose Paramètres communs comme tous les autres champs du constructeur Ceux que vous atteindrez pour la plupart :
- Afficher l'étiquette et Bloc d'étiquettes : contrôlez si l'étiquette apparaît et où elle se trouve.
- Contrôle réactif : laissez les éditeurs définir différents textes pour le bureau, la tablette et le mobile.
- Support dynamique : activez les balises dynamiques Elementor afin que le champ puisse extraire sa valeur d'une source comme l'extrait de message.
- Frontend disponible : exposez la valeur à frontend JavaScript lorsque le JS de votre widget doit la lire.
- Séparateur et Conditions: ajoutez un diviseur ou affichez et masquez le champ en fonction d'un autre contrôle.
Ceux-ci se comportent de la même manière qu'ils le font sur le champ Texte, donc le Documentation du champ de texte couvre chacun en détail.
Connectez le champ à votre code #
Chaque champ Textarea génère un shortcode à partir de son Nom Un champ nommé description produit le jeton {{description}} dans la barre latérale Documentation. Déposez ce jeton dans votre HTML à l'endroit où appartient le paragraphe, généralement à l'intérieur d'un <p> balise.
Dans une mise en page de héros, le motif est simple : le Champ texte token se trouve dans le <h1>« , et le jeton Textarea se trouve dans le » <p> en dessous. Enregistrez le widget et les deux lignes impriment toutes les valeurs saisies par l'utilisateur dans Elementor. Le même jeton fonctionne également dans votre CSS ou JS si vous avez besoin du texte.
Utilisez le contrôle Textarea dans Elementor #
Faites glisser votre widget personnalisé sur une page et ouvrez-le dans l'éditeur Elementor Le champ Textarea apparaît sous la forme d'une boîte multiligne avec votre étiquette, votre espace réservé et votre valeur par défaut déjà renseignés Tapez ou collez votre copie et les mises à jour du widget en direct sur le canevas.
Parce qu'il s'agit d'un contrôle Elementor standard, il se trouve juste à côté du reste des champs de votre widget Si vous avez activé le support dynamique, l'icône des balises dynamiques apparaît à côté de la boîte afin que les éditeurs puissent tirer le texte d'une source au lieu de le taper. Une petite chose à retenir : le Textarea génère du texte brut, donc une coupure de ligne dans la boîte devient une coupure de ligne, pas un nouveau paragraphe. Si vous avez besoin de véritables balises de paragraphe, c'est une tâche pour le champ WYSIWYG.
Zone de texte vs texte vs WYSIWYG #
Le constructeur vous donne trois entrées de texte Choisissez celle qui correspond au contenu :
| Champ de campagne | Meilleur pour | Formatage |
|---|---|---|
| Texte | Chaînes courtes d'une seule ligne (titres, étiquettes, texte de bouton) | Texte brut, une ligne |
| Zone de texte | Texte brut multiligne (paragraphes, descriptions) | Texte brut, plusieurs lignes |
| WYSIWYG | Un contenu riche qui a besoin de style | Gras, liens, listes, titres |
Cas d'utilisation courants #
- Descriptions de héros sous un titre.
- Intros de section et comportent des flou.
- Texte de corps de carte ou de témoignage.
- Biographie courte et copie sur nous.
- Tout paragraphe simple un éditeur devrait pouvoir changer sans code.
Conseils pour travailler avec le champ Textarea #
- Définissez des lignes adaptées au contenu. Trois rangées conviennent à un court texte de présentation Utilisez cinq ou plus pour des descriptions plus longues afin que les éditeurs ne combattent pas une petite boîte.
- Ajoutez toujours une valeur par défaut. Il garde le widget complet dès qu'il est déposé sur une page.
- Nommez clairement le champ.
descriptionlit mieux dans votre code quefield_2&, et ça devient le shortcode. - Atteignez WYSIWYG uniquement lorsque vous avez besoin de formatage. Les paragraphes simples restent plus propres dans une zone de texte.
- Construisez le champ avant de référencer son shortcode. Le jeton n'existe qu'une fois que le champ est sur le panneau.
Foire aux questions #
Quel est le champ Textarea dans le Master Addons Widget Builder ?
Le champ Textarea ajoute une zone de texte multi-lignes à un widget Elementor personnalisé Vous nommez le champ, placez son shortcode dans votre code, et tout ce qu'un utilisateur tape dans Elementor imprime dans votre widget Il convient aux paragraphes et au texte brut plus long.
Quelle est la différence entre le champ Texte et le champ Zone de texte ?
Le champ Texte est une entrée à ligne unique pour les chaînes courtes comme les titres et les étiquettes Le champ Textarea est une boîte à lignes multiples pour les paragraphes et les descriptions, et il ajoute une option Lignes pour contrôler la hauteur de l'entrée.
Que fait l'option Rows ?
Rows définit le nombre de lignes hautes que la zone Textarea apparaît dans le panneau Élémenteur La valeur par défaut est 3. l'augmenter donne aux éditeurs une case plus haute afin qu'ils puissent voir un paragraphe plus long tout en tapant Il ne limite pas la quantité de texte qu'ils peuvent entrer.
Le champ Textarea peut-il utiliser des balises dynamiques ?
Oui. Activez le support dynamique dans les paramètres communs du champ Dans Elementor, l'icône des balises dynamiques apparaît alors à côté de la case, afin que le champ puisse extraire son texte d'une source dynamique comme l'extrait de publication au lieu du contenu statique.
Dois-je utiliser un Textarea ou le champ WYSIWYG ?
Utilisez le champ Textarea pour un texte simple multiligne sans formatage Utilisez le champ WYSIWYG lorsque le contenu a besoin de gras, d'italique, de liens, de listes ou de titres, car il donne aux éditeurs un éditeur visuel complet au lieu d'une boîte simple.
Envelopper #
Le champ Widget Builder Textarea est le moyen le plus simple de rendre modifiable un paragraphe dans un widget Elementor personnalisé Nommez-le, définissez les lignes, ajoutez un code par défaut et déposez son shortcode dans votre code Après cela, n'importe qui peut mettre à jour la copie d'Elementor sans toucher au balisage Jetez un œil au reste du Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
