Möchten Sie Ihrem Fullwidth-Menümodul von ein responsives Logo hinzufügen? Divi damit es sich an die Ansicht auf dem Handy anpasst?
Wussten Sie, dass mehr als 50 % der Verkehr Internet kommt von mobilen Geräten? Dies bedeutet, dass die mobile Version Ihrer Website ist extrem wichtig und kann sogar der wichtigste Weg sein, auf dem jemand Ihre Seite besucht.
Stellen Sie sicher, dass Ihre Website responsiv und mobilfreundlich ist, ist ein wesentlicher Schritt beim Entwerfen eines Website.
In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrem Fullwidth-Menümodul mithilfe der integrierten Responsive-Optionen von ein responsives Logo hinzufügen Divi.
Auf diese Weise können Sie ein größeres oder komplexeres Logo hinzufügen, das auf größeren Bildschirmen angezeigt wird, und ein kleineres oder einfacheres Logo, das auf kleineren Bildschirmen angezeigt wird.
Fangen wir an!
Übersicht
Hier ist eine Vorschau dessen, was wir entwerfen werden. Die Desktop-Version der Website wird ein erweitertes Logo mit zusätzlichem Text haben, und die mobile Version des Logos wird nur das grundlegende Logo-Branding haben.
Was Sie brauchen, um loszulegen
Alle Installieren und aktivieren Sie zuerst das Divi-Design und stellen Sie sicher, dass Sie die neueste Version von haben Divi Auf deiner Webseite. Stellen Sie als Nächstes sicher, dass Sie über mindestens zwei Versionen Ihres Logos verfügen: eine für die Desktop-Ansicht Ihrer Website und eine für die mobile Ansicht. Laden Sie abschließend die Vorlage herunter Kopf- und Fußzeilenvorlagen für das High School Layout Pack von Divi.
Jetzt sind Sie startklar!
So fügen Sie Ihrem Fullwidth-Header-Modul in Divi ein responsives Logo hinzu
Erstellen Sie das Fullwidth-Header-Modul
Lesen Sie auch: Divi: So zeigen Sie das Fullwidth Header-Modul im Vollbildmodus an
Fügen Sie einen Abschnitt voller Breite hinzu
Da das ursprüngliche Menü mit einem Standardmenümodul erstellt wurde, müssen wir das Layout ändern, um ein Kopfzeilenmodul mit voller Breite hinzuzufügen.
Fügen Sie zuerst einen Abschnitt in voller Breite hinzu (Gesamtbreite) in die globale Kopfzeile unter dem vorhandenen Menü.
Navigieren Sie in den Einstellungen für den Abschnitt mit voller Breite zu FortgeschrittenerUnd dann Bildlaufeffekte.
- Sticky-Position: Oben bleiben
Als nächstes fügen Sie die Hintergrundfarbe hinzu.
- Hintergrund: #f5f0eb
Fügen Sie im klebrigen Zustand eine andere Farbe für den Hintergrund hinzu.
- Hintergrund (klebrig): #ffffff
Fügen Sie ein Fullwidth-Header-Modul hinzu
Lassen Sie uns nun das Fullwidth Header-Modul hinzufügen.
Öffnen Sie die Moduleinstellungen und entfernen Sie den Hintergrund.
Um das Aussehen des Originalmenüs einfach nachzubilden, können wir die Funktion „Stile kopieren“ verwenden, um einige der benutzerdefinierten Einstellungen zu kopieren.
Siehe auch: Divi: So ändern Sie den Farbverlauf eines Hintergrunds beim Hover
Öffnen Sie die Einstellungen des Home-Menüs und klicken Sie dann mit der rechten Maustaste auf Menütext und wählen Sie Menütextstile kopieren.
Klicken Sie nach dem Kopieren auf die drei Punkte des Fullwidth Header-Moduls und wählen Sie es aus Frühere Menütextstile.
Jetzt wiederholen wir die gleichen Schritte mit den Dropdown-Menüeinstellungen.
Wiederholen Sie dies noch einmal für die Symbole.
Stellen Sie die Textausrichtung auf rechts ein.
- Textausrichtung: rechts
Stellen Sie die maximale Höhe des Logos unter ein Designund dann Größe.
- Maximale Logohöhe: 50 Pixel
Fügen Sie dem Abschnitt das folgende CSS hinzu Menü-Link unter Benutzerdefiniertes CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Passen Sie abschließend die obere und untere Polsterung an.
- Polsterung-Oberseite: 10px
- Polsterung unten: 10px
Löschen Sie nun den ursprünglichen Menüabschnitt.
Responsives Logo hinzufügen
Jetzt fügen wir das responsive Logo hinzu. Glücklicherweise macht Divi dies mit integrierten reaktionsschnellen Optionen einfach.
Sous Inhalt, öffnen Sie die Logo-Einstellungen und laden Sie die Desktop-Version Ihres Logos hoch.
Wählen Sie das Symbol für den mobilen Modus aus, um responsive Optionen zu verwenden, und ersetzen Sie dann das mobile Logo durch Ihr responsives Logo.
Erstellen Sie eine neue Seite mit einem vordefinierten Layout
Um das Menü in voller Breite mit dem responsiven Logo in Aktion zu sehen, erstellen wir eine neue Seite mit einem vordefinierten Layout aus der Divi-Bibliothek.
Für dieses Design verwenden wir die Highschool-Homepage der High School-Layoutpaket Kopf- und Fußzeile anpassen.
Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie dann die Option aus Verwenden Sie Divi Builder. Da wir das Kopf- und Fußzeilenlayout als globale Kopf- und Fußzeile importiert haben, verwenden Sie das Standardlayout für diese Seite.
Wir verwenden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek, also wählen Sie es aus Layouts durchsuchen.
Suchen Sie das Layout und wählen Sie es aus Homepage des Gymnasiums.
wählen Verwenden Sie dieses Layout um das Layout zu Ihrer Seite hinzuzufügen.
Endergebnis
Werfen wir nun einen Blick auf unser endgültiges Design.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Eine für Mobilgeräte optimierte und reaktionsschnelle Website ist wichtiger denn je. Und dank der integrierten Responsive-Optionen von Divi ist das Erstellen einfacher als je zuvor!
Mit einem responsiven Logo ist Ihre Markenidentität immer klar, unabhängig von der Bildschirmgröße.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
