Das Vollbild-Menü von Divi gestalten
Veröffentlicht: 2017-09-05Das Vollbild-Menü von Divi bietet eine großartige Möglichkeit für individuelles Design. Im Gegensatz zu den anderen vier Kopfzeilenstilen, die in Divis Theme Customizer verfügbar sind, füllt das Vollbildmenü den gesamten Bildschirm aus, wenn es aktiv ist. Dies schafft Platz für ein kreatives Layout für die Menü- und Kopfzeilenelemente von Divi.
Im heutigen Beitrag zeige ich Ihnen, wie Sie Ihr Vollbildmenü gestalten können, um Ihren Besuchern ein individuelleres Gefühl zu geben. Um dies zu erreichen, werde ich einige Optionen im Theme-Anpasser ändern und benutzerdefiniertes CSS hinzufügen.
Lass uns anfangen.
Das Vorher und Nachher
So sieht das Menü in voller Breite standardmäßig aus:
Hier ein kleiner Vorgeschmack auf das neue Design:
Das Vollbild-Menü von Divi gestalten
Abonnieren Sie unseren Youtube-Kanal
Einstieg
Bevor wir mit dem Design beginnen, stellen Sie sicher, dass Sie ein aktives Hauptmenü mit bereits hinzugefügten Menüelementen haben.
Aktualisieren Sie die Einstellungen im Theme-Anpasser
Gehen Sie in Ihrem WordPress-Dashboard zu Divi > Theme Customizer > Header & Navigation > Header-Format. Wählen Sie dann als Kopfzeilenstil Vollbild aus.
Sobald der Header-Stil für den Vollbildmodus festgelegt ist, kehren Sie zu Header & Navigation zurück. Jetzt sehen Sie einen neuen Satz von Optionen namens "Slide In & Fullscreen Header Settings".
Aktualisieren Sie die Einstellungen für die Slide-In- und Vollbild-Kopfzeile wie folgt:
Aktivieren Sie die Option "Obere Leiste anzeigen".
Menütextgröße: 46px
Textgröße der oberen Leiste: 24px
Schriftart: Playfair Display
Schriftstil: Fett (B)
Farbe des Menülinks: #ffffff
Farbe des aktiven Links: #edef86
Textfarbe der oberen Leiste: #ffffff
Gehen Sie nun zurück zu den Kopfzeilen- und Navigationseinstellungen und klicken Sie auf Kopfzeilenelemente. Aktualisieren Sie unter Kopfzeilenelemente Folgendes:
Wählen Sie Social Icons anzeigen
Wählen Sie Suchsymbol anzeigen
Telefonnummer: [Nummer eingeben]
E-Mail: [E-Mail eingeben]
Sobald alles eingerichtet ist, sollte das Standardlayout so aussehen:
Jetzt fügen wir benutzerdefiniertes CSS hinzu.
Hinzufügen von benutzerdefiniertem CSS
Das Hinzufügen von benutzerdefiniertem CSS in Divi kann an einigen Stellen erfolgen. Da wir den Theme-Anpasser bereits verwenden, gehen Sie zu Zusätzliches CSS. Hier werden wir unser CSS hinzufügen. Wenn Sie es natürlich lieber zu Ihrer externen style.css-Datei in Ihrem Child-Theme hinzufügen, tun Sie es.
Für diejenigen unter Ihnen, die unter Zeitdruck stehen, können Sie zur vollständigen Version des CSS-Codes springen, die Sie kopieren und in Ihren zusätzlichen CSS-Abschnitt einfügen können. Denken Sie nur daran, dass Sie immer noch zurückgehen und einige Elemente wie das Hintergrundbild zu Ihrem Code hinzufügen müssen.
Nun zurück zum Hinzufügen unseres CSS.
Da die meisten benutzerdefinierten CSS nur für die Desktop-Version des Vollbild-Headers gelten, fügen wir zunächst eine Medienabfrage hinzu, die auf Bildschirmgrößen mit einer Mindestbreite von 980px abzielt. Fügen Sie im Abschnitt Zusätzliches CSS Folgendes hinzu:
@media all and (min-width: 980px){
}
Ändern wir nun das Layout der Vollbild-Kopfzeile ein wenig, indem wir die Position des Navigationsmenüs und der Elemente der oberen Leiste so anpassen, dass die Navigation auf der linken Seite des Bildschirms und die Elemente der oberen Leiste vertikal auf der rechten Seite des Bildschirms gestapelt werden Bildschirm. Um diese Änderung vorzunehmen, fügen Sie das folgende CSS in die Klammern der Medienabfrage ein.
/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
width: 50%;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
padding-top: 0px !important;
}
/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
width: 50%;
text-align: center;
display: table !important;
vertical-align: middle;
position: initial;
float: right!important;
height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
display: table-cell !important;
position: relative;
vertical-align: middle;
text-align: left!important;
padding: 0 15%;
width: 100%;
}
.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
width: 100%;
}
.et_header_style_fullscreen div#et-info {
float: none!important;
width: 100%;
}
.et_header_style_fullscreen div#et-info span {
display: block;
margin-bottom: 30px;
}
Als Nächstes vergrößern wir unsere Suchleiste mit dem folgenden CSS:
/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
margin-top: 30px !important;
margin-bottom: 15px;
width: 100% !important;
max-width: 300px !important;
padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
width: 50px;
height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
font-size: 22px;
}
Und fügen wir das folgende CSS hinzu, um das Menü rechtsbündig auszurichten:
/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
text-align: right;
padding: 0 15%;
}
Dann machen wir das Schließen-Menü-Symbol in der oberen rechten Ecke größer und einfacher zu klicken:
/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
font-size: 120px;
}
Lassen Sie uns auch die Hintergrundüberlagerung hinter den oberen Menüelementen entfernen und die Deckkraft für den Hintergrund entfernen.
/*take out background overlay*/
.et_slide_menu_top {
background: none;
}
/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}
Wenn Sie Untermenüelemente haben, vergrößert dieses CSS den Dropdown-Pfeil rechts neben dem Menüelement:
/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;
}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}
Schauen wir uns an, was wir bisher haben:
Jetzt können wir unser Hintergrundbild hinzufügen. Da ich möchte, dass mein Hintergrundbild auf allen Geräten angezeigt wird, füge ich dieses CSS außerhalb der Klammern der Medienabfrage hinzu, damit der Hintergrund bei Bildschirmgrößen mit einer Breite von weniger als 980px nicht ausgeblendet wird.
/*add background image*/
body #page-container .et_slide_in_menu_container{
background: url('INSERT IMAGE URL') center center !important;
background-size: cover !important;
}
Wenn Sie noch keine Hintergrundbild-URL haben, laden Sie ein Hintergrundbild (1920×1080) in die WordPress-Mediengalerie hoch und kopieren Sie die URL.
Ersetzen Sie nun den Text "INSERT IMAGE URL", indem Sie Ihre Bild-URL in den Code einfügen.
Jetzt sind Sie fertig!
Hier ist eine vollständige Version des CSS-Codes, den Sie Ihrem zusätzlichen CSS hinzufügen sollten (mit Ausnahme der Bild-URL, die Sie angeben müssen):
@media all and (min-width: 980px){
/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
width: 50%;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
padding-top: 0px !important;
}
/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
width: 50%;
text-align: center;
display: table !important;
vertical-align: middle;
position: initial;
float: right;
height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
display: table-cell !important;
position: relative;
vertical-align: middle;
text-align: left!important;
padding: 0 15%;
width: 100%;
}
.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
width: 100%;
}
.et_header_style_fullscreen div#et-info {
float: none!important;
width: 100%;
}
.et_header_style_fullscreen div#et-info span {
display: block;
margin-bottom: 30px;
}
/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
margin-top: 30px !important;
margin-bottom: 15px;
width: 100% !important;
max-width: 300px !important;
padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
width: 50px;
height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
font-size: 22px;
}
/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
text-align: right;
padding: 0 15%;
}
/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
font-size: 120px;
}
/*dark background overlay*/
.et_slide_menu_top {
background: none;
}
/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}
/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;
}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}
}
/*add background image*/
body #page-container .et_slide_in_menu_container{
background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
background-size: cover !important;
}
Klicken Sie auf Speichern & veröffentlichen
Lassen Sie es uns jetzt überprüfen:
Alternatives Layout des Rastermenüs
Um ein Rasterlayout für Ihr Menü hinzuzufügen, fügen Sie das folgende CSS unter Ihrem aktuellen Code und innerhalb der Medienabfrageklammern hinzu:
/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
opacity: 1;
width: 46%;
float: left !important;
margin-right: 2%;
margin-bottom: 2%;
}
.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
padding: 20% 0;
border: 1px solid #fff;
color: #fff;
width: 100%;
text-align: center;
}
Wichtiger Hinweis: Möglicherweise müssen Sie die Schriftgröße des Menüs auf 30px (oder nahe daran) ändern, um sicherzustellen, dass sich Ihre Menüelemente auf kleineren Bildschirmgrößen nicht überlappen. Außerdem funktioniert dieses Layout nicht, wenn Ihr Menü Untermenüpunkte enthält.
Untermenüpunkte in der Vollbild-Kopfzeile
Denken Sie daran, dass bei Untermenüelementen der übergeordnete Menüeintrag nur als Umschaltlink zum Ein- und Ausblenden der Untermenüelemente dient. Es funktioniert nicht als Menülink selbst.
Reaktionsfähig?
Diese Anpassung ist reaktionsschnell und funktioniert auf allen Bildschirmgrößen gut.
Der Fullscreen-Header besteht aus zwei benachbarten Tabellenzellen, die vertikal ausgerichtet sind. Die linke Tabellenzelle enthält das Menü und die rechte Zelle enthält die anderen Kopfzeilenelemente. Da der Inhalt vertikal ausgerichtet ist und die Tabellenzellen jeweils 50% (eine Hälfte) der Bildschirmgröße einnehmen, passt sich der Inhalt immer gut an jede Bildschirmgröße an.
Wenn die Bildschirmgröße weniger als 980px beträgt (Tablets und Telefone), wird das standardmäßige Divi-Layout aktiviert und das Menü auf dem Handy gut angezeigt.
Abschließende Gedanken
Wenn Sie darüber nachdenken, Ihrer Website einen Vollbild-Header hinzuzufügen, hoffe ich, dass dieses Design eine nützliche Inspiration ist. Die Symmetrie der Kopfelemente und Menüpunkte gleicht die Dinge aus und bringt mehr Aufmerksamkeit auf die für viele Kunden wichtigen Kontaktinformationen.
Denken Sie daran, dass das Hintergrundbild der Schlüssel sein wird, da dieses Menü im Vollbildmodus ausgeführt wird. Sie möchten kein Bild, das von den wichtigen Inhalten des Menüs ablenkt oder sie übertönt. Wenn Sie nicht das perfekte Bild finden, das die gewünschte Persönlichkeit hervorbringt, wählen Sie ein Bild, das als Hintergrund einfach gut aussieht und zu Ihrem Design passt. Oder Sie können einfach die Option für die Standardhintergrundfarbe verwenden.
Nun, das ist alles, was ich habe.
Ich freue mich von Ihnen in den Kommentaren zu hören.