#2218 ThemeWare® Modern Design-Update 2021

Wie du vielleicht bemerkt hast, lag unser Fokus in den letzten Monaten – neben wichtigen Meilensteinen wie Zusatzfeldern, Erlebniswelten und dem Custom-Header – vor allem im Bereich "Design". Damit du sofort von den wichtigsten Verbesserungen profitieren kannst, haben wir uns entschieden mit ThemeWare® 1.0 ein Design-Update für unser ThemeWare® Modern zu veröffentlichen.


EN: You can find the English version here.


Wichtig: Trotz unserer einfachen Anleitung empfehlen wir dir das Update entweder erst in einer Testumgebung oder Anfang Januar durchzuführen, da wir wie gewohnt zwischen den Jahren Betriebsferien haben.



Änderungen Schritt für Schritt

Im folgenden findest du alle Änderungen. Jeder Schritt thematisiert einen entsprechenden Tab den du prüfen solltest. Unterstrichen haben wir die Sektionen. Die Konfigurationsfelder sind fett geschrieben. Zu jedem Konfigurationsfeld findest du den Ursprungswert und den neuen Wert ("vorher" => "nachher").


Möchtest du vom Design-Update profitieren, prüfe alle Konfigurationsfelder, ob die "nachher"-Werte konfiguriert sind. Soll dein Layout weiterhin bestehen bleiben, prüfe alle Konfigurationsfelder, ob die "vorher"-Werte konfiguriert sind.


Hinweis: Bereits von dir vorgenommene Änderungen an der Konfiguration sind von Updates nicht betroffen, du musst dann natürlich nicht den "nachher"-Wert übernehmen. Die Primärfarbe ist dafür ein gutes Beispiel.


Schritt 1) Layout

Im Tab "Layout" wurde die Primärfarbe aufgefrischt. In den meisten Fälle ist dies die erste Einstellung die geändert wird, daher musst du hier wahrscheinlich nichts weiter machen.

  1. Hauptfarben
    1. Primärfarbe: #135d84 => #0c7ebb
    2. Primärfarbe (Hell): #166d9a => #2a96cf

Schritt 2) Header

Die meisten Änderungen gab es im Header. Diese Änderungen basieren auf unserem neuen, modernen und oft nachgefragten Custom-Header.

  1. Layout
    1. Basiskonfiguration
      1. Darstellungsart: 'Header 1.1' => 'Full-Width Sticky-Header'
      2. Innenabstand unten: 20 => 10
  2. Top-Bar
    1. Top-Bar anzeigen: 'anzeigen' => 'nicht anzeigen'
    2. Farbkonfiguration
      1. Rahmenfarbe: #ffffff => rgba(255, 255, 255, 0)
      2. Hintergrundfarbe: #ffffff => rgba(255, 255, 255, 0)
  3. Suche
    1. Basiskonfiguration
      1. Breite @Desktop (≥1200px): 100% => 1100px
      2. Darstellungsart: 'Eingabefeld (Standard)' => 'Flyout-Suche'
    2. Farbkonfiguration
      1. Hintergrundfarbe (Flyout-Suche): #0e557b => #eef2f5
    3. Typografie
      1. Textausrichtung: 'links ausrichten' => 'zentriert ausrichten'
  4. Aktions-Buttons
    1. Basiskonfiguration
      1. Text anzeigen ab ...: "Tablet (Hochformat) (≥768px)" => "nicht anzeigen"
    2. Typografie
      1. Icongröße: 14 => 24
    3. Farbkonfiguration
      1. Rahmenfarbe: #e4e7ea => rgba(255, 255, 255, 0)
      2. Rahmenfarbe @hover: #e6e6e6 => rgba(255, 255, 255, 0)
      3. Hintergrundfarbe: #ffffff => rgba(255, 255, 255, 0)
      4. Hintergrundfarbe @hover: #f6f6f6 => rgba(255, 255, 255, 0)
    4. Warenkorb-Button
      1. Preis anzeigen ab ...: 'Tablet (Querformat) (≥992px)' => 'nicht anzeigen'
      2. Text anzeigen ab ...: 'Tablet (Hochformat) (≥768px)' => 'nicht anzeigen'
      3. Rahmenfarbe: #e4e7ea => rgba(255, 255, 255, 0)
      4. Rahmenfarbe @hover: #e6e6e6 => rgba(255, 255, 255, 0)
      5. Hintergrundfarbe: #eef2f5 => rgba(255, 255, 255, 0)
      6. Hintergrundfarbe @hover: #ffffff => rgba(255, 255, 255, 0)
  5. Top-Navigation Flyout
    1. Basiskonfiguration
      1. Animation: 'keine Animation (Standard)' => 'fade In'
    2. Level 2, 3 ...
      1. Schriftgröße: 18 => 16
  6. Mobiler Header
    1. Aktions-Buttons
      1. Rahmenfarbe: #ffffff => rgba(255, 255, 255, 0)
      2. Rahmenfarbe @hover: #ffffff => rgba(255, 255, 255, 0)
      3. Hintergrundfarbe: #ffffff => rgba(255, 255, 255, 0)
      4. Hintergrundfarbe @hover: #ffffff => rgba(255, 255, 255, 0)

Schritt 3) Erlebniswelten

Im Tab "Erlebniswelten" wurden zwei kleine Änderungen vorgenommen. Das Modern bekommt nun von Haus aus eine Scroll-Animation für CMS-Blöcke und der Produkt-Slider wird aufgehübscht.

  1. Alle Typen (Shopseiten, Landingpages, Kategorieseiten, Produktseiten)
    1. CSS-Scroll-Animationen
      1. CSS-Scroll-Animation (CMS-Blöcke): 'keine' => 'fade in'
  2. Produkt-Slider (Kategorie "Commerce")
    1. Individuelles Styling: 'nicht verwenden (Standard)' => 'individuelles Styling verwenden'
    2. Pfeile-Navigation (Individuelles Styling)
      1. Darstellungsart: 'Rechteck (Standard)' => 'Quadrat/Kreis'
      2. Ecken: 'abgerundete Ecken (Standard)' => 'nicht abgerundet'
      3. Rahmenfarbe: 'transparent' => #eeeeee
      4. Hintergrundfarbe: 'transparent' => #eeeeee
      5. Textfarbe @hover: '$sw-color-brand-secondary' => #ffffff
    3. Produktbild
      1. Hintergrundfarbe: #f7f7f7 => #ffffff

Schritt 4) Kategorieseiten

Im Tab "Kategorieseiten" wurde die Produkt-Box moderner gestaltet.

  1. Produkt-Box
    1. Basiskonfiguration
      1. Hover-Effekt auf Slider anwenden: 'nein' => 'ja'
      2. Textausrichtung: 'zentriert ausrichten' => 'links ausrichten'
    2. Farbkonfiguration
      1. Rahmenfarbe @hover: #008490 => #eeeee
      2. Hintergrundfarbe @hover: #f7f7f7 => #ffffff
    3. Produktbild
      1. Hover-Effekt: 'Bild vergrößern' => 'Hover-Bild überblenden'

Schritt 5) Erweiterungen

Im Tab "Erweiterungen" gibt es eine letzte Änderung um die Top-Bar in die USP-Bar zu verschieben.

  1. USP-Bar
    1. Basiskonfiguration
      1. Darstellungsart (Header): 'kleine Icons' => 'kleine Icons + Top-Bar'
      2. Breite (Header): 'Container-max-width (Full-width-boxed)' => '100% (Full-width)'



Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

a95b878ca614077bcc681a54aba661d0
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

Speichern Cookie-Einstellungen Akzeptieren und Schließen