Schriftart

Das Feld Schriftart fügt einem benutzerdefinierten Widget, das Sie mit den Master-Addons erstellen, einen Dropdown der Schriftfamilie hinzu Widget-builder. Editoren wählen eine Systemschriftart oder eine Google-Schriftart in Elementor, und das Widget wendet sie auf das Element an, das Sie wählen Es ändert nur die Schriftart Größe, Gewicht und Zeilenhöhe bleiben in Ihrem CSS.

Schriftart ist eines der Felder, die Sie im Widget Builder der kostenlosen Version verwenden können. Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was das Feld Schriftart bewirkt #

• Fügt einen durchsuchbaren Dropdown zum Panel Ihres Widgets in Elementor hinzu Die Liste hat eine Standard Option, eine System Gruppe (Arial, Tahoma und so weiter) und eine Google Gruppe.
• Speichert den Familiennamen als Text, zum Beispiel Playfair Display.
• Schreibt a font-family Regel für die Elemente, unter denen Sie auflisten CSS-Selektoren. Wenn die Auswahl eine Google-Schriftart ist, lädt Elementor diese Schriftart für Sie auf die Seite.
• Gibt Ihnen auch einen Token, wie {{ quote_font }}, das druckt den Familiennamen.

Neu beim Bauherrn? lesen Sie die Übersicht über Widget Builder Kommen Sie dann zuerst mit geöffnetem Widget zurück.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor installiert und aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein “Pull Quote” - Widget: ein Textarea namens quote_textein Textfeld namens quote_authorund ein Schriftfeld namens quote_font Das setzt die Schriftart des Zitats.

So fügen Sie ein Schriftartenfeld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Klicken Sie auf die Stil Tab und fügen Sie einen Abschnitt hinzu, zum Beispiel “Zitatstil”.
3. Typ font Im Feldsuchfeld links.
4. Ziehen Schriftart In den Abschnitt Klicken Sie auf den Bleistift auf dem Feld, um seine Einstellungen zu öffnen.

Beim Stil erwarten Redakteure, Schriftoptionen zu finden, aber das Feld funktioniert auch in einem Inhalts- oder Erweiterungsbereich.

Schriftfeldoptionen erklärt #

• Etikett: Der Text über dem Dropdown in Elementor, zum Beispiel “Zitatschrift”.
• Name: Die eindeutige ID des Feldes und der Name seines Tokens Verwenden Sie zum Beispiel nur Buchstaben, Zahlen und Unterstriche quote_font.
• Beschreibung: Ein Hinweis, der unter dem Dropdown in Elementor angezeigt wird.
• Standardwert: Die Familie eine neue Kopie des Widgets beginnt mit Geben Sie den Namen genau so ein, wie er zum Beispiel in der Liste von Elementor erscheint Playfair Display.

Unter Gemeinsame Einstellungen finden Sie Etikett anzeigen, Beschriftungsblock, Trenner und BedingungenDie genauso funktionieren wie auf anderen Feldern Die Einstellung, die dieses Feld zum Funktionieren bringt, ist CSS-Selektoren.

Wenden Sie die Schriftart mit CSS Selectors an #

Nach unten scrollen, um CSS-Selektoren und klicken Artikel hinzufügen. Jede Reihe hat zwei Kästchen:

• CSS-Selektor: Das Element, das die Schrift erhält Für das Pull-Zitat ist .pq-quote. Sie brauchen nicht zu tippen {{WRAPPER}}„, weil der Builder es für Sie hinzufügt und die Regel in diesem Widget behält.
• CSS-Eigenschaften: Die Regel zum Schreiben. {{VALUE}} Familie gepflückt wird.

font-family: "{{VALUE}}", Georgia, serif;

Eine neue Zeile wird mit Beispieltext gefüllt .text-1, .text-2 und color: {{VALUE}};Ersetzen Sie beide Wenn Sie gehen color Im Eigenschaftenfeld landet der Schriftname als Farbwert und das Schriftbild ändert sich nicht.

Die Zitate rund {{VALUE}} Halten Sie Namen mit Leerzeichen wie Playfair Display am Laufen. Georgia, serif Ist der Fallback während die Schriftart lädt Um weitere Elemente zu stylen, klicken Sie erneut auf Element hinzufügen und fügen Sie eine weitere Zeile hinzu.

Verlassen Sie die Ebene Wähler Kasten unten leer In unseren Tests schrieb color: Lora; Für dieses Feld, das keine Schriftart festlegt.

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Warum nicht den Token in das CSS-Panel legen? #

Dort funktioniert der Token. font-family: "{{ quote_font }}", Georgia, serif; Druckt den richtigen Namen Das Problem ist das Laden In unseren Tests wurde eine Google Font, die nur durch den Token verwendet wurde, nicht auf das Frontend geladen, so dass Besucher die Fallback-Schrift sahen Eine CSS Selectors-Reihe gibt Elementor die Informationen, die es zum Laden der Schriftart benötigt, und der gleiche Pick kam korrekt durch.

Bewahren Sie das Token für Stellen auf, an denen Sie den Namen als Text benötigen, beispielsweise eine Klasse oder eine Beschriftung im HTML.

Verwenden Sie die Schriftartensteuerung in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Wählen Sie das Widget und öffnen Sie die Stil Tab. Klicken Sie auf den Dropdown unter Ihrem Etikett und beginnen Sie mit der Eingabe, um die Liste zu filtern Jeder Familienname wird in einer eigenen Schriftart gezeichnet, was die Auswahl erleichtert.

Wählen Sie eine Familie und die Vorschau-Updates aus Auf der veröffentlichten Seite lädt Elementor die Google-Schriftart zusammen mit den Stilen des Widgets.

Wählen Standard Löscht die Auswahl Das Widget fällt dann auf die Schriftart zurück, die Ihr CSS-Panel oder Theme für dieses Element festlegt, also geben Sie dem Element eine sinnvolle Schriftart im CSS-Panel.

Häufige Anwendungsfälle #

• Ziehen Sie Zitate und Erfahrungsberichte, bei denen nur der Zitatetext die Schriftart ändert.
• Überschriften in Helden - oder Banner-Widgets anzeigen, wobei der Fließtext in Ruhe gelassen wird.
• Preisnummern, Abzeichen oder Etiketten, die eine Markenanzeigeschrift verwenden.
• Client-Sites, auf denen Redakteure eine Schriftart auswählen, aber keine Größen und Abstände berühren sollten.

Tipps für die Arbeit mit dem Feld Schrift #

• Verwenden Sie zum Styling CSS-Selektoren anstelle des Tokens. Das ist es, was Google Fonts laden lässt.
• Fügen Sie immer einen Fallback-Stack hinzu Nach {{VALUE}}(wie z Georgia, serif oder Arial, sans-serif.
• Größe und Gewicht in das CSS-Panel eingeben. Das Feld Schriftart setzt nur die Familie.
• Benötigen Sie auch Größen-, Gewichts- und Abstandsregler? Die Typografiefeld Pro-Feld ist, das alle bündelt.
• Jede Google-Schriftart fügt einen Download hinzu. Zwei oder drei Familien pro Seite sind eine vernünftige Grenze.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie das Schriftartenfeld zu einem Stilabschnitt hinzu, legen Sie eine Standardfamilie fest und fügen Sie eine CSS-Selektorzeile hinzu, die darauf verweist font-family: "{{VALUE}}" Bei Ihrem Element Editoren erhalten eine durchsuchbare Schriftliste in Elementor, und Google Fonts laden auf der Seite ohne extra Code Für Volltext-Styling, siehe die Typografiefeldund überprüfen Preisbildung Für das, was jeder Plan beinhaltet.