Diviseur

Le Champ diviseur trace une fine ligne de bordure entre deux commandes dans le panneau d'options de votre widget personnalisé C'est un assistant de mise en page pour le panneau lui-même : il n'imprime rien sur la page, n'ajoute rien à votre HTML et n'apparaît jamais sur le frontend Son seul travail est de séparer visuellement un groupe d'options du suivant, afin que les personnes qui éditent votre widget dans Elementor puissent scanner le panneau plus rapidement.

Même un contrôle uniquement d'interface utilisateur comme le Divider prend en charge Conditions4, donc tout un groupe d'options peut apparaître et disparaître avec son diviseur La sortie du modèle à travers le constructeur est rendue par le Moteur de modèles de syntaxe Twig; les deux guides couvrent les détails.

À l'intérieur des modules complémentaires principaux Constructeur de widgets[traduction] ?Vous déposez le Diviseur entre deux champs quelconques, enregistrez, et Elementor rend une minuscule ligne horizontale à cet endroit exact du panneau du widget Dans la procédure pas à pas ci-dessous, le diviseur passe entre un Champ texte et un Champ Zone de texte.

Ce que fait le champ Diviseur #

Un diviseur rend une subtile bordure horizontale à l'intérieur du panneau de l'éditeur Elementor, juste là où vous l'avez placé entre deux commandes C'est toute la fonctionnalité, et c'est le point Lorsqu'un widget personnalisé a cinq ou six entrées empilées dans une section, quelques séparateurs transforment un mur de champs en groupes clairs.

Deux choses que fait le diviseur pas faites, donc il n'y a pas de surprises plus tard :

• Il n'a pas de sortie. Contrairement aux champs Zone Texte ou Texte, le Diviseur n'ajoute aucun shortcode à la barre latérale Documentation Il n'y a pas {{divider}} jeton à placer dans votre HTML, CSS ou JS.
• Ça ne touche jamais la page. La ligne apparaît uniquement dans le panneau d'options du widget à l'intérieur de l'éditeur Elementor La zone d'aperçu et le frontend en direct restent exactement les mêmes.

Si vous voulez un diviseur que les visiteurs voient réellement sur la page, c'est un outil différent : utilisez plutôt un widget diviseur ou séparateur dans la conception de votre page Ce champ est purement pour organiser l'expérience d'édition Si vous êtes nouveau dans la construction 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, avec au moins deux champs déjà en place Ici, nous utilisons un champ Texte et un champ Zone Texte.

Comment ajouter un champ Diviseur #

Dans l'éditeur Widget Builder, faites défiler le panneau des champs sur la gauche jusqu'à ce que vous trouviez le Diviseur champ. Il se trouve près du bas de la liste, à côté de Text Shadow, et son icône ressemble à une ligne entre deux petites flèches.

Faites glisser le Diviseur dans votre section et déposez-le à l'endroit où le séparateur doit apparaître Dans notre exemple, la section Contenu contient déjà un champ Texte et un champ Zone de texte, et le Diviseur atterrit entre eux S'il atterrit au mauvais endroit, saisissez la poignée sur son côté gauche et faites-la glisser en place, de la même manière que vous réorganisez n'importe quel autre champ.

Une fois que le diviseur se situe entre les deux champs, la section lit Texte, Diviseur, Zone de texte de haut en bas. Cliquez Enregistrer Paramètres pour stocker la monnaie.

Options de champ diviseur expliquées #

Sélectionnez le Diviseur pour ouvrir ses paramètres à gauche Il transporte beaucoup moins d'options qu'un champ de saisie, car il n'y a pas de valeur à collecter.

• Étiquette: le nom interne affiché sur la carte de champ dans le constructeur, “Divider” par défaut Il vous aide à distinguer plusieurs diviseurs lors de la modification du widget.
• Nom: l'identifiant unique pour le champ Il doit contenir seulement des lettres, des chiffres, et des traits de soulignement Le Diviseur ne génère aucun shortcode, donc cela reste dans les coulisses, mais chaque champ a encore besoin d'un nom unique.
• Afficher l'étiquette et Bloc d'étiquettes : l'étiquette standard bascule celle qui apparaît sur chaque champ Widget Builder.
• Séparateur : définit la position du séparateur de commande (Aucun, Avant, Après, Par défaut).
• Conditions: afficher ou masquer le diviseur en fonction de la valeur d'un autre contrôle Cliquez sur Ajouter Condition pour définir la règle. Pratique lorsque les champs qui l'entourent sont également conditionnels, donc une ligne ne flotte jamais au-dessus d'un contrôle caché.

Pour la plupart des widgets, vous déposez le Diviseur en place et ne touchez jamais ces paramètres Le placement est le paramètre qui compte.

Voir le diviseur dans l'éditeur Elementor #

Maintenant, ouvrez une page dans Elementor qui utilise votre widget personnalisé, ou faites glisser le widget sur une page Si la page était déjà ouverte pendant que vous avez modifié le widget, recharger l'éditeur Elementor il reprend donc la nouvelle disposition des panneaux.

Sélectionnez le widget et regardez son onglet Contenu Une minuscule ligne de bordure se situe maintenant entre le contrôle Texte et le contrôle Textarea, exactement là où vous avez laissé tomber le Diviseur dans le constructeur.

Vérifiez l'aperçu à droite : le titre et le paragraphe rendent le même qu'avant Le diviseur n'a rien changé à la sortie, seulement le panneau C'est exactement ce qui devrait arriver.

Cas d'utilisation courants #

• Regroupement des intrants liés[traduction], comme une position et sa sous-position au-dessus de la ligne, et une étiquette à bouton et un lien au-dessous de celle-ci.
• Séparer le contenu du comportement(en), par exemple les champs de texte ci-dessus, bascule et bascule ci-dessous.
• Rompre de longues sections là où se diviser en sections distinctes serait exagéré, mais dix champs empilés semblent lourds.
• Marquage des extras facultatifs: avec les champs obligatoires au-dessus du diviseur et les paramètres agréables en dessous.

Conseils pour travailler avec le champ Diviseur #

• Utilisez des séparateurs entre les groupes, pas entre tous les champs. Une ligne après chaque contrôle est aussi bruyante qu'aucune ligne du tout.
• Atteignez un diviseur avant une nouvelle section. Si deux groupes de champs appartiennent au même onglet et au même sujet, un diviseur les maintient ensemble sans le coût d'une autre section pliable.
• Recharger l'éditeur Elementor après l'enregistrement. Un onglet de l'éditeur qui était ouvert pendant le changement n'affichera pas la nouvelle ligne avant que vous ne vous actualisiez.
• N'oubliez pas qu'il est invisible pour les visiteurs. Si un client demande une ligne sur la page, c'est un élément de conception dans le HTML du widget ou un widget séparé, pas ce champ.

Foire aux questions #

Envelopper #

Le champ Diviseur est le plus petit outil du Widget Builder, et l'un des plus utiles pour tous ceux qui éditeront votre widget plus tard Déposez-le entre deux champs, enregistrez, rechargez l'éditeur Elementor, et le panneau gagne une ligne propre juste là où les options changent de sujet Associez-le avec le Texte et Zone de texte des champs pour construire des panneaux qui se lisent comme une forme, pas une pile d'entrées Explorez le reste de la Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.