Le champ Choix visuel ajoute une rangée de cartes image cliquables à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Chaque carte est une petite image d'une option, donc les éditeurs choisissent une mise en page ou un style en la regardant Votre modèle obtient la clé de la carte sur laquelle ils ont cliqué.
Visual Choice est un champ Pro. Le plugin gratuit comprend un Widget Builder limité et l'ensemble complet des champs est livré avec Maître Addons Pro.
Ce que fait le champ Choix visuel #
- Il affiche vos options en tant que cartes image dans le panneau Élémenteur La carte sélectionnée obtient un surlignage.
- Chaque option possède une clé, un titre et une image Le titre est utilisé comme infobulle et texte alternatif de la carte.
- Votre modèle reçoit la clé sélectionnée, telle que
gridoulist(en), que vous pouvez utiliser dans un nom de classe ou un{% if %}vérifier. - Le paramètre Colonnes contrôle le nombre de cartes situées dans une rangée du panneau.
Si vous n'avez pas encore construit de widget, lisez le Aperçu du constructeur de widgets premièrement. Pour les choix qui se lisent bien comme texte ou icônes, le Sélectionner et Choisir les champs sont plus rapides à configurer.
Avant de commencer #
- WordPress avec Elementor installé et actif.
- Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
- Une petite image pour chaque option Dessins au trait simples d'environ 240 x 160 pixels, enregistrés en PNG avec un fond transparent, semblent propres sur le panneau sombre d'Elementor.
- Un widget s'ouvre dans le Widget Builder L'exemple de ce guide est un widget “Team Showcase” avec trois mises en page : Grille, Liste et Spotlight.
Comment ajouter un champ Choix visuel #
- Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
- Sur le Contenu onglet, ajouter une section Un sélecteur de mise en page passe généralement en premier, de sorte que les éditeurs choisissent la structure avant toute autre chose.
- Type
visualdans le champ champ rechercher box à gauche. - Glisser Choix Visuel dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.
Options du champ Choix visuel expliquées #
- Étiquette est le texte au-dessus des cartes dans Elementor, par exemple “Layout”.
- Nom l'identifiant unique du champ et son jeton de modèle, est-il donc
team_layoutdevient{{team_layout}}. Lettres, chiffres et soulignements uniquement. - Description apparaît sous les cartes dans Elementor.
- Options détient une ligne par carte. Clé est la valeur que votre modèle obtient (conservez-le court et minuscule, comme
grid). Titre nomme la carte Cliquez sur le Image boîte pour ouvrir la fenêtre Sélectionner une image, télécharger un fichier ou en choisir un dans la bibliothèque multimédia, puis cliquez sur Utilisez cette image. L'icône plus ajoute une ligne et la croix rouge en supprime une. - Colonnes définit le nombre de cartes qui tiennent dans une rangée, de 1 à 6. tapez le nombre même si la case affiche déjà 2. le nombre affiché n'est pas enregistré tant que vous ne l'avez pas modifié, et sans valeur enregistrée, Elementor met une carte dans chaque rangée.
- Basculer est répertorié dans le panneau, mais dans nos tests, cela n'a fait aucune différence. Les éditeurs pouvaient toujours cliquer à nouveau sur la carte sélectionnée pour la vider.
Les paramètres courants ci-dessous fonctionnent comme ils le font sur d'autres domaines, notamment Conditions. Le panneau n'a pas de valeur par défaut pour ce champ, donc une nouvelle copie du widget commence sans qu'aucune carte ne soit sélectionnée.
Cliquez Enregistrer Paramètres après avoir ajouté les options.
Utilisez la clé sélectionnée dans votre modèle #
{{team_layout}} imprime la clé de la carte sélectionnée La façon la plus simple de l'utiliser est une classe modificatrice :
<div class="ts-team ts-team--{{team_layout}}">
...
</div>Avec Grid sélectionné, cela rend ts-team--grid. Lorsqu'une mise en page nécessite un balisage différent, vérifiez la clé avec {% if %}. L'exemple montre une courte biographie uniquement dans la présentation de la liste :
{% if team_layout == 'list' %}
<p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}
Écrivez ensuite un ensemble de règles CSS par clé :
.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }
Jusqu'à ce qu'un éditeur clique sur une carte, le jeton n'imprime rien et la classe ci-dessus devient ts-team--. Donnez la base .ts-team classez une mise en page qui semble bien en soi, de sorte que le widget n'apparaît jamais cassé avant qu'un choix ne soit fait.
Utilisez le contrôle Choix visuel dans Elementor #
Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte Les cartes apparaissent sur l'onglet Contenu Cliquez-en une et le canevas se met à jour tout de suite.
Cliquer sur Liste fait basculer l'équipe vers les lignes, et le {% if %} block ajoute le bios :
Spotlight rend le premier membre plus grand :
Cliquez à nouveau sur la carte sélectionnée pour effacer le choix Le modèle obtient alors une clé vide, comme décrit ci-dessus.
Cas d'utilisation courants #
- Pickers de mise en page pour widgets d'équipe, de blog, de portfolio et de témoignage.
- Styles de cartes ou d'en-têtes plus faciles à reconnaître à partir d'une image qu'à partir d'un nom.
- Choix de position d'image, tels que l'image à gauche, l'image à droite ou l'image en haut.
- Conceptions prédéfinies qui changent plusieurs règles CSS à la fois avec une seule classe.
Conseils pour travailler avec le champ Choix visuel #
- Utilisez le même style de dessin pour chaque image d'option, afin que les cartes ressemblent à un seul ensemble.
- Gardez les clés courtes, minuscules et exemptes d'espaces Ils finissent dans les noms de classe.
- Ne renommez pas de clé une fois le widget utilisé Les pages qui ont enregistré l'ancienne clé ne correspondront pas à votre nouveau CSS.
- Définissez Colonnes sur le nombre d'options lorsque vous en avez trois ou moins, de sorte que toutes les cartes se trouvent dans une rangée.
- Style l'état vide Jusqu'à ce que quelqu'un choisisse une carte, la clé est vide.
Foire aux questions #
Le champ Choix visuel est-il gratuit ?
No. Visual Choice est l'un des champs Pro du Widget Builder, Master Addons Pro doit donc être actif avant de pouvoir l'ajouter à un widget.
Qu'obtient le modèle lorsqu'une carte est sélectionnée ?
La clé de l'option Si la carte Grille a la clé grid, {{team_layout}} impressions grid. Le titre et l'image ne sont utilisés que dans le panneau.
Pourquoi mon widget affiche-t-il une seule carte par ligne dans Elementor ?
Colonnes n'a pas été enregistré Tapez un numéro dans la case Colonnes, même s'il affiche déjà 2, puis enregistrez le widget et rechargez Elementor.
Puis-je définir quelle carte est sélectionnée par défaut ?
Pas du panneau de champ, qui n'a pas de valeur par défaut pour le choix visuel. Stylez la classe de base pour que le widget ressemble juste avant qu'une carte ne soit sélectionnée.
Visual Choice peut-il ajouter une classe à l'emballage du widget ?
Pas depuis le panneau de champ Imprimez plutôt la clé à l'intérieur de votre propre balisage, par exemple class="ts-team ts-team--{{team_layout}}"& ciblez cette classe dans votre CSS.
Envelopper #
Donnez à chaque option une clé, un titre et une image, tapez une valeur de colonnes et utilisez {{field_name}} dans un nom de classe ou un {% if %} cochez. Planifiez l'état vide, car rien n'est sélectionné jusqu'à ce qu'un éditeur clique sur une carte. Pour choisir plutôt dans une liste de texte, consultez le Champ SELECT2et vérifiez tarification pour ce que chaque plan comprend.
