Onglets

Le champ Onglets regroupe les commandes dans une bande d'onglets dans le panneau Élémenteur, comme les onglets Normal et Survoler sur les propres styles de boutons d'Élémenteur Vous le construisez dans les Adjonctions Maîtres Constructeur de widgets: ajoutez les onglets, placez des champs à l'intérieur de chacun et lisez chaque valeur de votre HTML ou CSS avec un jeton en trois parties tel que {{ button_states.hover.bg }}.

Tabs 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 Onglets #

• Il ajoute une rangée d'onglets cliquables à une section du panneau de votre widget Cliquer sur un onglet affiche les champs à l'intérieur.
• Chaque onglet a un nom, une étiquette et sa propre liste de champs.
• Le champ Onglets ne stocke aucune valeur lui-même Les valeurs appartiennent aux champs à l'intérieur des onglets.
• Les modèles lisent ces valeurs avec {{ tabs_name.tab_name.field_name }}. Deux onglets peuvent utiliser les mêmes noms de champs, ce qui permet de comparer facilement les règles Normal et Hover.

Si vous n'avez pas encore construit de widget, lisez le Aperçu du constructeur de widgets d'abord.

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.
• Un widget s'ouvre dans le Widget Builder L'exemple de ce guide est un widget “Hover Button” : un champ Texte pour l'étiquette du bouton, plus un champ Onglets nommé button_states avec un onglet Normal et un Hover Chaque onglet contient deux champs de couleur bg et text.

Comment ajouter un champ Onglets #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Cliquez sur le Style tabuler et ajouter une section, par exemple“Button Style”.
3. Type tabs dans le champ champ rechercher box à gauche.
4. Glisser Onglets dans la section Ses paramètres s'ouvrent dans la barre latérale gauche, et l'aperçu de la section affiche la bande d'onglets.

Un nouveau champ Tabs est nommé tabs et est livré avec deux onglets vides tab_1 et tab_2. Renommez-les avant d'écrire des jetons, car les noms font partie de chaque chemin.

Options du champ onglets expliquées #

• Étiquette nomme le champ à l'intérieur du constructeur Dans Elementor, les éditeurs voient le titre de la section et les étiquettes des onglets, pas cette étiquette.
• Nom est-ce la première partie de chaque jeton, donc button_states donne {{ button_states.normal.bg }}. Lettres, chiffres et soulignements uniquement.
• Description est une note pour vous à l'intérieur du constructeur.
• Onglets est la liste des onglets Chaque ligne a un Nom (utilisé dans les jetons, tels que hover) et un Étiquette (indiqué sur l'onglet, tel que Hover).Cliquer Ajouter un onglet pour une autre rangée, ou la croix rouge pour en retirer une.

Sous la liste des onglets, la barre latérale en affiche un Champ d'onglet tableau par onglet, intitulé avec l'étiquette de l'onglet C'est là que vont les champs.

• Nom est la dernière partie du jeton Vous pouvez réutiliser le même nom dans chaque onglet, comme bg et text sont ici.
• Étiquette est le texte à côté du contrôle dans Elementor.
• Type définit le contrôle : texte, numéro, zone de texte, WYSIWYG, code, caché, commutateur, choisir, couleur, police, typographie, heure de date, URL, support, galerie, icônes, curseur, dimensions ou arrière-plan.
• Cliquez Ajouter un champ pour ajouter une ligne à cet onglet.

Les paramètres communs plus bas (Afficher Étiquette, Séparateur, Conditions et le reste) ne changent pas la façon dont un champ Onglets apparaît dans Elementor, vous pouvez donc les laisser tranquilles.

Lisez les valeurs des onglets dans votre modèle #

Chaque valeur à l'intérieur d'un onglet est lue avec trois noms joints par des points : le champ Onglets, l'onglet, puis le champ.

{{ tabs_name.tab_name.field_name }}

Vous n'avez pas à les saisir Après avoir enregistré, le panneau Documentation à côté de l'éditeur HTML répertorie chaque chemin sous l'étiquette du champ Onglets, et l'icône de copie en copie un.

Les jetons fonctionnent dans l'onglet CSS ainsi que dans l'onglet HTML Le bouton exemple conserve son aspect de base dans une règle et lit les couleurs de l'onglet dans les deux suivantes :

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

La première règle est un repli Jusqu'à ce qu'un éditeur choisisse une couleur, un jeton n'imprime rien et la ligne devient background: ;. Les navigateurs sautent cette ligne non valide, de sorte que les couleurs de la première règle restent en place.

Seul le chemin complet fonctionne En test, {{ bg }}, {{ hover.bg }} et {{ button_states.hover }} tous n'ont rien imprimé, alors que {{ button_states.hover.bg }} imprimer la couleur Si une valeur sort vide, vérifiez d'abord trois parties et l'orthographe exacte.

Cliquez Enregistrer Paramètres quand t'auras fini.

Utilisez le contrôle Tabs dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte Sélectionnez le widget et ouvrez le Style onglet. Votre section affiche la bande d'onglets avec l'onglet Normal ouvert.

Définissez les couleurs sur l'onglet Normal, puis cliquez sur Survole et définissez la deuxième paire Déplacez la souris sur le bouton dans l'aperçu pour vérifier les couleurs de survol.

Cas d'utilisation courants #

• Couleurs normales et Hover pour boutons, cartes et liens.
• Styles actifs et inactifs pour les filtres, les basculements et les éléments de menu.
• Versions claires et sombres d'un composant, éditées à partir d'une section.
• Contenu divisé en groupes, tels qu'un onglet Avant et Arrière sur une carte à feuilles mobiles, avec des champs texte et multimédia dans chacun.

Conseils pour travailler avec le champ Onglets #

• Choisissez d'abord le nom du champ Tabs et les noms des onglets. Renommer ultérieurement signifie mettre à jour chaque jeton qui les utilise.
• Réutilisez les noms de champs dans les onglets. normal.bg et hover.bg sont plus faciles à lire que deux noms sans rapport.
• Évitez de modifier l'étiquette d'un champ une fois que le widget est sur les pages en direct Elementor stocke les valeurs enregistrées sous une clé construite à partir de l'étiquette, de sorte qu'une nouvelle étiquette peut faire disparaître les valeurs existantes de ces pages.
• Mettez les styles par défaut dans une règle avant la règle du jeton, donc une valeur vide ne casse jamais la conception.
• Donnez un préfixe à vos classes (tel que ma-btn). CSS de l'onglet CSS du widget s'applique à toute la page, donc les noms génériques comme .button peut entrer en conflit avec d'autres styles.
• Pour un seul groupe de paramètres marche/arrêt au lieu d'onglets, voir le Champ Popover Toggle. Pour une liste à laquelle l'éditeur peut ajouter des lignes, utilisez le Champ répéteur.

Foire aux questions #

Envelopper #

Nommez le champ Onglets et ses onglets, ajoutez des champs à chaque onglet et lisez-les avec {{ tabs_name.tab_name.field_name }} dans votre HTML ou CSS. Gardez une règle de repli pour les valeurs vides et réglez les noms avant que le widget ne soit mis en ligne Le Champ de couleur doc couvre le contrôle de couleur utilisé dans cet example, et tarification montre ce que chaque plan comprend.