Police

Le Champ de police est le frère ou la sœur à usage unique du champ Typographie : une liste déroulante, une valeur, la famille de polices Les éditeurs choisissent parmi les polices système et la liste Google Fonts, et votre widget reçoit le nom de famille sous forme de chaîne simple À l'intérieur des addons principaux Constructeur de widgets(en), cela en fait le choix léger lorsqu'un widget doit seulement changer la police de caractères utilisée par un élément, rien d'autre.

Le champ Police prend en charge Conditions« , pratique pour le révéler uniquement lorsqu'une bascule de” de typographie personnalisée est activée et que sa valeur s'imprime via le » Moteur de modèles de syntaxe Twig dans votre CSS. Les deux guides couvrent la configuration et les limitations.

Contrairement au Champ typographie[traduction], qui fonctionne via un sélecteur et n'a pas de jeton de modèle, le champ Police EST un champ de jeton Vous écrivez le font-family régnez-vous sur le panneau CSS et imprimez-y la valeur du champ Cette différence décide de celui des deux champs dont un widget donné a besoin.

Ce que fait le champ Police #

• Rend une liste déroulante de famille de polices dans le panneau Élémenteur du widget, répertoriant les polices système et les polices Google.
• Stocke la famille choisie comme une ficelle simple, par exemple Lora ou Georgia.
• Imprime cette chaîne {{ your_field_name }}: généralement à l'intérieur d'un font-family règle dans le panneau CSS.
• Contrôle exactement une propriété La taille, le poids, l'espacement et le reste restent dans votre feuille de style ou dans des commandes séparées.
• Prend un nom de famille par défaut pour que le widget soit livré avec une police délibérée.

Vous n'avez pas encore construit de widget ? le Aperçu du constructeur de widgets est l'endroit pour commencer avant les documents au niveau du terrain.

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 pull-quote avec un champ Police nommé quote_font cela modifie uniquement la police du texte de la citation.

Comment ajouter un champ Police #

Faites glisser le Police champ du panneau des champs dans une section sous le Style tab, sa maison naturelle, bien que n'importe quel onglet fonctionne Ses options s'ouvrent sur la gauche une fois qu'il atterrit.

Options du champ de police expliquées #

La liste des options est courte, ce qui est le point du champ :

• Étiquette: le texte affiché à côté de la liste déroulante dans Elementor, par exemple“Quote Font”.
• Nom: l'identifiant unique auquel vos modèles font référence Lettres, chiffres et soulignements uniquement, par exemple quote_font.
• Par défaut: la chaîne de nom de famille avec laquelle le widget commence, par exemple Georgia. Choisissez quelque chose qui se produit bien avant que quiconque ne touche le contrôle.

Connectez le champ Police dans votre panneau CSS #

Le champ Police est un champ de jeton, et le panneau CSS est l'endroit où appartient son jeton Imprimez la valeur à l'intérieur d'un font-family réglez et suivez-le toujours avec une pile de secours :

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

Le jeton renvoie au nom de famille choisi, donc la règle ci-dessus devient font-family: Lora, Georgia, serif; lorsqu'un éditeur choisit Lora. La taille et la hauteur de la ligne restent les vôtres ; le contrôle échange uniquement la police.

Le jeton fonctionne également dans le panneau HTML, par exemple dans un conditionnel qui change de classe lorsqu'une famille spécifique est active, mais CSS en est le lieu pratique.

Attention: Le choix d'une police Google dans cette liste déroulante ne charge pas le fichier de police Contrairement au contrôle de groupe Typographie, le champ Police ne met pas en file d'attente automatique les polices Google, donc une police Web choisie rend comme solution de secours à moins que le site ne la charge d'une autre manière Soit que le widget charge la police elle-même, un petit injecteur de panneau JS qui ajoute le lien de feuille de style Google Fonts fonctionne, soit limite les attentes aux piles de polices que le site possède déjà Cette pile de secours après le jeton n'est pas une décoration facultative ; c'est ce que les visiteurs voient chaque fois que la famille n'est pas chargée.

Un chargeur minimal dans le panneau JS ressemble à ceci :

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

Une subtilité dans ce chargeur : le getElementById les clés de garde sur un identifiant fixe, donc si le même widget apparaît deux fois sur une page avec deux familles différentes, seule la police de la première instance se charge La seconde retombe silencieusement Si plusieurs instances par page est un scénario réaliste pour votre widget, construisez plutôt l'identifiant à partir du nom de famille.

Utilisez le contrôle de police dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, ou rechargez l'éditeur si la page était déjà ouverte Le champ Police apparaît sous forme de liste déroulante sous votre étiquette ; ouvrez-le et la liste de familles est consultable au fur et à mesure que vous tapez.

Choisissez une famille et les mises à jour de l'aperçu Si le widget charge la police, la nouvelle police de caractères s'invite dès l'arrivée du fichier Sinon l'élément se rend dans le fallback de votre pile.

Cas d'utilisation courants #

• Widgets de citation et de témoignage où seul le texte de citation échange la police.
• Rubriques décoratives dans les widgets de héros et de bannières, avec le corps du texte laissé intact.
• Éléments de monogramme, de capuchon abaissé et d'étiquette qui portent un visage d'affichage.
• Widgets qui exposent un choix de marque unique sans ouvrir un panneau typographique complet aux clients.
• Commutation conditionnelle de classe: comparer la valeur dans le panneau HTML lorsqu'une famille a besoin de règles d'espacement des lettres supplémentaires.

Conseils pour travailler avec le champ Police #

• Toujours écrire une pile de secours. font-family: {{ quote_font }}, Georgia, serif; maintient le widget lisible lorsque la police sélectionnée n'est pas chargée.
• N'oubliez pas qu'il n'y a pas de file d'attente automatique. Les polices Google sélectionnées ici nécessitent un chargeur dans le widget ou un site qui les charge déjà ; c'est le seul avantage du champ.
• Atteignez la typographie lorsque vous en avez besoin de plus. La taille, le poids, l'espacement, les valeurs réactives et le chargement automatique des polices appartiennent tous au Champ typographie. La police est destinée au cas réservé à la famille.
• Définir un vrai Défaut. Une famille de départ explicite bat en héritant de tout ce dans quoi le thème tombe en cascade.
• Conservez le jeton en CSS. Une règle du panneau CSS est plus facile à maintenir que les attributs de style en ligne dispersés dans le HTML.
• Ne vous attendez pas à un raccourci Sélecteur ici. Le câblage naturel pour ce champ est le jeton qui vous est propre font-family règle, où vous contrôlez également les fallbacks.

Foire aux questions #

Envelopper #

Le champ Widget Builder Font fait un travail avec très peu de surface : une liste déroulante familiale dans le panneau, un jeton de chaîne dans votre font-family règle, et contrôle total des fallbacks laissés entre vos mains Chargez la police lorsque vous proposez des familles Google, et montez au niveau Champ typographie lorsqu'un widget a besoin du panneau complet de style de texte. Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.