Frontière

Le Champ frontalier donne à un widget personnalisé un ensemble complet de contrôles aux frontières en une seule goutte : une liste déroulante Type de frontière, des entrées Border Width par côté et un sélecteur de couleur de frontière à l'intérieur des modules complémentaires principaux Constructeur de widgets« , vous ajoutez le champ une fois, placez son shortcode dans votre CSS, et toute personne modifiant le widget dans Elementor peut relooker la bordure sans toucher au code ».

Le contrôle des frontières soutient Conditions comme chaque champ, il peut donc rester caché jusqu'à ce qu'une bascule de bordure soit activée et que la sortie du jeton sur le constructeur soit rendue par le Moteur de modèles de syntaxe Twig. Les deux guides couvrent les détails.

Le champ correspond directement au CSS border raccourci. Quel que soit le type, la largeur et la couleur que l'utilisateur choisit dans les impressions du panneau dans votre feuille de style, où que vous mettiez le jeton.

Ce que fait le champ Frontière #

Un champ Frontière rend le contrôle familier du groupe de frontières d'Elementor dans le panneau d'options de votre widget Sélectionnez le widget et trois contrôles associés apparaissent :

• Type de frontière : une liste déroulante avec défaut, aucun, solide, double, pointillé, pointillé et rainure.
• Largeur de la frontière : Entrées supérieure, droite, inférieure et gauche avec un lien basculer pour définir les quatre à la fois, plus une icône de périphérique pour les valeurs réactives.
• Couleur de la bordure : un sélecteur de couleurs avec accès à vos couleurs mondiales.

Les commandes Largeur et Couleur restent cachées jusqu'à ce que l'utilisateur choisisse un type de bordure autre que Default or None, ce qui maintient le panneau propre lorsqu'aucune bordure n'est utilisée. C'est le même motif que le Champ texte et les autres champs Widget Builder : lâchez le champ, nommez-le, utilisez le jeton Si vous êtes nouveau dans la construction de widgets, commencez par 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 Notre exemple est un widget de titre avec un <h2 class="border-title"> dans son HTML.

Comment ajouter un champ Frontière #

Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Frontière champ. Il se situe près du bas de la liste, entre l'arrière-plan et l'ombre du texte.

Faites glisser le champ Frontière dans une section sous le Contenu, Style; ou Avancé onglet. Le style est la maison naturelle pour elle, bien qu'il fonctionne n'importe où Une fois qu'il atterrit, les options du champ s'ouvrent sur la gauche et son shortcode apparaît dans le Documentation barre latérale à côté de l'éditeur de code.

Options du champ frontalier expliquées #

Sélectionnez le champ Frontière pour ouvrir ses paramètres Ils suivent la même disposition que tous les autres champs Widget Builder.

• Étiquette: le texte affiché ci-dessus le contrôle dans Elementor, “Border” par défaut.
• Nom: l'identifiant unique du champ Il doit contenir uniquement des lettres, des chiffres et des traits de soulignement Un champ nommé border vous donne le {{border}} shortcode.
• Description: texte d'aide facultatif affiché sous le contrôle.
• Valeur par défaut : la bordure avec laquelle commence le widget, écrite par exemple sous forme de raccourci CSS 1px solid #333. Laissez-le vide et le widget est livré sans bordure jusqu'à ce qu'un utilisateur en définisse une.
• Afficher l'étiquette et Bloc d'étiquettes : l'étiquette standard bascule, ainsi que les commandes habituelles du séparateur et des conditions plus bas.

Connectez le champ à votre CSS #

Le jeton du champ Border appartient à votre feuille de style, pas à votre HTML. Ouvrez le CSS tab et utilisez-le comme valeur du border propriété sur n'importe quel sélecteur devrait porter la bordure Avec notre exemple de titre :

• La règle se lit comme suit border: {{border}}; à l'intérieur du .border-title sélecteur.
• Au moment du rendu, le jeton s'étend jusqu'au raccourci complet choisi par l'utilisateur 5px solid #e02b20.

Cliquez Enregistrer Paramètres lorsque la règle est en place Vous pouvez déposer le même jeton sur n'importe quel sélecteur du widget, de sorte qu'un contrôle Border peut décrire une carte, son image ou les deux.

Utilisez le contrôle de frontière dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, ou rechargez l'éditeur si la page était déjà ouverte Sélectionnez le widget et le contrôle Border apparaît dans son panneau avec l'étiquette que vous avez définie.

Choisissez un type de bordure #

Le Type de frontière listes déroulantes Par défaut, Aucun, Solide, Double, Pointillé, En pointillés et Groove Choisissez n'importe quel type autre que Par défaut ou Aucun et deux autres contrôles apparaissent en dessous : Largeur de la bordure et Couleur de la bordure L'aperçu se met à jour dès que vous le souhaitez, donc choisir En pointillés dessine immédiatement un contour en pointillés autour du widget.

Définissez la largeur de la bordure #

Le Largeur de la frontière le contrôle prend des valeurs distinctes en haut, à droite, en bas et à gauche Gardez l'icône de lien allumée pour changer les quatre côtés ensemble, ou dissociez-la pour des bordures inégales, comme un haut et un bas épais avec des côtés fins L'icône de l'appareil à côté de l'étiquette vous permet de définir différentes largeurs par point d'arrêt.

Choisissez la couleur de la bordure #

Le Couleur de la bordure le contrôle ouvre le sélecteur de couleurs d'Elementor Utilisez l'icône du globe pour tirer de vos couleurs globales, ou choisissez une valeur personnalisée avec le sélecteur et l'entrée hexagonale, RGBA ou HSLA.

Chaque changement atterrit en direct dans l'aperçu Dans notre exemple le cap se retrouve avec une bordure rouge unie, 5 pixels en haut et en bas et 3 pixels sur les côtés.

Cas d'utilisation courants #

• Contours de cartes et de boîtes où chaque site a besoin de son propre poids et de sa propre couleur de bordure.
• Titres mis en avant comme le titre encadré dans cet exemple.
• Cadres d'image sur les widgets d'équipe, de portefeuille ou de produits.
• Styles de boutons lorsqu'une variante de contour nécessite une bordure modifiable par l'utilisateur.
• Boîtes d'appel et d'avis cela alterne entre les styles solides et pointillés.

Conseils pour travailler avec le domaine Border #

• Mettez le jeton en CSS, pas en HTML. Le shortcode s'étend à une valeur CSS, il n'a donc de sens qu'en tant que valeur de propriété border: {{border}};.
• Définissez une valeur par défaut sous forme abrégée. Quelque chose comme 1px solid #333 donne au widget l'air terminé avant que quiconque n'ouvre le panneau.
• Associez-le à un rayon de bordure. Le champ couvre le type, la largeur et la couleur. Ajouter un champ Dimensions ou un champ fixe border-radius règle pour les coins arrondis.
• N'oubliez pas qu'aucun n'est un véritable choix. Les utilisateurs peuvent désactiver la bordure du panneau, alors ne comptez pas sur la bordure pour maintenir la disposition ensemble.
• Réutilisez le jeton là où il aide. Le même {{border}} la valeur peut styliser plusieurs sélecteurs et ils suivent tous le contrôle unique.

Foire aux questions #

Envelopper #

Le champ Widget Builder Border regroupe une liste déroulante de type bordure, des largeurs réactives par côté et un sélecteur de couleurs en un seul glisser-déposer. Nommez le champ, défini border: {{border}}; dans votre CSS, et les décisions de bordure sortent de votre feuille de style et se dirigent vers le panneau Élémenteur où les éditeurs peuvent les gérer Combinez-le avec le Champ texte et un Diviseur pour construire un panneau de widgets qui couvre le contenu et le style en un seul endroit Explorez le reste de la Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.