Header Hauptbereich

 

 

Widget-Beispiel

Ein Beispiel dieses Widgets könnt ihr euch auf folgender Landingpage genauer ansehen: https://showcase2.easytemplate360.de/Widget-Header-Hauptbereich

Beschreibung

Dieses Widget gibt es nur im Bereich https://solution360.atlassian.net/wiki/spaces/ET360V2/pages/3416129560 .

Der Hauptbereich enthält auf Desktopgeräten das Shop-Logo, die Suche und den Bereich für den Kundenlogin, Wunschlisten, Vergleichslisten und Miniwarenkorb. Außerdem kann hier optional die Währungs- und Sprachauswahl gezeigt werden.

Auf Mobilgeräten enthält dieser Bereich auch den Button für das Mobile Menü.

Der Header Hauptbereich im Shop beinhaltet u.a. das Logo, das Suchfeld, den Mini-Warenkorb, Sprach- und Währungsauswahl und die "Schnell-Login"-Funktion.

Dieser Bereich wird auf jeder Seite im Shop angezeigt.

 

Erklärung zu den Standardwerten:

Größe Standard = Contentbreite, Hintergrund volle Breite
Max. Höhe Logo bei
Smartphone hochkant = 32px
Smartphone quer/Tablet hochkant = 32px
Tablet quer = 44px
Laptop = 80px
Desktop = 80px

Vertikale Ausrichtung Logo = zentriert
Horizontale Ausrichtung Logo = links
Vertikale Ausrichtung Suchfeld = zentriert
Horizontale Ausrichtung Suchfeld = zentriert
Vertikale Ausrichtugn Konto / Warenkorb / Zertifikat = zentriert
Horizontal Ausrichtung Konto / Warenkorb / Zertifikat = rechts

Eine Beispielansicht im Frontend

  • In diesem Beispiel haben wir das Wunschliste-Icon, Währungs-/Sprachauswahl anzeigen und das Zertifikat Logo aktiv gesetzt.

  • Die Begrenzungslinie haben wir in rot gesetzt.

Dazu die Ansicht im Backend

  • Größe ist wieder “Contentbreite, Hintergrund volle Breite”

  • “Suchfeld”, “Wunschliste-Icon”, “Sticky”, “Währungs-/Sprachauswahl” sind aktiviert

    • Ihr könnt die Reihenfolge natürlich auch unterschiedlich setzen.

  • Firmen Logo Quelle, woher das Logo stammt, kann hier eingestellt werden.

    • Die vertikale/horizontale Ausrichtung der einzelnen Felder könnt Ihr ebenfalls vornehmen.

  • Zertifikat Logo und Text wurden hinterlegt und individuell gestaltet, in unserem Beispiel haben wir zu Trusted Shops verlinkt.

  • Eine individuelle Farbgestaltung haben wir vorgenommen

    • In diesem Beispiel haben wir die Hintergrundfarbe in grau gesetzt, Textfarbe in weiß und die unter Begrenzungslinie in rot