So optimieren Sie die Größe Ihres responsiven Logos im Divi-Menümodul mit voller Breite

Veröffentlicht: 2022-08-31

Das Fullwidth-Menümodul von Divi gibt Divi-Benutzern viel Kontrolle über sein Design. Dazu gehört die Möglichkeit, jedes Logo vollständig reaktionsfähig zu machen. Ein Satz von Steuerelementen, die Logobreite und die maximale Logobreite, arbeiten hervorragend zusammen, um die Logogröße festzulegen. Mit nur wenigen Anpassungen kann jeder Divi-Benutzer sicherstellen, dass sein Logo auf jedem Bildschirm hervorragend funktioniert. In diesem Beitrag erfahren Sie, wie Sie die responsive Logogröße von Divi im Fullwidth-Menümodul von Divi optimieren.

Lass uns anfangen.

Über die Einstellungen meines Beispiel-Menümoduls in voller Breite

Bevor wir beginnen, werfen wir einen Blick auf mein Beispiel und seine Einstellungen. Wir können sehen, dass das Logo für die Kopfzeile groß ist. Dies ist ein quadratisches Logo. Wir werden auch sehen, wie man die Einstellungen für andere Größen und Formen anpasst. Dies gibt uns einen Ausgangspunkt und wir werden sehen, wie wir ihn im Laufe der Zeit anpassen können. Es wird auch zeigen, warum wir es anpassen müssen.

Hier meine Einstellungen:

Logo: 150×150
Hintergrundfarbe: #f4f4f4
Stil: Linksbündig (ich zeige auch das Inline Centered Logo, wenn es hilft, die Einstellung zu demonstrieren)
Richtung des Dropdown-Menüs: Abwärts
Menülinks in voller Breite erstellen: Nein
Menüschriftart: Arvo
Textfarbe: Schwarz
Schriftgröße: 16px
Polsterung: 2vh oben und unten

Hier ist die Kopfzeile, wenn sie auf einem Desktop angezeigt wird.

Über die Einstellungen meines Beispiel-Menümoduls in voller Breite

Hier ist die Kopfzeile auf einem Tablet. Die Größe des Logos fällt noch mehr auf.

Über die Einstellungen meines Beispiel-Menümoduls in voller Breite

Schließlich ist hier die Telefonansicht. Dieser macht den Header viel zu groß.

Über die Einstellungen meines Beispiel-Menümoduls in voller Breite

Diese Beispiele zeigen gut, warum ein Logo im Fullwidth-Menümodul responsive sein muss.

Über Logogröße

Die empfohlene Logogröße variiert im Web. Die am meisten empfohlene Größe liegt normalerweise zwischen 250 × 100 und 250 × 150. Die Logos, die wir in unsere Divi-Layouts aufnehmen, sind normalerweise im Bereich von 160 × 50 oder 225 × 100, aber einige unterscheiden sich aufgrund ihrer Form erheblich.

Ich verwende ein Logo mit 150×150 und zeige einige Beispiele mit Logos unterschiedlicher Größe. Sie müssen mit Ihren Einstellungen basierend auf der Bildgröße Ihres Logos herumspielen.

Einstellungen für die Logogröße des Menümoduls in voller Breite

Es gibt 10 Einstellungen im Abschnitt Größe. Vier dieser Einstellungen zielen auf das Logo ab.

Zu den Einstellungen gehören:

Logobreite – ein Prozentsatz der maximalen Breite. Die Standardeinstellung ist Automatisch.
Max. Breite des Logos – legt die maximale Breite in Pixeln fest, die die Breite nicht überschreiten darf. Der Standardwert ist 100 %.
Logohöhe – ein Prozentsatz der maximalen Höhe. Die Standardeinstellung ist Automatisch.
Logo Max Height – legt die maximale Höhe in Pixeln fest, die die Höhe nicht überschreiten darf. Der Standardwert ist 100 %.

Einstellungen für die Logogröße des Menümoduls in voller Breite

Die Breiteneinstellungen funktionieren zusammen und die Höheneinstellungen funktionieren zusammen, aber Breite und Höhe sollten nicht zusammen verwendet werden. Diese Einstellungen geben uns eine feine Kontrolle über die Breite oder Höhe des Logos. Bei Verwendung mit Desktop-, Tablet- und Telefoneinstellungen haben wir unabhängig von der Bildschirmgröße des Benutzers immer ein perfekt ansprechendes Logo.

In diesem Tutorial konzentrieren wir uns auf die Logobreite und die maximale Logobreite. Wenn Sie die Breiteneinstellungen verwenden, sollte die Höhe auf „Automatisch“ und die maximale Höhe auf 100 % eingestellt sein.

Logobreite und Maximale Logobreite

Die Einstellung „Logobreite“ legt die Breite des Logos als Prozentsatz des Werts „Maximale Breite“ fest. Der Wert für die maximale Breite wird normalerweise in Pixel oder vw festgelegt. Die Höhe passt sich an und behält die Form des Logos bei, wenn sich die Größe ändert.

Wenn die Max. Breite beispielsweise auf 50 Pixel und die Breite auf 80 % eingestellt ist, zeigt das Logo eine Breite von 40 Pixel an.

Indem wir die maximale Anzahl von Pixeln für die Breite festlegen und dann die Breite des Logos als Prozentsatz dieses Maximums für jede Bildschirmgröße festlegen, können wir sicherstellen, dass das Logo immer perfekt reagiert.

Beispiele für Breite und maximale Breite

Sehen wir uns ein paar gute und schlechte Beispiele an, um die Reaktionsfähigkeit des Logos zu demonstrieren. Dieses Beispiel zeigt beide Breiteneinstellungen in ihrer Standardeinstellung. Ich habe Inline Centered Logo ausgewählt, um die Breite auf beiden Seiten des Logos anzuzeigen.