Champ de texte

Le Champ texte est celui que vous atteignez pour n'importe quel moment un widget personnalisé a besoin d'une ligne de texte que quelqu'un peut modifier : un titre, une étiquette, une courte légende, un mot bouton À l'intérieur des modules complémentaires principaux Constructeur de widgets: vous déposez un champ Texte dans votre panneau de widget, lui donnez un nom, et ce nom devient un shortcode que vous placez dans votre HTML, CSS ou JS. Quels que soient les types d'utilisateurs dans Elementor, ils s'impriment directement dans votre balisage.

Comme chaque champ Widget Builder, le champ Texte prend en charge Conditions(, pour que vous puissiez afficher ou masquer le contrôle en fonction de la valeur d'un autre champ Sa sortie passe également par celle du constructeur Moteur de modèles de syntaxe Twig« , ce qui vous permet d'envelopper le jeton » {% if %} vérifie ou applique des filtres comme |upper. Les deux guides couvrent la configuration et les limites.

Cependant, il fait plus que d'imprimer une chaîne simple. Le champ Texte se connecte aux commandes réactives et aux balises dynamiques d'Elementor, de sorte qu'un champ peut contenir un titre différent sur mobile que sur ordinateur de bureau, ou tirer sa valeur d'une source dynamique comme le titre du message.

Ce que fait le champ Texte #

Un champ Texte restitue une entrée de texte sur une seule ligne dans le panneau d'options du widget Lorsque quelqu'un modifie votre widget personnalisé dans Elementor, il voit cette entrée, tape une valeur et votre widget la délivre partout où vous avez placé le shortcode correspondant.

Il se marie bien avec les autres champs d'entrée du constructeur Pour un contenu multi-lignes plus long, atteindre le Champ Zone de texte. Pour le contenu formaté riche, utilisez le Champ WYSIWYG. Le champ Texte est le bon choix pour les chaînes courtes et simples Si vous êtes nouveau dans la création de widgets, lisez le Aperçu du constructeur de widgets d'abord.

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 Texte #

Dans l'éditeur Widget Builder, recherchez le panneau de champs à gauche, puis faites glisser le Texte champ dans une section sous le Contenu, Style; ou Avancé onglet. La plupart des entrées de texte appartiennent sous Contenu Une fois qu'il est en place, les options du champ s'ouvrent à gauche et son shortcode apparaît dans le Documentation barre latérale à côté de l'éditeur de code.

Options du champ de texte expliquées #

Sélectionnez le champ Texte pour ouvrir ses paramètres Ces options contrôlent l'apparence et le comportement de l'entrée dans le panneau Élémenteur.

• Étiquette: le texte qui apparaît au-dessus du champ dans Elementor Gardez-le court et clair, comme “Heading” ou “Button Text”.
• Nom: l'identifiant unique pour le champ Il doit contenir seulement des lettres, des chiffres, et des traits de soulignement, donc pas d'espaces ou de tirets Ce nom devient votre shortcode, donc un champ nommé heading vous donne {{heading}}.
• Description: texte d'aide facultatif affiché sous le champ Utilisez-le pour expliquer ce que contrôle l'entrée.
• Espace réservé : l'indice grisé affiché lorsque le champ est vide, par exemple “Écrivez votre titre” Il guide l'utilisateur sans définir de valeur réelle.
• Valeur par défaut : la valeur avec laquelle le champ commence. Définissez quelque chose comme « Construire de meilleures expériences » afin que le widget ait l'air terminé avant que quiconque ne le modifie.

Paramètres communs : réactif, dynamique, et plus #

Faites défiler jusqu'à Paramètres communs pour les contrôles qui décident de la flexibilité du champ C'est là que vous activez les valeurs réactives et les balises dynamiques.

• Afficher l'étiquette : basculer si l'étiquette apparaît au-dessus du champ.
• Bloc d'étiquettes : affichez l'étiquette sur sa propre ligne au-dessus de l'entrée plutôt qu'à côté.
• Contrôle réactif : allumez ceci pour permettre aux utilisateurs de définir une valeur différente pour le bureau, la tablette et le mobile. Bon pour les titres qui doivent être plus courts sur les petits écrans.
• Support dynamique : activez ceci pour activer les balises dynamiques Elementor, afin que le champ puisse extraire sa valeur d'une source telle que le titre de la publication ou le nom de l'auteur au lieu du texte statique.
• Frontend disponible : mettez la valeur du contrôle à disposition pour faire frontend JavaScript Activez-la lorsque le JS de votre widget doit lire la valeur.
• Séparateur : définir où une ligne de démarcation apparaît autour de la commande (Aucun, Avant, Après, Par défaut).
• Conditions: afficher ou masquer ce champ en fonction de la valeur d'un autre contrôle Cliquez sur Ajouter Condition pour fixer la règle.

Connectez le champ à votre code #

Chaque champ Texte génère un shortcode à partir de son Nom Ajouter un champ nommé heading et le jeton {{heading}} apparaît dans la barre latérale Documentation. Déposez ce jeton dans votre HTML où que le texte appartienne.

Pour un titre de héros, le changement est minime :

• Remplacez le texte statique à l'intérieur de votre <h1> avec {{heading}}.
• Enregistrer le widget. Maintenant le <h1> imprime la valeur définie par l'utilisateur dans Elementor.

Puisque le shortcode n'est qu'un jeton, vous pouvez réutiliser la même valeur de champ dans CSS ou JS aussi Un champ, plusieurs endroits.

Utilisez le contrôle Texte dans Elementor #

Faites glisser votre widget personnalisé sur une page et ouvrez-le dans l'éditeur Elementor Le champ Texte apparaît comme un contrôle normal avec votre étiquette, votre espace réservé et votre valeur par défaut déjà en place Deux petites icônes se trouvent à côté de l'entrée : a icône de l'appareil pour des valeurs réactives, et a icône des balises dynamiques lorsque vous avez activé ces options.

Tapez une nouvelle valeur et les mises à jour du widget en direct Dans l'exemple ci-dessous, la modification du champ de titre réécrit le titre du héros sur la page Le même type de champ fonctionne tout aussi bien pour un paragraphe, une étiquette de bouton ou toute autre chaîne courte C'est tout l'intérêt du champ Texte : partout où un widget a besoin d'imprimer du texte, c'est le contrôle que vous utilisez.

Tirez du texte à partir d'une balise dynamique #

Avec le support dynamique activé, cliquez sur l'icône des balises dynamiques et choisissez une source. Les modules complémentaires principaux et la liste des éléments groupés, tels que le titre de l'archive, le nom de l'auteur, les informations sur l'auteur et le numéro de commentaires. Sélectionnez-en un et le champ extrait les données en direct au lieu du texte statique, ce qui vous évite d'éditer le même titre sur des dizaines de publications.

Définissez une valeur différente par appareil #

Avec Responsive Control allumé, cliquez sur l'icône de l'appareil pour basculer entre Bureau, Tablette et Mobile, puis entrez une valeur distincte pour chacun Un long titre de bureau peut devenir un plus court sur les téléphones sans toucher à la version de bureau. Il convient de le savoir : si vous laissez la tablette ou la valeur mobile vide, elle retombe sur le texte du bureau, vous ne remplacez donc que les points d'arrêt qui en ont réellement besoin.

Cas d'utilisation courants #

• Titres héros que les éditeurs peuvent changer sans ouvrir le code.
• Paragraphes de section et de courtes descriptions.
• Étiquettes bouton et CTA lié au lien du widget.
• Badges, étiquettes et petites légendes où le formatage n'est pas nécessaire.
• Titres dynamiques qui extraient de la publication ou de l'archive pour les modèles réutilisables.

Conseils pour travailler avec le champ Texte #

• Nommez les champs de manière significative. Le Nom devient votre shortcode, donc heading lit mieux dans le code que field_1.
• Définissez toujours une valeur par défaut. Il garde le widget complet dans l'éditeur et dès la première goutte.
• N'allumez Responsive and Dynamic que lorsque vous en avez besoin. Des commandes supplémentaires encombrent le panneau pour un texte simple.
• Utilisez Placeholder comme guide, pas comme contenu. Il n'imprime jamais sur la page, alors ne comptez pas sur elle pour un texte réel.
• Construisez le champ avant de référencer son shortcode. Le jeton n'existe qu'une fois le champ sur le panneau.

Foire aux questions #

Envelopper #

Le champ Widget Builder Text est le moyen le plus simple de rendre modifiable un widget Elementor personnalisé Nommez-le, déposez son shortcode dans votre code, définissez une valeur par défaut et activez le support réactif ou dynamique lorsqu'un projet l'appelle. Après cela, n'importe qui peut mettre à jour le texte d'Elementor sans toucher une ligne de code. Jetez un œil au reste du Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.