So ersetzen Sie Schriftarten durch die Schriftart von Divi 5 von Divi 5

Schriftart Updates können Kopfschmerzen haben. Ändern Sie eine Titelschrift und plötzlich finden Sie jeden Punkt, an dem er erscheint, auf. Verpassen Sie ein oder zwei Köpfe, und Ihr Design fühlt sich sofort aus. Die manuelle Aktualisierung von Schriftarten lädt eine Inkonsistenz ein.

Divi 5 löst dies mit Schriftarten und Voreinstellungen. Anstatt jede Instanz zu verfolgen, können Sie Ihre Schriftarten einmal einstellen und das System den Rest verarbeiten lassen. Die Typografie bleibt sauber und einheitlich, egal wie viele Module Sie verwenden. Schauen Sie sich an, wie einfach es sein kann.

Warum statische Schriftarten Probleme verursachen können

Statische Schriftart Setups erzeugen ein Netz von Komplikationen, die sich im Laufe der Zeit verschlimmern. Wenn Sie in jedem Element Schriftarten direkt hinzufügen, streuen Sie die Typografie -Auswahl an Hunderten verschiedener Orte.

Sie erstellen eine Site mit dem Playfair -Display für Überschriften und Mohnblätter für Körpertext. Ein paar Monate später möchten Sie zu einem moderneren Schriftstapel wechseln. Jetzt jagen Sie jedes Modul, jede voreingestellte, jede benutzerdefinierte Einstellung, um zu finden, wo diese Schriftarten leben. Verpassen Sie sogar eine Überschrift tief in einem Zeugnis, und Ihr Design kann kaputt aussehen.

Wenn Sie die Schriftarten nacheinander manuell aktualisieren, können Sie versehentlich unterschiedliche Größen oder Gewichte verwenden. Sie aktualisieren die meisten Überschriften auf 32px, verpassen jedoch einige, die bei 28px bleiben. Ihr einstkohäsives Design fühlt sich jetzt unausgeglichen an.

Diese verstreute Methode verwandelt einfache Schriftarten in Großprojekte. Was Minuten dauern sollte, erstreckt sich stundenlang mühsamer Jagd und Aktualisierung. Sie verbringen mehr Zeit damit, Typografie zu verwalten, als tatsächlich damit zu entwerfen.

Was Sie stattdessen verwenden sollten: Entwurfsvariablen und Voreinstellungen von Divi 5

Designvariablen speichern Ihre Designeinstellungen, die Sie überall wiederverwenden können. Stellen Sie eine Schriftart einmal ein, speichern Sie sie als Designvariable und verwenden Sie sie dann auf Ihrer Website. Ändern Sie die Variable später und alle Elemente automatisch aktualisieren.

Divi bietet sechs Variablentypen: Zahlen, Text, Bilder, Links, Farben und Schriftarten. Zwei Standard -Schriftvariablen sind bereit zu verwenden: eine für Überschriften und eine für Körpertext. Der Variable Manager befindet sich in der linken Seitenleiste unter dem Datenbanksymbol.

Diese Variablen funktionieren in Feldern, die sie nicht unterstützen, z. B. Zahlenfelder, Schriftfelder und Abstandseinstellungen. Klicken Sie auf das variable Symbol neben jedem unterstützten Feld, um Ihre Optionen anzuzeigen.

Welche Optionen Gruppenvoreinstellungen tun

Option Gruppenvoreinstellungen speichern bestimmte Stilgruppen wie Typografie, Grenzen oder Abstand, nicht die gesamten Module. Sie können beispielsweise nur eine Voreinstellung für Kopf- und Größen erstellen.

Wenn Sie eine Optionsgruppe Preset anwenden, ändert sie nur diesen Stilbereich. Der Rest Ihres Moduls bleibt gleich. Sie können verschiedene Voreinstellungen auf einem Element ohne Probleme kombinieren. Mischen Sie Designvariablen mit Voreinstellungen der Option Gruppen, um mehr Flexibilität zu erhalten. Erstellen Sie Voreinstellungen, die Ihre Variablen verwenden. Wenn Sie eine Variable aktualisieren, aktualisieren alle Voreinstellungen auch aktualisiert.

Schritt-für-Schritt-Anleitung zum Erstellen eines dynamischen Schriftsystems mit Divi 5

Das Einrichten der Schriftvariablen dauert ungefähr zwanzig Minuten. Sobald sie funktionieren, treten die Schriftveränderungen sofort auf Ihrer gesamten Website vor. Hier erfahren Sie, wie man dort ankommt:

1. Erstellen Sie Schrift Variablen für Ihr neues System

Öffnen Sie Variable Manager, indem Sie auf das Datenbanksymbol in Ihrer linken Seitenleiste klicken. Gehen Sie zur Registerkarte Schriftarten. Sie werden zwei Standardvariablen sehen: einen für Überschriften und einen für Körpertext.

• Richten Sie Ihre Hauptschriften ein: Klicken Sie auf die Variable zur Überschrift. Wählen Sie Ihre Schriftfamilie und Ihr Gewicht aus und speichern Sie sie. Tun Sie dasselbe für Körpertext, aber wählen Sie etwas Sauberes und Lesens.
• Fügen Sie bei Bedarf weitere Schriftarten hinzu: Einige Designs benötigen zusätzliche Schriftarten für Zitate, Testimonials oder spezielle Text. Klicken Sie auf "Neue Variable hinzufügen" und geben Sie ihm einen klaren Namen.
• Füllen Sie alle Details ein: Jede Variable hält Ihre Schriftfamilie, Ihr Gewicht, Ihren Stil und Ihre anderen Einstellungen. Verwenden Sie kräftige Gewichte für Überschriften, regelmäßige Gewichte für Körpertext und Kursivschrift, wenn Sie Betonung hinzufügen möchten.
• Halten Sie Ihre Namen einfach: Anstatt Labels zu verwechseln, nennen Sie sie "Schriftart" oder "Schriftlichtschrift".
• Denken Sie daran, zu speichern: Ihre Änderungen kleben erst, wenn Sie auf die Schaltfläche Speichern klicken.

Die meisten Websites benötigen nur Überschrift und Körperschriften. Fügen Sie nur zusätzliche Variablen für spezielle Designanforderungen hinzu, nicht für winzige Textverbesserungen. Weniger Variablen erleichtern das Erstellen neuer Inhalte erheblich.

2. Fügen Sie Zahlenvariablen für Schriftgrößen hinzu

Wechseln Sie zur Registerkarte "Zahlen" im Variablen -Manager. Hier erstellen Sie Größenvariablen, die mit Ihren Schriftarten funktionieren. Stellen Sie sich diese als eine Typografie -Skala vor.

Beginnen Sie mit Ihren Überschriftengrößen. Erstellen Sie Variablen mit dem Namen H1, H2, H3 und so weiter. Stellen Sie jede auf eine andere Größe ein, die für Ihr Design sinnvoll ist. Sie können reguläre Pixelwerte wie 32px oder reaktionsschnelle Einheiten wie Clamp () für Größen verwenden, die sich an andere Bildschirme anpassen.

Der Körpertext braucht auch seine Größenvariable. Nennen Sie es so etwas wie „Körpergröße“ und stellen Sie es auf eine bequeme Lesegröße ein, normalerweise zwischen 16 und 18 Uhr.

Sie können auch Variablen für spezielle Textanforderungen erstellen. Vielleicht möchten Sie eine "kleine Textvariable" für Bildunterschriften oder eine "große Textvariable" für Testimonials. Nennen Sie sie klar, damit Sie sich erinnern, wofür sie später sind.

Diese Zahlenvariablen funktionieren überall, wo Sie eine konsistente Größe benötigen. Verwenden Sie sie für Linienhöhen, Abstand oder eine Messung, die mehrmals auf Ihrer Website erscheint. Wenn Sie eine Zahlenvariable aktualisieren, ändert sich alles automatisch.

Die meisten Websites benötigen nur Überschrift und Körperschriften. Fügen Sie nur zusätzliche Variablen für spezielle Designanforderungen hinzu, nicht für winzige Textverbesserungen. Weniger Variablen erleichtern das Erstellen neuer Inhalte erheblich.

3.. Verwenden Sie Find und Ersetzen, um statische Schriftarten auszutauschen

Klicken Sie mit der rechten Maustaste auf ein Feld mit der rechten Maustaste in Ihren Moduleinstellungen, um die Option Find and Ersendung anzuzeigen. Dadurch wird ein Panel geöffnet, in dem Divi Ihre aktuellen Schriftstellungen automatisch lädt. Sie können diese statische Schriftart jetzt mit einer Ihrer Designvariablen tauschen.

Das Feld Quellelement zeigt an, aus welchem Modul Sie gestartet sind. Sie können dies ändern, um ein anderes Element auf Ihrer Seite als Ausgangspunkt auszuwählen.

Der Wert Find Value zeigt alle eine Schriftart an, die Sie ersetzen möchten. Setzen Sie Ihren Ersatzwert auf eine Ihrer Schriftarten -Designvariablen.

Finden und ersetzen Sie auch Arbeiten für Schriftgrößen. Klicken Sie mit der rechten Maustaste auf ein Feld der Schriftgröße, um auf das gleiche Ersatzfeld zuzugreifen. Auf diese Weise können Sie Größen auf Elementebene wie 24px mit Ihren Nummernvariablen tauschen.

Suchen Sie nach Textmodulen, bei denen Sie die Schriftgrößen manuell festlegen. Diese verstreuten Größeneinstellungen erzeugen die gleichen Probleme wie statische Schriftarten. Wenn Sie Ihre Typografie -Skala anpassen möchten, suchen Sie am Ende jedes Modul, um jede Größe zu finden. Ersetzen Sie diese statischen Größen durch H1-, H2-, Körpergröße oder andere Zahlenvariablen.

Stellen Sie Ihre Ersatzgrenzen ein

Finden und ersetzen Sie Standortsteuerungen, bei denen Änderungen eintreten. Wählen Sie "ganze Seite" aus, um Schriftarten über Ihr gesamtes Layout zu aktualisieren. Wählen Sie „aktuelles Element und Kinder“, um Änderungen in diesem speziellen Abschnitt und in allem, was darin verschachtelt ist, zu begrenzen.

Sie können auch über Eltern -Container oder bestimmte Seitenbereiche abzielen.

Suchen und ersetzen Sie den Elementtyp und können Sie sich auf bestimmte Module konzentrieren. Wählen Sie "alle Elemente" für einen vollständigen Schriftart Swap oder "Module", um Container und Strukturelemente zu überspringen. Sie können noch spezifischer erhalten, indem Sie nur bestimmte Modultypen abzielen.

Vermeiden Sie versehentliche Ersatze

Die Option "Nur identische Felder ersetzen" verhindert unerwünschte Änderungen. Schalten Sie dies ein, wenn Sie Schriftarten ersetzen möchten, ohne andere Einstellungen zu beeinflussen, die denselben Wert teilen könnten.

Dies hält Ihren Grenzradius bei 10px, auch wenn Sie eine Schriftart ersetzen, die zufällig als „10px“ oder ähnliches bezeichnet wird.

Suchen und ersetzen Sie ohne diese Einstellung die Suche nach Ihrem Zielwert überall. Wenn es aktiviert ist, ändert das System nur die tatsächlichen Schriftfelder und lässt andere Designeinstellungen allein.

4. Arbeiten Sie Ihr Schriftsystem durch

Sie benötigen separate Fund- und Ersetzungsvorgänge für verschiedene Schriftgewichte und -stile. Ihre Website verwendet möglicherweise die gleiche Schriftfamilie in regelmäßigen und kräftigen Gewichten. Behandeln Sie jede Variation einzeln und ersetzen Sie sie durch die entsprechenden Designvariablen, die Sie zuvor erstellt haben.

Jedes Mal ist der Prozess gleich: Klicken Sie mit der rechten Maustaste auf das Feld Schriftart, setzen Sie Ihren Ersatzwert auf eine Entwurfsvariable, wählen Sie Ihren Bereich und wenden Sie die Änderungen an. Wiederholen Sie dies für jede statische Schriftart, die aktualisiert werden muss.

5. Erstellen Sie Voreinstellungen mit Ihren Variablen

Greifen Sie auf ein Textmodul zu und navigieren Sie zur Registerkarte "Design". Suchen Sie die Typografie und klicken Sie auf das voreingestellte Symbol. Wählen Sie im Dropdown -Menü Ihre Schriftart -Variable. Wenden Sie Ihre H1 -Zahlenvariable für die Größe an.

Konfigurieren Sie die Leitungshöhen- und Abstandswerte. Nennen Sie die voreingestellte "Hauptüberschrift" und speichern Sie es. Klicken Sie auf das Sternsymbol, um dies als Standardeinstellung festzulegen. Neue Textmodule übernehmen diese Einstellungen automatisch. Alle vorhandenen Module mit demselben Überschriften -Tag und ohne Stile erben auch diese Einstellungen.

Sie können diesen Vorgang für jede Überschriftenstufe wiederholen. Jede Voreinstellung behält die Konsistenz bei, während sie unterschiedliche Zwecke dienen.

Diese Typografie -Voreinstellungen funktionieren mit jedem Modul, das Textfelder enthält. Klappentextmodule, Akkordeoninhalt, Testimonials und Kontaktformulare akzeptieren alle die gleichen Voreinstellungen. Diese Kompatibilität für Quermodulien beseitigt sich wiederholende Stylingaufgaben.

Option Group Preets zielen nur auf bestimmte Stilkategorien. Wenden Sie eine Überschrift Voreinstellung auf den Schaltflächentext an, während die Hintergrund- und Randeinstellungen der Schaltfläche intakt bleiben.

6. Erweitern Sie Ihre neuen Variablen über alle Elemente hinweg

Klicken Sie mit Ihrer rechten Maustaste mit Ihren neuen Variablen auf jedes Element. Wählen Sie im Menü "Attribute erweitern". Konfigurieren Sie das Quellelement als Ihr kürzlich aktualisiertes Modul.

Legen Sie den Speicherort auf "gesamte Seite" fest, um vollständige Updates zu erhalten. Wählen Sie unter Attributtypen „Stile“ aus, um sich nur auf Designelemente zu konzentrieren.

Aktivieren Sie „nur identische Felder ersetzen“, um unerwünschte Änderungen an Polsterung, Rändern oder anderen numerischen Werten zu verhindern, die möglicherweise mit Ihren Schriftarten übereinstimmen. Wählen Sie „alle Elemente“ aus, um Module und Container zu aktualisieren, oder wählen Sie „Module“, um Inhaltselemente speziell zu zielen.

Verarbeiten Sie komplexe Seiten in kleineren Abschnitten und nicht in ortsweiten Aktualisierungen. Wählen Sie „aktueller Abschnitt“ aus, um Änderungen auf einen Bereich gleichzeitig zu beschränken. Beginnen Sie mit Ihrem Header -Abschnitt. Wenden Sie variable Erweiterungen an, überprüfen Sie die Ergebnisse und fahren Sie mit den Hauptinhaltsbereichen fort. Vervollständigen Sie den Foot -Abschnitt zuletzt.

Dieser methodische Ansatz identifiziert die Formatierung von Konflikten frühzeitig und kontrolliert den Aktualisierungsprozess.

Divi 5 erleichtert die Typografie

Sie haben früher von Playfair -Display zu etwas Modernem gewechselt und die meisten Überschriften aktualisiert, aber das Testimonial auf Seite drei verpasst. Ihre Website sah wochenlang einseitig aus.

Die Variablen von Divi 5 optimieren die Typografie Ihrer Website. Ändern Sie Ihre Überschriftenvariable aus dem Datenbanksymbol in der Seitenleiste, und jedes Textmodul aktualisiert sofort. Dieser Kontaktformular ist enthalten.

Wenn Sie das nächste Mal umbenennen, aktualisieren Sie zwei Variablen, anstatt auf fünfzig Module zu klicken. Das Tool für Find und Ersetzen fängt das, was Sie normalerweise vermissen würden. Ihre Typografie bleibt eng und Ihre Wochenenden bleiben Ihre.