Module

Breadcrumb Navigation
v12, 23.04.2021

Ist kein eigentliches Modul, sondern wird auf allen Seiten ab der dritten Ebene automatisch angezeigt.

  • Zeigt dem User an, wo sie/er sich gerade befindet.
  • Gezeigt wird der Pfad zur aktuellen Seite bzw. allen Elternseiten werden hierarchisch und die aktuelle Seite wird als «letztes» Element angezeigt.
  • Sämtliche Elternseiten sind klickbar.
  • Umsetzung
  • Laut Olaf waren Breadcrumbs bei WATSON.ch Gold wert.
    • Bei Umsetzung JSON-Schema wie bei WATSON.ch beachten.

Header
v40, 26.03.2021

Definiert den Header der jeweiligen Seite / News Beitrag. Ist kein frei einsetzbares Modul, sondern muss jeweils am Anfang der Seite gesetzt werden.

Es gibt grundsätzlich drei (3) Typen von Header, welche aber über das selbe Modul abgehandelt werden.

  • Slider
    • Für die Startseite oder Übersichtsseiten.
  • Image
    • Für die grossen Unterseiten.
  • Simple
    • Für alle anderen Seiten.

Typ «Slider»

  • Soll nur auf der Startseite oder Übersichtsseiten verwendet werden.
  • Grösse
    • Die Breite des Sliders / Bild geht über die gesamte verfügbare Browserbreite.
    • In der Höhe wird der gesamte Viewport ausgefüllt (abzüglich Navbar).
  • Anzahl Slides
    • Es können maximal vier (4) Slides angelegt werden.
      • Unsere Empfehlung liegt bei drei (3).
    • Sobald mehr als ein Slide angelegt ist, wird ein Paging angezeigt.
  • Reihenfolge
    • Die Reihenfolge der Slides im Frontend, wiederspiegelt die Reihenfolge der Slides im Backend.
    • Im Backend kann die Reihenfolge der Slides per «Drag and Drop» angepasst werden.
  • Feldstruktur
    • Pro Slide
      • Bild
      • Muster-Overlay
      • Titel
        • Mehrzeiliger Text
      • Text
        • Mehrzeiliger Text
      • Button/Link

Typ «Image»

  • Soll auf den grossen Unterseiten verwendet werden.
  • Grösse
    • Das Bildes läuft so breit wie der Inhalt.
    • Das Bild wird im Format 16:9 angezeigt.
      • Die Höhe ist somit abhängig von der Breite.
  • Ausser dem Bild kann noch ein Titel definiert werden, welcher über das Bild gesetzt wird.
  • Feldstruktur
    • Bild
    • Muster-Overlay
    • Titel
      • Mehrzeiliger Text
    • Button/Link

Typ «Simple»

  • Ist Standardauswahl.
  • Soll auf allen Seiten genutzt werden, für welche es kein Bild gibt bzw. wo ein Bild keinen Sinn macht.
  • Feldstruktur
    • Titel
      • Mehrzeiliger Text
    • Button/Link

Titel bei allen Typen

Typ «Slider» und «Image»

  • Muster-Overlay
    • Bei Typen mit Bild(ern) gibt es die Möglichkeit Muster (weissen Linien) darüber legen zu lassen.
    • Diese Möglichkeit kann pro Bild (Generell beim Typ «Image» und für jeden Slider beim Typ «Slider») aktiviert werden.
    • Herr Sutter gestaltet fünf Muster, aus welchen jeweils beim Laden der Seite eines ausgewählt wird.
  • Text (nur Type «Slider»)
    • Schriftfarbe ist immer weiss und wird immer mit einem leichten Schatten versehen.

Labels
v12, 23.04.2021

Definiert die Label-Icons und -Links der jeweiligen Seite / News Beitrag. Ist kein frei einsetzbares Modul, sondern muss jeweils unterhalb des Headers aktiviert werden, damit die Werte gesetzt werden können.

Label

  • Form und Zweck
    • Durch ein Icon und einen Text wird gezeigt in welcher Branche oder in welchem Produktbereich mensch sich befindet.
  •  Anzahl
    • Es kann jeweils ein (keins bis maximal eins) Label gesetzt werden.
  • Link
    • Dieses Label ist NICHT klickbar.
  • Icons
  • Text
    • Der Text ist frei wählbar.
  • Farbe
    • Das Icon und der Text werden in abgeschwächtem «Wörwag Aegean Blue» auf grauem Hintergrund gezeigt.

Label-Icon-Links

  • Form und Zweck
    • Herstellung von Verlinkungen von Produkt- zu Branchenseiten mittels Icon und einen Text.
  • Anzahl
    • Die Anzahl Label-Icon-Links ist nicht beschränkt (keins bis x).
  • Link
    • Label-Icon-Links müssen zwingend verlinkt werden.
    •  Der Link wird auf den gesamten Eintrag gesetzt.
  • Icons
    • Die auswählbaren Icons sind beschränkt auf «Branchen».
  • Text
    • Der Text ist frei wählbar.
  • Farbe

Note für Umsetzung

  • Soll in den <header>.
  • Icon-Text hat Min-Width.

Einleitung
v10, 23.04.2021

Soll (nur) als Einleitung einer Seite bzw. eines New Beitrags verwendet werden.

  • Text
    • WYSIWYG mit folgenden Werkzeugen
      • Fett
      • Link

Informationen zur Ursprungs-Idee «Stehsatz-Text»

  • Dieses Modul war als «Stehsatz-Text» angedacht, mit der Idee dass der Inhalt als «Definition» bei Suchresultaten angezeigt wird / werden könnte.
  • Das wir keine konkreten Informationen / Dokumentation darüber finden konnte, wird dieses Modul zur simplen «Einleitung» gegradiert.

Titel
v23, 23.04.2021

Wird zur Übertitelung / Einleitung von Modulen verwendet. Module haben selber keinen eigenen Titel / kein eigenes Titel-Feld.

  • Es gibt grundsätzlich zwei (2) Typen von Titel, welche aber über das selbe Modul abgehandelt werden.
    • Solid
    • Dezent

Typ «Solid»

  • Hat den Charakter eines Haupttitels.
  • Wird immer mittelachsig dargestellt.
  • Kann optional mit einem Eyebrow versehen werden.
  • Kann optional mit einem Lead versehen werden.
  •  Felder
    • Titel
      • Mehrzeiliger Text.
    • Titelfarbe
    • Eyebrow (optional)
      • Einzeiliger Text.
      • Übernimmt jeweils einen abgeschwächten Ton, der Titelfarbe.
    • Lead (optional)
      • Mehrzeiliger Text.
      • Übernimmt die Titelfarbe.

Typ «Dezent»

Note für Umsetzung


Einzelbild / Slider
v11, 23.04.2021

Dieses Modul kann ein Einzelbild (ein Bild) oder einen Slider (mehrere Bilder) ausgeben.

  • Einzelbild
    • Wenn nur ein Bild ausgewählt wird, wird dieses als Einzelbild ausgegeben.
    • Die Breite orientiert sich an dem für den Inhalt maximal zur Verfügung stehenden Platz.
    • Das Bild wird im originalen Seitenverhältnis ausgegeben.
  • Slider
    • Wenn mehrere Bild ausgewählt werden, werden diese als Slider ausgegeben.
    • Pro Breakpoint wird der Slider bzw. die Bilder in einer bestimmten Höhe ausgegeben.
    • Die Bilder werden in ihrem originalen Seitenverhältnis ausgegeben.
  • Bildlegende
    • Für das Einzelbild sowie für jedes Bild im Slider, kann eine Bildlegende ausgegeben werden.

Text
v7, 18.05.2021

Text (Lauftext) um längere Texte abbilden zu können.

  • WYSIWYG mit folgenden Werkzeugen
    • Titel / Paragraph
    • Fett
    • Aufzählungsliste
    • Nummerierte Liste
    • Link

Standortkarte
v10, 23.04.2021

Die Standortkarte zeigt alle Standorte als Marker auf einer Google-Maps-Karte an.

  • Die Karte kann gezoomt und bewegt werden und beim Klick auf einen Marker, wird auf diesen reingezoomt.
  • Initial wird die Karte so gezoomt, dass alle gesetzten Marker auf einen Blick ersichtlich sind.
  • Im Backend können beliebig viele Marker gesetzt werden.

Note für Umsetzung


Kontaktformular (E-Mail)
v13, 23.04.2021

Im ersten Schritt soll ein Kontaktformular entwickelt werden, welches die Inhalte klassisch per E-Mail verschickt. Auf die Integration in ein CRM (Microsoft Dynamics 365) soll vorläufig also noch verzichtet werden.

Funktionsweise

  • Durch das Versenden des Formulars, wird eine «Dankes»-E-Mail an die E-Mail-Adresse geschickt, welche im Feld «E-Mail-Adresse» des Formulars angegeben wurde.
  • In dieser E-Mail sind dann alle im Formular angebenen Informationen hinterlegt.
  • Die selbe E-Mail wird ebenfalls (per Bcc) an eine Wörwag-Adresse geschickt. Diese Empfänger-Adresse kann pro Formular definiert werden und würde ebenfalls als Reply-To-Adresse in der E-Mail hinterlegt.
  • Die Absender-E-Mail-Adresse würde immer gleich lauten (z.B. info@woerwag.com) und bei der Domain woerwag.com würden SPF-Einträge hinterlegt, welche garantieren, dass der Web-Server E-Mails mit der Adresse info@woerwag.com verschicken darf.
  • Auf dem Server werden KEINE Informationen gespeichert.

Design

  • Die Formularfelder sollen keine Boxen sein, sondern lediglich (ausser beim mehrzeiligen Feld «Nachricht») eine Linie haben.

Gewährleistung der Zustellung

Um eine höchstmögliche Zustellrate zu gewährleisten, empfehlen wir das Hinterlegen von SPF-Informationen (Sender Policy Framework).

Felder

Das Formular hat die folgenden Felder (alles Pflichtfelder).

  • Name
  • E-Mail-Adrese
  • Betreff
  • Nachricht
  • «Senden»-Button

Note für Umsetzung / To Define

  • E-Mail-Text DE und EN
  • Feedback-Messages DE und EN
  • Zustellung bzw. SPF mit Klaus Fellmeth anschauen (optional Versand per SMTP).

Banner-CTA
v15, 14.05.2021

Im Modul kann ein Banner-CTA aus dem Inhaltstyp «Banner-CTA» ausgewählt werden Auf diese Art und Weise kann ein «Banner-CTA» zentral verwaltet aber an verschiedenen Stellen ausgespielt werden.

Ein «Banner-CTA» lässt sich auf verschiedene Arten konfigurieren.

  • Typen
    • «Simple-Button»
    • «Banner»

Sämtliche Farben lassen sich frei auswählen.

Typ «Simple-Button»

Ein mittelachsig ausgerichteter Button.

  • Button
    • Text
      • Einzeiliger Text
    • Link
    • Schriftfarbe
      • Siehe Punkt Farbauswahl
    • Hintergrundfarbe
      • Siehe Punkt Farbauswahl
    • Grösse
      • Standard
      • Gross
    • Form
      • Standard (eckig)
      • Rund
    • CSS-Klasse (für SEO-Zwecke)

Typ «Banner»

Ein Banner mit Titel und Text (beides links angeschlagen) und einem Button (rechts angeschlagen).

  • Titel
    • Text
      • Einzeiliger Text
    • Farbe
      • Siehe Punkt Farbauswahl
  • Text
    • Text
      • Mehrzeiliger Text
    • Farbe
      • Siehe Punkt Farbauswahl
  • Button
    • Text
      • Einzeiliger Text
    • Link
    • Schriftfarbe
      • Siehe Punkt Farbauswahl
    • Hintergrundfarbe
      • Siehe Punkt Farbauswahl
    • CSS-Klasse (für SEO-Zwecke)
  • Hintergrundfarbe
    • Siehe Punkt Farbauswahl
  • Form
    • Standard (eckig)
    • Rund
  • CSS-Klasse (für SEO-Zwecke)

Farbauswahl

Die Farben können wie unter https://woerwag.page-concept-builder.io/farben/ ausgewählt werden.

Zu den genannten Optionen wird es zusätzlich noch die Möglichkeit geben, einen spezfisischen Farbwert mittels eines «Farbwählers» auszuwählen.


Spezifischer Inhaltstyp
Die Inhalte des folgenden Inhaltstyps wird durch dieses Modul ausgespielt: Banner-CTA


Bildkacheln
v7, 23.04.2021

Soll als Bilder-Collage mit optionaler Verlinkungen auf weitere Seiten genutzt werden.

  • Anzahl Kacheln
    • Drei (3) bis fünf (5).
  • Grösser der Kacheln
    • Alle Kacheln – bis auf Kachel Nummer 2 – sind gleich gross.
    • Kachel Nummer 2 wird immer grösser angezeigt.
  • Die Anordnung bleibt bei jedem Seitenaufruf gleich.
  • Pro Kachel gibt es folgende Felder
    • Bild
    • Text (optional)
    • Link (optional)
  • Effekte
    • Falls ein Link gesetzt ist, wird auf Desktop-Geräten beim Hover mit der Maus das Bild etwas abgedunkelt.

Testimonial
v12, 23.04.2021

  • Eine (1) Aussage / Eintrag pro Modul.
    • Mehrere Aussagen können durch mehrere Module realisiert werden.
  • Möglichkeiten / Felder pro Modul
    • Positionierung von Text und Bild.
      • Text links | Bild rechts
      • Bild links | Text rechts
    • Bild
      • Wird immer quadratisch beschnitten.
    • Zitat
      • Mehrzeiliger Text
    • Name
      • Einzeiliger Text
    • Firma
      • Einzeiliger Text

Stateimonial
v3, 12.05.2021

  • Eine (1) Aussage / Eintrag pro Modul.
    • Mehrere Aussagen können durch mehrere Module realisiert werden.
  • Möglichkeiten / Felder pro Modul
    • Positionierung von Text und Bild.
      • Text links | Bild rechts
      • Bild links | Text rechts
    • Bild
      • Wird immer quadratisch beschnitten.
    • Text
      • Mehrzeiliger Text

Icon-Link-Boxen
v15, 23.04.2021

  • Anzahl Einträge
    • Einer (1) bis maximal drei (3).
  • Pro Eintrag
    • Icon
    • Text
      • Mehrzeiliger Text
    • Link
      • Wird auf gesamten Eintrag gesetzt.
  • Farben
  • Icons
    • Werden von Pascal als SVGs vorbereitet.
    • Pro Eintrag kann das Icon über ein Dropdown ausgewählt werden.

Todos Pascal

  • Icons aufbereiten.

Logos
v11, 23.04.2021

  • Modul soll / kann auf verschiedenen Seiten zum Einsatz kommen.
  • Logos / Bilder werden einsprachig und zentral im eigenem Inhaltstyp «Logo» verwaltet.
  • Im Modul können die gewünschten Logos ausgewählt und in der gewünschten Reihenfolge definiert werden.
  • Pro Logo wird folgendes definiert
    • Bild
      • PNG mit transparentem Hintergrund.
    • Name
      • Einzeiliger Text
    • Link (optional)
  • Im Modul kann angegeben werden, ob die hinterlegten Links ausgespielt werden sollen oder nicht.
  • Die Logos können in einem individuellen Seitenverhältnis hochgeladen werden und werden dann auch in diesem ausgegeben.
    • Die Logos werden nicht zugeschnitten.
    • Die Ausgabehöhe ist fix und bestimmt dadurch die Breite eines einzelnen Logos sowie die Anzahl an Logos pro Zeile.

Spezifischer Inhaltstyp
Die Inhalte des folgenden Inhaltstyps wird durch dieses Modul ausgespielt: Logo


Dreispaltige Ansicht von kurzen prägnanten Informationen / Eigenschaften / USPs.

  • Anzahl und Anzeige
    • Anzahl der Einträge ist flexibel, jedoch muss mindestens ein (1) Eintrag definiert werden.
    •  Breite aller Einträge (und somit auch die Anzahl der Einträge pro Zeile) ist fix pro Breakpoint.
      • Auf Desktop drei (3) Spalten.
      • Auf Tablets zwei (2) Spalten.
      • Auf Mobiles eine (1) Spalte.
    • Mittelachsige Ausrichtung der Einträge.
  • Pro Eintrag
    • Bild
      • PNG mit Transparenz.
    • Titel
      • Einzeiliger Text.
    • Text
      • Mehrzeiliger Text.
    • Link (optional)
      • Wird auf gesamten Eintrag gesetzt.
  • Farben
    • Für Titel und Text wird die «Seitenfarbe» verwendet.

Note für Umsetzung

  • Bildgrösse definieren.

FAQ
v41, 17.05.2021

Fragen und Antworten (Frequently Asked Questions) welche als Strukturierte Daten ausgegeben werden.

  • Anzahl der Einträge ist flexibel, jedoch muss mindestens ein (1) Eintrag definiert werden.
  • Ein (1) Eintrag = eine (1) Frage mit dazugehöriger Antwort.
  • Ein-Aus-Klappen
    • Alle Einträge sind immer eingeklappt, wobei es die Option gibt, den ersten Eintrag beim Laden der Seite bereits ausgeklappt anzuzeigen.
    • Bei Klick auf Frage, klappt die Antwort – welche im Hintergrund bereits geladen ist (SEO) – aus.
    • Bei einem weiteren Klick, wird die Antwort wieder geschlossen.
    • Alle Antworten bleiben offen, ausser sie werden explizit geschlossen (kein automatisches Schliessen, beim Öffnen einer anderen Antwort).
  • In den Antworten können auch Bilder integriert werden (links oder rechts vom Text).
  • Pro Eintrag
    • Frage
      • Einzeiliger Text
    • Text
      • WYSIWYG mit folgenden Werkzeugen
        • Fett
        • Aufzählungsliste
        • Link
    • Bild (optional)
      • Kann entweder Links oder rechts vom Text positioniert werden.
      • Aufteilung / Breite von Text und Bild jeweils 50 %.
      • Auf Mobile werden Bild und Text untereinander angezeigt, wobei immer zuerst der Text und dann das Bild gezeigt wird.
  • Optional
    • Option um die Inhalte NICHT in FAQ-Syntax (siehe «Weiteres») auszuspielen, um es z.B. für Standorte verwenden zu könnnen.
  • Farben
    • Für die Schriftfarbe der Titel wird die «Seitenfarbe» verwendet. Der Lauftext wird immer in «Peacock» angezeigt.

Weiteres

  • Die Einträge werden NICHT als eigener Inhaltstyp geführt. Das mehrmalige Einbinden der selben Einträge auf verschiedenen Seiten wird als Duplicate Content abgestraft.
  • Struktur des Moduls muss so sein, dass einzelne Fragen in Suchtreffer-Ergebnislisten erscheinen können. Siehe https://developers.google.com/search/docs/data-types/faqpage?hl=de.

Statement
v19, 23.04.2021

Kurzer Text / Statement mit optionaler Angabe des Autors.

  • Nichts soll vom Inhalt ablenken.
  • Im Text können Links (siehe Unterstreichungen) gesetzt werden.
  • Optional kann ein Autor angegeben werden.
  • Farben
    • Hintergrundfarbe
    • Schriftfarbe
      • Weiss.

Felder

  • Text
    • WYSIWYG mit folgenden Werkzeugen
      • Link
  • Autor
    • Einzeiliger Text

Note für Umsetzung


SEO-Box
v12, 26.04.2021

Sinn und Zweck dieses Modul ist es, (inhaltlich schlanke) Seiten noch mit weiterem relevantem Inhalt zu füllen (SEO).

Vorbild TCHIBO (von da kommt auch das Beispielbild)
Das definitiv Screendesign orientiert an den anderen Modulen, grundsätzlich soll es sich aber dezent in die Webseite einbetten.

  • Felder
    • Titel
      • Einzeiliger Text.
    • Lead
      • WYSIWYG mit folgenden Werkzeugen
        • Fett
        • Link
    • Einträge
      • Titel
        • Einzeiliger Text.
      • Text
        • WYSIWYG mit folgenden Werkzeugen
          • Fett
          • Aufzählungsliste
          • Link
      • Bild (optional)
        • Wird im originalen Seitenverhältnis ausgegeben.
      • Positionierung von Text und Bild.
        • Text links | Bild rechts
        • Bild links | Text rechts

Big Teaser
v9, 04.05.2021

Diese Modul zeigt jeweils einen (1) Eintrag pro Modul.

Pro Eintrag

  • Bild
  • Titel
    • Mehrzeiliger Text.
  • Eyebrow
    • Einzeiliger Text.
  • Text
    • Mehrzeiliger Text.
  • Positionierung von Text und Bild
    • Text links | Bild rechts
    • Bild links | Text rechts
  • Button / Link
    • Link wird über gesamten Eintrag / Modul gelegt.
  • Farben

Medium Teasers
v14, 23.04.2021

  • Anzahl der Einträge
    • Anzahl der Einträge ist flexibel, jedoch muss mindestens ein (1) Eintrag definiert werden.
  • Anzeige
    • Auf Desktop und Tablets werden jeweils zwei Einträge nebeneinander angezeigt.
    • Auf Mobile erscheinen alle Einträge untereinander.
  • Pro Eintrag
    • Bild
      • Wird jeweils auf das im Screendesign ersichtliche Seitenverhältnis zugeschnitten.
    • Titel
      • Einzeiliger Text.
    • Icon
    • Text
      • Mehrzeiliger Text.
    • Link
      • Gesamte Fläche des Eintrags ist verlinkt.
    • Farben

Small Teasers
v12, 23.04.2021

  • Anzahl / Anzeige
    • Das Modul zeigt mehrere Einträge.
    • Min 1 (Empfehlung 3)
    • Max 3
  • Pro Eintrag
    • Bild
      • Wird jeweils auf das im Screendesign ersichtliche Seitenverhältnis zugeschnitten.
    • Icon
    • Titel
      • Einzeiliger Text
    • Text
      • Mehrzeiliger Text
    • Link
      • Über ganzen Eintrag.

News Teasers
v8, 23.04.2021

  • Anzahl / Anzeige
    • Das Modul zeigt Teaser / Vorschau von News Beiträgen und verlinkt zur Detail-Ansicht des jeweiligen News Beitrags.
    • Anzeige analog Modul «Small Teasers».
  • Welche Beiträge angezeigt werden, kann wie folgt konfiguriert werden.
    • Per Tag
      • Auswahl / Angabe eines Tags.
      • Gezeigt werden dann jeweils die drei neuesten Beiträge welche mit diesem Tag versehen wurden.
    • Auswahl spezifischer News
      • Minim 1 (Empfehlung 3)
      • Maximal drei
  • Pro Eintrag (wird direkt aus der News geladen).
    • Bild
    • Titel
    • Text
    • Link
      • Über ganzen Eintrag.
      • Geht immer zur Detail-Ansicht diser News.

Spezifischer Inhaltstyp
Die Inhalte des folgenden Inhaltstyps wird durch dieses Modul ausgespielt: News Beitrag


News Archiv
v9, 23.04.2021

Diese Modul spielt den Inhaltstyp «News Beitrag» aus, wobei Beiträge welche «oben festgehalten» werden, oben als «Big Teaser» und alle anderen Beiträge unterhalb als «News Teaser» ausgegeben werden.

  • Beim Laden der Seite werden alle oben festgehaltenen sowie zwölf (12) weitere Beiträge geladen.
  • Unterhalb der «News Teaser» gibt es einen Button «Weitere Beiträge laden». Wird der Button angeklickt, werden jeweils zwölf (12) weitere Beiträge geladen (werden unterhalb der bereits geladenen News Teaser angefügt).

Spezifischer Inhaltstyp
Die Inhalte des folgenden Inhaltstyps wird durch dieses Modul ausgespielt: News Beitrag