Divi Header für Onlineshop (WooCommerce) erstellen → Anleitung für mobile Endgeräte

Divi Header für WooCommerce Onlineshops für mobile Endgeräte!
In diesem Video lernst du, wie du mit dem Divi PageBuilder einen Header speziell für deinen WooCommerce Onlineshop erstellen kannst.
Der Header sieht dann so aus, dass du links das Hamburger Menu hast, in der mitte sieht man dein Logo und ganz rechts stehen dann die Icons
für den Warenkorb.
Bevor du mit dem Video startest, musst du zwei Voraussetzungen erfüllen:
1. Schau dir das Video an, in dem ich dir zeige, wie man den Header für Desktop erstellt → • Divi Header für Online...
2. Du musst den Header mit dem Divi Theme Builder erstellen.
ACHTUNG: Die Anleitung funktioniert nicht(!) mit dem Customizer!
Ansonsten sind das die weiteren Schritte kurz zusammengefasst:
02:40 - 1. Schritt
Öffne den Theme Builder und erstelle dir eine Kopie deiner Sektion. Die eine Sektion wird für Desktop Geräte angezeigt und die andere Sektion wird dann für Smartphone und Tablet angezeigt. Nachfolgend betrachten wir nur noch die Sektion bzw. den Header der für mobile Endgeräte angezeigt wird.
03:18 - 2. Schritt
Nun tauscht du die Reihenfolge der Spalten:
Links - Hamburger Menu
Mittig - Logo
Rechts - Icons
03:52 - 3. Schritt
Da die Spalten nun untereinander angezeigt werden, müssen wir nun einen Code integrieren, sodass die Spalten auf bei mobilen Endgeräten in einer Reihe angezeigt werden. Der Code dazu lautet:
display: flex;
04:42 - 4. Schritt
Nun deaktivieren wir das Hamburger Menu, denn wir wollen die Icons wie Warenkorb nicht hinter einem Hamburger Menu verstecken, sondern wollen nur die Icons sehen. Dazu müssen wir folgenden CSS Code im Divi Theme einfügen:
.lwp-hide-mobile-menu.et_pb_menu .et_pb_menu__menu,.lwp-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu { display: flex!important; } .lwp-hide-mobile-menu .et_mobile_nav_menu { display: none; }
Wähle nun das Hamburger Menu aus, was du deaktivieren möchtest und trage folgenden Code als CSS Klasse ein:
lwp-hide-mobile-menu
06:25 - 5. Schritt
In diesem Schritt passen wir die Position des linken Hamburger Menus an. Achte hierbei, dass das Layout auf Linksbündig gestellt ist und wähle bei der Textausrichtung Blocksatz aus.
Über die Zeileneinstellung kannst du die Breite festlegen, z.B. Breite 100%.
Mit Hilfe von Margin/Padding bei dem Zwischenraum, kannst du die einzelnen Module noch separat anpassen.
09:11 - 6. Schritt
Da das Drop Down Menu stets so breit ist, wie die dazugehörige Spalte, müssen wir das Drop Down auf die volle Breite einstellen. Mit diesem Code kannst du das umsetzen:
/* Mobiles Menu in voller Breite */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}
/* Mobiles Menu bei 90% voller Breite */
.et_mobile_menu {
min-width: 100vw;
margin-left: -5vw;
}
Spiele dazu einfach mit den Werten, bis es optisch passt.
11:23 - 7. Schritt
In diesem letzten Schritt kannst du noch die Höhe der Icons anpassen, das geht über Margin/Padding. Wähle dazu einfach die Werte aus, sodass es von der Höhe her passend ist.
Hast du Fragen oder Anmerkungen? Dann hinterlasse mir einen Kommentar!
▬▬ 🎬 ABO FÜR NOCH MEHR VIDEOS ▬▬▬▬▬▬▬▬▬
www.hhess.de/a...
▬▬ 👋 INFOS ZU MIR & MEINEN LEISTUNGEN ▬▬▬▬▬▬▬▬▬
www.hhess.de/i...
▬▬ ☕ MEINEN KANAL UNTERSTÜTZEN ▬▬▬▬▬▬▬▬▬
www.buymeacoff...

[@herfurthfoto]

Danke. Hat sehr geholfen. Abo ist da!

[@Malo_crkz]

Nach diesem video hab ich soooooooo lang gesucht :D endlich *.*