Les boutons et les liens ont besoin de plus qu'une adresse web Ils ont besoin d'une bascule d'ouverture dans la nouvelle fenêtre, d'une option de non-suivi, et parfois d'attributs personnalisés Le Champ URL dans les addons maîtres Constructeur de widgets donne à votre widget personnalisé le même contrôle de lien que celui utilisé par Elementor partout ailleurs, afin que les éditeurs obtiennent un sélecteur de liens familier au lieu d'une zone de texte brut.
Comme chaque champ Widget Builder, le champ URL prend en charge Conditions. Sa valeur passe par le Moteur de modèles de syntaxe Twig avec accès en pointillés, {{ link.url }}, {{ link.is_external }}(en), donc chaque partie atterrit dans l'attribut de droite Les deux guides couvrent les détails.
Vous déposez un champ URL dans votre panneau de widgets, choisissez les options de lien à exposer et connectez-le à votre balisage avec un shortcode Ce guide est axé sur le champ URL, mais il tombe également rapidement Champ texte vous pouvez donc définir l'étiquette du bouton en même temps.
Ce que fait le champ URL #
Le champ URL rend le contrôle de lien d'Elementor dans le panneau d'options de votre widget Les éditeurs collent un lien, retournent les options dont ils ont besoin et votre widget génère une balise d'ancrage appropriée Un champ Texte contenant une adresse brute ne peut pas faire cela Le champ URL gère les attributs cible et rel pour vous, donc les liens externes s'ouvrent correctement et nofollow est à un clic.
Il s'associe naturellement à un champ Texte pour l'étiquette visible Dans un bouton d'appel à l'action, le champ URL porte le lien et le champ Texte porte les mots sur le bouton.
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 Si c'est votre premier, lisez le Aperçu du constructeur de widgets d'abord.
Comment ajouter un champ URL #
Dans l'éditeur Widget Builder, recherchez le panneau de champs à gauche et faites glisser le URL champ dans une section sous le Contenu, Style; ou Avancé onglet. Les contrôles de liens vivent habituellement 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 URL expliquées #
Sélectionnez le champ URL pour ouvrir ses paramètres Les premières options correspondent aux autres champs, puis vous obtenez un ensemble de choix spécifiques au lien.
- Étiquette: le texte affiché au-dessus du contrôle dans Elementor, par exemple “Url” ou “Button Link”.
- Nom: l'identifiant unique du champ Lettres, chiffres, et soulignements seulement Cela devient votre shortcode, donc un champ nommé
urlvous donne{{url}}. - Description: texte d'aide facultatif affiché sous le contrôle.
- Espace réservé : le léger indice affiché dans la zone de lien lorsqu'elle est vide.
- Valeur par défaut : un lien de départ, si vous voulez que le bouton pointe quelque part avant que quiconque ne le modifie.
Options d'URL #
Le Options d'URL group décide quelles parties du contrôle de lien apparaissent dans Elementor. Cochez uniquement ce dont le widget a besoin :
- Entrée d'URL : le champ de lien lui-même, où l'éditeur colle l'adresse.
- Ouvrir dans une nouvelle fenêtre : une bascule qui définit
target="_blank"sur le lien. - Ajouter nonsuivre: une bascule qui ajoute
rel="nofollow"(, utile pour les liens sponsorisés ou non fiables). - Attributs personnalisés : un champ pour des attributs supplémentaires
key|valueformat, pratique pour les crochets d'analyse ou les attributs de données.
Paramètres communs : réactif, dynamique, et plus #
Sous les options d'URL, vous obtenez les mêmes Paramètres communs comme chaque champ dans le constructeur : Afficher l'étiquette, le bloc d'étiquettes, le contrôle réactif, le support dynamique, le frontend disponible, le séparateur et les conditions Le support dynamique est ici utile, car il permet au lien de tirer depuis une source dynamique Documentation du champ de texte explique chacun de ces éléments en détail.
Connectez le champ à votre code #
Le champ URL vous donne un shortcode plus quelques sous-jetons, vous pouvez donc mapper chaque option de lien à l'attribut HTML droit Pour un champ nommé url:
{{url.url}}délivre l'adresse de lien pour lehrefattribut.{{url.is_external}}génère la cible, donc la bascule “Open dans une nouvelle fenêtre” fonctionne.{{url.nofollow}}génère la valeur rel pour le bascule “Add nofollow”.
Déposez-les dans une balise d'ancrage et ajoutez-en une Champ texte jeton comme {{button_text}} pour l'étiquette visible :
L'ancre tire maintenant son lien, sa cible et son rel du contrôle d'URL unique, et le champ Texte fournit les mots Enregistrer le widget et le bouton restitue avec tout ce que l'éditeur définit Une chose qui mérite d'être connue : si vous placez seulement {{url}} seul, vous obtenez l'adresse mais pas le comportement cible ou non, alors utilisez les sous-jetons lorsque ceux-ci basculent comptent.
Utilisez le contrôle d'URL dans Elementor #
Faites glisser votre widget personnalisé sur une page et ouvrez-le dans l'éditeur Elementor Le champ URL apparaît comme contrôle de lien standard : une case pour l'adresse, plus les basculements que vous avez activés Collez un lien, activez “Ouvrez dans une nouvelle fenêtre” si nécessaire, et le bouton met à jour en direct.
Dans la démo, le champ Texte étiqueté“Button Text” définit le bouton sur “Choose Your Plan”, et le champ URL le pointe sur le lien cible Deux petits champs, et vous avez un bouton d'appel à l'action entièrement modifiable que tout le monde peut mettre à jour depuis Elementor.
Cas d'utilisation courants #
- Boutons d'appel à l'action avec un lien modifiable, du texte et un comportement de nouvelle fenêtre.
- Boutons de tarification ou de plan ce point à la caisse.
- Lire plus de liens sur les cartes et les blocs de fonctionnalités.
- Liens sponsorisés ou affiliés où aucun suivi n’a d’importance.
- Liens suivis utilisation d'attributs personnalisés pour les données analytiques.
Conseils pour travailler avec le champ URL #
- N'exposez que les options dont vous avez besoin. Si un bouton n'ouvre jamais un nouvel onglet, laissez cette option désactivée pour garder le contrôle propre.
- Utilisez les sous-jetons, pas seulement
{{url}}. Carte{{url.url}},{{url.is_external}}, et{{url.nofollow}}donc chaque bascule fait réellement quelque chose. - Associez-le à un champ Texte pour l'étiquette du bouton au lieu de coder en dur les mots de votre HTML.
- Activez nofollow pour les liens sponsorisés pour rester sur le bon côté des directives de recherche.
- 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 URL dans le Master Addons Widget Builder ?
Le champ URL ajoute le contrôle de lien d'Elementor à un widget personnalisé Les éditeurs collent un lien et basculent des options comme ouvrir dans une nouvelle fenêtre et nofollow, et votre widget génère une balise d'ancrage appropriée en utilisant le shortcode et les sous-jetons du champ.
Comment puis-je faire fonctionner le bouton “Open in new window” dans mon widget personnalisé ?
Utilisez le sous-jeton de votre balise d'ancrage Pour un champ nommé url, réglé target="{{url.is_external}}" sur le lien Lorsque l'éditeur retourne la bascule dans Elementor, l'attribut cible se met à jour afin que le lien s'ouvre dans un nouvel onglet.
Puis-je ajouter nofollow à un lien dans un widget Widget Builder ?
Oui. Activer Ajouter un non-suivre dans les Options URL du champ, puis sortir rel="{{url.nofollow}}" sur votre balise ancre Lorsque l'éditeur active nofollow dans Elementor, l'attribut rel est ajouté automatiquement.
Comment définir le texte du bouton séparément du lien ?
Ajouter un champ Texte à côté du champ URL Le champ URL porte le lien, et le champ Texte porte l'étiquette visible Placez le jeton du champ Texte, comme {{button_text}}20, entre les étiquettes dʼancrage dʼouverture et de fermeture.
À quoi servent les attributs personnalisés ?
Les attributs personnalisés permettent aux éditeurs d'ajouter des attributs HTML supplémentaires au lien key|value format. Ils sont utiles pour les crochets d'analyse, les attributs de données ou tout attribut dont vos scripts ou outils de suivi ont besoin sur l'élément d'ancrage.
Envelopper #
Le champ URL Widget Builder transforme un lien simple en un contrôle de lien Elementor complet à l'intérieur de votre propre widget personnalisé Choisissez les options à exposer, connectez les sous-jetons à votre balise d'ancrage, associez-le à un champ Texte pour l'étiquette, et vous avez un bouton modifiable qui gère les liens, les nouvelles fenêtres et le non-suivre sans balisage codé en dur Jetez un œil au reste du Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
