Schriftart

Die Schriftfeld Ist das Einzweckgeschwister des Feldes Typografie: ein Dropdown, ein Wert, die Schriftfamilie Editoren wählen aus Systemschriften und der Google Fonts Liste, und Ihr Widget erhält den Familiennamen als einfache Zeichenfolge Im Inneren der Master Addons Widget-builderDas macht es zur leichten Wahl, wenn ein Widget nur die Schriftart ändern muss, die ein Element verwendet, sonst nichts.

Das Feld Schrift unterstützt Bedingungen„Handlich, um es nur dann preiszugeben, wenn ein „Benutzerdefinierte Typografie“-Umschalter eingeschaltet ist und sein Wert durch die „Benutzerdefinierte Typografie” druckt Twig-Syntax-Vorlagen-Engine In Ihr CSS. Beide Leitfäden behandeln Einrichtung und Einschränkungen.

Anders als die Typografiefeld, der über einen Selektor funktioniert und keinen Template-Token hat, ist das Feld Schrift ein Token-Feld Sie schreiben die font-family Regel dich im CSS-Panel und drucke den Wert des Feldes hinein Dieser Unterschied entscheidet, welches der beiden Felder ein bestimmtes Widget benötigt.

Was das Feld Schriftart bewirkt #

• Rendert einen Dropdown der Schriftfamilie im Elementor-Panel des Widgets und listet Systemschriftarten und Google Fonts auf.
• Speichert die gewählte Familie beispielsweise als einfache Saite Lora oder Georgia.
• Druckt diese Zeichenfolge durch {{ your_field_name }}Typischerweise innerhalb eines font-family Regel im CSS-Panel.
• Steuert genau eine Eigenschaft Größe, Gewicht, Abstand, und der Rest bleiben in Ihrem Stylesheet oder in separaten Bedienelementen.
• Nimmt einen Standardfamiliennamen an, sodass das Widget mit einer absichtlichen Schriftart ausgeliefert wird.

Noch kein Widget gebaut? die Übersicht über Widget Builder ist der Ort, an dem vor den Felddokumenten begonnen werden soll.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget öffnet sich im Widget Builder-Editor. Unser Beispiel ist ein Pull-Zitat-Widget mit einem benannten Schriftartenfeld quote_font Dadurch ändert sich nur die Schriftart des Zitattextes.

So fügen Sie ein Schriftartenfeld hinzu #

Ziehen Sie die Schriftart Feld aus dem Feldfeld in einen Abschnitt unter dem Stil Tab, sein natürliches Zuhause, obwohl jede Tabulator funktioniert Seine Optionen öffnen sich links, sobald es landet.

Schriftfeldoptionen erklärt #

Die Optionsliste ist kurz, das ist der Sinn des Feldes:

• Etikett: Der neben dem Dropdown in Elementor angezeigte Text, zum Beispiel “Zitatschrift”.
• Name: Die eindeutige Kennung, auf die sich Ihre Vorlagen beziehen Nur Buchstaben, Zahlen und Unterstriche, zum Beispiel quote_font.
• Standard: Die Familiennamenzeichenfolge, mit der das Widget beginnt, zum Beispiel Georgia. Wählen Sie etwas aus, das gut rendert, bevor jemand die Steuerung berührt.

Verbinden Sie das Schriftartenfeld in Ihrem CSS-Panel #

Das Feld Schrift ist ein Tokenfeld, und das CSS-Panel ist dort, wo sein Token hingehört Drucken Sie den Wert innerhalb eines font-family Regel und folgen Sie ihm immer mit einem Fallback-Stack:

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

Der Token gibt den ausgewählten Familiennamen wieder, sodass die obige Regel lautet font-family: Lora, Georgia, serif; Wenn ein Editor Lora auswählt Größe und Zeilenhöhe bleiben bei Ihnen; das Steuerelement vertauscht nur die Schriftart.

Das Token funktioniert auch im HTML-Panel, zum Beispiel in einer Bedingung, die eine Klasse wechselt, wenn eine bestimmte Familie aktiv ist, aber CSS ist die praktische Heimat dafür.

Pass auf: Die Auswahl einer Google-Schriftart in diesem Dropdown lädt die Schriftartdatei nicht. Im Gegensatz zum Typografie-Gruppensteuerelement stellt das Schriftartenfeld Google Fonts nicht automatisch in die Warteschlange, sodass eine ausgewählte Webschriftart als Fallback rendert, es sei denn, die Website lädt sie auf andere Weise. Entweder lassen Sie das Widget die Schriftart selbst laden, ein kleiner JS-Panel-Injektor, der den Google Fonts-Stylesheet-Link anhängt, funktioniert oder beschränken Sie die Erwartungen auf Schriftartenstapel, die die Website bereits hat. Dieser Fallback-Stack nach dem Token ist keine optionale Dekoration; Dies ist es, was Besucher sehen, wenn die Familie nicht geladen wird.

Ein Minimallader im JS-Panel sieht so aus:

// 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);
}

Eine Subtilität in diesem Lader: der getElementById Schutztasten auf einer festen ID, also wenn das gleiche Widget zweimal auf einer Seite mit zwei verschiedenen Familien erscheint, lädt nur die Schriftart der ersten Instanz, die zweite fällt stillschweigend zurück Wenn mehrere Instanzen pro Seite ein realistisches Szenario für Ihr Widget sind, bauen Sie stattdessen die ID aus dem Familiennamen.

Verwenden Sie die Schriftartensteuerung in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war. Das Schriftartenfeld erscheint als Dropdown unter Ihrem Etikett; Öffnen Sie es und die Familienliste kann beim Tippen durchsucht werden.

Wählen Sie eine Familie und die Vorschau-Updates aus, lädt das Widget die Schriftart, zieht die neue Schriftart ein, sobald die Datei ankommt Ansonsten rendert das Element im Fallback von Ihrem Stack.

Häufige Anwendungsfälle #

• Zitat - und Testimonial-Widgets Wo nur der Zitatetext die Schriftart vertauscht.
• Dekorative Überschriften In Helden - und Banner-Widgets, wobei der Fließtext unberührt bleibt.
• Monogramm-, Dropcap- und Etikettenelemente Die ein Display-Gesicht tragen.
• Widgets, die eine einzige Markenauswahl offenlegen Ohne den Kunden ein vollständiges Typografiefeld zu öffnen.
• Bedingte KlassenumschaltungVergleichen des Werts im HTML-Panel, wenn eine Familie zusätzliche Buchstabenabstandsregeln benötigt.

Tipps für die Arbeit mit dem Feld Schrift #

• Schreiben Sie immer einen Fallback-Stack. font-family: {{ quote_font }}, Georgia, serif; Hält das Widget lesbar, wenn die ausgewählte Schriftart nicht geladen wird.
• Denken Sie daran, dass es keine automatische Warteschlange gibt. Hier ausgewählte Google-Schriftarten benötigen einen Loader im Widget oder eine Website, die sie bereits lädt; Das ist die eine scharfe Kante des Feldes.
• Greifen Sie nach Typografie, wenn Sie mehr brauchen. Größe, Gewicht, Abstand, Reaktionswerte und automatisches Laden der Schriftart gehören alle dazu Typografiefeld. Schriftart ist für den reinen Familienfall.
• Legen Sie einen echten Standard fest. Eine explizite Startfamilie schlägt die Erbschaft dessen, was das Thema einkaskadiert.
• Bewahren Sie das Token in CSS auf. Eine Regel im CSS-Panel ist einfacher zu pflegen als im HTML verstreute Attribute im Inline-Stil.
• Erwarten Sie hier keine Selector-Verknüpfung. Die natürliche Verkabelung für dieses Feld ist der Token in Ihrem eigenen font-family Regel, wo man auch die Fallbacks steuert.

Häufig gestellte Fragen #

Einwickelnd #

Das Widget Builder-Schriftfeld erledigt einen Auftrag mit sehr wenig Oberfläche: einen Familien-Dropdown im Panel, einen String-Token in Ihrem font-family Regel, und volle Kontrolle über die Fallbacks, die in Ihren Händen bleiben Laden Sie die Schriftart, wenn Sie Google-Familien anbieten, und steigen Sie auf die Typografiefeld Wenn ein Widget das komplette Text-Styling-Panel benötigt Entdecken Sie den Rest des Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.