Typografie

Die Typografiefeld Gibt einem benutzerdefinierten Widget genau das gleiche Typografiefeld, das Elementors Kern-Widgets verwenden: Schriftfamilie mit Google Fonts, Größe, Gewicht, Transformation, Stil, Dekoration, Zeilenhöhe, Buchstabenabstand und Wortabstand, alle responsiv pro Gerät. Innerhalb der Master-Addons Widget-builderIn 's, fügen Sie das Feld einmal hinzu, richten es auf einen CSS-Selektor, und jeder, der das Widget in Elementor bearbeitet, kann den Text neu gestalten, ohne Code zu berühren.

Wie jedes Widget Builder-Steuerelement unterstützt Typography BedingungenSo können Sie es verborgen halten, bis ein benutzerdefinierter Schalter eingeschaltet ist. Die Token-Ausgabe über den Builder läuft durch die Twig-Syntax-Vorlagen-Engine; Beide Leitfäden behandeln die Details und Einschränkungen.

Anders als bei Text - oder Farbfeldern verwendet das Feld Typografie keinen Shortcode in Ihrem CSS, Sie teilen dem Feld mit, welche Auswahl es steuert, und Elementor schreibt die Typografie-Stile eigenständig an diesen SelektorEin Feld, ein Selektor, fertig.

Was das Feld Typografie macht #

Ein Typografiefeld rendert die Typografiegruppensteuerung von Elementor im Optionsfeld Ihres Widgets, wenn jemand das Widget auswählt und auf das Bleistiftsymbol neben der Beschriftung des Feldes klickt, öffnet sich ein Popover mit dem vollständigen Satz von Textsteuerelementen:

• Schriftfamilie: Ein durchsuchbarer Dropdown mit Systemschriftarten, Google Fonts und allen auf der Website registrierten benutzerdefinierten Schriftarten.
• Schriftgröße: Ein Schieberegler und eine Eingabe mit px-, em-, rem- und vw-Einheiten, die pro Gerät reagieren.
• Schriftgewicht: 100 bis 900 plus Normal und Fett.
• Transformation, Stil und Dekoration: Groß - und Kleinschreibung, kursiv und schräg, unterstrichen und durchstrichen.
• Zeilenhöhe, Buchstabenabstand und Wortabstand: Jeder mit seinem eigenen responsiven Input.

Das Globus-Icon ist auch da, so kann das Widget dem der Seite folgen Globale Schriftarten Voreinstellungen statt einmaliger Stil Dies folgt dem gleichen Muster wie die anderen Widget Builder-Felder: Feld ablegen, benennen, verbinden Der eine Unterschied besteht darin, wie es sich verbindet, durch einen Selektor statt durch einen Shortcode Wenn Sie neu im Erstellen von Widgets sind, beginnen Sie mit dem Übersicht über Widget Builder Zuerst.

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, das im Widget Builder-Editor geöffnet wird Unser Beispiel ist ein Restaurant-Helden-Widget mit einem <h1 class="bfh-title"> Überschrift und ein <p class="bfh-lede"> Intro-Absatz in seinem HTML.

So fügen Sie ein Typografiefeld hinzu #

Scrollen Sie im Widget Builder-Editor im Feldfenster auf der linken Seite, bis Sie das gefunden haben Typografie Feld, aufgelistet mit den anderen Stilgruppenfeldern.

Ziehen Sie das Feld Typografie in einen Abschnitt unter der Inhalt, Stil, oder Fortgeschritten Tab. Stil ist das natürliche Zuhause dafür, obwohl es überall funktioniert Sobald es landet, öffnen sich die Optionen des Feldes auf der linken Seite.

Typografie Feldoptionen erklärt #

Wählen Sie das Feld Typografie aus, um seine Einstellungen zu öffnen.

• Etikett: Der neben dem Steuerelement in Elementor angezeigte Text, standardmäßig “Typografie” Bei mehreren Typografiefeldern in einem Widget Namen wie “Titeltypografie” und “Knopftypografie” verwenden.
• Name: Die eindeutige Kennung für das Feld Es darf nur Buchstaben, Zahlen und Unterstriche enthalten, zum Beispiel title_typography.
• Beschreibung: Optionaler Helfertext, der unter dem Steuerelement angezeigt wird.
• Auswahl: Der CSS-Selektor, auf den die Typografiestile angewendet werden Dies ist die eine Einstellung, die das Feld funktionieren lässt, die im nächsten Abschnitt behandelt wird.
• Standardwert: Verknüpfen Sie das Feld optional mit den Presets von Elementor für globale Schriftarten mit einem von Primary, Secondary, Text oder Accent. Das Widget beginnt dann mit der angewendeten Voreinstellung und folgt ihm, wenn sich die globalen Schriftarten der Website ändern.
• Etikett anzeigen und Trenner: Die Standardanzeige schaltet um, plus Bedingungen weiter unten, um das Feld nur dann anzuzeigen, wenn ein anderes Steuerelement einen bestimmten Wert hat.

Richten Sie das Feld auf Ihren Wähler #

Hier ist der Teil, der Menschen auf die Beine stellt, wenn sie an die anderen Felder gewöhnt sind: Das Feld Typografie hat keine {{shortcode}} Für Ihr CSS. Ein Typografiewert ist ein ganzes Bündel von Eigenschaften, kein einzelner Wert, kann also nicht in eine CSS-Deklaration drucken Stattdessen füllen Sie die Wähler Option und Elementor generiert die Styles für Sie.

Für den Intro-Absatz des Helden lautet der Selektor:

{{WRAPPER}} .bfh-lede

• {{WRAPPER}} Steht für den eigenen Container des Widgets, die Styles treffen also immer nur dieses Widget und gelangen nie an den Rest der Seite Starten Sie den Selektor immer damit.
• .bfh-lede Ist das Element in Ihrem Widget HTML, das das Steuerelement stylen sollte.
• Um mehrere Elemente mit einem Steuerelement anzutreiben, trennen Sie Selektoren mit Kommas und geben Sie jedem sein eigenes {{WRAPPER}}: {{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.

Wenn Sie den Selector leer lassen, fällt das Feld zurück zum ganzen Container des Widgets, der jedes Textstück im Widget auf einmal styled Das ist meistens mehr als Sie wollen Setzen Sie den Selektor, dann klicken Sie Einstellungen speichern.

Ihr Stylesheet im CSS-Tab funktioniert weiterhin als Startoptik des Widgets. Was auch immer font-family oder font-size Sie haben geschrieben, dass es so lange an Ort und Stelle bleibt, bis ein Benutzer etwas im Panel auswählt; Die Werte des Steuerelements überschreiben es dann.

Verwenden Sie die Typografie-Steuerung 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. Wählen Sie das Widget aus und das Typografie-Steuerelement erscheint in seinem Bedienfeld mit dem von Ihnen festgelegten Etikett, einem Globussymbol für globale Schriftarten und einem Bleistiftsymbol für benutzerdefinierte Werte.

Wählen Sie eine Schriftfamilie und -größe aus #

Klicken Sie auf das Bleistiftsymbol, um den Popover der Typografie zu öffnen Die Familie Dropdown sucht Systemschriften und die vollständige Google Fonts-Bibliothek, während Sie eingeben Darunter, die Größe Nimmt einen Wert in, em, rem vw, und mit dem Gerätesymbol können Sie eine andere Größe pro Haltepunkt festlegen. Eine 96-px-Desktop-Schlagzeile kann auf Telefonen mit demselben Steuerelement auf 48px herunterfallen.

Legen Sie Gewicht, Abstand und den Rest fest #

Der gleiche Popover gilt Gewicht, Transformieren, Stil, Dekoration, Linienhöhe, Buchstabenabstand, und Wortabstand. Jede Änderung landet live in der Vorschau, so können Sie beobachten, wie sich die Überschrift beim Herunterziehen des Buchstabenabstands verschärft, wenn sich nichts zu ändern scheint, überprüfen Sie, ob Ihr Selektor tatsächlich mit einem Element im Widget HTML übereinstimmt; ein Tippfehler im Klassennamen schlägt lautlos fehl.

Oder folgen Sie den Global Fonts der Seite #

Klicken Sie stattdessen auf das Globussymbol und wählen Sie Primary, Secondary, Text oder Accent Der Text des Widgets folgt nun dieser globalen Voreinstellung, und wenn ein Redesign die Schriftarten der Website vertauscht, folgt dieses Widget, ohne dass jemand es berührt Wenn Sie einen Standardwert auf dem Feld festlegen, ist dieser Link bereits aktiv, wenn das Widget zum ersten Mal auf einer Seite verworfen wird.

In unserem Beispiel wechselt die Überschrift zu einer Skriptfläche mit 98 px, die direkt aus der Google Fonts-Liste ausgewählt wurde, und die Vorschau zeichnet den Moment neu, in dem die Schriftart geladen wird.

Häufige Anwendungsfälle #

• Überschriften in Helden - und Banner-Widgets Wo jede Seite ihre eigene Anzeigeschrift haben möchte.
• Knöpfe Das muss mit der vorhandenen Schaltflächentypografie der Website übereinstimmen.
• Kartentitel und Auszüge Mit jeweils separaten Feldern, sodass Titel und Fließtext unabhängig voneinander skaliert werden.
• Testimonial- und Zitat-Widgets Wo das Zitat eine kursive Serife nimmt und die Zuschreibung in der Hauptschrift bleibt.
• Client-orientierte Widgets Wo Redakteure Text frei neu gestalten sollten, ohne jemals das CSS zu öffnen.

Tipps für die Arbeit mit dem Feld Typografie #

• Die Option Selector ist die gesamte Verbindung. Es gibt keinen Typografie-Shortcode, der in Ihren CSS-Element einfügt, um den Selektor auszuwählen und die Stile von Element schreiben zu lassen.
• Starten Sie den Selektor immer mit {{WRAPPER}}. Ohne sie gelten die Styles für jedes Match auf der Seite, nicht nur für dein Widget In einer durch Kommas getrennten Liste braucht jeder Teil sein eigenes {{WRAPPER}}.
• Behalten Sie Ihre Basisstile auf der Registerkarte CSS. Sie sind das, wie das Widget auf einem frischen Tropfen aussieht; Die Steuerung überschreibt nur das, was der Benutzer tatsächlich ändert.
• Ein Feld pro Textrolle. Ein Titelfeld, ein Körperfeld und ein Tastenfeld geben den Redakteuren eine saubere Kontrolle. Ein auf das gesamte Widget gerichtetes Feld flacht alles auf einen einzigen Stil ab.
• Verwenden Sie die Standardeinstellungen von Global Fonts für Client-Sites. Durch die Verknüpfung des Feldes mit Primary oder Secondary bleiben benutzerdefinierte Widgets vom ersten Tag an mit dem Designsystem der Website Schritt.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Typography gibt Editoren das Panel, das sie bereits aus Elementors eigenen Widgets kennen, mit Google Fonts, responsiven Größen und globalen Voreinstellungen, auf jedes Element Ihres benutzerdefinierten Widgets. Nennen Sie das Feld, stellen Sie den Selector auf {{WRAPPER}} Plus die Klasse Ihres Elements, und jede Schriftentscheidung wandert aus Ihrem Stylesheet in das Panel Koppeln Sie es mit dem Grenzfeld und die Textfeld Widget-Panel zu bauen, das Inhalt und Stil an einer Stelle abdeckt Den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.