Onglets

Le Champ onglets organise les commandes d'un widget en onglets de panneau, la même structure que les propres widgets d'Elementor utilisent pour le style d'état Normal et Hover À l'intérieur des addons Master Constructeur de widgets(traduction), vous définissez les onglets, placez des commandes enfants dans chacun, et le panneau Élémenteur les rend sous la forme d'une bande d'onglets compacte au lieu d'un long parchemin de champs.

Les supports de contrôle Tabs Conditions comme tout domaine, et ses enfants sont lus à travers le Moteur de modèles de syntaxe Twig avec un jeton en trois parties, {{ tabs.tab_1.field }}(traduction), aucune boucle n'est requise Les deux guides couvrent les détails et les limites.

Tabs est un champ structurel Il ne détient aucune valeur propre ; les valeurs appartiennent aux enfants, et votre modèle lit chacun d'eux par un chemin imbriqué qui nomme le champ des onglets, l'onglet, et le champ à l'intérieur de celui-ci Pas de boucles, pas d'astuces, juste des adresses.

Ce que fait le champ Onglets #

• Rend une bande à onglets dans le panneau du widget, construit sur le mécanisme des onglets de commande d'Elementor.
• Prend un ensemble d'onglets: chacun avec son propre nom, sa propre étiquette et sa propre liste de contrôles enfants.
• Maintient les états liés ensemble4, le couplage classique étant les versions Normal et Hover des mêmes paramètres.
• Expose les valeurs des enfants par des chemins imbriqués dans votre modèle : le nom du champ des onglets, puis l'onglet, puis le champ.
• Autorise les mêmes noms d'enfants dans les onglets« Normal et Hover peuvent donc se refléter proprement ».

Si vous débutez avec le constructeur, lisez le Aperçu du constructeur de widgets avant celui-ci.

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 bouton avec un champ Tabs nommé states tenant un onglet Normal et un onglet Hover, chacun avec un champ de couleur nommé bg.

Comment ajouter un champ Onglets #

Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Onglets champ, répertorié avec les autres champs structurels tels que Popover Toggle et Repeater.

Faites-le glisser dans une section sous le Style tab, où vit le style d'état, puis définissez les onglets et déposez les commandes enfants dans chacun Les options du champ s'ouvrent sur la gauche dès qu'il atterrit.

Options du champ onglets expliquées #

• Étiquette: le titre indiqué au-dessus de la bande de tabulation dans Elementor.
• Nom: l'identifiant unique pour l'ensemble du groupe d'onglets, les lettres, les chiffres et les traits de soulignement uniquement, par exemple states. C'est le premier segment du chemin modèle de chaque enfant.
• Onglets : la liste des onglets Chaque onglet porte un nom (utilisé dans les chemins de modèle, par exemple normal), une étiquette (indiquée sur la bande, par exemple “Normal”), et son propre ensemble de commandes enfants.
• Contrôles des enfants: les champs à l'intérieur de chaque onglet Les types de champs de valeur fonctionnent ici, et chacun conserve ses propres options et sa forme de valeur.
• Description, Afficher l'étiquette, le séparateur et les conditions sont les mêmes options d'affichage que partout ailleurs.

Lisez les valeurs des onglets via des chemins imbriqués #

Les enfants d'un champ Onglets sont adressés avec un chemin de points en trois parties : le nom du champ onglets, le nom de l'onglet, puis le nom du champ enfant.

{{ tabsname.tabname.fieldname }}

Il n'y a pas de bouclage sur les onglets Chaque valeur est lue exactement là où vous en avez besoin Pour l'exemple du bouton, un states champ de tabulations avec tabulations normales et de vol stationnaire, chacune tenant un bg champ de couleur, fils dans le panneau CSS comme ceci :

.ma-btn {
  background: {{ states.normal.bg }};
}
.ma-btn:hover {
  background: {{ states.hover.bg }};
}

Nommer l'enfant de la même manière dans les deux onglets est délibéré et pris en charge. En interne, le constructeur déduit les clés en double avec un compteur, mais le chemin du modèle reste par onglet, donc bg en Normal et bg dans Hover restent deux valeurs distinctes et proprement adressées Les noms miroir sont le modèle à viser : celui qui lit le modèle voit les règles Normal et Hover ne diffèrent que par un seul segment de chemin.

Attention : le jeton plat {{ bg }} ne se résout à rien, tout comme les deux parties {{ normal.bg }}. Le chemin commence toujours par le nom propre du champ Onglets Lorsqu'une valeur d'onglet s'imprime vide, comptez d'abord les segments Le renommage d'un onglet brise les chemins de la même manière silencieuse ; le CSS continue de compiler, la valeur cesse juste d'arriver, alors réglez les noms d'onglets avant d'écrire les règles.

Utilisez le contrôle Tabs dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor (ou rechargez l'éditeur si la page était déjà ouverte).La bande d'onglets se rend dans le panneau avec vos étiquettes d'onglets, et cliquer sur un onglet révèle ses commandes enfants.

Un éditeur définit l'arrière-plan Normal sur le premier onglet, passe à Hover et définit la deuxième couleur Le survol du bouton dans l'aperçu montre la transition immédiatement, puisque les deux valeurs se trouvent déjà dans les règles CSS du widget.

Cas d'utilisation courants #

• Style normal et Hover pour les boutons, les cartes et les liens, l'appariement classique.
• États actifs et inactifs pour les basculements, les filtres et les articles de navigation.
• Paramètres avant et après en comparaison ou révéler des widgets.
• Variantes claires et sombres(en), laisser les éditeurs régler les deux schémas à partir d'une seule section.
• Style étrange et uniforme des rangées dans les widgets de liste et de table.

Conseils pour travailler avec le champ Onglets #

• Adresse les valeurs avec le chemin complet en trois parties. {{ states.hover.bg }} travaux; {{ bg }} et {{ hover.bg }} ne pas.
• Miroir des noms d'enfants sur les onglets. Mêmes champs, mêmes noms, un segment de chemin différent ; le modèle reste lisible et les onglets restent comparables.
• Gardez les noms d'onglets courts et minuscules. Ce sont donc des identifiants de modèles normal et hover beat “Tab 1” et Tab 2”.
• Utilisez des onglets pour les états, des sections pour les sujets. Deux variantes des mêmes paramètres appartiennent aux onglets ; les paramètres non liés appartiennent à des sections distinctes.
• N'oubliez pas que chaque enfant conserve la forme de valeur de son type. Un curseur à l'intérieur d'un onglet se lit toujours comme suit {{ states.normal.gap.size }}{{ states.normal.gap.unit }}.

Foire aux questions #

Envelopper #

Le champ Widget Builder Tabs transforme le style d'état en un motif de panneau bien rangé : définir normal et hover une fois, reflète les noms des enfants et votre CSS lit {{ states.normal.bg }} contre {{ states.hover.bg }} sans que rien d'autre ne change Pour répéter du contenu plutôt que des états appariés, le Champ répéteur est le frère structurel à atteindre Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.