Champ de couleur

Laisser un éditeur recolorer un widget sans ouvrir le CSS est l'une des choses les plus utiles qu'un widget personnalisé puisse faire Le Champ de couleur dans les addons maîtres Constructeur de widgets dépose le sélecteur de couleurs d'Elementor dans votre panneau de widgets, avec des couleurs globales et un canal alpha en option Vous nommez le champ, choisissez où il vit et son shortcode alimente directement votre CSS.

Comme chaque champ Widget Builder, le champ Couleur prend en charge Conditions pour la visibilité du panneau Son jeton est rendu par le Moteur de modèles de syntaxe Twig(en anglais), c'est ce qui vous permet d'imprimer la couleur choisie n'importe où dans votre CSS. Les deux guides couvrent la configuration et les limitations.

Il s'agit d'un contrôle de style, donc dans la démo, il passe sous le Style onglet. Le champ fonctionne de la même manière, quel que soit l'onglet dans lequel vous le mettez, cependant. Là où il vit, c'est votre appel, et cela dépend de la façon dont vous souhaitez organiser les contrôles de votre widget personnalisé.

Ce que fait le champ Couleur #

Le champ Couleur rend le sélecteur de couleurs natif d'Elementor dans le panneau d'options de votre widget Les éditeurs cliquent sur l'échantillon, choisissent une couleur (ou une couleur globale du thème), et votre widget génère cette valeur partout où vous avez placé le shortcode correspondant La plupart du temps, cela signifie une propriété CSS comme color, background; ou border-color.

Parce qu'il utilise le propre sélecteur d'Elementor, les éditeurs obtiennent les commandes qu'ils connaissent déjà : l'échantillon, le peigne-œil, les couleurs récentes et la palette de couleurs globale Allumez le canal alpha et ils peuvent également définir la transparence.

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 Premier ? Commencez par le Aperçu du constructeur de widgets.

Comment ajouter un champ Couleur #

Dans l'éditeur Widget Builder, recherchez le panneau de champs à gauche et faites glisser le Couleur se mettre dans une section Puisque la couleur est un choix de style, le Style tab est la maison naturelle, mais le Contenu et Avancé les onglets l'acceptent tout aussi bien 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 de champ de couleur expliquées #

Sélectionnez le champ Couleur pour ouvrir ses paramètres La plupart des options correspondent aux autres champs, plus un qui est spécifique à la couleur.

• Étiquette: le texte affiché au-dessus du sélecteur dans Elementor, par exemple “Text Color”.
• Nom: l'identifiant unique du champ Lettres, chiffres, et soulignements seulement Cela devient votre shortcode, donc un champ nommé color vous donne {{color}}.
• Description: texte d'aide facultatif affiché sous le contrôle.
• Alpha: allumez ceci pour permettre la transparence dans le sélecteur Avec elle éteinte, les éditeurs ne peuvent choisir que les couleurs unies Activez-le lorsque vous avez besoin de valeurs rgba, comme une superposition semi-transparente.
• Valeur par défaut : la couleur de départ sous forme de valeur hexagonale, telle que #FFFFFF. Réglez ceci pour que le widget ait l'air terminé avant que quiconque ne le touche.

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 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 contrôle réactif est pratique ici si vous souhaitez une couleur différente par appareil Documentation du champ de texte couvre chacun de ceux-ci en détail.

Connectez le champ à votre code #

Un champ Couleur nommé color produit le jeton {{color}} dans la barre latérale Documentation. Déposez-le dans votre CSS comme valeur de n'importe quelle propriété de couleur Par exemple, pour colorer le texte du héros :

Dans l'éditeur CSS, vous écririez quelque chose comme .hero-content { color: {{color}}; }. Lorsque l'éditeur choisit une couleur dans Elementor, Master Addons échange le jeton contre cette valeur et le texte se recolore en direct. Le même jeton fonctionne pour background, border-color(en), ou tout ce qui prend une couleur, et vous pouvez la réutiliser dans autant de règles que nécessaire Une chose à regarder : gardez le jeton comme valeur entière, donc color: {{color}};(non enveloppé dans des guillemets), ou le CSS ne s'appliquera pas.

Utilisez le contrôle de couleur dans Elementor #

Faites glisser votre widget personnalisé sur une page et ouvrez-le dans l'éditeur Elementor Sous l'onglet où vous avez placé le champ, le contrôle Couleur apparaît comme l'échange standard avec le bouton des couleurs globales à côté Cliquez dessus, choisissez une couleur et le widget met à jour sur le canevas.

Les éditeurs peuvent choisir une couleur unique ou cliquer sur l'icône globe pour tirer des couleurs globales du site, ce qui maintient les widgets personnalisés sur la marque Si vous avez activé le support dynamique, l'icône des balises dynamiques apparaît ici aussi.

Cas d'utilisation courants #

• Couleur du texte pour les titres et paragraphes.
• Couleur d'arrière-plan pour les sections, cartes et boutons.
• Couleurs de bordure et d'accent lié à une palette de marque.
• Teintes superposées utilisation du canal alpha pour la transparence.
• États hover lorsqu'il est associé à un deuxième champ de couleur.

Conseils pour travailler avec le champ Couleur #

• Placez-le partout où vous correspond votre widget. Le style est la convention, mais le champ fonctionne sous n'importe quel onglet, alors organisez contrôle la façon qui a du sens pour vous.
• Allumez Alpha uniquement lorsque vous avez besoin de transparence. Pour les couleurs de marque unies, le laisser éteint permet de simplifier le sélecteur.
• Définissez une valeur par défaut raisonnable. Un bon défaut signifie que le widget semble correct au moment où il tombe sur une page.
• Penchez-vous sur les couleurs mondiales. Encouragez les éditeurs à choisir dans la palette globale afin que les widgets restent cohérents sur tout le site.
• 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 #

Envelopper #

Le champ Couleur du constructeur de widgets transforme une couleur codée en dur en un sélecteur modifiable à l'intérieur de votre propre widget personnalisé Nommez-le, choisissez s'il faut autoriser alpha, définir une valeur par défaut et filer {{color}} dans votre CSS. Après cela, n'importe qui peut recolorer le widget d'Elementor, avec des couleurs globales et de la transparence sur le robinet Jetez un œil au reste du Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.