Umschalten Ihres Logos auf eine feste Kopfzeile in Divi
Veröffentlicht: 2017-08-31Es ist immer eine gute Idee, verschiedene Versionen Ihres Logos mit verschiedenen Farben und Größen zu erstellen. Zum Beispiel sollten Sie wahrscheinlich eine dunkle und eine helle Version Ihres Logos haben, damit es auf verschiedenen Hintergrundfarben gut aussieht. Und eine kleinere (weniger vertikale und mehr horizontale) Version des Logos für die beengten Bereiche Ihrer Website. Einer der besten Orte, um eine andere Version Ihres Logos zu verwenden, ist auf Ihrem festen (oder klebrigen) Header.
In vielen Fällen benötigt Ihre feste Kopfzeile einen anderen Stil als Ihre Hauptkopfzeile. Wenn Sie das gleiche Logo beibehalten, sind Sie in der Gestaltung Ihres festen Headers eingeschränkt. Hier ist es praktisch, ein individuelles Logo zu haben. Mit einem separaten Logo, das speziell für den festen Header angepasst wurde, können Sie ihn nach Belieben stylen. Dies gibt Ihnen mehr Kontrolle über das Design Ihrer Website.
In diesem Beitrag zeige ich dir, wie du:
- Tauschen Sie Ihr Logo gegen ein anderes aus, wenn Ihr fester Header aktiv ist. (Dies kann mit einer einzigen CSS-Zeile erfolgen)
- Kehren Sie die Farbe Ihres Logos in Ihrem festen Header um.
- Fügen Sie einen coolen Übergangseffekt hinzu, wenn Sie Ihr Logo auf die feste Kopfzeile wechseln.
- Wechseln und verschieben Sie Ihr zentriertes Header-Logo in das Standardlayout (linksbündig) auf Ihrem festen Header.
Lass uns anfangen.
Vorgeschmack
Hier ist ein kleiner Vorgeschmack auf das, was wir in diesem Tutorial erreichen werden.
So sieht ein einfacher Logo-Schalter aus.
Hier ist der Logo-Schalter mit einem Übergangseffekt.
Hier ist das Logo, das die Position vom zentrierten Header-Stil ändert.
Die Einrichtung
Bevor Sie etwas anderes tun, stellen Sie sicher, dass Sie Folgendes ausführen:
- Installieren Sie die neueste Version von Divi.
- Implementieren Sie ein aktives Divi Child Theme. Wenn Sie Hilfe beim Einrichten eines Child-Themes benötigen, wird dies in diesem Beitrag behandelt. Wenn Sie zusätzliche Hilfe benötigen. Bitte kontaktieren Sie unser Support-Team.
- 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.
Sobald Sie diese Schritte abgeschlossen haben, können Sie beginnen.
Umschalten Ihres Logos auf eine feste Kopfzeile in Divi
Abonnieren Sie unseren Youtube-Kanal
Wechseln des Logos in Ihrem festen Header mit CSS
Bevor wir zu unserem benutzerdefinierten CSS gelangen, richten wir unsere Menüeinstellungen im Theme-Anpasser ein. 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.
Gehen Sie dann zurück zu den Kopfzeilen- und Navigationseinstellungen im Theme Customizer. 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
Sie können den Rest Ihrer Einstellungen an das Design Ihrer Website anpassen. Die Menü- und Logohöhen müssen möglicherweise an Ihre Bedürfnisse angepasst werden. Ich schlage jedoch vor, dass Sie diese Einstellungen beibehalten, wenn Sie den Übergangseffekt hinzufügen möchten, damit die Größe korrekt ist. Sie können jederzeit zurückkommen und es später ändern.
CSS-Snippet einfügen, um Logo auf feste Kopfzeile zu wechseln
Eine der einfachsten Möglichkeiten, Ihr Logobild mit einem anderen auf dem festen Header zu vertauschen, besteht darin, die CSS-Eigenschaft „content“ zu verwenden. Wenn Sie mit CSS vertraut sind, wird dies normalerweise verwendet, wenn Sie Inhalt zu einem :before- oder :after-Pseudoelement hinzufügen. In diesem Fall verwenden wir es, um neuen Inhalt (Ihr Logobild) einzufügen, um das aktuelle Logobild zu ersetzen.
Gehen Sie dazu zu Theme Customizer > Additional CSS und fügen Sie das folgende CSS ein.
/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}
Ersetzen Sie nun den Text "NEUES LOGOBILD EINFÜGEN" durch Ihr tatsächliches Logobild.
Um die URL zu erhalten, gehen Sie im WordPress-Dashboard zu Ihrer Medienbibliothek und klicken Sie auf das Bild, das Sie hinzufügen möchten. Sie finden die URL oben rechts auf dem sich öffnenden Bildschirm.
Das ist es. Diese einfache Lösung ersetzt Ihr Logo nur dann durch ein neues, wenn die feste Kopfzeile aktiv ist, während Sie durch die Seite scrollen. Das Standardlogo wird wieder angezeigt, wenn Sie ganz nach oben auf der Seite scrollen.
Umkehren der Farbe Ihres Logos
Wenn Sie nur eine dunkle oder helle Version des gleichen Logos auf der festen Kopfzeile hinzufügen möchten, könnte Ihnen diese Lösung gefallen.
Mit der Eigenschaft CSS invertieren können Sie die Farbe Ihres Logos mit ein paar CSS-Zeilen invertieren. Wenn Ihr Logo beispielsweise schwarz ist, würde es durch Umkehren der Logofarbe weiß werden. Und wenn das Logo weiß ist, wird es schwarz. Um diesen Stil zu Ihrem Logo hinzuzufügen, gehen Sie zu Theme Customizer > Additional CSS und fügen Sie das folgende CSS hinzu (stellen Sie sicher, dass Sie zuvor hinzugefügtes CSS löschen oder auskommentieren):
/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}
Sehen Sie sich das Ergebnis an. Dies ist ein schwarzes Logo, das in eine weiße Version umgewandelt wird.
Hinzufügen eines Übergangseffekts beim Umschalten Ihres Logos auf die feste Kopfzeile
Sie fragen sich wahrscheinlich, warum ich eine andere (robustere) Möglichkeit behandeln werde, Ihr Logo auf eine feste Kopfzeile zu schalten. Der Hauptgrund ist, dass wir dem Logo einen coolen Übergangseffekt hinzufügen können, wenn es in den festen Header „übergeht“. Dazu benötigen wir beide Logobilder nebeneinander zum Stylen.
Hinzufügen Ihres neuen Logos zur Datei Header.php
Um Ihrem Header ein weiteres Logo-Bild hinzuzufügen, müssen wir es der Datei header.php hinzufügen. Gehen Sie mit einem FTP-Client (wie FileZilla) zum Stamm Ihrer Divi-Theme-Dateien und erstellen Sie eine Kopie der Datei header.php.
Fügen Sie die Kopie der Datei header.php in das Stammverzeichnis Ihres Child-Theme-Ordners ein.
Öffnen Sie als Nächstes mit Ihrem bevorzugten Texteditor die Datei header.php. Suchen Sie den HTML-Code für den Link, der das Logo-Bild enthält, das in das div mit der Klasse „logo_container“ eingeschlossen ist.
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" /> </a>
Wir werden ein ähnliches Code-Snippet hinzufügen, um ein weiteres Bild in Ihrem Header anzuzeigen. Kopieren Sie den folgenden Code und fügen Sie ihn direkt darunter ein.
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" /> </a>
Beachten Sie, dass dies eine aktualisierte Kopie des ursprünglichen Codes darüber ist, mit zwei Unterschieden. Erstens hat es eine neue Bildquellen-URL, die Sie hinzufügen müssen. Und zweitens eine Klasse namens „Second-Logo“.
Gehen Sie von Ihrem WordPress-Dashboard zu Ihrer Medienbibliothek und rufen Sie die URL für das neue Logobild ab, das Sie hinzufügen möchten.
Gehen Sie dann zurück zu Ihrer header.php-Datei. Suchen Sie das soeben erstellte Code-Snippet und ersetzen Sie den Text mit der Aufschrift „URL HIER NEUES LOGOBILD EINFÜGEN“ durch die tatsächliche Bild-URL.
Speichern Sie Ihre header.php-Datei.
Jetzt haben Sie zwei Logos, die nebeneinander auf Ihrer Website angezeigt werden. Wahrscheinlich möchten Sie es nicht so belassen, also fügen wir das erforderliche benutzerdefinierte CSS hinzu, um unseren Übergangseffekt zu erzielen.
Hinzufügen eines coolen Übergangs, wenn das Logo in Ihrem festen Header einschaltet
Gehen Sie zu Theme Customizer > Additional CSS und löschen (oder auskommentieren) den Code aus dem vorherigen Abschnitt dieses Beitrags (falls zutreffend). Fügen Sie dann das folgende benutzerdefinierte CSS hinzu:
@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}
Ich habe den CSS-Code kommentiert, um Sie wissen zu lassen, was der Code macht. Kurz gesagt, das CSS verringert und erhöht die Deckkraft jedes der Logos, während es außerhalb des Headers verschoben wird. So haben Sie einen ziemlich coolen Übergangseffekt für Ihr Logo, wenn Sie zu Ihrem festen Header gehen.
Ändern der Position Ihres zentrierten Header-Logos nach links für Ihren festen Header
Wenn Ihnen der Stil für zentrierte Kopfzeilen zur Anzeige Ihrer Kopfzeile gefällt, möchten Sie möglicherweise die Position dieses Logos in Ihrer festen Kopfzeile überprüfen. Für mich bevorzuge ich den Standard-Header-Stil (mit dem Logo linksbündig) auf meinem festen Header. Der Hauptgrund ist, dass das Logo oben in meiner Navigation dazu führt, dass die feste Kopfzeile beim Scrollen zum Anzeigen einer Seite etwas zu hoch wird.
Um von einem zentrierten Logo zu einem linksbündig ausgerichteten Logo zu wechseln, können Sie das folgende benutzerdefinierte CSS im Feld Zusätzliches CSS im Theme Customizer hinzufügen. Fügen Sie zuerst den Code hinzu, um das Logo schnell und einfach zu wechseln:
/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}
Vergessen Sie nicht, Ihre Logo-Bild-URL hinzuzufügen.
Fügen Sie dann Folgendes hinzu, um die Platzierung des Logos anzupassen:
@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}
.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}
Hinweis: Stellen Sie sicher, dass Sie alle vorherigen CSS aus diesem Beitrag entfernen, die in Konflikt geraten könnten.
Das ist es. Sehen Sie sich das Ergebnis an.
Abschließend
Es ist schwer, nicht stolz auf ein gutes Logo zu sein. Geben Sie sich also nicht mit einer kleinen, nicht zulässigen Version zufrieden oder, noch schlimmer, Ihr Logo in Ihrem festen Header zu verstecken. Tauschen Sie es gegen eine benutzerdefinierte Version mit einem reibungslosen Übergang aus, den Ihre Kunden zu schätzen wissen.
In Kürze
Standardmäßig enthält Divi auf Mobilgeräten keinen festen Header. Aber eine hinzuzufügen ist wirklich einfach. In meinem nächsten Beitrag zeige ich Ihnen, wie Sie einen benutzerdefinierten festen Header mit einem anderen Logo auf dem Handy hinzufügen. Hier ein kleiner Vorgeschmack.
Ich freue mich darauf.
Vergessen Sie nicht, Ihre Kommentare unten zu posten. Wenn Sie Probleme beim Einrichten und Bearbeiten Ihrer untergeordneten Designdateien haben, wenden Sie sich bitte an unser Support-Team.
Danke schön.