Landingpage Weihnachten

Alle Jahre wieder wird es Weihnachten. Eine tolle Sache. Der Mensch entspannt langsam oder er entspannt auch nicht. In jedem Fall hat er den Großteil seines Jahreswerkes hinter sich und verlagert sein Handeln von der Produktion hin zur Konsumtion.

---

Für Webseiten-Betreiber ist dies eine gute Möglichkeit, diesen Menschen anzusprechen. Ich habe mir in den letzten Jahren verschiedene Landingpages zum Thema Weihnachten angeschaut und stelle hier die Lösung unseres Webshops vor – jetzt als Umsetzung mit JTL-Shop 5 mit Dropper.

1. Navigation und Banner

Es empfiehlt sich in der Wawi eine separate Kategorie Weihnachten einzuführen und diese mit Unterkategorien zu untersetzen. In unserem Fall sind dies

• Geschenke für Sie 
• Geschenke für Ihn
• Geschenke bis 30 Euro
• Geschenke bis 70 Euro
• Geschenke bis 100 Euro
• Geschenke ab 100 Euro.

Man sollte diese Kategorie gut sichtbar (also im Header Links) anordnen und mit einer separaten Farbe versehen (bei uns ist dies ein weihnachtliches Dunkelgelb in #C93).

Die Einfärbung der Kategorie „Weihnachten“ haben wir per CSS realisiert und in die allgemeine CSS-Datei des Shops geschrieben.

<style>
li.nav-item.flag-weihnachten > a.nav-link > span.nav-mobile-heading {
 color: #cc9933 !important;}
</style>

Das unter der Navigation liegende Banner wurde als SVG-Datei erstellt und in verschiedenen Breiten für die Endgeräte Desktop, Tablet und Mobil als webp-Datei gespeichert und mit Dropper eingesetzt. Mit Dropper kann man hier wunderbar ausschließen, wo das Banner nicht eingefügt werden soll – beispielsweise im Blog.

2. Rechtliches

Es macht sich gut, das Widerrufsrecht zur Weihnachtszeit zu verlängern, damit sich die Käuferinnen und Käufe keine Gedanken um eventuelle Rückgaben machen müssen, falls das Geschenk nicht gefallen sollte.

Dazu sollte man an prominenter Stelle kurz auf das verlängerte Widerrufsrecht hinweisen. Hierzu eignet sich die Topbar des Shops, die unter JTL über die Sprachvariabelen unter Topbar gefunden werden kann.

<span>Verlängertes Rückgaberecht bis 20.Januar &#127876; &#127873; </span>

Um das verlängerte Widerrufsrecht auch rechtssicher abzubilden, haben wir die Verbindung von IT-Recht Kanzlei zu unserem Onlineshop für die Position Widerruf zeitweise deaktiviert und den entsprechenden Text um folgende Passage erweitert:

Verträge, die zwischen dem 30. November 2022 und dem 31. Dezember 2022 geschlossen werden, können bis einschließlich den 20. Januar 2023 widerrufen werden, auch wenn bereits mehr als vierzehn Tage seit Inbesitznahme der Ware verstrichen sind. 

Das wird dann sowohl auf der Webseite als auch in den Bestell-Emails korrekt dargestellt.

3. Landingpage Weihnachten

Eine schöne Weihnachtsseite verbreitet eine gute Stimmung und führt durchaus zu etwas mehr Einkäufen. Neben Text und Informationen haben wir für uns drei wesentliche Gestaltungselemente für die Weihnachtsseite definiert – SVG -Symbole, Weihnachtskalender und SVG-Schneemuster in Bildern.

SVG – Symbole

Es macht sich gut, die Unterkategorien nochmals als klickbare Elemente oben auf der Landingpage zu positionieren. Das ist die wichtigste Auswahlzeile für den Besucher. Wir haben dafür SVG-Dateien verwenden, die beim Hovern ihre Eigenschaften ändern. Eine tolle Sache, die unheimlich viel Arbeit macht, obwohl es ganz einfach aussieht. Wir wollten beim Hovern, die Schrift bestehend aus Fläche und Rahmen ausblenden und ein Element der Zeichnung farblich hervorheben, was durch folgende Schritte erreicht werden kann.

5. Html und Css

Den SVG-Code kann man direkt in den Html-Code seiner Webseite kopieren, d.h. als Code an der gewünschten Stelle einfügen. In unserem Fall (JTL-Shop, Dropper) haben wir dafür ein Plaindrop genutzt. Die Eigenschaften der verschiedenen Klassen innerhalb dieses SVG-Codes kann man per CSS für den ungehoverten und gehoverten Zustand ansprechen, d.h. man muss die CSS-Datei entsprechend erweitern.

.wkalender .weih-logo {fill: #ccc; transition: 1s;}
.wkalender svg:hover path.weih-logo {fill:#C93;}

.wkalender .weih-schrift {fill:#C93; opacity: 1; transition: 1s;}
.wkalender svg:hover .weih-schrift {opacity: 0;}

.wkalender .weih-kontur {fill:#FFF; opacity: 1; transition: 1s;}
.wkalender svg:hover .weih-kontur {opacity: 0;}

Weihnachtskalender

Der Weihnachtskalender an sich ist technisch gesehen relativ einfach. Man teilt sein Blatt auf in 4 x 6 Kacheln für die Desktop und Tablet-Varianten und in 2 x 12 Kacheln für die Mobilvariante, d.h. man gestaltet die Layoutumbrüche entsprechend. Danach kann man für jeden Tag ein Bild für den ungeöffneten Zustand, ein Bild oder Slider für den geöffneten+aktuellen Zustand und ein Bild für den geöffneten+vergangenen Zustand definieren. Wie man diese austauscht, ob stumpf manuell oder mit ein-/ ausblenden liegt im persönlichen Ermessen (Die Darstellung stammt noch aus der JTL-Shop-4 Version). 

Schneemuster

Für Schneemuster muss man sich erstmal eine quadratische Fläche mit einem SVG – Symbolen schaffen, die dann mit CSS – Befehlen auf einer fest definierten Fläche wiederholt werden kann. Die Anweisung zur Generierung des Musters wird in die CSS – Datei geschrieben und kann sehr bequem an verschiedene Endgeräte oder Bildschirmbreiten angepasst werden.

.whintergrundw {
        background: url(https://www.kult-design-unikate.de/bilder/kat_svg/w-muster-w.svg) repeat left top scroll;
        position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
        background-size: 350px 350px; /* Standardgröße */
    }

@media (max-width: 768px) {
    .whintergrundw {
        background-size: 250px 250px; /* Kleinere Schneeflocken für Tablets */
    }
}

@media (max-width: 480px) {
    .whintergrundw {
        background-size: 150px 150px; /* Noch kleinere Schneeflocken für Mobil */
    }
}

Um das Muster sichtbar zu machen, müssen separate leere Flächen in die Webseite eingefügt werden, die nur die Klasse beinhalten, über die das Muster angesprochen werden kann. Der Code hierfür ist denkbar einfach.

<div class="whintergrundw"></div>

Die Kunst besteht darin, vorhandene umschließende Container zu finden, die bereits in ihrer Ausdehnung definiert sind und sich an die richtige Stelle zu setzen, um ebenfalls im umschließenden Container befindliche Buttons oder Verlinkungen nicht zu verdecken und damit unwirksam zu machen. Wir haben Lösungen für unser Titelbild auf der Startseite, für Teaser-Bilder auf unseren Landingpages und sogar für die Artikelbilder in den Artikellistings/ Artikeldetailseiten gefunden (letztere aber letztlich nicht eingesetzt).

Das Tolle daran ist, dass man das Muster mit wenigen Handgriffen aktivieren / deaktivieren kann, ohne die Bilde bearbeiten zu müssen.

---

Besucht unsere Webseite und unsere Weihnachtslandingpage unter https://www.kult-design-unikate.de. Die Inhalte des Weihnachtskalenders sind übrigens logischer Weise nur zu Weihnachten zu sehen.

So, see you …

---