Der ultimative Leitfaden für den Divi Theme Customizer

Der Divi Theme Customizer ist ein leistungsstarkes und praktisches Werkzeug, um Anpassungen am Divi Theme vorzunehmen. Wie der Visual Builder ermöglicht der Divi Theme Customizer visuelle Frontend-Anpassungen und Designänderungen, die das Ratespiel aus dem Anpassungsprozess nehmen. Wenn es effizient eingesetzt wird, kann dieses Tool eine große Zeitersparnis und Starthilfe für zukünftige Projekte sein.

Der heutige Beitrag soll Ihnen helfen, die Funktionsweise des Theme Customizers besser zu verstehen, damit Sie ihn zur Steigerung der Produktivität für zukünftige Projekte verwenden können. Ich decke fast alle im Theme Customizer verfügbaren Optionen ab, wobei der Schwerpunkt auf den Divi-spezifischen Optionen liegt. In gewisser Weise dient dieser Beitrag als Dokumentationsstück, das nebenbei einige eingehende Erklärungen und Designtipps bietet. Ich zeige Ihnen auch, wie Sie die Customizer-Einstellungen exportieren, um sie in Ihrem nächsten Projekt zu verwenden.

Wir haben viel zu behandeln, also fangen wir am Anfang an.

Gebaut mit WordPress im Hinterkopf

Das Theme Customizer wurde in WordPress 3.4 eingeführt. Diese praktische Funktion ermöglicht es WordPress-Benutzern, Änderungen, die sie an ihren Designs vornehmen, in Echtzeit anzuzeigen und diese Änderungen dann mit einem Klick zu speichern. Was früher mehrere Fenster und unzählige Aktualisierungen erforderte, kann jetzt schnell in einem Browserfenster erledigt werden.

Hier ist ein Beispiel für die Theme Customizer-Optionen für das Theme TwentySeventeen:

Wie Sie sehen können, können viele der Funktionen von WordPress, die sich früher auf verschiedenen Seiten im Backend von WordPress befanden (Site-Identität, Menüs, Widgets usw.), jetzt in diesem Front-End-Anpasser an einem Ort aufgerufen werden.

Auf der anderen Seite wurde der Divi Theme Customizer als erweiterte Version dieses Theme Customizers mit allen möglichen Divi-spezifischen Optionen erstellt. Für Benutzer erleichtert dies die Anpassung von Divi erheblich. Und die Tatsache, dass Sie die Anpassungen während der Bearbeitung (gleichzeitig) sehen können, macht dies zu einem praktischen Designwerkzeug.

Der Divi Theme Customizer bietet immer noch viele der Standard-WordPress-Customizer-Optionen, aber noch viel mehr.

Wie Sie sehen können, wurden dem Divi Theme Customizer viel mehr Einstellungen hinzugefügt. Lassen Sie uns nun damit beginnen, diese genauer zu untersuchen.

Allgemeine Einstellungen

Wenn Sie mit der Anpassung Ihres Themes beginnen, ist es meiner Meinung nach am besten, oben mit den allgemeinen Einstellungen zu beginnen und sich nach unten vorzuarbeiten.

Site-Identität

Dieser Abschnitt ist nicht nur Divi vorbehalten. Dies ist ein bequemer Ort, um den Site-Titel und den Slogan für Ihre Site zu ändern. Sie können auch ein Site-Symbol eingeben, das für Browser und Apps verwendet wird, das sich vom Favicon-Symbol unterscheidet, das Sie in den Divi-Designoptionen hinzufügen können.

Layout-Einstellungen

Mit den Layout-Einstellungen können Sie den Rahmen Ihres Themas anpassen, indem Sie bestimmen, wie viel Platz zwischen Abschnitten und Zeilen ist und wie groß die maximale Breite Ihres Hauptinhaltsabschnitts sein wird.

BOX-LAYOUT AKTIVIEREN

Hier können Sie Ihre Site in ein Box-Layout ändern, das den Inhalt Ihrer Site umrahmt und einen anpassbaren Hintergrund freigibt.

BREITE DES WEBSITE-INHALTS

Hier können Sie die maximale Breite Ihres Inhaltsbereichs festlegen. Da sich Ihr Inhalt in einem responsiven Layout befindet, passt er sich an kleinere Größen an, wird jedoch nicht breiter als die hier eingestellte maximale Breite.

Die Standardeinstellung ist 1080px. Dies ist eine gute Breite für die meisten Standard-Laptops und -Desktops.

WEBSITE-RINNENBREITE

Die Bundstegbreite entspricht dem Betrag des horizontalen Abstands (Rand) zwischen den Spalten in jeder Zeile.

Optionale Werte für die Rinnenbreite reichen von 1 bis 4.

1 steht für null Marge zwischen den Spalten.
2 steht für einen rechten Rand von 3% zwischen den Spalten.
3 steht für einen rechten Rand von 5,5% zwischen den Spalten.
4 steht für einen rechten Rand von 8 % zwischen den Spalten.

VERWENDEN SIE BENUTZERDEFINIERTE SEITENLEISTENBREITE

Dadurch wird die Standardbreite der Seitenleiste für Ihr Design festgelegt. Dies gilt für alle Seiten Ihres Themes, die über eine Seitenleiste verfügen und nicht mit dem Divi Builder erstellt wurden.

ABSCHNITT UND REIHENHÖHE

Diese Optionen passen den vertikalen Abstand (oberer und unterer Abstand) für jeden Abschnitt und jede Reihe an.

Standardmäßig beträgt der Abschnittsabstand oben und unten 50 Pixel . Für die Zeile beträgt der Standardabstand 30px oben und unten . Durch Ändern des Abschnitts- oder Zeilenabstands mit dem Customizer wird der Abstandswert jedoch in einen Prozentsatz umgewandelt, der der Zahl auf dem Optionsrad im Theme-Anpasser entspricht.

Zum Beispiel steht „0“ für 0 % der oberen und unteren Füllung, „1“ steht für 1 % der oberen und unteren Füllung, „2“ steht für 2 % und so weiter. Der Prozentsatz der Auffüllung basiert auf der Breite des Containers (des Abschnitts oder der Reihe). Wenn also die tatsächliche Breite des Abschnitts 1080px beträgt und Sie die Abschnittshöhe auf 1 eingestellt haben, bedeutet dies, dass Sie…

1080px x 0,01 = 10,8px

… 10.8px Polsterung oben und unten.

Die Optionen reichen von 0 bis 10, sodass Sie bis zu 10 % der Füllung haben können.

THEMA AKZENTFARBE

Bevor Sie beginnen, die Farben für Ihre anderen Elemente zu ändern , sollten Sie dies zuerst ändern . Sobald Sie es geändert haben, speichern und veröffentlichen Sie Ihre Einstellungen und aktualisieren Sie Ihre Seite. Jetzt sollte die aktualisierte Themenakzentfarbe andere Elemente automatisch ausgefüllt haben.

Durch das Aktualisieren der Themenakzentfarbe wird auch Folgendes aktualisiert:

• Farbe der Körperverbindung
• Widget-Kopfzeilenfarbe
• Widget-Aufzählungszeichenfarbe
• Fußzeile Social Icons Hover-Farbe
• Standardfarbe für Symbole
• Fußzeilenmenü Aktive Linkfarbe
• Hintergrundfarbe des sekundären Menüs
• Hintergrundfarbe für Slide-In und Fullscreen-Header-Stil
• Hamburger Menüsymbol für mobile Menüfarbe
• Primärmenü Aktive Linkfarbe
• Farbe der Dropdown-Menüzeile
• Hintergrundfarbe des sekundären Menüs
• Hintergrundfarbe des sekundären Dropdown-Menüs
• Hintergrundfarbe des sekundären Menüs
• Aktive primäre Menülinkfarbe
• Fußzeilenmenü Aktive Linkfarbe

Typografie

Dies ist einer der wichtigsten Aspekte Ihrer Website, der von Benutzern und Entwicklern tendenziell vernachlässigt wird. Machen Sie nicht den Fehler, diese Optionen zu übersehen. Diese Details richtig zu machen kann einen großen Unterschied machen. Wenn Sie sich die Zeit nehmen, Ihre Standardtypografie für Ihr Thema festzulegen, können Sie auf lange Sicht auch Zeit sparen, da Sie keine Anpassungen auf Modulebene vornehmen müssen.

KÖRPERTEXTGRÖSSE

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

Design-Tipp: Es scheint, dass 14px für eine Standardgröße des Haupttextes etwas zu klein ist. Sie sollten wirklich nicht weniger als 16px für Ihre Grundkörper-Schriftgröße verwenden. Diejenigen von uns, die fast 40 Jahre alt oder älter sind, werden es Ihnen danken. Sogar die meisten Browser verwenden 16px als Standardschriftgröße auf Basisebene.

KAROSSERIEHÖHE

Die Zeilenhöhe jeder einzelnen Textzeile.

Design-Tipp : Die Linienhöhe wird im Längenwert „em“ gemessen. Der Standardwert von Divi ist 1,7 em für den Fließtext. Dieser em-Wert ist besser als ein Pixelwert (px), da er auf der aktuellen Schriftgröße des Elements basiert und daher mit dem übergeordneten Inline-Wert (oder in unserem Fall der aktuellen Schriftgröße) skaliert wird. Der Wert „1.7em“ entspricht im Wesentlichen dem 1,7-fachen der aktuellen Schriftgröße. Wenn Ihre aktuelle Schriftgröße also 16 Pixel beträgt, beträgt die Zeilenhöhe 27,2 Pixel. Dadurch erhalten Sie 5,6 Pixel zusätzlichen Platz oben und 5,6 Pixel unten. Dies scheint ein guter Anfang (Abstand zwischen den Textzeilen) für die Lesbarkeit zu sein.

KOPFTEXTGRÖSSE

Mit Divi können Sie hier Ihre Standard-H1-Header-Textgröße festlegen. Dies betrifft Elemente von Divi wie die Titel des Fullwidth Header-Moduls. Wenn Sie die Größe der anderen Header-Ebenen (h2, h3 usw.) anpassen möchten, schlage ich vor, diese in Additional CSS hinzuzufügen (dies wird später im Beitrag behandelt).

Design-Tipp: In den meisten Fällen haben Sie nur eine Kopfzeile pro Seite, also zählen Sie sie. Betrachten Sie es als den Titel auf dem Cover eines Buches. Es ist das Erste, was einem Menschen auffällt. Und entgegen dem populären Slogan werden Bücher immer noch nach ihrem Einband beurteilt, besonders in diesem Fall.

Der Standardwert für die Textgröße der Kopfzeile ist 30px. Dies ist eine gute sichere Größe für den Anfang. Zumal einige Schlagzeilen längere Kopien erfordern. Ich tendiere jedoch zu einer größeren Kopfzeilengröße, um der wachsenden Größe von Monitoranzeigen gerecht zu werden. Außerdem benötigen die meisten Kunden Websites mit einfachen und kurzen Überschriften wie „Über uns“ und „Kontakt“, die mit größeren Schriftgrößen besser aussehen. Ich möchte meine h1-Header auf mindestens 48px setzen .

KOPFLEUCHTENABSTAND

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

Design-Tipp: Es ist eine gute Design-Technik, den Buchstabenabstand für größeren Text zu verringern und den Buchstabenabstand für kleineren Text zu erhöhen . Wenn es um Kopfzeilen geht, kann der größere Text mit einer größeren Schriftstärke (fett) mit einem verringerten Buchstabenabstand von -1px besser aussehen.

Wenn Sie jedoch dieselbe Kopfzeile in Großbuchstaben eingeben, werden Sie möglicherweise feststellen, dass eine Erhöhung des Buchstabenabstands auf 1-2 px besser aussieht.

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), Blockzitate und Folientitel aus. Aufgrund der größeren Schriftgröße ist 1em die Standardeinstellung. Ich denke, eine Zeilenhöhe zwischen 1em und 1,3em sieht gut aus, besonders wenn der Header zwei oder mehr Zeilen umfasst.

KOPFSCHRIFTART

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

KOPF- UND KÖRPERSCHRIFT

Die Standardschriftart in Divi ist Open Sans , aber der Divi Theme Customizer hat fast hundert Schriftarten zur Auswahl! Nutzen Sie diese integrierten Schriftarten und testen Sie, welche für Ihr Thema am besten geeignet sind.

Design-Tipp: Inspiration für Schriftpaare finden Sie auf fontpair.co, das Ihnen hilft, Google Fonts miteinander zu koppeln. Divi unterstützt nicht alle diese Schriftarten standardmäßig, aber Sie können nach denjenigen suchen, die Divi unterstützt, um Paarungen zu sehen, die gut zusammenarbeiten.

FARBE KÖRPERVERBINDER

Die Farbe des Body-Links wird von Ihrer Designakzentfarbe geerbt. Aber Sie können es jederzeit hier ändern.

Design-Tipp: Wenn Sie möchten, können Sie alle Ihre Body-Links mit zusätzlichem CSS unterstreichen (siehe Ende des Beitrags).

KÖRPERTEXTFARBE

Hier können Sie die Farbe Ihres Fließtextes ändern. Beliebte Blogs wie die New York Times und das Smashing Magazine verwenden #333333 für ihre Textfarbe . Das liest sich meiner Meinung nach auf weißem Hintergrund besser.

KOPFTEXTFARBE

Hier können Sie die Farbe Ihrer Kopfzeilen ändern. Wenn Sie bei einem Schwarzton bleiben, würde ich einen Tick dunkler als der Textkörper wählen, um ihn ein wenig hervorzuheben. Etwas wie #121212 würde funktionieren.

Hintergrund

Diese Option legt den Hintergrund für Ihr Design fest. Beim Divi-Theme gilt diese Option wirklich nur für das Box-Layout . Die Standardhintergrundfarbe ist weiß (#ffffff), es sei denn, Sie ändern sie hier. Sie können auch ein Hintergrundbild hinzufügen, wenn Sie möchten.

Das war's für die Layout-Einstellungen. Nachdem Sie das Layout erstellt haben, können Sie sich spezifischere Elemente ansehen.

Kopfzeile & Navigation

Das Header- und Navigationsmenü ist wahrscheinlich das wichtigste Element Ihres Themes. Dieser Abschnitt bietet viele Optionen, um fast jede gewünschte Art von Kopfzeile zu erstellen.

Kopfzeilenformat

Kopfzeilenstil

Die vier Header-Stile können Ihrer Website mit nur einem Klick ein brandneues Aussehen verleihen. Zu diesen Stilen gehören Zentriert, Zentriertes Inline-Logo, Einschieben und Vollbild.

Sie können Ihrer Website auch eine vertikale Navigation hinzufügen, was eine einzigartige Funktion sein kann. Und Sie können die Navigation ausblenden, bis Sie scrollen. Dies wäre nützlich für eine einseitige Website, die mehr Inhalte ohne Ablenkung durch die Navigationsleiste hervorheben möchte.

Primäre Menüleiste

Ihre primäre Menüleiste ist das Hauptmenü in der Kopfzeile Ihrer Website. Sie können das Aussehen Ihres Hauptmenüs vollständig anpassen.

Design-Tipp: Sie müssen wirklich wissen, was Ihre Menülinks sein werden, bevor Sie mit der Perfektionierung des Menüs mit dem Divi Theme Customizer beginnen. Vergessen Sie nicht, dass Sie ein ansprechendes Menü gestalten werden. Nehmen Sie sich also die Zeit, um sicherzustellen, dass das Menü auf allen Bildschirmgrößen gut aussieht. Sie können dies tun, indem Sie auf die Gerätesymbole unten im Customizer klicken oder einfach die Größe Ihres Browsers anpassen. Bei Interesse erfahren Sie hier, wie Sie Ihre responsive Navigation reparieren können.

Volle Breite machen

Dadurch wird das Menü auf die volle Breite des Browserfensters erweitert.

Logobild ausblenden

Wenn Sie möchten, können Sie hier das Logo-Bild vollständig aus Ihrem Menü ausblenden.

Menühöhe

Hier können Sie die Menühöhe beliebig ändern. Achten Sie jedoch darauf, die Menühöhe nicht zu groß zu machen, da Sie möglicherweise wertvollen Platz für eine Speisekarte anstelle des Inhalts Ihrer Homepage verschwenden.

Max. Höhe des Logos

Hier können Sie den maximalen Breitenprozentsatz Ihres Logos erhöhen oder verringern, um es größer oder kleiner zu machen.

Textgröße, Buchstabenabstand, Schriftart, Schriftstil, Textfarbe, Farbe des aktiven Links

Mit diesen Optionen können Sie die Menülinks nach Belieben anpassen.

Hintergrundfarbe

Auf diese Weise können Sie die Hintergrundfarbe Ihres Hauptmenüs ändern.

Design-Tipp: Wenn Sie die halbtransparenten (oder vollständig transparenten) Farben für Ihre Kopfzeile verwenden, überlappt Divi die Kopfzeile automatisch nahtlos über den darunter liegenden Abschnitt. Dies erzeugt einen ziemlich coolen Effekt. Dies ist beispielsweise ein zentrierter Header-Stil mit transparentem Hintergrund und einem Header in voller Breite direkt darunter. Beachten Sie, wie Divi das Hintergrundbild automatisch so anpasst, dass es gut hinter die Kopfzeile passt:

Dropdown-Menüeinstellungen

Ihr Dropdown-Menü muss nicht den Stil des Hauptmenüs übernehmen. Hier können Sie ein einzigartiges Design für Ihr Dropdown-Menü erstellen. Sie können sogar benutzerdefinierte Animationen hinzufügen, wenn Sie das Dropdown-Menü anzeigen.

Sekundäre Menüleiste

Hier können Sie Ihre sekundäre Menüleiste mit den bereitgestellten Optionen anpassen.

Wenn aktiviert, befindet sich die sekundäre Menüleiste über der primären Menüleiste ganz oben in Ihrem Browser. Es kann zusätzliche Elemente enthalten, darunter eine E-Mail-Adresse, Links zu sozialen Medien und ein sekundäres Menü.

Standardmäßig bleibt das Sekundärmenü ausgeblendet, es sei denn, Sie öffnen ein Sekundärmenü oder fügen Elemente im Abschnitt Kopfzeilenelemente hinzu. Möglicherweise müssen Sie den Theme-Anpasser speichern und aktualisieren, um das Menü anzuzeigen.

Feste Navigationseinstellungen

Feste Navigation bezieht sich auf den Status des Menüs, das „fixiert“ ist oder am oberen Rand des Browserfensters hängt, wenn der Benutzer auf der Seite nach unten scrollt. Standardmäßig wird die feste Navigation in der Höhe verkleinert, um ein größeres Ansichtsfenster zum Anzeigen des Inhalts der Site bereitzustellen.

Design-Tipp: Sie können Ihre feste primäre Menü-Hintergrundfarbe auch auf eine halbtransparente Farbe einstellen, um einen Teil des Inhalts dahinter sichtbar zu machen. Dies macht es noch weniger aufdringlich, aber dennoch zugänglich.

Kopfzeilenelemente

Kopfzeilenelemente sind zusätzliche Elemente, die Sie Ihrer Kopfzeile hinzufügen können. Zu diesen Elementen gehören soziale Symbole, ein Suchsymbol, eine Telefonnummer und eine E-Mail. Abgesehen vom Suchsymbol werden alle diese Elemente im Sekundärmenü angezeigt.

Soziale Symbole

Standardmäßig zeigt Divi Symbole für Facebook, Twitter, Google+ und RSS an. Sie können diese Profile in den Themenoptionen von Divi bearbeiten.

Fusszeile

Standardmäßig ist der Fußzeilenbereich ausgeblendet, es sei denn, er wird mit Inhalten gefüllt. Außerdem sollte die Fußzeile nicht mit der unteren Leiste verwechselt werden, die standardmäßig ganz unten auf der Website angezeigt wird und die Fußzeilen-Credits und soziale Symbole enthält.

Layout

Hier können Sie zwischen 5 Layouts für Ihren Footer-Bereich wählen.

Sie können auch eine Hintergrundfarbe für die Fußzeile festlegen, die standardmäßig auf #222222 eingestellt ist.

Design-Tipp: Dieser Abschnitt wird auf allen Seiten Ihrer Website angezeigt (es sei denn, Sie wählen eine leere Seitenvorlage). Daher ist es sinnvoll, die Farbe neutraler zu gestalten, damit sie zu allen Seiten Ihrer Website passt.

Widgets

Wenn Sie Ihren Fußzeilenabschnitten Widgets hinzugefügt haben, können Sie das Aussehen dieser Widgets hier gestalten.

Widgets gibt es nicht nur bei Divi. Diese sind in WordPress integriert und finden sich im WordPress-Dashboard unter Darstellung > Widgets . Dort sehen Sie vier Fußzeilenbereiche, in denen Sie Widgets hinzufügen können. Alle Widgets, die Sie diesen Abschnitten hinzufügen, werden in Ihrem Fußzeilenbereich angezeigt.

Sie können jedoch auch auf die Widget-Bereiche zugreifen, ohne jemals den Theme-Anpasser verlassen zu müssen (eines meiner Lieblingsdinge daran).

Fußzeilenelemente

Hier können Sie wählen, ob Sie Ihre sozialen Symbole in Ihrer unteren Leiste anzeigen möchten, genau wie im sekundären Menü.

Fußzeilenmenü

Wenn Sie ein Fußzeilenmenü haben, können Sie es hier formatieren.

Bodenleiste

Die untere Leiste befindet sich ganz unten auf Ihrer Website und zeigt standardmäßig Ihre Fußzeilen-Credits und soziale Symbole an. Hier können Sie den Stil dieser Elemente anpassen, einschließlich der Schriftgröße und -farbe des sozialen Symbols.

Fußzeilen-Credits bearbeiten

Sie können auch die standardmäßigen Fußzeilen-Credits durch einen beliebigen HTML-Code in diesem Feld ersetzen.

Tasten

In diesem Abschnitt legen Sie fest, wie die Standard-Schaltflächenstile aussehen sollen.

Schaltflächen-Stil

Hier können Sie den Stil Ihrer Schaltflächen für Ihr Thema anpassen. Ich werde hier nicht auf jede Option näher eingehen. Weitere Informationen zum Stylen von Schaltflächen finden Sie in unserer Dokumentation zum Schaltflächenmodul.

Textfarbe

Wenn Sie feststellen, dass die Schaltflächenfarbe standardmäßig von der in den Allgemeinen Einstellungen festgelegten Themenakzentfarbe übernommen wird. Dies gilt nur für Module, deren Text auf „dunkel“ gesetzt ist. Und die Schaltflächen sind weiß, wenn der Modultext auf „hell“ eingestellt ist. Sobald Sie jedoch eine benutzerdefinierte Textfarbe für Ihre Schaltflächen festlegen, wird diese Farbe sowohl für dunkle als auch für helle Textversionen innerhalb eines bestimmten Moduls festgelegt.

Design-Tipp: Lassen Sie Ihre Themenakzentfarbe die Textfarbe Ihrer Schaltflächen festlegen, damit Sie die Möglichkeit behalten, dunkle und helle Versionen Ihrer Schaltfläche in Ihren Modulen hinzuzufügen.

Schaltflächen Hover-Stil

Hier können Sie den Stil des Hover-Zustands Ihrer Schaltflächen anpassen.

Es ist wichtig, dass Benutzer verstehen, dass das, was sie gerade anklicken, tatsächlich eine Schaltfläche ist. Das Hinzufügen eines Schwebeeffekts festigt dies in ihren Köpfen und ermutigt sie zur Interaktion. Als Standard fügt Divi einen hellen Hintergrund hinzu und animiert rechts ein Pfeilsymbol. Sie können es jedoch beliebig ändern.

Design-Tipp: Ob Sie den Hintergrund in eine dunklere oder hellere Farbe ändern, ist nicht so wichtig, sondern nur sicherzustellen, dass sich die Schaltfläche in irgendeiner Weise ändert. Sie können auch den Buchstabenabstand vergrößern oder den Randradius anpassen, um Ihrer Schaltfläche einen einzigartigen Effekt beim Schweben zu verleihen.

Blog

Post

Dieser Abschnitt ändert den Stil des Inhalts der Post-Kopfzeile innerhalb eines einzelnen Posts. Dies ändert nichts am Aussehen Ihrer Blog-Auszüge auf Ihrer Blog-Seite oder Ihrem Blog-Modul. Manchmal müssen die Kopfzeilen Ihres Blog-Posts anders aussehen als die Kopfzeilen auf dem Rest Ihrer Website. Hier würden Sie diese Anpassungen vornehmen.

Wenn Sie das Post-Header-Modul verwenden, sind diese Optionen nicht wirksam.

Mobile Stile

Ich liebe diesen Abschnitt. Hier können Sie das Aussehen Ihrer Website auf Mobilgeräten anpassen und die Ergebnisse in Echtzeit anzeigen.

Tablet- und Telefonstile

Sie können Tablet oder Telefon auswählen und das Fenster rechts neben dem Customizer passt sich automatisch an, um Ihnen anzuzeigen, wie die Seite auf dem Gerät aussieht. Dann können Sie, ähnlich wie in den Allgemeinen Einstellungen unter Layout, die Abschnittshöhe, Zeilenhöhe, Textkörpergröße und Kopfzeilentextgröße anpassen.

Design-Tipp Nr. 1: Eine Anpassung, die ich gerne für Telefonlayouts vornehme, besteht darin, die Zeilenhöhe auf „0“ zu setzen. Dies sorgt für einen besseren Inhaltsfluss beim Scrollen auf einem Telefon, da dieser Abstand zwischen den Zeilen entfällt.

Design-Tipp #2: Finden Sie eine Schriftskalierung, die für Ihre Website geeignet ist. Hier ist ein guter, dem ich gerne für meine Header folge:

Desktop: 48px

Tablet: 40px

Telefon: 32px

Mobiles Menü

Übersehen Sie dies nicht, sonst verpassen Sie es möglicherweise, eine völlig einzigartige Kopfzeile für Ihr mobiles Menü zu erstellen. Sie können das Logo nur auf mobilen Geräten ausblenden und die Hintergrund- und Textfarben ändern.

Farbschemata

Diese können für eine schnelle Lösung praktisch sein. Ich würde jedoch nicht empfehlen, die Farbschemata zu verwenden, wenn Sie vorhaben, einige dieser Farben später im Theme-Anpasser zu ändern. Einmal festgelegt, können diese Farben im Customizer nicht überschrieben werden, da das generierte CSS die !important-Regel enthält.

Meiner Meinung nach ist es am besten, diese Einstellung auf Standard zu belassen.

Menüs und Widgets

Sie müssen nicht mehr blind Ihre Menüs oder Widgets im WordPress-Dashboard bearbeiten. Jetzt können Sie diese Elemente hinzufügen und anpassen und sehen, wie sie in Echtzeit auf Ihrer Seite zum Leben erweckt werden. Ich liebe die Bequemlichkeit!

Statische Vorderseite

Standardmäßig zeigt WordPress Ihren neuesten Beitrag auf Ihrer Startseite (Homepage) an. Sie können dies in eine beliebige statische Seite in diesem Abschnitt ändern. Und Sie können auch Ihre Posts-Seite (oder Blog-Seite) festlegen.

Ich wusste das nicht, bis ich diesen Beitrag geschrieben habe, aber Sie können tatsächlich eine neue Seite aus dem Theme Customizer bereitstellen, um als Ihre Startseite oder Blog-Seite zu dienen, ohne den Customizer jemals verlassen zu müssen.

Zusätzliche CSS

Der Abschnitt Zusätzliches CSS bietet eine großartige Gelegenheit, Ihrem Theme-Setup den letzten Schliff zu geben. Welche Stiländerungen auch immer der Divi Theme Customizer nicht steuern kann, können Sie hier mit benutzerdefiniertem CSS vornehmen. Da Sie mit dem Customizer die CSS-Änderungen in Echtzeit sehen können, können Sie diese notwendigen Anpassungen an Ihrem Theme viel einfacher vornehmen, als auf einem externen Stylesheet hin und her zu gehen.

Zusätzliche CSS-Beispiele

Beispiel #1: Passen Sie die Größe aller Header an

Ein gutes Beispiel für zusätzliches CSS wäre das Styling für Ihre verbleibenden Header-Tags. Mit Divi können Sie die Einstellung für Ihre Überschriftsschriftart anpassen, aber das gilt nur für Ihre h1-Header. Sie können das zusätzliche CSS-Feld verwenden, um die restlichen Anpassungen der Header-Tags (h2, h3, h4 usw.) einzugeben. Ich verwende gerne folgende Skala: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Beispiel 2: Abgleich des unteren Absatzabstands mit der Höhe der Hauptlinie

Wenn Sie die Zeilenhöhe des Textkörpers auf 1,7 em einstellen, möchten Sie möglicherweise auch den gleichen Wert für den unteren Abstand zwischen den Absätzen festlegen, um ein konsistentes Grundlinienraster und einen vertikalen Rhythmus beizubehalten. Mit anderen Worten, der Abstand zwischen den Absätzen ist gleich der Zeilenhöhe. Dazu fügen Sie einfach Folgendes hinzu:

p { padding-bottom: 1.7em}

Da der Längenwert em auf der übergeordneten Schriftgröße basiert, wird der Wert 1.7em entsprechend angepasst, wenn Sie die Basisschriftgröße im Theme-Anpasser auf eine andere geändert haben.

Beispiel #3: Unterstreichungsattribut zu Ihren Links hinzufügen

Unterstreichungsattribut zu Textkörper-Links hinzufügen.

a {
    text-decoration: underline;
}

Exportieren und Importieren von Divi Customizer-Einstellungen für Ihr nächstes Projekt

Die Divi Theme Customizer verfügen über eine Portabilitätsoption, die es Benutzern ermöglicht, Customizer-Einstellungen zu exportieren oder zu importieren. Dies bietet Entwicklern eine großartige Gelegenheit, eine Art Vorlage für Anpassungseinstellungen zu erstellen, die sie in ihren zukünftigen Projekten verwenden können.

Zuerst schlage ich vor, sich die Zeit zu nehmen, um herauszufinden, welche Anpassungen Sie beim Erstellen einer Website vornehmen. Sobald Sie diese Einstellungen identifiziert haben, können Sie diese Anpassungen in den Divi Theme Customizer eingeben und diese Einstellungen dann exportieren, damit Sie bei Ihren nächsten Projekten einen Vorsprung haben. Warum immer die gleichen Dinge tun, wenn Sie es bereits tun können? Außerdem wird dadurch sichergestellt, dass Sie keine wichtigen Anpassungen überspringen.

Um Ihre Einstellungen zu exportieren, klicken Sie oben im Divi Theme Customizer auf das Portabilitätssymbol.

Geben Sie der Exportdatei einen Namen und klicken Sie auf die Schaltfläche „Divi Customizer Settings exportieren“.

Jetzt können Sie diese .json-Datei in Zukunft verwenden, indem Sie im Divi Theme Customizer auf das gleiche Portabilitätssymbol klicken und Importieren statt Exportieren auswählen. Dann müssen Sie nur noch die .json-Datei hochladen und auf „Divi Customizer-Einstellungen importieren“ klicken.

Und das ist es.

Was beinhalten die Divi Customizer-Einstellungen?

Die Customizer-Einstellungen beinhalten im Grunde alles in den ersten 7 Abschnitten.

1. Allgemeine Einstellungen
2. Kopfzeile & Navigation
3. Fusszeile
4. Tasten
5. Blog
6. Mobile Stile
7. Farbschemata

Die letzten 4 Abschnitte sind WordPress-spezifisch und werden nicht auf andere Divi-Installationen übertragen. Diese Abschnitte umfassen:

1. Menüs
2. Widgets
3. Statische Vorderseite
4. Zusätzliche CSS

Es ist wichtig zu beachten, dass das zusätzliche CSS nicht übertragen wird. Möglicherweise verlassen Sie sich auf diese Einstellungen, um bei Ihrem nächsten Build Zeit zu sparen. Wenn dies der Fall ist, schlage ich vor, ein Child-Theme mit diesem CSS zu erstellen, damit Sie es bei Ihrem nächsten Projekt mit Ihren Customizer-Einstellungen hinzufügen können.

Wie die Divi Customizer Styles gespeichert werden

Für den Divi Customizer (zusammen mit Divi Options und dem Divi Builder) stellt Divi statische CSS-Ressourcen bereit, die von den Browsern zwischengespeichert werden können, um die Seitenladezeit zu verkürzen. Das bedeutet, dass die Stile nicht auf die Seite gedruckt, sondern in einer separaten statischen CSS-Datei gespeichert werden. Jedes Mal, wenn Sie Ihre Customizer-Einstellungen speichern, wird die statische CSS-Datei aktualisiert. Dies schließt auch alle zusätzlichen CSS ein, die Sie hinzugefügt haben.

Schlussgedanken

Der Divi Theme Customizer bietet einige ziemlich leistungsstarke Optionen und der Anpassungsprozess ist sowohl bequem als auch angenehm zu bearbeiten. Und ein tieferes Verständnis dafür, was diese Optionen bewirken können, wird definitiv die Erstellung von Websites mit Divi verbessern. Falls noch nicht geschehen, nehmen Sie sich etwas Zeit, um Ihre optimalen Basiseinstellungen für ein Projekt zu ermitteln, schließen Sie diese an den Customizer an und erstellen Sie eine Exportdatei. Sie werden überrascht sein, welchen Schub (und Vertrauen) Ihnen dies beim Starten eines neuen Projekts geben wird.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!