Der Header Konfigurator für Header H9

Alternativheader für individuelle Seiten erstellen

• Kundenbereich
• System
• System-Einstellungen
• System-Konfiguration
• 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

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

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

Zurück zur Übersicht

Ausrichtung von Links innerhalb der Navigationsleiste

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

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.

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

4. Gebe eine Überschrift an (sie darf maximal 35 Zeichen lang sein)
5. Optional: gebe eine Kurzbeschreibung an (sie darf maximal 100 Zeichen lang sein)
6. Wähle eine Schriftart für deine Überschrift aus
7. Wähle eine Schriftart für deine Kurzbeschreibung aus
8. Gebe eine Form an. Standard mäßig ist der Container rechteckig.
9. Gebe eine Hintergrundfarbe an

Bild

4. Wähle ein Bild aus deiner Medienbibliothek aus
5. 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
6. Optional: wähle ein Bild Effekt
7. 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