Optimieren des Logobilds Ihrer Divi-Site mit globalen Voreinstellungen
Veröffentlicht: 2020-09-25Die Optimierung des Logos Ihrer Website in Divi ist ein wichtiger Bestandteil des Designs Ihrer Website. Aber es muss kein mysteriöses oder entmutigendes Unterfangen sein. Tatsächlich macht Divi es mit dem Divi Theme Builder und allen verfügbaren integrierten Designoptionen ziemlich einfach.
In diesem Tutorial zeigen wir Ihnen, wie Sie Ihre Logos mit der richtigen Größe, Position und dem richtigen Stil in Divi optimieren. Dann zeigen wir Ihnen, wie Sie diese Designs als globale Voreinstellungen speichern, die Sie für die zukünftige Entwicklung verwenden können.
Lass uns einspringen!
Laden Sie das Layout der Logo-Bildvoreinstellungen KOSTENLOS herunter
Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Kostenlos herunterladen
Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.
Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!
Um dieses Logo-Bild-Layout in Ihrem globalen Header zu verwenden, müssen Sie es zunächst wie folgt in die Divi-Bibliothek importieren:
- Gehen Sie zu Divi > Divi-Bibliothek.
- Klicken Sie oben auf der Seite auf die Schaltfläche Importieren/Exportieren.
- Wählen Sie die Registerkarte Importieren im Portabilitäts-Popup
- Wählen Sie Voreinstellungen importieren
- Klicken Sie auf die Schaltfläche Importieren
Gehen Sie dann zum Theme Builder und bearbeiten Sie den globalen Header. Fügen Sie dort, wo das Logo sein soll, ein Bildmodul hinzu und verwenden Sie die Voreinstellungen, um das Logo entsprechend zu stylen und zu platzieren.
Logogrößen
Bevor wir das Logobild mit Divi optimieren, ist es wichtig, die Größe des Logobildes zu optimieren, bevor es in ein Bildmodul hochgeladen wird. Sie möchten kein 1920 x 1080 Pixel großes Logobild auf Ihre Website hochladen, wenn Sie dieses Logo mit 100 x 50 Pixel anzeigen möchten. Sicher, es gibt Möglichkeiten, die Größe des Logo-Bildes nachträglich zu ändern (zB srcset- und Bildoptimierungs-Plugins). Dies ist jedoch keine bewährte Methode, da dies zu langsameren Seitenladezeiten führen kann. Und seien wir ehrlich, Ihr Logo ist zu wichtig, um sich mit unordentlichen Abkürzungen zufrieden zu geben.
Hier ist eine Liste gängiger Logo-Bildgrößen, die Sie berücksichtigen sollten:
Für horizontale Anordnung:
- 250 px x 150 px
- 350 px x 75 px
- 400 px x 100 px
Für vertikales (quadratisches) Layout:
- 160 px x 160 px (groß)
- 60 px x 60 px (klein)
Möglicherweise benötigen Sie eine größere Logogröße, als Sie vielleicht denken.
Es ist üblich, ein kleineres Logo auf dem Desktop und ein größeres Logo auf einem Tablet (oder sogar Telefon) zu benötigen. In Divi ist es üblich, dass Ihre Spaltenlayouts auf Tablet- und Telefondisplays zu einem einspaltigen Layout gestapelt werden. Und da Tablet-Browserbreiten normalerweise eine maximale Breite von 980px haben, ist dies ein viel größerer Container für Ihr Logo als vielleicht auf dem Desktop. Daher müssen Sie möglicherweise eine größere Logogröße wählen und die maximale Höhe oder Breite je nach Gerät anpassen. Wenn Sie ein Logo hochladen, das kleiner ist, als Sie auf dem Tablet benötigen, können Sie die Größe nicht erhöhen, ohne die Klarheit des Bildes zu beeinträchtigen. Kurz gesagt, stellen Sie sicher, dass das Logo auf allen Browserbreiten so groß ist wie seine größte Anzeigegröße.
Optimieren der Logogröße und -position Ihrer Divi-Site mit globalen Voreinstellungen
Bearbeiten Ihres globalen Header-Logos
Um zu beginnen, navigieren Sie zum Divi Theme Builder, indem Sie zu Divi > Theme Builder gehen. Klicken Sie dann auf , um einen neuen globalen Header innerhalb der Standard-Website-Vorlage zu erstellen.
Wählen Sie dann die Option „Von Grund auf neu erstellen“.
Für dieses Tutorial optimieren wir das Logo, das in einem benutzerdefinierten globalen Header enthalten ist, mit dem Divi Theme Builder. Sie können gerne ein vorhandenes Header-Design erstellen oder eine unserer vorgefertigten globalen Header- (und Footer-) Vorlagen aus unserem Blog importieren. Um die Dinge einfach zu halten, werden wir ein wirklich einfaches Header-Layout mit einem Logo und einem Menü erstellen.
Zeilen- und Spaltenlayout hinzufügen
Fügen Sie im globalen Kopfzeilen-Layout-Editor eine Zeile mit einer Viertel-Dreiviertel-Spalte hinzu.
Fügen Sie in der rechten Spalte ein Bildmodul nur als Platzhalter hinzu, damit wir die Logoplatzierung in der Kopfzeile visualisieren können.
Fügen Sie das Bildmodul hinzu, um das Logobild anzuzeigen
Fügen Sie der linken Spalte ein Bildmodul hinzu.
Verwenden des Bildmoduls für Logos
Für traditionellere Kopfzeilendesigns können Sie das Menümodul von Divi nutzen, um Ihr Logo anzuzeigen. Mit den dynamischen Inhaltsfunktionen von Divi können Sie jedoch das Logo Ihrer Site mit einer beliebigen Anzahl von Divi-Modulen anzeigen. Grundsätzlich können Sie Ihr Logo überall anzeigen, wo Sie ein Bild in Divi anzeigen können. Sie können beispielsweise das Site-Logo auf einem Bild des Klappenmoduls oder sogar als Hintergrundbild anzeigen, wenn Sie möchten. In diesem Tutorial konzentrieren wir uns auf die Verwendung des Bildmoduls, um das Site-Logo anzuzeigen. Dadurch kann das Logo ein vollständig separates Element sein (nicht mit anderen Elementen in einem Modul wie einem Menümodul oder Klappenmodul verbunden). Außerdem ist das Image-Modul zum Stylen von Bildern entwickelt, was uns viele zusätzliche Designoptionen bietet, um unser Logo-Bild zu gestalten. Weitere Informationen zum Hinzufügen eines Website-Logos als dynamisches Bild finden Sie am Ende des Artikels.
Da wir einige verschiedene Logo-Bildgrößen testen werden, werden wir für unsere Beispiele normale Bilder anstelle des dynamischen Site-Logos verwenden.
Beispiel 1: Erstellen einer globalen Voreinstellung für ein linksbündig ausgerichtetes Logo
Für dieses erste Beispiel erstellen wir eine einfache Voreinstellung für ein linksbündig ausgerichtetes Logo, das 60 x 60 Pixel groß ist.
Öffnen Sie die Bildmoduleinstellungen und laden Sie ein 60 x 60 Pixel großes Logobild in das Bildmodul hoch.
Aktualisieren Sie die Bilddesign-Einstellungen wie folgt:
- Bildausrichtung: Mitte
- Maximale Breite: 60px
- Modulausrichtung (Desktop): Links
- Modulausrichtung (Tablet und Telefon): Mitte
Obwohl dies für ein linksbündig ausgerichtetes Logo vorgesehen ist, wird die Bildausrichtung auf die Mitte gesetzt, da sich die Bildausrichtung von der Modulausrichtung unterscheidet. Die Bildausrichtung ist innerhalb des Moduls zentriert. Und da das Modul eine maximale Breite von 60px hat, spielt die Bildausrichtung keine Rolle, da die Modulausrichtung nun die Ausrichtung des Logobildes bestimmt.
Dies ist hilfreich, wenn Sie dem Logo jemals ein Hintergrundbild hinzufügen oder den Container rund machen möchten. Dadurch hat der Logobild-Container im Wesentlichen die gleiche Größe wie das Logobild selbst.
Beachten Sie, dass die Modulausrichtung auf dem Tablet in die Mitte geändert wurde, da die Spalten auf dem Mobilgerät gestapelt werden.
Neue Vorgabe aus aktuellen Stilen erstellen
Nachdem das Logo-Design nun abgeschlossen ist, können Sie eine globale Vorgabe für das Bildmodul erstellen, indem Sie auf das Dropdown-Menü „Vorgabe“ klicken und „Neue Vorgabe aus aktuellen Stilen erstellen“ auswählen.
Geben Sie der Logo-Bildvorgabe einen eindeutigen Namen. In diesem Fall können wir ihm den Namen "Logo Left (60px x 60px)" geben, um genau zu wissen, welche Bildgröße wir verwenden sollen und wie das Logo bei der Auswahl der Voreinstellung ausgerichtet wird.
Beispiel 2: Erstellen einer globalen Vorgabe für ein rechtsbündiges Logo
Für dieses nächste Beispiel erstellen wir eine globale Voreinstellung für ein rechtsbündig ausgerichtetes Logo. Dies ist mit unserem aktuellen Design und den vorhandenen Voreinstellungen einfach zu bewerkstelligen. Ändern Sie einfach das Spaltenlayout in drei Viertel ein Viertel, verschieben Sie das Menü in die linke Spalte und verschieben Sie das Logo in die rechte Spalte.
Öffnen Sie die Einstellungen für das Bildmodul, das die gerade erstellte Logo-Bildvorgabe enthält.
Aktualisieren Sie dann die Designeinstellungen, um die Modulausrichtung nach rechts zu ändern.
Einfach genug. Klicken Sie nun auf die Dropdown-Liste der Voreinstellungen und erstellen Sie eine neue Voreinstellung aus den aktuellen Stilen.
Geben Sie der Voreinstellung den Namen „Logo Right (60px x 60px)“.
Beispiel 3: Erstellen einer globalen Vorgabe für ein zentriertes Logo
Für dieses nächste Beispiel erstellen wir eine globale Voreinstellung für ein zentriertes Logo. Da es sich um ein zentriertes Logo handelt, können wir für unser Beispiel ein größeres Logo verwenden.
Ändern Sie zunächst das Spaltenlayout in eine 0-n-Viertel-Halb-Viertel-Struktur, damit Sie in der Mitte eine größere Spalte für das Logo haben. Dann das Logo in die mittlere Spalte verschieben
Laden Sie ein neues Logobild mit den Maßen 250 x 150 Pixel hoch.
Aktualisieren Sie auf der Registerkarte "Design" Folgendes:
- Maximale Breite: 250px
- Modulausrichtung: Mitte
Fügen Sie dann eine neue globale Vorgabe aus den aktuellen Stilen hinzu.
Und geben Sie ihm den Namen „Logo Center (250px x 150px).
Beispiel 4: Erstellen einer linksbündig ausgerichteten globalen Vorgabe für ein großes Logo
Für dieses nächste Beispiel erstellen wir eine Voreinstellung für ein größeres linksbündig ausgerichtetes Logo (400 x 100 Pixel).
Da das Logo 400px breit sein wird, wollen wir eine Spaltenstruktur, die dem Logo den Platz gibt, den es braucht.
Gehen wir zurück zu einer zweispaltigen Struktur mit dem Logo links und dem Menü rechts. Ändern wir die Struktur jedoch zu einem Drittel zu zwei Dritteln.
Dadurch erhalten wir eine Spalte mit einer Breite von ungefähr 320 Pixeln, wenn wir die standardmäßige maximale Zeilenbreite von 1080 Pixel beibehalten.
Öffnen Sie die Bildmoduleinstellungen und fügen Sie ein Logo mit einer Größe von 400 x 100 Pixel hinzu.
Aktualisieren Sie auf der Registerkarte "Design" Folgendes:
- Maximale Breite: 400px
- Modulausrichtung (Desktop): links
- Modulausrichtung (Tablet): Mitte
Wie ich bereits erwähnt habe, hat die Spalte eine maximale Breite von 320px, was bedeutet, dass das Logobild auf dem Desktop nicht die volle Breite erreichen kann. Auf dem Tablet ist dies jedoch möglich, sobald die Säulen gestapelt sind. Aus diesem Grund möchten wir die maximale Breite des Bildes auf 400px setzen.
Jetzt ist das Logo auf dem Tablet etwas größer und zentriert.
Fügen Sie dann eine neue globale Vorgabe aus den aktuellen Stilen hinzu.
Geben Sie ihm den Namen „Logo Left (400px x 100px)“ und speichern Sie die Voreinstellung.
Beispiel 5: Erstellen eines linksbündig ausgerichteten Logos mit der globalen Voreinstellung für Hover-Effekte
In diesem letzten Beispiel fügen wir einem linksbündig ausgerichteten Logo einige Hover-Effekte hinzu und speichern es als neue globale Vorgabe.
Normalerweise verlinken die Leute ihr Logo mit der Homepage. Das Hinzufügen eines Hover-Effekts kann die UX verbessern, indem die Anklickbarkeit offensichtlicher wird.
In diesem Beispiel verwenden wir das 60px x 60px Logobild mit der Voreinstellung „Logo links (60px x 60px)“. Öffnen Sie die Bildeinstellungen und wählen Sie die Voreinstellung aus der Liste aus.
Jetzt können wir das Preset mit einigen Hover-Effekt-Stilen optimieren, bevor wir es als neues Preset speichern.
Aktualisieren Sie Folgendes:
- Abgerundete Ecken: 50%
- Box Shadow: siehe Screenshot
- Horizontale Position des Boxschattens: 0px
- Vertikale Position des Boxschattens: 0px (Desktop) 5px (Hover)
- Schattenfarbe: #ac3cf7
Fügen Sie dann die folgende Transformationsdrehung beim Hover hinzu:
- Transformieren Z-Achse drehen (Hover): 90deg
Erstellen Sie dann eine neue Vorgabe aus den aktuellen Stilen und nennen Sie sie „Logo Left w/ Hover (60px x 60px)“.
Hier ist das Ergebnis.
Hinzufügen eines dynamischen Site-Logos zum Bildmodul
Um Ihr Site-Logo dynamisch zum Bildmodul hinzuzufügen, müssen Sie zunächst sicherstellen, dass das Site-Logo unter Divi-Themenoptionen hochgeladen wird.
Beachten Sie die Größe des Logos, das Sie auswählen.
Gehen Sie dann zum Bildmodul, das Ihre globale Voreinstellung hat, und öffnen Sie die Einstellungen. Löschen Sie das aktuelle Bild und klicken Sie dann auf das Symbol für dynamische Inhalte. Wählen Sie in der Dropdown-Liste Site-Logo aus.
Jetzt wird Ihr Bildmodul das Logo Ihrer Website dynamisch abrufen.
Vergessen Sie nicht, dem Logo auch einen dynamischen Homepage-Link hinzuzufügen.
Abschließende Gedanken
Hoffentlich hilft dieses Tutorial dabei, den Prozess des Hinzufügens von Logos zu Ihren Divi-Headern zu rationalisieren. Es beginnt mit der Optimierung der Größe Ihres Logobilds, bevor Sie es überhaupt in das Divi-Theme hochladen. Dann können Sie die integrierten Designeinstellungen von Divi verwenden, um die Größe und Position des Bildes für verschiedene Spaltenlayouts und verschiedene Geräte anzupassen.
Natürlich erfordert jede Website ihren eigenen einzigartigen Stil, von dem einige von den in diesen Beispielen festgelegten Richtlinien ausbrechen. Aber ich bin zuversichtlich, dass Sie mit ein paar Optimierungen ganz einfach neue Voreinstellungen für jedes einzigartige Layout erstellen können!
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!