Dieser Beitrag beschreibt die Anpassungen um im ersten Schritt wie von Timo gefordert einen Sticky-Header zu erhalten.
Die ursprünglich importierte Variante https://the7.io/ecommerce-book/ hat Chaos verursacht. Basiert auf WPBakery, danach ging gar nicht mehr.
Im folgenden als Kladde die wichtigsten Notizen um die Vorgehensweise nach zu vollziehen.
Importiere einzelne Seite https://the7.io/elementor-shop/product/product009/.
Importiertes Ergebnis siehe hier https://new.hahn.eu/product/product009/.
Dabei wird jede Menge Schmutz mit installiert.
Aber auch das Template The7 header with search, siehe hier.
Lege Kopie mit dem Namen The7 header with search (p-copy) an, teste mit dieser, erstelle eigenen Header und identifiziere Eigenschaften.
Es gilt im folgenden folgende todo’s abzuarbeiten:
– Hintergrund Grafik ganz rechts oben sichbar machen
– sticky Verhalten steuern
– Mega Menü anlegen siehe Beispiel https://the7.io/elementor-shop/
- Test ohne Header => Verhalten von Hintergrund in Desktop & Mobile View
- Test mit Header „The7 – header“ => in Mobile View keine Farbe Hintergrund Menü
- Test mit Header „The7 header with search (p-copy)“
=> in Desktop View, Hintergrund nicht sichbar sonst Verhalten ok;
=> in Mobile View, mobiles Menü funktioniert nicht - erstelle neuen Header im Theme Builder, Name: pHeader-10a;
- teste neuen Header, ist leer => Hintergrundgrafik scrollt mit
Struktur:
– Abschnitt
– Spalte
– Innerer Abschnitt
– Spalte
– Spalte
– Innerer Abschnitt
– Spalte
– Spalte
Stichwörter zu den Eigenschaften: z-Index, wenn sticky einblenden anderen ausblenden, Elternelement wird sticky, Kinder haben koresspondierende Eigenschaften
prüfe ob einer der importierten Beispiel header funktioniert:
„The7 header with search (p-copy)“ aus https://the7.io/elementor-shop/product/product009/,
hier Beispielseite https://new.hahn.eu/product/product009/ (Minimalistic ceramic vase),
Beispielseite Darstellung mobil ok, Menü nicht ok weil poppt nicht auf
„The7 Mobile Header“
Darstellung mobil ok, Menü funktioniert
Vorgehensweise:
…
- Listenelement #1
- Listenelement #2
- Listenelement #3