Springe zum Hauptinhalt

Wie man Typografie und Layout auf Divi anpassen kann

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Um das Layout und die Typografie Ihrer Website anzupassen, müssen Sie zuerst zum Theme Customizer wechseln, indem Sie auf den Link klicken Divi> Theme Customizer auf Ihrem WordPress-Dashboard. Dadurch wird der Customizer gestartet. Suchen Sie dann das Fenster "Allgemeine Einstellungen". Klicken Sie auf das Bedienfeld, um die entsprechenden Einstellungen zu öffnen und mit dem Anpassen zu beginnen. Im Bereich "Allgemeine Einstellungen" sehen Sie drei Abschnitte: Layouteinstellungen, Typografie und Hintergrund.

allgemeine Parameter divi.png

Layouteinstellungen

Über das Layoutfenster können Sie verschiedene Größen- und Abstandsoptionen für Ihre Website anpassen. Hier können Sie den Abstand zwischen Spalten, Zeilen und Abschnitten vergrößern oder verkleinern und die Größe Ihrer Seitenleiste anpassen. Sie können in diesem Bereich auch den Modus „Boxed Layout“ aktivieren.

Layoutparameter.png

Schachtelungslayout aktivieren

Hier können Sie Ihre Site in einem Box-Format bearbeiten, das den Inhalt Ihrer Site umrahmt und einen Hintergrund freigibt, der angepasst werden kann.

Breite des Inhalts der Website

Hier können Sie die maximale Breite Ihres Inhaltsbereichs festlegen. Da sich Ihr Inhalt in einem reaktionsschnellen Layout befindet, wird er an kleinere Größen angepasst, jedoch nicht mehr als die hier festgelegte maximale Breite gedehnt.
Der Standardwert ist 1080px. Es ist eine gute Breite für die meisten Standard-Laptops und -Desktops.

Spaltenabstand auf der Website

Die Breite der Rinne ist der horizontale Abstand (Rand) zwischen den Spalten in jeder Zeile.

Die optionalen Werte für die Rinnenbreite liegen zwischen 1 und 4.

1 steht für den Nullabstand zwischen den Spalten.
2 repräsentiert einen Abstand von 3% zwischen den Spalten.
3 repräsentiert einen Abstand von 5,5% zwischen den Spalten.
4 repräsentiert einen Abstand von 8% zwischen den Spalten.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

divi.png Konfiguration

Verwenden Sie die benutzerdefinierte Breite der Seitenleiste

Dadurch wird die Standardbreite der Seitenleiste für Ihr Thema festgelegt. Dies gilt für alle Seiten in Ihrem Thema, die eine Seitenleiste haben und nicht mit Divi Builder erstellt wurden.

Höhe des Abschnitts und der Linie

Diese Optionen passen den vertikalen Abstand (obere und untere Polsterung) für jeden Abschnitt und jede Reihe an.

Thema Akzentfarbe

Bevor Sie die Farben Ihrer anderen Elemente ändern, müssen Sie diese zuerst ändern. Sobald Sie es geändert haben, speichern und veröffentlichen Sie Ihre Einstellungen und aktualisieren Sie Ihre Seite. Jetzt sollte das aktualisierte Akzentfarben-Design andere Elemente automatisch ausfüllen.

Typographie

Im Typografie-Bedienfeld können Sie das Standard-Erscheinungsbild von Text auf Ihrer gesamten Website anpassen. Sie können die Größe Ihrer Schriftart und Überschriften anpassen, die in allen Bereichen der Site proportional angezeigt werden. Sie können ihre Farben sowie die Zeilenhöhe, den Buchstabenabstand und die Schriftstile anpassen. Schließlich können Sie auch aus Dutzenden von Schriftarten auswählen, die auf jede angewendet werden sollen.

Typografie auf divi.png

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Textkörpergröße

Dadurch wird der Standardtext für Ihr Thema geändert. Die Standardgröße ist 14px.

Höhe der Körperlinie

Die Zeilenhöhe jeder Textzeile.

Größe des Kopfzeilentextes

Mit Divi können Sie hier die Standardtextgröße für Ihre Kopfzeile festlegen. Dies betrifft Divi-Elemente wie Titel des Header-Moduls mit voller Breite.

Kopfbuchstabe

Der Buchstabenabstand passt den horizontalen Abstand zwischen den Buchstaben an. Der Wert für den Abstand der Kopfbuchstaben wirkt sich auf alle Kopfzeilenebenen (h1, h2, h3, h4, h5, h6), Anführungszeichen und Folientitel aus.

Kopfzeilenhöhe

Genau wie der Wert für den Buchstabenabstand wirkt sich der Wert für die Höhe der Kopfzeile auf alle Kopfzeilenebenen (h1, h2, h3, h4, h5, h6), Anführungszeichen und Titel aus von Folien.

Polizeistil

Verwenden Sie diese Optionen, um den Schriftstil Ihrer Überschriften zu ändern.

Body- und Header-Schriftart

Die Standardschriftart in Divi ist Open Sans, aber Divi hat fast hundert Schriftarten zur Auswahl! Nutzen Sie diese integrierten Schriftarten und testen Sie, welche am besten zu Ihrem Thema passen.

Farbe der Körperglieder

Die Farbe des Body-Links wird von der Akzentfarbe Ihres Themas übernommen. Aber Sie können es hier jederzeit ändern.

Textfarbe des Körpers

Hier können Sie die Farbe Ihres Textkörpers ändern.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Kopfzeilentextfarbe

Hier können Sie die Farbe Ihrer Überschriften ändern.

Hintergrund

Im Hintergrundfenster können Sie die Hintergrundfarbe Ihres Themas anpassen sowie ein benutzerdefiniertes Hintergrundbild hochladen und dessen Position auf der Seite anpassen. Hintergrundbilder und -farben funktionieren gut, wenn sie mit der Einstellung "Boxed Formatating" im zuvor erwähnten Layoutbedienfeld kombiniert werden.

mach divi.png

Das war's für dieses Tutorial. Ich hoffe, Sie können damit die Schriftart und das Layout des Divi-Themas besser anpassen.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
6 Aktien
Aktie3
tweet1
Registrieren2