Schriftarten und Schriftgrößen mit Divi 5 verwalten

Schriftarten und Typografie geben den Ton für Ihre Website an. Wenn Sie es richtig machen, können Sie Ihrer Marke helfen und die Lesbarkeit verbessern. Divi 5 macht die Arbeit mit Schriftarten schnell und einfach. Mit den neuen Funktionen von Divi wie Designvariablen und den Voreinstellungen der Option Gruppen wird das Einrichten von Schriftarten einfach.

In diesem Beitrag werden Sie in Divi 5 mit Schriftarten und Schriftgrößen verwaltet, wodurch reaktionsschnelle Typografie erstellt wird, die auf Geräte wunderbar über Geräte skaliert werden.

Divi 5 ist bereit für neue Website -Builds, aber wir verbringen den Abschluss des Rückwärtskompatibilitätssystems. Halten Sie in der Zwischenzeit die Aktualisierung von Websites auf D4. Wir werden Sie wissen lassen, wann diese Änderung passiert.

Überlegungen beim Überdenken von Schriftarten für eine neue Website

Bei der Start einer neuen Site formen die Schriftart den ersten Eindruck des Benutzers. Betrachten Sie diese Punkte, um sicherzustellen, dass Ihre Typografie Ihren Inhalt unterstützt:

• Lesbarkeit : Wählen Sie klare Schriftarten, insbesondere für Körpertext.
• Konsistenz : Begrenzen Sie Ihre Schriftarten - zwei oder drei Arbeiten am besten mit mindestens einer für Überschriften und einer für Körpertext.
• Reaktionsfähigkeit : Stellen Sie sicher, dass sich Schriftarten an verschiedene Bildschirmgrößen anpassen (idealerweise von 320px bis 1440px).
• Kompatibilität : Entscheiden Sie sich für Web-Safe- oder beliebte Schriftarten, um Ausstellungsprobleme zu vermeiden.

Wie man Schriftarten und Schriftgrößen in Divi 5 verwaltet

Verwenden wir ein vorgefertigtes Layout aus Divis Bibliothek. Wir werden das Layout der Zielseite aus dem „Business CV“ -Paket auswählen und die Typografie mit den neuen Funktionen von Divi 5 überarbeiten. Wenn Sie eine vorhandene Divi 5 -Website haben, aber ihre Typografie verbessern möchten, können Sie dieselben Schritte befolgen, ohne dieses Layout zu verwenden.

Schritt 1: Schriftartpaarungen wählen

Gute Schriftartpaarungen Mischstil und Lesbarkeit. Google -Schriftarten sind auch eine sichere Wette, da sie in Divi integriert und einfach zu bedienen sind.

In den folgenden Beispielen bleiben wir bei der Verwendung von Mohnblättern durch das Layoutpack für die Überschriften und den Körpertext. Sie können auch versuchen, Lora und Roboto zu kombinieren.

Schritt 2: Schriftarten für Primärkopf und Körper einstellen

Nachdem Sie Schriftarten ausgewählt haben, können wir sie mit Divi zur Website hinzufügen. Öffnen Sie im visuellen Editor den Variablenmanager oben links. Mit den Designvariablen von Divi können Sie weltweit Schriftarten auf Ihrer Website steuern.

Es gibt zwei Standard -Schriftvariablen für Ihre primäre Überschrift und Körperschriften. Gehen Sie zum Abschnitt "Schriftarten" und stellen Sie " Poppins " als Kopfschrift und " Roboto " als Körperschrift.

Stellen Sie Ihre Schriftarten auf das, was mit Ihren Design- und Markenanforderungen entspricht

Zu diesem Zeitpunkt könnte es auch eine gute Idee sein, sicherzustellen, dass Ihre Markenfarben auch als Designvariablen festgelegt sind, insbesondere wenn Sie einige dieser Farben im Text verwenden möchten.

Stellen Sie sicher, dass Sie Ihre Variablen speichern, wenn Sie fertig eingegeben werden

Schritt 3: Erstellen von Schriftgrößen

Nun zum stärker beteiligten Teil. Es ist am besten, sich überlegen, wie Sie Ihre Typografie in jeder Gerätegröße gut aussehen lassen. Mit Divi 5 haben Sie zwei Optionen. Die erste und bevorzugte Option besteht darin, Clamp () zu verwenden, und die zweite besteht darin, die Schrift mehrmals an verschiedenen Haltepunkten einzustellen.

Wie Sie Ihre Schriftgrößen Sie für jede Überschrift, Körpertext und andere Textsituationen aufbauen, liegt ganz bei Ihnen.

Fluid -Typogrphie mit Clamp ()

Mit Clamp () können Sie einen Mindestwert, einen bevorzugten Wert und einen maximalen Wert festlegen. In einem anderen Beitrag gehen wir in Tiefe über Clamp () und bieten eine einfache Möglichkeit, diese Werte herauszufinden. Aber hier ist ein Beispiel:

Dieses Layout hat eine Standard -H1 -Größe und eine eindeutige (und größere) H1 -Größe für den Namen der Person im ersten Abschnitt. Wir haben das gleiche Prinzip im obigen Größendiagramm übertragen und eine kleinere Variation der Körperschrift hinzugefügt.

Sie können Ihre Schriftgröße in einem einfachen HTML -Dokument testen, um die Dinge isoliert zu sehen (dies kann auch in Divi erfolgen). So sieht die oben genannte Schriftgröße mit der Schriftartpaarung aus.

Sobald Sie sich mit Ihren Schriftarten vertraut machen, können Sie sie als Designvariablen hinzufügen. Geben Sie jedem einen erkennbaren Namen und fügen Sie den Wert rechts ein.

Feste Einheiten mit Haltepunkten

Clamp () ist die vielseitigste Option für die Schriftgröße, aber viele Benutzer verwenden immer noch feste Werte wie Pixel oder REM. Sie können diese neben Divis anpassbaren Haltepunkten verwenden, um Ihre Schriftart nach Bedarf auf und ab zu skalieren.

Da Ihre Anzahl von Werten für einen ähnlichen Effekt auf diese Weise verdreifacht (anstelle von 10 Clamp () -Werten oben, wären dies 30 individuelle Werte). Es wird nicht unbedingt empfohlen, den Variablenmanager mit diesen Werten zu füllen, aber Sie können, wenn Sie möchten,, wenn Sie möchten.

Sie können Ihre Größenstruktur für jeden Haltepunkt erstellen und auf den nächsten Schritt übertragen. Anstatt sie als Konstruktionsvariablen zu platzieren, können Sie sie direkt auf Optionsgruppen- und Elementvoreinstellungen anwenden.

Schritt 5: Hinzufügen von Schriftgrößen vom Variablenmanager zu Voreinstellungen

Mit Ihren Zahlenvariablen (oder zumindest formuliert) ist es Zeit, sie auf Voreinstellungen anzuwenden. Einer der besten Anwendungsfälle für Optionsgruppenvoreinstellungen ist die Typografie. Sie können sieben (7) Überschriften-/Titel -Optionsgruppen -Voreinstellungen erstellen, die Sie für jedes Modul verwenden können, das das Feld zur Überschrift/zum Titel verwendet (wie zum Beispiel Überschrift, Klappentext, Akkordeon und Personenmodule).

Gleiches gilt für die Textoptionsgruppe. Ich kann zwei (2) Voreinstellungen (eine für meinen Normalen und einen für meinen kleinen Körpertext) festlegen, und jedes Modul, das die Textoptionsgruppe verwendet, kann diese Stile verwenden. Für Überschriften und Textstile ist dies viel effizienter als die Anwendung dieser Stile als Elemente auf alle verschiedenen Module, die Sie auf Ihrer gesamten Website verwenden.

Zuweisen von festen Werten an Breakpoints

Das folgende Video zeigt die grundlegenden Schritte, wenn Sie sich für die festen Werte an mehreren Haltepunkten entschieden haben. Klicken Sie auf ein Textmodul, gehen Sie zur Registerkarte Entwurf , schweben Sie über die Textoptionsgruppe, klicken Sie auf das OG -Symbol , erstellen Sie eine neue Voreinstellung und wenden Sie Ihre Stile an jedem Haltepunkt an. Scrollen Sie zum Boden der rechten Seitenleiste und speichern Sie Ihre Voreinstellung ( sehr wichtig ). Wiederholen Sie dies für so viele Textvariationen wie Sie (wie kleine, reguläre und große Optionen).

Weisen Sie die OG -Voreinstellung zu, die Sie für diese Optionsgruppe am meisten als Standard -Voreinsatz verwenden. Wenn Sie einen Stern daneben sehen, ist dies Ihre aktuelle Standardeinstellung (dies gilt auf Ihrer Website unter der Annahme, dass keine anderen Modulstile oder Elementvoreinstellungen überall angewendet werden).

Zuweisen von Clamp () -Funktionen (einfacher)

Der Prozess ist bei der Verwendung von Entwurfsvariablen mit der Funktion clamp () ähnlich, aber viel einfacher. Im folgenden Beispielvideo haben wir zwei Überschriftengrößen auf der Option -Gruppenebene festgelegt. Der einzige Unterschied zu den oben genannten besteht darin, dass wir die Werte nicht einfügen, sondern die Variablen, die wir früher eingerichtet haben. Stellen Sie beim Einrichten Ihrer OG -Voreinstellungen sicher, dass die Standardschriften ausgewählt werden, und stellen Sie die Farben so ein, wie Sie möchten. Einige Leute mögen stattdessen Farben auf der Modulebene, aber es liegt an Ihnen.

Sie setzen jedes H1-H6-Überschriftenpegel als neue benutzerdefinierte Optionsgruppengruppe Preset .

Wenden Sie diese Voreinstellungen mit den von Ihnen erstellten Optionsproduktionen Ihres Layouts mit den von Ihnen erstellten Optionsproduktionen an. Das Schöne an Option Group Presets ist, dass sie in dieser Optionsgruppe über Module hinweg funktionieren, wie z. B. Text-, Klappentext- und Headermodule.

Best Practices für Schriftarten in Divi 5

Um Ihre Typografie zu maximieren, denken Sie an diese Tipps:

• Stellen Sie immer globale Schriftvariablen frühzeitig fest.
• Verwenden Sie einen konsistenten Abstand und Größen (ja, Sie können auch Buchstabenabstand und Linienhöhe als Entwurfsvariablen festlegen).
• REIDIGE STREIBENE ANTWORTEN ANDAHMEN ANGEBÄUDE DER SCHRIFF -Größen.
• Vermeiden Sie zu viele Schriftarten oder Schriftgewichte.

Typografie in Divi 5 ist ein Hauch frischer Luft

Dank der neuesten Funktionen von Divi besitzen Sie jetzt ein komplettes Typografiesystem.

Schriftarten leben als Designvariablen. Gleiches gilt für Schriftgrößen, wenn Sie Clamp () verwenden. Oder wenn Sie alle sieben anpassbaren Haltepunkte ausüben möchten, können Sie auch diese Route nehmen.

Option Group Presets wenden diese Auswahlmöglichkeiten mühelos auf Ihrer gesamten Website an. Die Optimierung der Schriftgrößen im gesamten Build ist besonders einfach, da sie als Designvariablen eingestellt sind. Egal was passiert, Ihre Entwürfe bleiben scharf und Ihre Bauzeit wird schrumpfen.

Divi 5 hat viele neue Funktionen auf den Markt gebracht, die Ihr Designsystem aktualisieren. Bauen Sie noch heute mit dem Bau neuer Standorte in Divi 5, um die neuesten Funktionen zu nutzen. Wir empfehlen, etwas länger darauf zu warten, vorhandene Websites auf Divi 5 zu migrieren.