Divi 4.0 bringt endlich den neuen Divi Template Builder heraus.
Lange mussten wir auf dieses Feature warten und nun ist es endlich soweit. Divi 4.0 ermöglicht es uns nun eigene Header, Footer und noch vieles mehr zu erstellen, diese dann auch per „Hook“ an die Stellen anzeigen zu lassen an denen wir sie gerne hätten.
In diesem Beitrag soll es aber um einen ganz wichtigen Punkt gehen. Den fixed Header.
Wir stellen fest, dass die wichtige Funktion „fixed Header“ die wir uns gewöhnt sind plötzlich fehlt. Eins vorweg, ElegantThemes wird hier aber soweit ich weiss nachbessern und die fehlende Funktion in den nächsten Updates sicherlich wieder hinzufügen.
Im Netz und in diversen Facebook Gruppen häufen sich die Tutorials wie man den „fixed Header“ wieder einfach mit CSS hinbekommt, aber mir gefielen die gezeigten „0815 Basic“ Varianten einfach nicht, weil sie in meinen Augen einfach langweilig ist. Aus diesem Grund, habe ich mich entschlossen, meine eigene Version zu basteln und mit der deutschen Community zu teilen. Ich bin einfach der Meinung, dass diese zumindest etwas „professioneller“ daherkommt.
Was wird benötigt?
Zum einen brauchen wir jQuery, zum anderen etwas CSS. Hier findet ihr alle Snippets zum kopieren und einfügen. An dieser Stelle möchte ich auch gleich nochmals auf unser Divi Mastermind Child Theme hinweisen, falls ihr es immer noch nicht nutzt, findet ihr es in der Sidebar zum kostenlosen Download. Ein Child-Theme ist kein Muss, aber gerade bei solchen Einstellungen die wir hier tätigen ist es äusserst sinnvoll eines zu haben, da man so kein Risiko bei Theme updates eingeht etwas zu verlieren.
jQuery Code für Child-Theme
Das ist der Code, falls Ihr unser Divi Mastermind Child Theme nutzt, welchen ihr ganz einfach in der custom.js Datei platzieren könnt. Ihr braucht keinen zusätzlichen öffnenden/schliessenden <script>-tag (siehe Video)
$(window).scroll(function() {
var sticky = $('#bh_header');
var section = $('.et_pb_section_0'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
section.addClass('move-top');
}
else {
sticky.removeClass('fixed');
section.removeClass('move-top');
}
});
jQuery Code für Divi Integration – Tab
Das ist der Code, falls Ihr das jQuery lieber in Divi > Theme-Optionen > Integration > Code dem < head > Ihres Blogs hinzufügen benutzen wollt. ++ WICHTIG – packt den ganzen Code in ein <script>-tag (SIEHE SCREENSHOT) sonst funktioniert er nicht!!
jQuery(function($){
$(window).scroll(function() {
var sticky = $('#bh_header');
var section = $('.et_pb_section_0'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
section.addClass('move-top');
}
else {
sticky.removeClass('fixed');
section.removeClass('move-top');
}
});
});
Der CSS Code:
Den CSS Code könnt ihr in das style.css ODER in Divi > Theme-Optionen > Allgemeines ganz unten in das Feld „Eigenes CSS“ platzieren. Somit schreibt er das CSS direkt in die Datenbank. auch hier möchte ich explizit die Empfehlung äussern, euch ein Child Theme anzulegen und zu nutzen. Wie im Video gezeigt ist die Klasse vertical align lediglich ein Bonus und hat mit der eigentlichen Funktion vom „fixed Header“ nichts zu tun und dient lediglich der Ästhetik die Elemente horizontal zu zentrieren.
.vertical-align {
display:flex;
flex-direction:column;
justify-content:center;
}
@media only screen and ( min-width: 981px ) {
#bh_header.fixed {
position:fixed;
width:100%;
top:0;
z-index:999;
animation: smoothScroll 1s forwards;
}
@keyframes smoothScroll {
0%{
opacity:.7;
transform: translateY(-200px);
}
100% {
opacity:1;
transform: translateY(0px)
}
}
.move-top { margin-top:91px }
}
Ich hoffe, dass Euch dieses Tutorial weiterhilft.
LG Benny
