We use cookies in order to give you the optimal experience of our website. Some of them are required for the operation of this site (e.g. in order to use the shopping cart). Others allow us to enhance our online offers and to display them efficiently. You can use the settings to determine which cookies you will permit. Further details can be found in our privacy policy.
Settings
  • Required
    These cookies are required for the functionality of this site, e.g. by making it possible to add products to the shopping cart. Furthermore, this type of cookie guarantees that you can log into your account and that you can stay logged in, in order to maintain access to your order details. Required cookies are exclusively used on this Website. No data is transferred to third parties.
  • Comfort
    These cookies allow the custom tailoring of certain features in order to enhance the user experience and simplify the use of our site.For instance, they make it easier to search for and find suitable products. Cookies used to enhance the user experience are exclusively used on this site and no data is passed on to third parties.
  • External Media
    We provide you additional media, e.g. videos or maps. This media is provided by third parties, who are using cookies.Cookies for external media is used by third parties or publishers. We do not have any control about this cookie usage.
  • Statistics
    In order to further improve our Website, we collect anonymous data for statistics and analysis. These cookies enable us to keep track of traffic which helps us improve the site systematically. For these purposes, only anonymous data is passed on to third parties.
  • Marketing
    Marketing cookies help us to inform you about interesting offers on other websites. Marketing cookies are used by third parties or publishers in order to present personalized adds.

Der Header Konfigurator für Header H9

Questions:

  • Wie stelle ich meinen Header ein?
  • Über Welche Einstellungsmöglichkeiten verfügt mein Header?

Description:

Wenn dein TYRIOS System über das Layoutmanagement verfügt, kannst du deinen Header und Footer selbst konfigurieren. Jeder Header und Footer wird dabei initial mit einem vordefinierten Design angezeigt. Wenn in deinem System eine Ressource definiert ist, werden Header und Footer sogar mit Platzhalterdaten gefüllt, damit du einen Eindruck bekommst, wie dein Header bzw. Footer aussehen könnte.

Geschmäcker sind jedoch verschieden. In deiner Systemkonfiguration kannst du deinen Header und Footer ganz nach deinem Geschmack und den Bedürfnissen deines Geschäfts ausgestalten.

Der Header H9 verfügt über folgende Einstellungsmöglichkeiten

Solution:

Alternativheader für individuelle Seiten erstellen

  • Kundenbereich
  • System
  • System-Einstellungen
  • System-Konfiguration
  • Header Konfigurieren

Hinweis

Um einen Alternativheader bearbeiten zu können, musst du eingeloggt sein und im Kundenbereich unter System-Einstellungen zur Systemkonfiguration wechseln. Dort gibt es die Schaltfläche Header Konfigurieren.

Der Alternativheader ist der Standardkonfigurator mit eingeschränkter Funktionalität. Es ist möglich, einzelne Seiten auf deiner Website zu individualisieren. So kannst du z. B. Stammkunden- oder Mitarbeiterbereiche einrichten oder jeder Seite auf deiner Website oder Kategorie in deinem Shop durch ein neues Hintergrundbild eine charakteristische Note verleihen.

  1. Füge mit einem Klick auf die Schaltfläche "Alternativheader hinzufügen" einen neue Headerkonfiguration hinzu.
  2. Klappe das Menü auf. Du kannst deiner Konfiguration einen Namen geben. Dieser wird dann auf der Schaltfläche der Konfiguration erscheinen. Auch die Anzahl der aktuell definierten Seiten, auf die diese Konfiguration zutrifft, wird auf der Schaltfläche angezeigt.
  3. Gebe an, auf welcher Seite oder Seiten diese Konfiguration gelten soll. Öffne dafür die entsprechende Seite in einem neuen Tab und kopiere den Pfad-Anteil deiner URL wie im folgendem farbig hervorgehoben Beispiel
    https://www.deineSeite.de/denTeilDenDuKopierenMusst
    Falls du auf deiner Startseite einen Alternativheader definieren möchstest, gibst du lediglich ein / an.
  4. Sobald du den Pfad angeben hast, wird der Rest des Konfigurators sichtbar und du kannst deinen Header ausgestalten.

Zurück zur Übersicht

Unterschiedliche Logos, abhängig von der Bildschirmgröße anzeigen

Standardmäßig wird das Logo aus deiner Systemkonfiguration verwendet. Das Logo kann unter Umständen von der Farbgebung her oder der Komplexität auf kleineren Endgeräten nur schwer zu erkennen sein. Deshalb ist es möglich, für große Bildschirme (z. B. Monitore), mittelgroße Bildschirme (z. B. Tablets und kleine Laptops) und kleine Bildschirme (z. B. Smartphones) unterschiedliche Logos zu hinterlegen.

Als Merkregel gilt: Je kleiner der Bildschirm, desto weniger komplex sollte das Logo sein. Wenn verfügbar, sollte das Logo auf kleinen Endgeräten symbolhaft dargestellt werden.

  1. Klappe die Schaltfläche "Dein Logo" auf
  2. Öffne deine Medienbibliothek mit einem Klick auf "Media Library"
  3. Navigiere zu deinem Logo und wähle es aus
  4. Bestätige deine Auswahl mit "Ok"

Wiederhole diesen Vorgang bei Bedarf für alle drei Logo-Felder. Wie gut dein Logo auf den unterschiedlichen Endgeräten aussieht und wirkt, kannst du leicht sehen, wenn du das Fenster deines Browsers verkleinerst, bis es ungefähr die Größe eines Handys oder Tablets hat. Vergewissere dich also, dass dein Logo gut erkennbar ist, auch abhängig von der Hintergrundfarbe deiner Navigationsleiste.

Zurück zur Übersicht

Lösen des Logos aus der Navigationsleiste

Du kannst das Logo aus der Navigationsleiste auf Tablet und Desktop lösen. Es wird sich dann je nachdem, wie Navigationsleiste eingestellt ist, entweder links über oder unter der Navigationsleiste ausrichten.

  1. Klappe die Schaltfläche "Styling" auf
  2. Im vierten Kasten bei den Optionen für die Ausrichtung der Navigationsleiste befindet sich ein Kontrollkästchen für "Logo aus der Navigationsleiste lösen"
  3. Klicke drauf

Zurück zur Übersicht

Alternative Darstellung des Einkaufswagensymbols

Bitte beachten

Das Einkaufswagensymbol kann ausschließlich im Standard Header geändert werden.

Für all jene, für die ein Einkaufswagen den Charakter und das Einkaufserlebnis ihres Ladens nicht wieder spiegelt, haben wir eine Einkaufstasche und Einkaufskorb als Zusatzoption hinzugefügt.

  1. Klappe die Schaltfläche "Styling" auf
  2. Direkt unter der Auswahl der Schriftarten findest du drei Schaltflächen mit den Symbolen, die dir zur Verfügung stehen
  3. Treffe eine Auswahl mit einem Klick auf eine dieser Schaltflächen

Zurück zur Übersicht

Suchleiste aus der Symbolleiste lösen und einfärben

Bitte beachten

Die Einstellungen für Suchleiste können ausschließlich im Standard Header geändert werden. Diese Einstellung gilt dann auf der gesamten Website.

  1. Klappe die Schaltfläche "Styling" auf
  2. Unter "Suchleiste einstellen", kannst du die Farbe der Suchleiste ändern
  3. Wenn du die Suchleiste immer anzeigen lassen möchtest, setzte den Hacken bei "Die Suche aus der Symbolleiste lösen"

Zurück zur Übersicht

Separate Farbgebung für Navigationsleiste und Symbolleiste

  1. Klappe die Schaltfläche "Styling" auf
  2. Unter "Hintergrundfarbe der Navigationsleiste" kannst du die Farbe der Navigationsleiste ändern
  3. Unter "Hintergrundfarbe der Symbolleiste" kannst du die Farbe der Symbolleiste ändern

Info

Das System berechnet im Hintergrund automatisch den maximal möglichen Kontrast und legt dann fest, ob die Farbe der Links in schwarz oder weiß angezeigt werden soll. So wird die Lesbarkeit stets gewährleistet.

Zurück zur Übersicht

Standardmäßig wird die Navigationsleiste mit Links "Ausgefüllt". Das bedeutet, dass der erste Link am linken und letzte Link am rechten Rand der Navigationsleiste ausgerichtet wird. Alle übrigen Links werden dazwischen gleichmäßig verteilt. Diese Einstellung hat auf kleinen Endgeräten keine Auswirkung.

  1. Klappe die Schaltfläche "Styling" auf
  2. Unter "Ausrichtung von Links" kannst du die Ausrichtung von Links innerhalb der Navigationsleiste ändern
  • Option Links: Die Navigationsleiste füllt sich von links nach rechts auf
  • Option Rechts: Die Navigationsleiste füllt sich von rechts nach links auf
  • Option Mittig: Links in der Navigationsleiste werden mittig platziert

Zurück zur Übersicht

Positionierung der Navigationsleiste

Standardmäßig wird die Navigationsleiste am oberen Bildschirmrand platziert. Dies kannst du ändern, wenn du z. B. ein Hintergrundbild ausgewählt hast, das Logo aus der Navigationsleiste löst oder eine Ankündigung anzeigen lässt. In solchen Fällen nimmt der Header mehr Platz ein. Dann kannst du die Navigationsleiste am unteren Containerrand oder schwebend platzieren.

  1. Klappe die Schaltfläche "Styling" auf
  2. Unter "Navigationsleistenposition" kannst du die Position der Navigationsleiste ändern

Zurück zur Übersicht

Personalisierung des "Zum Seitenanfang" Buttons

Bitte beachten

Die Einstellungen für die Personalisierung des "Zum Seitenanfang" Buttons können ausschließlich im Standardheader geändert werden.

Deinen Webseitenbesuchern steht ein "Zum Seitenanfang" Button zur Verfügung. Vor allem auf Seiten mit viel Inhalt und auf Mobilen Endgeräten erleichtert es Besuchern die Navigation auf deiner Webseite und erspart viel Zeit beim Scrollen.

  1. Klappe die Schaltfläche "Styling" auf
  2. Unter "Farbe für den 'zum Seitenanfang' Button" kannst du die Hintergrundfarbe des Buttons ändern. Das System definiert über eine Kontrastrechnung automatisch, welche Farbe das Symbol bekommen wird.
  3. Unter "Symbol für 'zum Seitenanfang' Button" kannst du das darzustellende Symbol ändern

Zurück zur Übersicht

Abstand zum Seiteninhalt

  1. Klappe die Schaltfläche "Styling" auf
  2. Unter "Abstand zum Seiteninhalt" kannst du einstellen, wie viel Abstand zwischen dem Header und dem darauf folgenden Inhalt eingeräumt werden soll

Bei der Einheit handelt es sich um die Höhe des "m"-Buchstabens.

Zurück zur Übersicht

Hinzufügen eines Hintergrundbildes

Du kannst deinem Header ein Hintergrundbild hinzufügen. Sobald ein Bild hinterlegt ist, wird dieses auf allen Bildschirmgrößen automatisch angewendet. Du kannst jedoch für verschiedene Bildschirmgrößen unterschiedliche Bilder hinterlegen. Damit der inhaltlich relevante Teil des Bildes stets im sichtbaren Bereich bleibt, kannst du das Bild innerhalb des Containers für die individuellen Bildschirmgrößen (Handy, Tablet und Desktop) ausrichten.

  1. Klappe die Schaltfläche "Medien" auf
  2. Wähle als Hintergrundart "Bild"
  3. Wähle ein Bild aus deiner Medienbibliothek und bestätige deine Auswahl mit "OK"
  4. Wenn dein Bild nicht nur dekorativ ist, sondern relevante Informationen enthält, die ein Mensch mit einer Sehbehinderung gar nicht oder nur schlecht wahrnehmen könnte, dann gebe für die Barrierefreiheit auch einen Alt. Text an. Dieser sollte den wesentlichen Inhalt des Bildes beschreiben.
  5. Standardmäßig sind Bilder im Header innerhalb des Containers zentriert. Doch nur du weißt, wo der relevante Inhalt des Bildes liegt, den du anzeigen möchtest. Richte dein Bild mit einem Klick auf die dafür reservierten Schaltflächen aus.
  6. Optional kannst du dein Headerbild mit einem Effekt versehen. Du kannst es mit einer Farbe aus deiner Farbpalette überlagern und als Schwarz-Weiß-Bild darstellen, wenn du möchtest.
  7. Optional: wähle eine Bildgröße für die einzelnen Bildschirmgrößen. Damit definierst du, wie viel Prozent der Bildschirmhöhe mit dem Bild gefüllt werden soll
    • Klein: ca. 25% der Bildschirmhöhe
    • Mittel: ca. 40% der Bildschirmhöhe
    • Groß: ca. 50% der Bildschirmhöhe
    • Nichts ausgewählt ca. 50% der bildschirmhöhe
Ein kurzer Exkurs zur Bildausrichtung

Bilder werden im Container so platziert, dass sie sowohl die Höhe als auch die Breite des Containers voll ausnutzen. Der Container ist auf dem Desktop und Tablet im Querformat. Auf dem Handy im Hochformat.

Angenommen, du hast ein Bild einer Landschaft; oben befindet sich der Himmel, unten eine Wiese, entlang des Horizonts erstrecken sich Berge, links befindet sich ein großer Baum und rechts ein Haus.

Wenn du den Baum (links) und die Berge (horizontale Mitte) bevorzugt darstellen wolltest, müsstest du das Bild auf dem Desktop und Tablet zentriert und auf dem Handy links ausrichten. Die Schaltflächen deuten auch an, wo der Verschnitt bei der Ausrichtung stattfindet.

Bitte beachten

Um diverse Seiteneffekte, die das Layout beeinflussen, zu verhindern, greift die eingestellte Größe bei den Medien nur bedingt.

Du kannst z. B. kein kleines Hintergrundbild einstellen, wenn

  • du eine Ankündigung aktiv hast
  • du die Suchleiste aus der Navigationsleiste gelöst hast
  • du die Navigationsleiste schwebend eingestellt hast

Durch das Eingreifen durch das System wird verhindert, dass der Header versehentlich zu klein für die darzustellenden Inhalte wird.

Zurück zur Übersicht

Darstellung einer Ankündigung als Bild oder farbig hinterlegtem Textblock

Du kannst deinem Header eine Ankündigung hinzufügen und diese auf eine Seite verlinken. Dabei stehen dir zwei Optionen zur Verfügung: Du kannst ein Bild hoch laden oder einen Container mit einer Überschrift und einem beschreibenden Text auf farbigen Hintergrund hinterlegen. Wenn du deine Ankündigung verlinken möchtest, kannst du auch einen Mausinteraktionseffekt definieren.

Bei der Einstellung steht Dir eine Vorschau zur Verfügung. Sie ist ungefähr halb so groß wie der tatsächliche Ankündigungscontainer.

  1. Klappe die Schaltfläche "Ankündigung" auf
  2. Wähle eine Ankündigungsart
  3. Wähle ein Bild aus deiner Medienbibliothek und bestätige deine Auswahl mit "OK"
Manuell
  1. Gebe eine Überschrift an (sie darf maximal 35 Zeichen lang sein)
  2. Optional: gebe eine Kurzbeschreibung an (sie darf maximal 100 Zeichen lang sein)
  3. Wähle eine Schriftart für deine Überschrift aus
  4. Wähle eine Schriftart für deine Kurzbeschreibung aus
  5. Gebe eine Form an. Standard mäßig ist der Container rechteckig.
  6. Gebe eine Hintergrundfarbe an
Bild
  1. Wähle ein Bild aus deiner Medienbibliothek aus
  2. Gebe zwecks Barrierefreiheit einen Alt. Text an. Das sollte den Inhalt, Zweck oder die Beschriftung im Bild beschreiben, damit BesucherInnen mit einer visuellen Beeinträchtigung ebenfalls über deine Ankündigung informiert werden können
  3. Optional: wähle ein Bild Effekt
  4. Optional: erzwinge, dass dein Bild innerhalb des Containers bleibt (Hacken setzen bei "Bildbeschneidung verhindern")
Optional: die Ankündigung verlinken
  1. Unter "Containereinstellungen" kannst du den gesamten Container auf eine Seite auf deiner Website verlinken. Setze dafür den Hacken bei "Der Ankündigungscontainer soll auf eine Seite verlinken"
  2. Gebe den Pfad zu deiner Seite im Feld "URL" an (vgl. Farbig markierter Text in folgendem Beispiel)
    https://wwww.deineSeite.de/pfadZuDeinerSeite/
  3. Optional: gebe ein "Mausinteraktionseffekt" an
  4. Fahre mit der Maus über die Vorschau, um zu sehen, wie sich dein Bild oder manuell erstellter Container verhalten wird

Zurück zur Übersicht

Tips und Tricks:

Subscribe to our newsletter

Stay informed at all times. We will gladly inform you about product news and offers.