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 Header .

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.

Open

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

Open