Choix Visuel

Le Champ Choix Visuel rend un ensemble de cartes image dans le panneau de votre widget, une par option, et l'utilisateur choisit en cliquant sur une vignette C'est le contrôle de la mise en page-cueilleur Là où un Select propose des mots et un Choose propose des icônes, le Choix Visuel montre une petite image de ce à quoi ressemble réellement chaque variante À l'intérieur des Addons Master Constructeur de widgets(en), cela en fait l'ajustement naturel pour les décisions de grille contre liste et toute variante qu'une capture d'écran explique plus rapidement qu'un nom.

Les valeurs de l'option Choix visuel se branchent directement Conditions« , laissant les autres commandes suivre la disposition choisie et dans le » Moteur de modèles de syntaxe Twig, où {% if style == "grid" %} change le balisage pour qu'il corresponde Les deux guides couvrent les détails.

Le contrat de modèle correspond aux autres champs de choix : la valeur est la clé de l'option sélectionnée Ce qui distingue le Choix Visuel est un deuxième style de câblage, la classe de préfixe, qui change une classe sur le wrapper de widget afin que votre CSS puisse changer de disposition sans que le modèle ne mentionne jamais le champ.

Ce que fait le champ Choix visuel #

• Rend les cartes image cliquables dans le panneau Élémenteur, chaque option est définie par une clé, un titre et une image.
• Détient une clé a partir de l'ensemble défini, la carte actuellement sélectionnée.
• Lise les cartes en colonnes3 par ligne par défaut, réglable via l'option Colonnes.
• Flux template la clé sélectionnée pour les classes modificatrices et {% if %} blocs.
• Définit éventuellement une classe d'emballage grâce à l'option de classe de préfixe, CSS seul peut changer la mise en page.

Si vous débutez dans la création 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 des membres de l'équipe avec deux variantes de mise en page, une grille à 3 colonnes et une liste empilée, sélectionnée via des cartes miniatures.

Comment ajouter un champ Choix visuel #

Trouver Choix Visuel dans le panneau des champs à gauche de l'éditeur Widget Builder, regroupés avec les autres champs de choix.

Faites-le glisser dans une section sous le Contenu ou Style onglet. Les sélecteurs de mise en page sont généralement assis en premier dans le panneau, en haut de l'onglet Contenu, afin que les éditeurs choisissent une structure avant de remplir le contenu Une fois le champ atterri, ses options s'ouvrent sur la gauche.

Options du champ Choix visuel expliquées #

• Étiquette: le texte affiché au-dessus des cartes dans Elementor, par exemple “Layout”.
• Nom: l'identifiant unique du champ, des lettres, des chiffres et des soulignements uniquement, par exemple team_layout.
• Options: chaque option est une clé plus un titre et une image L'image devient la carte cliquable ; le titre l'étiquete Les touches restent courtes et CSS-sûr : grid, list.
• Colonnes : combien de cartes sont assises par ligne dans le panneau, 3 par défaut Deux grandes cartes se lisent mieux comme 2 colonnes.
• Classe de préfixe : un élémentor de tige de classe ajoute la clé sélectionnée et place sur l'emballage du widget. Avec team-layout- et la clé grid, l'emballage porte team-layout-grid.
• Par défaut: la clé sélectionnée lorsque le widget tombe pour la première fois sur une page.
• Description, Afficher l'étiquette, séparateur : les paramètres d'affichage standard, plus Conditions d'affichage du champ uniquement lorsqu'un autre contrôle a une certaine valeur.

Connectez le choix visuel à votre widget #

Deux styles de câblage. Choisissez-en un par champ.

Style A : modèles de modèles. Le jeton imprime la clé sélectionnée, donc tout depuis le Sélectionnez champ s'applique. Une classe de modificateur :

<div class="team team--{{ team_layout }}">
  ...
</div>

ou une branche structurelle lorsque les variantes nécessitent un balisage différent :

{% if team_layout == 'list' %}
  <ul class="team-list"> ... </ul>
{% else %}
  <div class="team-grid"> ... </div>
{% endif %}

Style B : la classe de préfixe. Remplissez l'option Classe de préfixe, disons team-layout-et Elementor écrit team-layout-grid ou team-layout-list sur l'emballage du widget au fur et à mesure que l'utilisateur clique sur les cartes Votre CSS cible alors la classe combinée :

.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }

Le modèle ne fait jamais référence au champ du tout ; la classe wrapper fait la commutation Cela maintient le HTML à un seul bloc de balisage et pousse chaque variante dans la feuille de style Lorsque seule la présentation change, c'est généralement la coupe plus nette.

Attention au mélange des deux styles sur un seul champ Un conditionnel modèle qui suppose grid tandis que la classe de préfixe se définit simultanément team-layout-list est deux sources de vérité, et ils dériveront, généralement des mois plus tard quand quelqu'un édite un côté et oublie l'autre existe Décidez si ce champ parle à travers le modèle ou à travers la classe wrapper, puis s'y tenir.

Utilisez le contrôle Choix visuel dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, en rechargeant l'éditeur si la page était déjà ouverte Le contrôle affiche vos cartes d'option dans le panneau, celle sélectionnée mise en évidence.

Cliquez sur une carte et la mise en page bascule dans l'aperçu, soit via votre classe de modificateur, soit via la classe de préfixe sur l'emballage, quel que soit le câblage que vous avez choisi. Parce que chaque carte affiche la variante elle-même, les éditeurs choisissent la bonne mise en page sans rien lire.

Cas d'utilisation courants #

• Disposition des grilles par rapport aux listes pour les widgets d'équipe, de portefeuille et de publication.
• Variantes de style de carte où les vignettes montrent les motifs réels en boîte, superposés et divisés.
• Dispositions d'en-tête tels que les variantes de héros image-top, image-gauche et texte uniquement.
• Présentations glissantes versus statiques du même ensemble de contenus.
• Packs de modèles dans un widget3, trois looks prédéfinis qu'un client choisit par image.

Conseils pour travailler avec le champ Choix visuel #

• Utilisez de vraies captures d'écran comme images d'option. Un petit rendu de chaque variante bat une icône abstraite ; la carte est la documentation.
• Choisissez un style de câblage par champ. Les modèles de modèles ou la classe de préfixes, pas les deux, ou les deux, seront finalement en désaccord.
• Les clés entrent dans les noms de classe, alors gardez-les. grid et list« , pas “Grid Layout” ».
• Terminez le préfixe avec un séparateur. team-layout- plus grid lit comme team-layout-grid; sans le trait d'union que vous obtenez team-layoutgrid.
• Faites correspondre les colonnes à votre nombre de cartes. Deux options sur 3 colonnes laissent un espace ; définissez Colonnes sur 2 et la ligne se remplit.
• Réservez-le pour les différences visuelles. Si les options diffèrent par leur comportement plutôt que par leur apparence, un Select avec des étiquettes claires sert mieux les éditeurs.

Foire aux questions #

Envelopper #

Le champ Widget Builder Visual Choice permet aux éditeurs de choisir une mise en page en la regardant : des cartes image dans le panneau, une clé dans le modèle et l'option de classe de préfixe lorsque vous préférez changer de mise en page du CSS seul. Il s'associe naturellement au Choisir champ. Les vignettes gèrent les grands pics structurels, les boutons d'icônes les petits ajustements Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.