So fügen Sie mit Divi . einen benutzerdefinierten festen Header für Mobilgeräte hinzu
Veröffentlicht: 2017-09-01Eine feste Kopfzeile (oder Navigation) auf Mobilgeräten kann die Benutzerfreundlichkeit Ihrer Website erhöhen, wenn sie richtig gemacht wird. Die feste Navigation scheint im Allgemeinen 22% schneller zu sein als Standard-Header. In dieser Hochgeschwindigkeitswelt der Technologie ist das ein beachtlicher Wert, auch wenn es nur die Hälfte war.
Und mit Divi können Sie Ihrer Site mit wenigen CSS-Zeilen einen festen Header hinzufügen. Mit Divi können Sie Ihre mobilen Header bereits mit dem Theme Customizer anpassen, aber derzeit gibt es keine integrierte Einstellung zum Bereitstellen eines festen Headers für Mobilgeräte. In diesem Tutorial zeige ich Ihnen, wie Sie auf Mobilgeräten einen benutzerdefinierten festen Header hinzufügen, der Folgendes enthält:
- Ein anderes (mobilerfreundlicheres) Logo als Ihre Desktop-Version.
- Eine kürzere Kopfzeile, um mehr verfügbaren Anzeigeraum zu ermöglichen.
- Ein größeres anklickbares Hamburger-Navigationssymbol, um die Bereitstellung des mobilen Navigationsgeräts zu erleichtern.
- Ein halbtransparenter Hintergrund, der die Kopfzeile beim Betrachten der Site noch aufdringlicher macht.
Hier ist ein kleiner Vorgeschmack darauf, wie der Header aussehen wird.
Die Einrichtung
Dieses Setup ähnelt meinem vorherigen Beitrag zum Umschalten Ihres Logos auf einen festen Header. Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes ausführen:
- Stellen Sie sicher, dass Sie die neueste Version von Divi installiert haben.
- Erstellen Sie ein aktives Hauptmenü für Ihre Website.
- Gehen Sie im Backend Ihrer WordPress-Site zu Theme Customizer > Header & Navigation > Header Format und stellen Sie sicher, dass Sie den Standard-Header-Stil ausgewählt haben.
- Erstellen Sie zwei Versionen Ihres Logos, die beide 200 × 131 sind, und fügen Sie sie Ihrer WordPress-Medienbibliothek hinzu. Ein Logo wird für den Hauptheader verwendet und eines wird für Ihren festen Header verwendet. Wenn Sie können, machen Sie die Version des Logos mit festem Header horizontaler, damit es nicht vertikal auf dem kleineren festen Header verwischt wird. Hier ist ein Beispiel für mein Hauptlogo, das ich verwende.
Hier ist ein Beispiel für mein festes Header-Logo. Beachten Sie, dass ich den Text abgeschnitten habe, um ein einfacheres und horizontaleres Logo zu erstellen, das gut auf eine Kopfzeile mit geringerer Höhe passt. Es ist unwahrscheinlich, dass jemand diesen Text sowieso lesen kann und die Marke wird immer noch vertreten. 
- Richten Sie Ihr Hauptmenü mit Menüpunkten ein.
Da wir benutzerdefiniertes CSS hinzufügen werden, um den festen Header zu erreichen, müssen wir die Standard-Header- oder festen Header-Optionen im Theme Customizer nicht anpassen. Wenn Sie jedoch die Einstellungen für Menü- und Logogrößen in meinem Beispiel duplizieren möchten, führen Sie Folgendes aus (dies ist völlig optional):
Gehen Sie im Theme Customizer zu Header & Navigation-Einstellungen. Wählen Sie die primäre Menüleiste aus und aktualisieren Sie Folgendes:
Menühöhe: 105
Max. Höhe des Logos: 80
Textgröße: 20
Gehen Sie nun zurück zu Kopfzeile & Navigation. Wählen Sie Feste Navigationseinstellungen und aktualisieren Sie Folgendes:
Feste Menühöhe: 60
Textgröße: 20
Sobald Sie diese Schritte abgeschlossen haben, können Sie beginnen.
So fügen Sie mit Divi . einen benutzerdefinierten festen Header für Mobilgeräte hinzu
Abonnieren Sie unseren Youtube-Kanal
Einstieg
Wir werden dieses Design implementieren, indem wir benutzerdefiniertes CSS im Abschnitt "Zusätzliches CSS" im Divi Theme Customizer eingeben. Da wir nur auf Mobilgeräte abzielen, werden wir unser gesamtes CSS in eine Medienabfrage einschließen, die das Styling auf Browserbreiten von weniger als 980 Pixel beschränkt. Fahren Sie fort und beginnen Sie, indem Sie Folgendes in das Feld "Zusätzliches CSS" eingeben:
@media (max-width: 980px) {
}
Erstellen Sie Ihren mobilen festen Header mit CSS
Da Divi bereits eine Klasse namens „et-fixed-header“ hinzufügt, wenn der Benutzer auf der Seite nach unten scrollt, können wir diesen Selektor in unserem benutzerdefinierten CSS verwenden, um unseren festen Header für Mobilgeräte zu erstellen und zu gestalten.
Diese erste CSS-Gruppe unten macht den Header fest (oder klebrig) oben auf der Seite und passt dann die Höhe des festen Headers auf 55px an. Es fügt auch eine halbtransparente weiße Hintergrundfarbe hinzu. Fügen Sie Ihrem zusätzlichen CSS im Theme Customizer innerhalb der Media Query-Klammern Folgendes hinzu.
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
Apple schlägt vor, dass alle anklickbaren UI-Elemente für ihre Apps mindestens 44 × 44 Pixel groß sind, damit unsere Daumen und Finger sie leicht anklicken können. Dies wäre eine gute Anleitung für die Elemente im mobilen festen Header. Das folgende CSS macht das Navigationssymbol 45px.
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
Zuletzt fügen wir unserem Logo in der festen Kopfzeile mehr Höhe hinzu, damit wir es besser sehen können. Geben Sie das folgende CSS ein:
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
Das ist es! Wir sind alle fertig.
Hier ist die letzte Sammlung von CSS, um Ihren mobilen festen Header zu erstellen:
@media (max-width: 980px) {
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
}
Speichern Sie Ihre Einstellungen. Jetzt haben Sie eine funktionierende mobile feste Kopfzeile.
Umschalten Ihres Logos auf Ihre mobile feste Kopfzeile
Wenn Sie ein anderes Logo für Ihren mobilen festen Header verwenden möchten, können Sie dies mit etwas jQuery relativ einfach tun. Sie benötigen lediglich die URLs für beide Logos, die Sie verwenden werden. Die erste Logobild-URL sollte das Standardlogo sein, das Sie bereits für Ihre Site verwenden. Die zweite Logo-Bild-URL sollte das Logo sein, das Sie für den mobilen festen Header verwenden möchten. Stellen Sie sicher, dass Sie beide Logos in die Medienbibliothek hochladen und die URLs abrufen.
Sobald Sie beide URLs haben, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Divi > Theme-Optionen > Integrationen. Suchen Sie das Eingabefeld "Code zum Kopf Ihres Blogs hinzufügen" und geben Sie das folgende jQuery-Skript ein:
<script>
var imageUrl = [
'ENTER DESKTOP LOGO IMAGE URL',
'ENTER MOBILE LOGO IMAGE URL',
];
jQuery(window).on('scroll', function() {
var $header = jQuery('header');
var $logo = jQuery('#logo');
if ((jQuery(window).width() < 981) &&
($header.hasClass('et-fixed-header'))) {
return $logo.attr('src', imageUrl[1]);
};
return $logo.attr('src', imageUrl[0])
});
</script>
Ersetzen Sie nun den Text „ENTER DESKTOP LOGO IMAGE URL“ durch die URL des Logos, das Sie derzeit für Ihre Site verwenden.
Ersetzen Sie dann den Text „ENTER MOBILE LOGO IMAGE URL“ durch die URL des Logos, das Sie nur für mobile Geräte verwenden möchten.
Speichern Sie die Einstellungen und überprüfen Sie die Ergebnisse.
Browser-Unterstützung
In diesem Beitrag habe ich den festen Header nur mit CSS erstellt und mich stark auf die CSS-Eigenschaft „position:fixed“ verlassen. Diese CSS-Eigenschaft kann mit älteren Versionen mobiler Browser inkonsistent sein, insbesondere auf iOS Safari und Android. Aber heutzutage wird „position:fixed“ von neueren Versionen mobiler Browser (außer Opera Mini) ziemlich gut unterstützt.
Es gibt andere robustere Plugins und JavaScript-Lösungen, aber ich hielt es für das Beste, Ihnen die einfache CSS-Version zu geben. Bitte prüfen Sie diese Optionen, wenn diese Lösung für Sie nicht funktioniert.
Abschließende Gedanken
Es ist erwähnenswert, dass mobile feste Header die Benutzerfreundlichkeit beeinträchtigen können. Da sie weiterhin den oberen Teil Ihres Browsers zu jeder Zeit blockieren, können Sie wertvolle Immobilien ohne triftigen Grund verschwenden, wenn Sie nicht aufpassen. Denken Sie daran, nicht jeder hat ein solches Phablet.
Aus diesem Grund ist es wichtig, Ihren festen Header für mobile Geräte anzupassen, indem Sie ihm eine kürzere Höhe, ein anderes Logo und eine größere Navigationsschaltfläche geben. Und indem Sie Ihrer Divi-Website ein paar CSS-Zeilen hinzufügen, können Sie auf Mobilgeräten einen festen Header haben, ohne ein Drittanbieter-Plugin verwenden zu müssen. Wenn es also Sinn macht, Ihrem nächsten Projekt einen hinzuzufügen, dann legen Sie los. Diese Art von Funktionalität kann die Benutzeroberfläche Ihrer Website verbessern.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!