Ich m\u00f6chte zudem auch die h\u00e4ufigsten Fehler aufzeigen und L\u00f6sungen anbieten, wie sich diese Probleme vermeiden lassen, damit die Darstellung des Headers nie kaputt aussieht. Au\u00dferdem m\u00f6chte ich euch ein paar Tipps und Tricks zeigen, um den Header m\u00f6glichst so zu gestalten, wie ihr ihn euch vorstellt.<\/p>\n
Ich werde meine Beispiele m\u00f6glichst so beschreiben, dass sie f\u00fcr alle drei Basisstyles im StyleEdit 3 durchf\u00fchrbar sind. Sollte es style-abh\u00e4ngige Einstellungen geben, werde ich bei diesen darauf hinweisen.<\/p>\n
<\/p>\n\n
Grunds\u00e4tzliches<\/h2>\n
Der Header befindet sich zwischen der Sekund\u00e4r- und der horizontalen Kategorienavigation (auch Hauptnavigation genannt). Er beinhaltet im Standard das Shop-Logo, ein Eingabefeld f\u00fcr die Suche, ein im Content Manager bef\u00fcllbares Inhaltsfeld und den kleinen Warenkorb.<\/p>\n
Auch hier finden wir das schon oft angesprochene Gridsystem von Bootstrap wieder, denn die vier Elemente im Header werden \u00fcber die im StyleEdit 3 eingestellten Werte f\u00fcr die Gridspalten proportioniert und positioniert.<\/p>\n
Die Anzahl der Spalten f\u00fcr die einzelnen Elemente l\u00e4sst sich wie gewohnt mit den Optionen \u201cGrid-Spalten Klein\u201d, \u201cGrid-Spalten Medium\u201d und \u201cGrid-Spalten Gro\u00df\u201d f\u00fcr die einzelnen Elemente und Displaygr\u00f6\u00dfen im StyleEdit 3 konfigurieren.<\/p>\n
Hier sollte wie immer beachtet werden, dass die Gesamtzahl der Spalten f\u00fcr eine Displaygr\u00f6\u00dfe den Wert zw\u00f6lf ergibt, da zw\u00f6lf Spalten einer voll ausgef\u00fcllten Zeile entsprechen. Bei mehr als zw\u00f6lf Elementen brechen die Inhalte um, bei weniger f\u00fcllen Sie nicht die volle Breite.<\/p>\n
Erkl\u00e4rungsw\u00fcrdige Begriffe<\/h3>\n\n- Vertikaler Abstand: Diese Option regelt den inneren vertikalen Abstand eines Elements. Sie kann beim kleinen Warenkorb zum Beispiel daf\u00fcr verwendet werden, die Artikelanzahl ein wenig vom Warenkorbsymbol zu trennen. Im CSS w\u00fcrde hier vom padding<\/em> gesprochen werden.<\/li>\n
- \u00c4u\u00dferer Vertikaler Abstand: Diese Option regelt den \u00e4u\u00dferen vertikalen Abstand eines Elements zum umliegenden Headercontainer. Wenn der Header in der H\u00f6he ver\u00e4ndert wurde, k\u00f6nnen mit dieser Option die einzelnen Elemente im Header in der H\u00f6he positioniert werden. Im CSS w\u00fcrde hier vom margin<\/em> gesprochen werden.<\/li>\n
- Sticky: Optionen mit dem Begriff \u201cSticky\u201d im Namen regeln die Anzeige der Elemente, wenn der feststehende Header aktiv ist. Dieser wird immer angezeigt, auch wenn auf einer Seite nach unten gescrollt wird.<\/li>\n<\/ul>\nAchtung:<\/b>Den Sticky-Header gibt es nicht im Boxed-Basisstyle des Honeygrid-Templates, so dass die Einstellungen dort nicht von Belang sind.<\/div>\n
H\u00e4ufige Fehler<\/h2>\nZu viele Spalten vergeben<\/h3>\n
Dies ist meiner Erfahrung nach einer der h\u00e4ufigsten Fehler bei der Konfiguration des Headers: Die Spaltenanzahl f\u00fcr z.B. das Logo wird erh\u00f6ht, damit das Element verbreitert werden kann, dann wird aber vergessen, dass die Spaltenanzahl der anderen Elemente entsprechend reduziert werden muss. Dadurch rutscht als erstes der kleine Warenkorb als \u00e4u\u00dferstes rechtes Element in eine neue Zeile.<\/p>\n
Die L\u00f6sung ist hier ganz einfach: passt bei den \u00fcbrigen Elementen die Spaltenanzahl so an, dass sie insgesamt wieder zw\u00f6lf ergibt.<\/p>\n
![\"StyleEdit-Tutorial:](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb1.png\")
<\/a>Abb. 1: Hier sind zu viele Spalten vergeben<\/p><\/div>\n
Zu wenig Spalten vergeben<\/h3>\n
Ein anderer beliebter Fehler ist, dass die Spaltenanzahl zu klein ist, da eines der Header-Elemente mit der entsprechenden StyleEdit 3-Option ausgeblendet wurde, dabei aber die Spaltenanzahl der anderen Elemente nicht erh\u00f6ht wurde. Das l\u00e4sst den Header „zusammenrutschen“.<\/p>\n
Auch hier ist die L\u00f6sung die gleiche wie weiter oben: Erh\u00f6ht die Spaltenanzahl der Elemente, die noch im Header angezeigt werden sollen, auf einen Wert, dass sie zusammen wieder insgesamt zw\u00f6lf ergeben.<\/p>\n
![\"StyleEdit-Tutorials:](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb2.png\")
<\/a>Abb. 2: Hier sind zu wenig Spalten vergeben<\/p><\/div>\n
Nur die H\u00f6he des Headers erh\u00f6hen<\/h3>\n
H\u00e4ufig passiert es auch, dass die Gesamth\u00f6he des Headers angepasst worden ist, die Darstellung sich aber nicht so verh\u00e4lt wie gew\u00fcnscht. Die Position der Hauptnavigation orientiert sich n\u00e4mlich nicht an der allgemeinen H\u00f6he des Headers sondern an der H\u00f6he des h\u00f6chsten darin liegenden Elements.<\/p>\n
Wird also nur die H\u00f6he des Headers angepasst, entsteht nur Platz f\u00fcr die Erh\u00f6hung der innenliegenden Elemente und so bleibt, wenn diese nicht auch angepasst wird, eine leere Fl\u00e4che unterhalb der Hauptnavigation, die im Normalfall nicht gut aussieht.<\/p>\n
![\"StyleEdit-Tutorials:](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb3.png\")
<\/a>Abb. 3: Hier ist die H\u00f6he des Headers zu Hoch f\u00fcr die Elemente<\/p><\/div>\n
Mein L\u00f6sungsvorschlag: Erh\u00f6ht mindestens die H\u00f6he eines der innenliegenden Elemente auf einen zur allgemeinen Headerh\u00f6he passenden Wert. Dieser Wert l\u00e4sst sich errechnen, wenn von der Headerh\u00f6he die H\u00f6he der Haupt- und Sekund\u00e4rnavigation abgezogen wird.<\/p>\n
Beispiel:<\/strong> Ich habe die H\u00f6he meines Headers auf 250px erh\u00f6ht. Damit das Ganze jetzt nicht kaputt aussieht, passe ich auch die H\u00f6he des \u201cFrei gestaltbaren Bereichs\u201d an. Wenn wir davon ausgehen, dass die Hauptnavigation 40px und die Sekund\u00e4rnavigation 30px hoch ist, muss die H\u00f6he des \u201cFrei gestaltbaren Bereichs\u201d auf 180px erh\u00f6ht werden, damit die Hauptnavigation richtig positioniert ist.<\/div>\nH\u00f6he des Headers unpassend zur H\u00f6he der Elemente w\u00e4hlen<\/h3>\n
Eins vorweg: In Ausnahmef\u00e4llen kann dies sogar sinnvoll sein. Sollen zum Beispiel die Elemente des Headers \u00fcber einem Teaser-Slider liegen oder das horizontale Men\u00fc in diesen hereinragen, kann das auf diese Weise erreicht werden.<\/p>\n
Hier passiert aber oft Folgendes: dadurch, dass die H\u00f6he des Headers verringert wurde, aber die innenliegenden Elemente noch gleich hoch sind wie vorher, legen sich die innenliegenden Elemente \u00fcber Teile der anderen Shopelemente.<\/p>\n
Das kann zum Beispiel ein Produktswiper oder ein wichtiger Text sein, die durch diese \u00dcberlagerung unlesbar beziehungsweise unbenutzbar werden. Gleiches passiert auch, wenn nur die H\u00f6he der Elemente erh\u00f6ht wird, ohne die H\u00f6he des Headers anzupassen.<\/p>\n
<\/p>\n
![\"StyleEdit-Tutorials:](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb4.1.png\")
<\/a>Abb. 4.1: Elemente zu Gro\u00df f\u00fcr den Header<\/p><\/div>\n
<\/p>\n
![\"StyleEdit-Tutorials:](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb4.2.png\")
<\/a>Abb. 4.2: Header zu klein f\u00fcr normal gro\u00dfe Elemente<\/p><\/div>\n
Folgendes k\u00f6nnt ihr zur L\u00f6sung des Problems versuchen: Passt die H\u00f6he der innenliegenden Elemente auf einen Wert an, der zur H\u00f6he des Headers passt.<\/p>\n
Das funktioniert aber nur dann, wenn ihr die H\u00f6he des Headers nicht viel zu klein gew\u00e4hlt habt. Steht der Wert f\u00fcr den Header zum Beispiel auf 50px, ist das zu klein, um die Elemente darin \u00fcberhaupt noch lesbar unterzubringen, da sowohl Haupt- als auch Sekund\u00e4rnavigation noch Platz ben\u00f6tigen, um benutzbar zu sein.<\/p>\n
Wenn die H\u00f6he der innenliegenden Headerelemente nicht mehr verkleinert werden kann, um eine saubere Darstellung zu erm\u00f6glichen, dann f\u00fchrt kein Weg daran vorbei, die H\u00f6he des Headers auf einen gr\u00f6\u00dferen Wert zu erh\u00f6hen, in dem sowohl Haupt- und Sekund\u00e4rnavigation als auch die Elemente lesbar Platz finden.<\/p>\n
Eine Anpassung der H\u00f6he der innenliegenden Headerelemente kann hier aber trotzdem noch notwendig sein, wenn diese bei einem oder mehreren der Elemente viel zu hoch gew\u00e4hlt ist.<\/p>\n
Viele der oben aufgef\u00fchrten Fehler k\u00f6nnen auch im Sticky-Header auftreten. Die L\u00f6sungsvorschl\u00e4ge gelten f\u00fcr diesen dann analog.<\/p>\n
Einen weiteren Fehler, der dann aber nur mit Sticky-Header auftritt, m\u00f6chte ich auch noch aufgreifen:<\/p>\n
Haupt- und Sekund\u00e4rnavigation im Sticky angezeigt, ohne die H\u00f6he des Headers anzupassen<\/h3>\n
Im Standard wird der Sticky-Header ohne die Haupt- und Sekund\u00e4rnavigation angezeigt. Im StyleEdit 3 gibt es allerdings auch die M\u00f6glichkeit den Sticky so zu konfigurieren, dass beide oder auch nur eines der beiden Elemente mit in diesem feststehenden Header angezeigt werden sollen.<\/p>\n
Auch hier gibt es Fehlerpotenzial, denn auch der Sticky-Header muss in seiner H\u00f6he angepasst werden, wenn zus\u00e4tzliche, in ihm liegende Elemente angezeigt werden sollen. Wird dies nicht gemacht, sind oft ungewollte Sprungeffekte oder \u00dcberlagerungen von Inhalten die Folge, wenn auf der Seite nach unten gescrollt wird und der Header auf die Sticky-Ansicht wechselt.<\/p>\n
Hinweis:<\/strong> Dieser Fehler tritt nicht in Shops mit aktivem Boxed-Basisstyle auf, da es in der boxed Darstellung keinen feststehenden Header gibt.<\/div>\n![\"StyleEdit-Tutorials:](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/abb5.png\")
<\/a>Abb. 5: Sekund\u00e4r- und Topnavigation nicht in Sticky-Header mit eingerechnet<\/p><\/div>\n
Um das Problem zu l\u00f6sen reicht es, wenn ihr einfach die Headerh\u00f6he auf einen Wert anpasst, der die H\u00f6hen von Haupt- und Sekund\u00e4rnavigation im Sticky mit einbezieht.<\/p>\n
Beispiel:<\/strong> Der Sticky-Header hat normalerweise eine H\u00f6he von 60px. Wird der Wert von Kategorien > H\u00f6he Sticky von 0 auf 40px und der Wert von Sekund\u00e4rnavigation > H\u00f6he Sticky auf 30px erh\u00f6ht, damit beide im Sticky angezeigt werden, so muss die Header-H\u00f6he in der Sticky-Ansicht um 70px auf 130px erh\u00f6ht werden, damit dieser sauber dargestellt wird.<\/div>\nNachdem wir nun die h\u00e4ufigsten Fehler mit m\u00f6glichen L\u00f6sungsvorschl\u00e4gen erarbeitet haben, m\u00f6chte ich zu ein paar Tipps und Tricks kommen, die die Darstellung eures Headers nach euren W\u00fcnschen verbessern k\u00f6nnen. Damit solltet ihr dann die M\u00f6glichkeit haben, m\u00f6glichst viel aus eurem Header herauszuholen, sodass dieser beim Aufruf des Shops gleich einen guten Eindruck macht. Vorher aber noch zwei grunds\u00e4tzliche Tipps:<\/p>\n
1. Nutzt ein gutes und schlichtes Logo<\/h2>\n
Klingt vielleicht banal, hilft aber ungemein dabei einen sauberen und aufger\u00e4umten Header zu erreichen. Ist das Logo schon nicht gut oder mit Details \u00fcberfrachtet, wird es schwer dieses im Header sinnvoll unterzubringen. Meine Tipps f\u00fcr ein gutes Logo:<\/p>\n
\n- Verwendet einfache Symboliken, die auch in kleinen Ansichten noch gut aussehen: Kleine Details oder Schn\u00f6rkel gehen beim Skalieren f\u00fcr eine mobile Ansicht oft verloren oder st\u00f6ren die Lesbarkeit und den Wiedererkennungswert eines Logos.<\/li>\n
- Ein Logo, dass die volle Breite des Headers einnehmen soll, ist nicht gut geeignet. Auf mobilen Ger\u00e4ten ist es sehr schwer, dieses gut darzustellen. Arbeitet also besser mit einem schmaleren Logo und platziert dazu dann eine zus\u00e4tzliche Hintergrundgrafik im Header, wenn ihr den vollgef\u00fcllt m\u00f6gt.<\/li>\n
- Verwendet Bilder, die sich entweder gut skalieren lassen (z.B. Vektorgrafiken) oder eine gute Aufl\u00f6sung haben. \u00dcbertreibt bei der Gr\u00f6\u00dfe nicht ma\u00dflos nach oben, aber nichts sieht unseri\u00f6ser aus als ein verpixeltes Logo im Header.<\/li>\n
- Verwendet ein Bild mit einem transparenten Hintergrund oder einer Farbe, die zur gew\u00e4hlten Headerfarbe passt: Transparenten Hintergr\u00fcnde bieten den Vorteil, dass die Farbe des Headers variieren kann, ohne dass das Logo deplatziert aussieht, weil eine andersfarbige Box um dieses herum sichtbar wird.<\/li>\n
- Stellt Schriftz\u00fcge ausreichend gro\u00df dar: Das verwendete Logo wird in den unterschiedlichen Ansichtsformen des Shops auch skaliert. Das hei\u00dft, wenn Schriftz\u00fcge in eurem Logo verwendet werden sollen, setzt diese so gro\u00df, dass sie auch in einer skalierten Ansicht f\u00fcr Mobilger\u00e4te noch lesbar sind.<\/li>\n<\/ul>\n
2. Weniger ist mehr<\/h2>\n
Auch ein recht banaler, aber umso wichtigerer Tipp: Ein Header, der mit zu vielen Informationen gespickt ist, sorgt meistens eher daf\u00fcr, dass ein potenzieller Kunde verwirrt ist, weil er von den vielen Informationen in diesem Bereich erschlagen wird.<\/p>\n
Gro\u00dfes Potenzial, um wichtige Inhalte zu pr\u00e4sentieren, hat der „Frei gestaltbare Bereich“. Dort l\u00e4sst sich im Grunde alles platzieren und f\u00fcr die Kunden sichtbar machen. Aber Vorisicht: Bitte nicht vergessen eine passende H\u00f6he f\u00fcr den Bereich zu konfigurieren!<\/p>\n
Hier ist also vorsichtige Zur\u00fcckhaltung geboten. Es sollten maximal kleine Icons, Logos von Bewertungsportalen oder Zahlungsweisen oder kurze Texte mit Kontaktdaten oder \u00c4hnlichem pr\u00e4sentiert werden. So bleibt der Header schnell erfassbar und wirkt nicht \u00fcberfrachtet.<\/p>\n
Tipps und Tricks f\u00fcr aufger\u00e4umte Header<\/h2>\nLogo vergr\u00f6\u00dfern<\/h3>\n
Wer kennt es nicht: Man hat ein richtig gutes Logo entworfen, welches aber nicht richtig zur Geltung kommt, weil es im Header kleinskaliert wird. Mit ein paar Handgriffen im StyleEdit 3 l\u00e4sst sich dem aber entgegenwirken:<\/p>\n
Das Logo ist breiter als der verf\u00fcgbare Platz<\/h4>\n
Dadurch, dass das Logo responsiv im Header eingebunden wird, passt es sich automatisch dem verf\u00fcgbaren Platz an. Ist das Logo breiter als die Anzahl der zugewiesenen Grid-Spalten, wird das Bild also kleiner skaliert. Um dem entgegenzuwirken, reicht es aus die Spaltenanzahl f\u00fcr das Logo zu erh\u00f6hen und entsprechend die der anderen Elemente zu verringern. Anschlie\u00dfend sollte das Logo gr\u00f6\u00dfer angezeigt werden.<\/p>\n
Das Logo ist h\u00f6her als der verf\u00fcgbare Platz<\/h4>\n
Auch in diesem Szenario wird das Logo kleinskaliert, da es ansonsten nicht in den Header passen w\u00fcrde. Um dem entgegenzuwirken, kann zuerst die H\u00f6he des Headers angepasst werden, um genug Platz f\u00fcr das gr\u00f6\u00dfere Logo zu schaffen. Anschlie\u00dfend kann die H\u00f6he des Logos auf den gew\u00fcnschten Wert erh\u00f6ht werden, wodurch das Logo dann gr\u00f6\u00dfer angezeigt wird.<\/p>\n
Gleiches gilt, wenn das Logo auch in der Sticky-Ansicht vergr\u00f6\u00dfert werden soll. Hier sind dann die ben\u00f6tigten Einstellungen Header > Allgemein > H\u00f6he Sticky und Header > Logo > Logo H\u00f6he Sticky.<\/p>\n
F\u00fcr das Logo in der mobilen Ansicht verh\u00e4lt es sich ein wenig anders: Hier errechnet sich die H\u00f6he des Logos aus der H\u00f6he des Headers in der mobilen Ansicht, damit es nicht zu Darstellungsfehlern kommt.<\/p>\n
Ist ein Logo sowohl breiter als auch h\u00f6her als der im Header verf\u00fcgbare Platz, so m\u00fcssen beide gerade beschriebenen Beispiele angewendet werden, um eine optimale Darstellung des Logos zu erm\u00f6glichen.<\/p>\n
Die anderen Elemente im Header passend zum Logo positionieren<\/h4>\n
Wurde die H\u00f6he des Headers und des Logos angepasst, um die Darstellung des Logos zu vergr\u00f6\u00dfern, so sitzen die anderen Elemente des Headers nun weiterhin an ihrer alten Position. Es wird oft so wirken, als w\u00fcrden diese am oberen Rand des Headers \u201cfestkleben\u201d. Um diesen Eindruck zu minimieren, kann auf die Optionen zum Einstellen des vertikalen Abstands der einzelnen Elemente zur\u00fcckgegriffen werden.<\/p>\n
Mit diesen lassen sich – wie der Name schon sagt – Abst\u00e4nde auf der vertikalen Achse von oben definieren, die die anderen Elemente in die gew\u00fcnschte Position im Header herunterschieben. \u00c4ndert hier den Wert so, dass euch die Darstellung gef\u00e4llt und dass die \u00fcbrigen Elemente in ihrer Position zum vergr\u00f6\u00dferten Logo passen.<\/p>\n
Eine feste Vorgabe oder Regel, welche Pixelwerte zu einem angepassten Logo passen, kann hier allerdings nicht gegeben werden, da das immer abh\u00e4ngig von der eigenen Logo- und Headerh\u00f6he ist.<\/p>\n
Shoplogo \u00fcber die gesamte Breite des Headers<\/h3>\n
In besonderen F\u00e4llen ist es erforderlich, dass das Logo \u00fcber den gesamten Bereich des Headers gezogen wird, damit keine Details verloren gehen. Hierf\u00fcr m\u00f6chte ich zwei verschiedene L\u00f6sungsvorschl\u00e4ge aufzeigen.<\/p>\n
Logo als Hintergrundbild<\/h4>\n
Hierbei darf euer eigentliches Logo nicht \u00fcber den Logo Manager im Gambio Admin unter Darstellung > Logo Manager hochgeladen werden.<\/p>\n
\u00dcber den StyleEdit 3 habt ihr die M\u00f6glichkeit ein Hintergrundbild f\u00fcr den Header zu definieren. Hier k\u00f6nnt ihr euer Logo hinterlegen, wenn dieses sich \u00fcber den gesamten Bereich erstrecken soll. Um trotzdem einen anklickbaren Bereich im Header zu haben, mit dem Besucher auf die Startseite zur\u00fcckkommen k\u00f6nnen, kann \u00fcber den Logo Manager des Gambio Admins statt eines Logos ein transparentes Bild eingef\u00fcgt werden. So habt ihr trotzdem eine klickbare Fl\u00e4che, die aber euer Logo nicht \u00fcberlagert.<\/p>\n
Bei dieser Variante ist allerdings zu beachten, dass entsprechende Bilder f\u00fcr die mobile und die Sticky-Ansicht hinterlegt werden m\u00fcssen, da diese ansonsten euer Logo nicht enthalten.<\/p>\n
Logo mit Hintergrundbild\/Hintergrundfarbe<\/h4>\n
Eine weitere Variante, um euer Logo \u00fcber die gesamte Headerbreite zu bekommen, erfordert ein bisschen mehr Arbeit und funktioniert nur dann, wenn ihr einen Bereich habt, der als klickbares Element \u00fcber den Logo Manager eingef\u00fcgt werden kann. Hierf\u00fcr ist dann folgendes notwendig:<\/p>\n
\n- Schneidet das Element, welches ihr als klickbares Element im Header haben wollt, aus eurem Bild aus und f\u00fcllt die entstehende L\u00fccke mit einem passenden Hintergrund<\/li>\n
- Entfernt von dem ausgeschnittenen Element alle Hintergrundfarben, so dass dieses einen transparenten Hintergrund hat<\/li>\n
- F\u00fcgt das ausgeschnittene Element im Gambio Admin \u00fcber den Logo Manager als euer Logo ein<\/li>\n
- Sollte hier ein spezielles Muster enthalten gewesen sein, was zwingend in eurem Header zu sehen sein soll, hinterlegt das Bild, welches das ausgeschnittene Element enthalten hat, als Hintergrundbild im StyleEdit 3<\/li>\n<\/ul>\n
Wenn kein spezielles Muster sondern nur eine Hintergrundfarbe oder ein Farbverlauf verwendet werden soll, so muss kein Hintergrundbild hinterlegt werden, denn das l\u00e4sst sich auch mit den Optionen zum Hinterlegen einer Hintergrundfarbe realisieren. F\u00fcr die Erzeugung eines Farbverlaufs kann ich folgenden Artikel empfehlen: Farbverl\u00e4ufe in CSS<\/a>. Dieses CSS kann auch unter dem Punkt \u201cHintergrundfarbe\u201d hinterlegt werden, sodass der Header dann diesen Verlauf als Hintergrund verwendet.<\/p>\nBedenkt auch hier, dass sowohl f\u00fcr den Sticky-Header als auch f\u00fcr die mobile Ansicht zus\u00e4tzliche Einstellungen vorgenommen werden m\u00fcssen, damit die Hintergrundfarbe, der Farbverlauf oder das Hintergrundbild auf diesen angezeigt werden.<\/p>\n
Shoplogo mittig positionieren<\/h3>\n
In manchen Designs ist es sinnvoll, das Logo in die Mitte des Headers zu verschieben. Auch hier gibt es verschiedene M\u00f6glichkeiten dies zu erreichen. An dieser Stelle m\u00f6chte ich zwei dieser M\u00f6glichkeiten nennen, wobei eine davon eine kleine Templateanpassung ben\u00f6tigt, um korrekt funktionieren zu k\u00f6nnen.<\/p>\n
Ohne Anpassung des Templates<\/h4>\n
Hierf\u00fcr machen wir uns etwas zunutze, was ich oben schon einmal als h\u00e4ufigen Fehler beschrieben habe: Wir erh\u00f6hen die Spaltenanzahl der Headerelemente so, dass sie umbrechen und sich zum Teil in eine neuen Zeile legen. Anschlie\u00dfend ben\u00f6tigen wir noch ein wenig CSS, um die Elemente richtig zu positionieren. Die H\u00f6he des Headers muss auch angepasst werden, damit sich nichts \u00fcberlagert.<\/p>\n
Beginnen wir mit dem Logo: Hier vergebt ihr im StyleEdit 3 zw\u00f6lf Spalten, so dass dieses die volle Headerbreite einnimmt und sich alle anderen Elemente in eine neue Zeile verschieben.<\/p>\n
Um das Logo dann mittig in dem frei gewordenen Bereich zu positionieren braucht ihr folgendes CSS, welches ihr \u00fcber \u201cEigenes CSS\u201d einf\u00fcgen k\u00f6nnt:<\/p>\n
#navbar-brand\u00a0a\u00a0img\u00a0{\r\n display:\u00a0block;\u00a0\u00a0 \r\n margin:\u00a00\u00a0auto;\r\n}<\/pre>\nNachdem wir das geschafft haben, m\u00fcssen wir nur noch daf\u00fcr sorgen, dass die \u00fcbrigen Elemente wieder sch\u00f6n positioniert werden und dass der Header keine anderen Teile des Shops \u00fcberlagert.<\/p>\n
Ich empfehle bei dieser Variante den \u201cFrei gestaltbaren Bereich\u201d zu deaktivieren, da dieser hier zumeist nicht mehr sinnvoll positioniert werden kann und die Inhalte im Vergleich zum zentrierten Logo untergehen. Aktiviert also die Option \u201cFrei gestaltbaren Bereich im Header ausblenden\u201d im StyleEdit 3, um diesen auszublenden.<\/p>\n
Die jetzt frei gewordenen Spalten k\u00f6nnen wir dann daf\u00fcr verwenden, die Suche und den kleinen Warenkorb neu auszurichten.<\/p>\n
F\u00fcr mein Beispiel erh\u00f6he ich die Spaltenanzahl der Suche so, dass diese zusammen mit den Spalten des kleinen Warenkorbs wieder zw\u00f6lf in der Summe ergeben. Nebeneffekt dieser Aktion ist dann allerdings, dass das Eingabefeld f\u00fcr die Suche sehr gro\u00df wird. Wenn dies nicht gew\u00fcnscht ist, k\u00f6nnen wir auch hier mit ein bisschen CSS nachhelfen:<\/p>\n
#search\u00a0form\u00a0{\r\n\u00a0 max-width:\u00a025%<;\r\n}<\/pre>\nPasst hierbei den Wert f\u00fcr max-width<\/em> auf etwas an, das euch gef\u00e4llt und die Suche nicht zu gedrungen aussehen l\u00e4sst.<\/p>\nWenn die Darstellung wie gew\u00fcnscht ausf\u00e4llt, reicht es, die H\u00f6he des Headers anzupassen, so dass die innenliegenden Element wieder genug Platz darin finden. Sollen die Suche und der Warenkorb allerdings noch etwas nach oben gezogen werden, so kann dies mit den Optionen des vertikalen Abstands erreicht werden.<\/p>\n
Gebt hier einfach einen negativen Wert f\u00fcr den \u201cvertikalen \u00e4u\u00dferen Abstand\u201d ein und schon werden die Elemente nach oben verschoben. Anschlie\u00dfend muss noch die H\u00f6he des Headers angepasst werden – fertig.<\/p>\n
Wichtig:<\/strong> Mein Beispiel beschreibt hier das grunds\u00e4tzliche Vorgehen. Dies muss auch f\u00fcr den Sticky-Header und die anderen Ansichten durchgef\u00fchrt werden, damit eine saubere responsive Darstellung erreicht wird.<\/div>\nMit Anpassung des Templates<\/h4>\n
Wem das Spielen mit den Einstellungen im StyleEdit 3 zu viel ist, der kann auch den pragmatischen Weg w\u00e4hlen und einfach das Template f\u00fcr den Header anpassen, um das Logo zu zentrieren. Dies geht entweder \u00fcber das bew\u00e4hrte USERMOD-System oder ab Version v3.7.1.0 des Shops per Smarty-Bl\u00f6cken. Zum Thema Smarty-Bl\u00f6cke und GXModules haben wir hier Tutorials ver\u00f6ffentlicht: Smarty-Bl\u00f6cke<\/a> und GXModules<\/a>.<\/p>\nPer USERMOD-System<\/h5>\n
Erstellt euch eine Kopie der templates\/Honeygrid\/index.html. In dieser sucht ihr folgenden Codeblock:<\/p>\n
{block name=\"index_outer_wrapper_header_inside_header\"}\r\n \u00a0\u00a0\u00a0{assign var=\"hideLogo\" value={template_setting name=\"gx-hide-logo-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideSearch\" value={template_setting name=\"gx-hide-search-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCustom\" value={template_setting name=\"gx-hide-custom-1-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCart\" value={template_setting name=\"gx-hide-cart-col\"}}\r\n\r\n \u00a0\u00a0\u00a0<div class=\"navbar-header\" data-gambio-widget=\"mobile_menu\">\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{if !$hideLogo}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_logo\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/logo.html\" logo_url=$logo_url logo_link=$logo_link}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/if}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_buttons\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_navbar_buttons.html\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0<\/div>\r\n{\/block}<\/pre>\nVerschiebt diesen Block zwischen folgende:<\/p>\n
{block name=\"index_outer_wrapper_header_inside_top_search_if\"}\r\n \u00a0\u00a0\u00a0{if !$hideSearch}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_top_search\"}{$TOP_SEARCH}{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n{\/block}\r\n\r\n{block name=\"index_outer_wrapper_header_inside_custom_content_if\"}\r\n \u00a0\u00a0\u00a0{if !$hideCustom}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_custom_content\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_custom_content.html\" content={content_manager group=4321001}}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n{\/block}<\/pre>\nDas Ergebnis sollte dann wie folgt aussehen:<\/p>\n
{block name=\"index_outer_wrapper_header_inside_top_search_if\"}\r\n \u00a0\u00a0\u00a0{if !$hideSearch}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_top_search\"}{$TOP_SEARCH}{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n{\/block}\r\n\r\n{block name=\"index_outer_wrapper_header_inside_header\"}\r\n \u00a0\u00a0\u00a0{assign var=\"hideLogo\" value={template_setting name=\"gx-hide-logo-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideSearch\" value={template_setting name=\"gx-hide-search-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCustom\" value={template_setting name=\"gx-hide-custom-1-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCart\" value={template_setting name=\"gx-hide-cart-col\"}}\r\n\r\n \u00a0\u00a0\u00a0<div class=\"navbar-header\" data-gambio-widget=\"mobile_menu\">\r\n \u00a0\u00a0\u00a0{if !$hideLogo}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_logo\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/logo.html\" logo_url=$logo_url logo_link=$logo_link}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_buttons\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_navbar_buttons.html\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0<\/div>\r\n{\/block}\r\n\r\n{block name=\"index_outer_wrapper_header_inside_custom_content_if\"}\r\n \u00a0\u00a0\u00a0{if !$hideCustom}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_custom_content\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_custom_content.html\" content={content_manager group=4321001}}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n{\/block}<\/pre>\nPer Smarty-Block<\/h5>\n
Legt euch im GXModules-Verzeichnis folgende Struktur an: GXModules\/<ModulEntwickler>\/<Modulname>\/Shop\/Templates\/Honeygrid\/index.html.<\/p>\n
<ModulEntwickler> und <Modulname> sind hierbei als Platzhalter zu verstehen, die von euch mit einer sinnvollen Bezeichnung gef\u00fcllt werden sollten, damit ihr eure \u00c4nderungen sp\u00e4ter wiederfinden k\u00f6nnt.<\/p>\n
In der erstellten index.html k\u00f6nnt ihr nun Folgendes machen: Kopiert euch den Block index_outer_wrapper_header_inside_header<\/em> aus der original Datei und scheidet dessen Inhalt aus und speichert ihn zwischen. Anschlie\u00dfend kopiert ihr euch den Block index_outer_wrapper_header_inside_custom_content_if<\/em> und kopiert den vorher ausgeschnittenen Inhalt in diesen Block hinein, wobei ihr den alten Inhalt \u00fcberschreibt. In der Definition des Blocks muss nun noch eine kleine Erweiterung stattfinden. Schreibt hier ein prepend<\/em> hinein. Vollst\u00e4ndig sollte das dann wie folgt aussehen:<\/p>\n <\/p>\n
{block name=\"index_outer_wrapper_header_inside_header\"}\r\n\r\n{\/block}\r\n{block name=\"index_outer_wrapper_header_inside_custom_content_if\" prepend}\r\n \u00a0\u00a0\u00a0{assign var=\"hideLogo\" value={template_setting name=\"gx-hide-logo-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideSearch\" value={template_setting name=\"gx-hide-search-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCustom\" value={template_setting name=\"gx-hide-custom-1-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCart\" value={template_setting name=\"gx-hide-cart-col\"}}\r\n\r\n \u00a0\u00a0\u00a0<div class=\"navbar-header\" data-gambio-widget=\"mobile_menu\">\r\n \u00a0\u00a0\u00a0{if !$hideLogo}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_logo\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/logo.html\" logo_url=$logo_url logo_link=$logo_link}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_buttons\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_navbar_buttons.html\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0<\/div>\r\n{\/block}<\/pre>\nDamit erreicht ihr, dass der urspr\u00fcngliche Block, der das Logo enthielt, geleert wird, w\u00e4hrend der Inhalt vor den Block index_outer_wrapper_header_inside_custom_content_if<\/em> geschrieben wird.<\/p>\nWurde eines der beiden Beispiele durchgef\u00fchrt, m\u00fcssen noch ein paar Einstellungen im StyleEdit 3 vorgenommen werden:<\/p>\n
\n- Deaktiviert auch hier den „Frei gestaltbaren Bereich“, da er in dieser Darstellung nur st\u00f6ren w\u00fcrde<\/li>\n
- Passt die Spaltenanzahl der \u00fcbrigen Elemente so an, dass sie in ihrer Gesamtmenge wieder zw\u00f6lf ergeben. Idealerweise w\u00e4hlt ihr die Spaltenanzahl f\u00fcr Suche und kleinen Warenkorb gleich gro\u00df und vergebt den Rest an das Logo.<\/li>\n
- F\u00fcgt auch hier folgendes CSS unter „Eigenes CSS“ ein:\n
#navbar-brand a img {\r\n \u00a0\u00a0display: block;\r\n \u00a0\u00a0margin: 0 auto;\r\n}<\/pre>\n<\/li>\n<\/ul>\nVorteil dieser L\u00f6sung ist meiner Meinung nach, dass das Logo hier nicht automatisch gr\u00f6\u00dfer wird und nicht ganz so viel mit den Optionen im StyleEdit manipuliert werden muss, damit der Header artig aussieht.<\/p>\n
Andererseits muss hierf\u00fcr etwas an der grundlegenden Templatestruktur g\u00e4ndert und diese \u00c4nderungen bei Updates regelm\u00e4\u00dfig \u00fcberpr\u00fcft werden.<\/p>\n
Auch hier ist das Vorgehen nur exemplarisch, das hei\u00dft die Einstellungen sollten auch f\u00fcr den Sticky-Header und die anderen Ansichten gemacht werden, damit der Header auf allen Endger\u00e4ten gut aussieht.<\/p>\n
Abschluss<\/h2>\n
Und das war es auch schon wieder. Ich hoffe ihr findet hier einige Ideen und dieses Tutorial hilft euch dabei euren Header ansprechend zu stylen. Ist noch etwas unklar geblieben oder habt ihr Vorschl\u00e4ge f\u00fcr weitere Tutorials? Haut in die Tasten und lasst es uns wissen!<\/p>\n
\n
H\u00e4ufige Fehler<\/h2>\nZu viele Spalten vergeben<\/h3>\n
Dies ist meiner Erfahrung nach einer der h\u00e4ufigsten Fehler bei der Konfiguration des Headers: Die Spaltenanzahl f\u00fcr z.B. das Logo wird erh\u00f6ht, damit das Element verbreitert werden kann, dann wird aber vergessen, dass die Spaltenanzahl der anderen Elemente entsprechend reduziert werden muss. Dadurch rutscht als erstes der kleine Warenkorb als \u00e4u\u00dferstes rechtes Element in eine neue Zeile.<\/p>\n
Die L\u00f6sung ist hier ganz einfach: passt bei den \u00fcbrigen Elementen die Spaltenanzahl so an, dass sie insgesamt wieder zw\u00f6lf ergibt.<\/p>\n
<\/a>Abb. 1: Hier sind zu viele Spalten vergeben<\/p><\/div>\n
Zu wenig Spalten vergeben<\/h3>\n
Ein anderer beliebter Fehler ist, dass die Spaltenanzahl zu klein ist, da eines der Header-Elemente mit der entsprechenden StyleEdit 3-Option ausgeblendet wurde, dabei aber die Spaltenanzahl der anderen Elemente nicht erh\u00f6ht wurde. Das l\u00e4sst den Header „zusammenrutschen“.<\/p>\n
Auch hier ist die L\u00f6sung die gleiche wie weiter oben: Erh\u00f6ht die Spaltenanzahl der Elemente, die noch im Header angezeigt werden sollen, auf einen Wert, dass sie zusammen wieder insgesamt zw\u00f6lf ergeben.<\/p>\n
<\/a>Abb. 2: Hier sind zu wenig Spalten vergeben<\/p><\/div>\n
Nur die H\u00f6he des Headers erh\u00f6hen<\/h3>\n
H\u00e4ufig passiert es auch, dass die Gesamth\u00f6he des Headers angepasst worden ist, die Darstellung sich aber nicht so verh\u00e4lt wie gew\u00fcnscht. Die Position der Hauptnavigation orientiert sich n\u00e4mlich nicht an der allgemeinen H\u00f6he des Headers sondern an der H\u00f6he des h\u00f6chsten darin liegenden Elements.<\/p>\n
Wird also nur die H\u00f6he des Headers angepasst, entsteht nur Platz f\u00fcr die Erh\u00f6hung der innenliegenden Elemente und so bleibt, wenn diese nicht auch angepasst wird, eine leere Fl\u00e4che unterhalb der Hauptnavigation, die im Normalfall nicht gut aussieht.<\/p>\n
<\/a>Abb. 3: Hier ist die H\u00f6he des Headers zu Hoch f\u00fcr die Elemente<\/p><\/div>\n
Mein L\u00f6sungsvorschlag: Erh\u00f6ht mindestens die H\u00f6he eines der innenliegenden Elemente auf einen zur allgemeinen Headerh\u00f6he passenden Wert. Dieser Wert l\u00e4sst sich errechnen, wenn von der Headerh\u00f6he die H\u00f6he der Haupt- und Sekund\u00e4rnavigation abgezogen wird.<\/p>\n
H\u00f6he des Headers unpassend zur H\u00f6he der Elemente w\u00e4hlen<\/h3>\n
Eins vorweg: In Ausnahmef\u00e4llen kann dies sogar sinnvoll sein. Sollen zum Beispiel die Elemente des Headers \u00fcber einem Teaser-Slider liegen oder das horizontale Men\u00fc in diesen hereinragen, kann das auf diese Weise erreicht werden.<\/p>\n
Hier passiert aber oft Folgendes: dadurch, dass die H\u00f6he des Headers verringert wurde, aber die innenliegenden Elemente noch gleich hoch sind wie vorher, legen sich die innenliegenden Elemente \u00fcber Teile der anderen Shopelemente.<\/p>\n
Das kann zum Beispiel ein Produktswiper oder ein wichtiger Text sein, die durch diese \u00dcberlagerung unlesbar beziehungsweise unbenutzbar werden. Gleiches passiert auch, wenn nur die H\u00f6he der Elemente erh\u00f6ht wird, ohne die H\u00f6he des Headers anzupassen.<\/p>\n
<\/p>\n
<\/a>Abb. 4.1: Elemente zu Gro\u00df f\u00fcr den Header<\/p><\/div>\n
<\/p>\n
<\/a>Abb. 4.2: Header zu klein f\u00fcr normal gro\u00dfe Elemente<\/p><\/div>\n
Folgendes k\u00f6nnt ihr zur L\u00f6sung des Problems versuchen: Passt die H\u00f6he der innenliegenden Elemente auf einen Wert an, der zur H\u00f6he des Headers passt.<\/p>\n
Das funktioniert aber nur dann, wenn ihr die H\u00f6he des Headers nicht viel zu klein gew\u00e4hlt habt. Steht der Wert f\u00fcr den Header zum Beispiel auf 50px, ist das zu klein, um die Elemente darin \u00fcberhaupt noch lesbar unterzubringen, da sowohl Haupt- als auch Sekund\u00e4rnavigation noch Platz ben\u00f6tigen, um benutzbar zu sein.<\/p>\n
Wenn die H\u00f6he der innenliegenden Headerelemente nicht mehr verkleinert werden kann, um eine saubere Darstellung zu erm\u00f6glichen, dann f\u00fchrt kein Weg daran vorbei, die H\u00f6he des Headers auf einen gr\u00f6\u00dferen Wert zu erh\u00f6hen, in dem sowohl Haupt- und Sekund\u00e4rnavigation als auch die Elemente lesbar Platz finden.<\/p>\n
Eine Anpassung der H\u00f6he der innenliegenden Headerelemente kann hier aber trotzdem noch notwendig sein, wenn diese bei einem oder mehreren der Elemente viel zu hoch gew\u00e4hlt ist.<\/p>\n
Viele der oben aufgef\u00fchrten Fehler k\u00f6nnen auch im Sticky-Header auftreten. Die L\u00f6sungsvorschl\u00e4ge gelten f\u00fcr diesen dann analog.<\/p>\n
Einen weiteren Fehler, der dann aber nur mit Sticky-Header auftritt, m\u00f6chte ich auch noch aufgreifen:<\/p>\n
Haupt- und Sekund\u00e4rnavigation im Sticky angezeigt, ohne die H\u00f6he des Headers anzupassen<\/h3>\n
Im Standard wird der Sticky-Header ohne die Haupt- und Sekund\u00e4rnavigation angezeigt. Im StyleEdit 3 gibt es allerdings auch die M\u00f6glichkeit den Sticky so zu konfigurieren, dass beide oder auch nur eines der beiden Elemente mit in diesem feststehenden Header angezeigt werden sollen.<\/p>\n
Auch hier gibt es Fehlerpotenzial, denn auch der Sticky-Header muss in seiner H\u00f6he angepasst werden, wenn zus\u00e4tzliche, in ihm liegende Elemente angezeigt werden sollen. Wird dies nicht gemacht, sind oft ungewollte Sprungeffekte oder \u00dcberlagerungen von Inhalten die Folge, wenn auf der Seite nach unten gescrollt wird und der Header auf die Sticky-Ansicht wechselt.<\/p>\n
<\/a>Abb. 5: Sekund\u00e4r- und Topnavigation nicht in Sticky-Header mit eingerechnet<\/p><\/div>\n
Um das Problem zu l\u00f6sen reicht es, wenn ihr einfach die Headerh\u00f6he auf einen Wert anpasst, der die H\u00f6hen von Haupt- und Sekund\u00e4rnavigation im Sticky mit einbezieht.<\/p>\n
Nachdem wir nun die h\u00e4ufigsten Fehler mit m\u00f6glichen L\u00f6sungsvorschl\u00e4gen erarbeitet haben, m\u00f6chte ich zu ein paar Tipps und Tricks kommen, die die Darstellung eures Headers nach euren W\u00fcnschen verbessern k\u00f6nnen. Damit solltet ihr dann die M\u00f6glichkeit haben, m\u00f6glichst viel aus eurem Header herauszuholen, sodass dieser beim Aufruf des Shops gleich einen guten Eindruck macht. Vorher aber noch zwei grunds\u00e4tzliche Tipps:<\/p>\n
1. Nutzt ein gutes und schlichtes Logo<\/h2>\n
Klingt vielleicht banal, hilft aber ungemein dabei einen sauberen und aufger\u00e4umten Header zu erreichen. Ist das Logo schon nicht gut oder mit Details \u00fcberfrachtet, wird es schwer dieses im Header sinnvoll unterzubringen. Meine Tipps f\u00fcr ein gutes Logo:<\/p>\n
- \n
- Verwendet einfache Symboliken, die auch in kleinen Ansichten noch gut aussehen: Kleine Details oder Schn\u00f6rkel gehen beim Skalieren f\u00fcr eine mobile Ansicht oft verloren oder st\u00f6ren die Lesbarkeit und den Wiedererkennungswert eines Logos.<\/li>\n
- Ein Logo, dass die volle Breite des Headers einnehmen soll, ist nicht gut geeignet. Auf mobilen Ger\u00e4ten ist es sehr schwer, dieses gut darzustellen. Arbeitet also besser mit einem schmaleren Logo und platziert dazu dann eine zus\u00e4tzliche Hintergrundgrafik im Header, wenn ihr den vollgef\u00fcllt m\u00f6gt.<\/li>\n
- Verwendet Bilder, die sich entweder gut skalieren lassen (z.B. Vektorgrafiken) oder eine gute Aufl\u00f6sung haben. \u00dcbertreibt bei der Gr\u00f6\u00dfe nicht ma\u00dflos nach oben, aber nichts sieht unseri\u00f6ser aus als ein verpixeltes Logo im Header.<\/li>\n
- Verwendet ein Bild mit einem transparenten Hintergrund oder einer Farbe, die zur gew\u00e4hlten Headerfarbe passt: Transparenten Hintergr\u00fcnde bieten den Vorteil, dass die Farbe des Headers variieren kann, ohne dass das Logo deplatziert aussieht, weil eine andersfarbige Box um dieses herum sichtbar wird.<\/li>\n
- Stellt Schriftz\u00fcge ausreichend gro\u00df dar: Das verwendete Logo wird in den unterschiedlichen Ansichtsformen des Shops auch skaliert. Das hei\u00dft, wenn Schriftz\u00fcge in eurem Logo verwendet werden sollen, setzt diese so gro\u00df, dass sie auch in einer skalierten Ansicht f\u00fcr Mobilger\u00e4te noch lesbar sind.<\/li>\n<\/ul>\n
2. Weniger ist mehr<\/h2>\n
Auch ein recht banaler, aber umso wichtigerer Tipp: Ein Header, der mit zu vielen Informationen gespickt ist, sorgt meistens eher daf\u00fcr, dass ein potenzieller Kunde verwirrt ist, weil er von den vielen Informationen in diesem Bereich erschlagen wird.<\/p>\n
Gro\u00dfes Potenzial, um wichtige Inhalte zu pr\u00e4sentieren, hat der „Frei gestaltbare Bereich“. Dort l\u00e4sst sich im Grunde alles platzieren und f\u00fcr die Kunden sichtbar machen. Aber Vorisicht: Bitte nicht vergessen eine passende H\u00f6he f\u00fcr den Bereich zu konfigurieren!<\/p>\n
Hier ist also vorsichtige Zur\u00fcckhaltung geboten. Es sollten maximal kleine Icons, Logos von Bewertungsportalen oder Zahlungsweisen oder kurze Texte mit Kontaktdaten oder \u00c4hnlichem pr\u00e4sentiert werden. So bleibt der Header schnell erfassbar und wirkt nicht \u00fcberfrachtet.<\/p>\n
Tipps und Tricks f\u00fcr aufger\u00e4umte Header<\/h2>\n
Logo vergr\u00f6\u00dfern<\/h3>\n
Wer kennt es nicht: Man hat ein richtig gutes Logo entworfen, welches aber nicht richtig zur Geltung kommt, weil es im Header kleinskaliert wird. Mit ein paar Handgriffen im StyleEdit 3 l\u00e4sst sich dem aber entgegenwirken:<\/p>\n
Das Logo ist breiter als der verf\u00fcgbare Platz<\/h4>\n
Dadurch, dass das Logo responsiv im Header eingebunden wird, passt es sich automatisch dem verf\u00fcgbaren Platz an. Ist das Logo breiter als die Anzahl der zugewiesenen Grid-Spalten, wird das Bild also kleiner skaliert. Um dem entgegenzuwirken, reicht es aus die Spaltenanzahl f\u00fcr das Logo zu erh\u00f6hen und entsprechend die der anderen Elemente zu verringern. Anschlie\u00dfend sollte das Logo gr\u00f6\u00dfer angezeigt werden.<\/p>\n
Das Logo ist h\u00f6her als der verf\u00fcgbare Platz<\/h4>\n
Auch in diesem Szenario wird das Logo kleinskaliert, da es ansonsten nicht in den Header passen w\u00fcrde. Um dem entgegenzuwirken, kann zuerst die H\u00f6he des Headers angepasst werden, um genug Platz f\u00fcr das gr\u00f6\u00dfere Logo zu schaffen. Anschlie\u00dfend kann die H\u00f6he des Logos auf den gew\u00fcnschten Wert erh\u00f6ht werden, wodurch das Logo dann gr\u00f6\u00dfer angezeigt wird.<\/p>\n
Gleiches gilt, wenn das Logo auch in der Sticky-Ansicht vergr\u00f6\u00dfert werden soll. Hier sind dann die ben\u00f6tigten Einstellungen Header > Allgemein > H\u00f6he Sticky und Header > Logo > Logo H\u00f6he Sticky.<\/p>\n
F\u00fcr das Logo in der mobilen Ansicht verh\u00e4lt es sich ein wenig anders: Hier errechnet sich die H\u00f6he des Logos aus der H\u00f6he des Headers in der mobilen Ansicht, damit es nicht zu Darstellungsfehlern kommt.<\/p>\n
Ist ein Logo sowohl breiter als auch h\u00f6her als der im Header verf\u00fcgbare Platz, so m\u00fcssen beide gerade beschriebenen Beispiele angewendet werden, um eine optimale Darstellung des Logos zu erm\u00f6glichen.<\/p>\n
Die anderen Elemente im Header passend zum Logo positionieren<\/h4>\n
Wurde die H\u00f6he des Headers und des Logos angepasst, um die Darstellung des Logos zu vergr\u00f6\u00dfern, so sitzen die anderen Elemente des Headers nun weiterhin an ihrer alten Position. Es wird oft so wirken, als w\u00fcrden diese am oberen Rand des Headers \u201cfestkleben\u201d. Um diesen Eindruck zu minimieren, kann auf die Optionen zum Einstellen des vertikalen Abstands der einzelnen Elemente zur\u00fcckgegriffen werden.<\/p>\n
Mit diesen lassen sich – wie der Name schon sagt – Abst\u00e4nde auf der vertikalen Achse von oben definieren, die die anderen Elemente in die gew\u00fcnschte Position im Header herunterschieben. \u00c4ndert hier den Wert so, dass euch die Darstellung gef\u00e4llt und dass die \u00fcbrigen Elemente in ihrer Position zum vergr\u00f6\u00dferten Logo passen.<\/p>\n
Eine feste Vorgabe oder Regel, welche Pixelwerte zu einem angepassten Logo passen, kann hier allerdings nicht gegeben werden, da das immer abh\u00e4ngig von der eigenen Logo- und Headerh\u00f6he ist.<\/p>\n
Shoplogo \u00fcber die gesamte Breite des Headers<\/h3>\n
In besonderen F\u00e4llen ist es erforderlich, dass das Logo \u00fcber den gesamten Bereich des Headers gezogen wird, damit keine Details verloren gehen. Hierf\u00fcr m\u00f6chte ich zwei verschiedene L\u00f6sungsvorschl\u00e4ge aufzeigen.<\/p>\n
Logo als Hintergrundbild<\/h4>\n
Hierbei darf euer eigentliches Logo nicht \u00fcber den Logo Manager im Gambio Admin unter Darstellung > Logo Manager hochgeladen werden.<\/p>\n
\u00dcber den StyleEdit 3 habt ihr die M\u00f6glichkeit ein Hintergrundbild f\u00fcr den Header zu definieren. Hier k\u00f6nnt ihr euer Logo hinterlegen, wenn dieses sich \u00fcber den gesamten Bereich erstrecken soll. Um trotzdem einen anklickbaren Bereich im Header zu haben, mit dem Besucher auf die Startseite zur\u00fcckkommen k\u00f6nnen, kann \u00fcber den Logo Manager des Gambio Admins statt eines Logos ein transparentes Bild eingef\u00fcgt werden. So habt ihr trotzdem eine klickbare Fl\u00e4che, die aber euer Logo nicht \u00fcberlagert.<\/p>\n
Bei dieser Variante ist allerdings zu beachten, dass entsprechende Bilder f\u00fcr die mobile und die Sticky-Ansicht hinterlegt werden m\u00fcssen, da diese ansonsten euer Logo nicht enthalten.<\/p>\n
Logo mit Hintergrundbild\/Hintergrundfarbe<\/h4>\n
Eine weitere Variante, um euer Logo \u00fcber die gesamte Headerbreite zu bekommen, erfordert ein bisschen mehr Arbeit und funktioniert nur dann, wenn ihr einen Bereich habt, der als klickbares Element \u00fcber den Logo Manager eingef\u00fcgt werden kann. Hierf\u00fcr ist dann folgendes notwendig:<\/p>\n
- \n
- Schneidet das Element, welches ihr als klickbares Element im Header haben wollt, aus eurem Bild aus und f\u00fcllt die entstehende L\u00fccke mit einem passenden Hintergrund<\/li>\n
- Entfernt von dem ausgeschnittenen Element alle Hintergrundfarben, so dass dieses einen transparenten Hintergrund hat<\/li>\n
- F\u00fcgt das ausgeschnittene Element im Gambio Admin \u00fcber den Logo Manager als euer Logo ein<\/li>\n
- Sollte hier ein spezielles Muster enthalten gewesen sein, was zwingend in eurem Header zu sehen sein soll, hinterlegt das Bild, welches das ausgeschnittene Element enthalten hat, als Hintergrundbild im StyleEdit 3<\/li>\n<\/ul>\n
Wenn kein spezielles Muster sondern nur eine Hintergrundfarbe oder ein Farbverlauf verwendet werden soll, so muss kein Hintergrundbild hinterlegt werden, denn das l\u00e4sst sich auch mit den Optionen zum Hinterlegen einer Hintergrundfarbe realisieren. F\u00fcr die Erzeugung eines Farbverlaufs kann ich folgenden Artikel empfehlen: Farbverl\u00e4ufe in CSS<\/a>. Dieses CSS kann auch unter dem Punkt \u201cHintergrundfarbe\u201d hinterlegt werden, sodass der Header dann diesen Verlauf als Hintergrund verwendet.<\/p>\n
Bedenkt auch hier, dass sowohl f\u00fcr den Sticky-Header als auch f\u00fcr die mobile Ansicht zus\u00e4tzliche Einstellungen vorgenommen werden m\u00fcssen, damit die Hintergrundfarbe, der Farbverlauf oder das Hintergrundbild auf diesen angezeigt werden.<\/p>\n
Shoplogo mittig positionieren<\/h3>\n
In manchen Designs ist es sinnvoll, das Logo in die Mitte des Headers zu verschieben. Auch hier gibt es verschiedene M\u00f6glichkeiten dies zu erreichen. An dieser Stelle m\u00f6chte ich zwei dieser M\u00f6glichkeiten nennen, wobei eine davon eine kleine Templateanpassung ben\u00f6tigt, um korrekt funktionieren zu k\u00f6nnen.<\/p>\n
Ohne Anpassung des Templates<\/h4>\n
Hierf\u00fcr machen wir uns etwas zunutze, was ich oben schon einmal als h\u00e4ufigen Fehler beschrieben habe: Wir erh\u00f6hen die Spaltenanzahl der Headerelemente so, dass sie umbrechen und sich zum Teil in eine neuen Zeile legen. Anschlie\u00dfend ben\u00f6tigen wir noch ein wenig CSS, um die Elemente richtig zu positionieren. Die H\u00f6he des Headers muss auch angepasst werden, damit sich nichts \u00fcberlagert.<\/p>\n
Beginnen wir mit dem Logo: Hier vergebt ihr im StyleEdit 3 zw\u00f6lf Spalten, so dass dieses die volle Headerbreite einnimmt und sich alle anderen Elemente in eine neue Zeile verschieben.<\/p>\n
Um das Logo dann mittig in dem frei gewordenen Bereich zu positionieren braucht ihr folgendes CSS, welches ihr \u00fcber \u201cEigenes CSS\u201d einf\u00fcgen k\u00f6nnt:<\/p>\n
#navbar-brand\u00a0a\u00a0img\u00a0{\r\n display:\u00a0block;\u00a0\u00a0 \r\n margin:\u00a00\u00a0auto;\r\n}<\/pre>\nNachdem wir das geschafft haben, m\u00fcssen wir nur noch daf\u00fcr sorgen, dass die \u00fcbrigen Elemente wieder sch\u00f6n positioniert werden und dass der Header keine anderen Teile des Shops \u00fcberlagert.<\/p>\n
Ich empfehle bei dieser Variante den \u201cFrei gestaltbaren Bereich\u201d zu deaktivieren, da dieser hier zumeist nicht mehr sinnvoll positioniert werden kann und die Inhalte im Vergleich zum zentrierten Logo untergehen. Aktiviert also die Option \u201cFrei gestaltbaren Bereich im Header ausblenden\u201d im StyleEdit 3, um diesen auszublenden.<\/p>\n
Die jetzt frei gewordenen Spalten k\u00f6nnen wir dann daf\u00fcr verwenden, die Suche und den kleinen Warenkorb neu auszurichten.<\/p>\n
F\u00fcr mein Beispiel erh\u00f6he ich die Spaltenanzahl der Suche so, dass diese zusammen mit den Spalten des kleinen Warenkorbs wieder zw\u00f6lf in der Summe ergeben. Nebeneffekt dieser Aktion ist dann allerdings, dass das Eingabefeld f\u00fcr die Suche sehr gro\u00df wird. Wenn dies nicht gew\u00fcnscht ist, k\u00f6nnen wir auch hier mit ein bisschen CSS nachhelfen:<\/p>\n
#search\u00a0form\u00a0{\r\n\u00a0 max-width:\u00a025%<;\r\n}<\/pre>\nPasst hierbei den Wert f\u00fcr max-width<\/em> auf etwas an, das euch gef\u00e4llt und die Suche nicht zu gedrungen aussehen l\u00e4sst.<\/p>\n
Wenn die Darstellung wie gew\u00fcnscht ausf\u00e4llt, reicht es, die H\u00f6he des Headers anzupassen, so dass die innenliegenden Element wieder genug Platz darin finden. Sollen die Suche und der Warenkorb allerdings noch etwas nach oben gezogen werden, so kann dies mit den Optionen des vertikalen Abstands erreicht werden.<\/p>\n
Gebt hier einfach einen negativen Wert f\u00fcr den \u201cvertikalen \u00e4u\u00dferen Abstand\u201d ein und schon werden die Elemente nach oben verschoben. Anschlie\u00dfend muss noch die H\u00f6he des Headers angepasst werden – fertig.<\/p>\n
Wichtig:<\/strong> Mein Beispiel beschreibt hier das grunds\u00e4tzliche Vorgehen. Dies muss auch f\u00fcr den Sticky-Header und die anderen Ansichten durchgef\u00fchrt werden, damit eine saubere responsive Darstellung erreicht wird.<\/div>\nMit Anpassung des Templates<\/h4>\n
Wem das Spielen mit den Einstellungen im StyleEdit 3 zu viel ist, der kann auch den pragmatischen Weg w\u00e4hlen und einfach das Template f\u00fcr den Header anpassen, um das Logo zu zentrieren. Dies geht entweder \u00fcber das bew\u00e4hrte USERMOD-System oder ab Version v3.7.1.0 des Shops per Smarty-Bl\u00f6cken. Zum Thema Smarty-Bl\u00f6cke und GXModules haben wir hier Tutorials ver\u00f6ffentlicht: Smarty-Bl\u00f6cke<\/a> und GXModules<\/a>.<\/p>\n
Per USERMOD-System<\/h5>\n
Erstellt euch eine Kopie der templates\/Honeygrid\/index.html. In dieser sucht ihr folgenden Codeblock:<\/p>\n
{block name=\"index_outer_wrapper_header_inside_header\"}\r\n \u00a0\u00a0\u00a0{assign var=\"hideLogo\" value={template_setting name=\"gx-hide-logo-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideSearch\" value={template_setting name=\"gx-hide-search-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCustom\" value={template_setting name=\"gx-hide-custom-1-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCart\" value={template_setting name=\"gx-hide-cart-col\"}}\r\n\r\n \u00a0\u00a0\u00a0<div class=\"navbar-header\" data-gambio-widget=\"mobile_menu\">\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{if !$hideLogo}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_logo\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/logo.html\" logo_url=$logo_url logo_link=$logo_link}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/if}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_buttons\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_navbar_buttons.html\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0<\/div>\r\n{\/block}<\/pre>\nVerschiebt diesen Block zwischen folgende:<\/p>\n
{block name=\"index_outer_wrapper_header_inside_top_search_if\"}\r\n \u00a0\u00a0\u00a0{if !$hideSearch}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_top_search\"}{$TOP_SEARCH}{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n{\/block}\r\n\r\n{block name=\"index_outer_wrapper_header_inside_custom_content_if\"}\r\n \u00a0\u00a0\u00a0{if !$hideCustom}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_custom_content\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_custom_content.html\" content={content_manager group=4321001}}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n{\/block}<\/pre>\nDas Ergebnis sollte dann wie folgt aussehen:<\/p>\n
{block name=\"index_outer_wrapper_header_inside_top_search_if\"}\r\n \u00a0\u00a0\u00a0{if !$hideSearch}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_top_search\"}{$TOP_SEARCH}{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n{\/block}\r\n\r\n{block name=\"index_outer_wrapper_header_inside_header\"}\r\n \u00a0\u00a0\u00a0{assign var=\"hideLogo\" value={template_setting name=\"gx-hide-logo-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideSearch\" value={template_setting name=\"gx-hide-search-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCustom\" value={template_setting name=\"gx-hide-custom-1-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCart\" value={template_setting name=\"gx-hide-cart-col\"}}\r\n\r\n \u00a0\u00a0\u00a0<div class=\"navbar-header\" data-gambio-widget=\"mobile_menu\">\r\n \u00a0\u00a0\u00a0{if !$hideLogo}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_logo\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/logo.html\" logo_url=$logo_url logo_link=$logo_link}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_buttons\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_navbar_buttons.html\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0<\/div>\r\n{\/block}\r\n\r\n{block name=\"index_outer_wrapper_header_inside_custom_content_if\"}\r\n \u00a0\u00a0\u00a0{if !$hideCustom}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_custom_content\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_custom_content.html\" content={content_manager group=4321001}}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n{\/block}<\/pre>\nPer Smarty-Block<\/h5>\n
Legt euch im GXModules-Verzeichnis folgende Struktur an: GXModules\/<ModulEntwickler>\/<Modulname>\/Shop\/Templates\/Honeygrid\/index.html.<\/p>\n
<ModulEntwickler> und <Modulname> sind hierbei als Platzhalter zu verstehen, die von euch mit einer sinnvollen Bezeichnung gef\u00fcllt werden sollten, damit ihr eure \u00c4nderungen sp\u00e4ter wiederfinden k\u00f6nnt.<\/p>\n
In der erstellten index.html k\u00f6nnt ihr nun Folgendes machen: Kopiert euch den Block index_outer_wrapper_header_inside_header<\/em> aus der original Datei und scheidet dessen Inhalt aus und speichert ihn zwischen. Anschlie\u00dfend kopiert ihr euch den Block index_outer_wrapper_header_inside_custom_content_if<\/em> und kopiert den vorher ausgeschnittenen Inhalt in diesen Block hinein, wobei ihr den alten Inhalt \u00fcberschreibt. In der Definition des Blocks muss nun noch eine kleine Erweiterung stattfinden. Schreibt hier ein prepend<\/em> hinein. Vollst\u00e4ndig sollte das dann wie folgt aussehen:<\/p>\n
<\/p>\n
{block name=\"index_outer_wrapper_header_inside_header\"}\r\n\r\n{\/block}\r\n{block name=\"index_outer_wrapper_header_inside_custom_content_if\" prepend}\r\n \u00a0\u00a0\u00a0{assign var=\"hideLogo\" value={template_setting name=\"gx-hide-logo-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideSearch\" value={template_setting name=\"gx-hide-search-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCustom\" value={template_setting name=\"gx-hide-custom-1-col\"}}\r\n \u00a0\u00a0\u00a0{assign var=\"hideCart\" value={template_setting name=\"gx-hide-cart-col\"}}\r\n\r\n \u00a0\u00a0\u00a0<div class=\"navbar-header\" data-gambio-widget=\"mobile_menu\">\r\n \u00a0\u00a0\u00a0{if !$hideLogo}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_logo\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/logo.html\" logo_url=$logo_url logo_link=$logo_link}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0{\/if}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{block name=\"index_outer_wrapper_header_inside_header_buttons\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{include file=\"get_usermod:{$tpl_path}snippets\/header\/header_navbar_buttons.html\"}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/block}\r\n \u00a0\u00a0\u00a0<\/div>\r\n{\/block}<\/pre>\nDamit erreicht ihr, dass der urspr\u00fcngliche Block, der das Logo enthielt, geleert wird, w\u00e4hrend der Inhalt vor den Block index_outer_wrapper_header_inside_custom_content_if<\/em> geschrieben wird.<\/p>\n
Wurde eines der beiden Beispiele durchgef\u00fchrt, m\u00fcssen noch ein paar Einstellungen im StyleEdit 3 vorgenommen werden:<\/p>\n
- \n
- Deaktiviert auch hier den „Frei gestaltbaren Bereich“, da er in dieser Darstellung nur st\u00f6ren w\u00fcrde<\/li>\n
- Passt die Spaltenanzahl der \u00fcbrigen Elemente so an, dass sie in ihrer Gesamtmenge wieder zw\u00f6lf ergeben. Idealerweise w\u00e4hlt ihr die Spaltenanzahl f\u00fcr Suche und kleinen Warenkorb gleich gro\u00df und vergebt den Rest an das Logo.<\/li>\n
- F\u00fcgt auch hier folgendes CSS unter „Eigenes CSS“ ein:\n
#navbar-brand a img {\r\n \u00a0\u00a0display: block;\r\n \u00a0\u00a0margin: 0 auto;\r\n}<\/pre>\n<\/li>\n<\/ul>\nVorteil dieser L\u00f6sung ist meiner Meinung nach, dass das Logo hier nicht automatisch gr\u00f6\u00dfer wird und nicht ganz so viel mit den Optionen im StyleEdit manipuliert werden muss, damit der Header artig aussieht.<\/p>\n
Andererseits muss hierf\u00fcr etwas an der grundlegenden Templatestruktur g\u00e4ndert und diese \u00c4nderungen bei Updates regelm\u00e4\u00dfig \u00fcberpr\u00fcft werden.<\/p>\n
Auch hier ist das Vorgehen nur exemplarisch, das hei\u00dft die Einstellungen sollten auch f\u00fcr den Sticky-Header und die anderen Ansichten gemacht werden, damit der Header auf allen Endger\u00e4ten gut aussieht.<\/p>\n
Abschluss<\/h2>\n
Und das war es auch schon wieder. Ich hoffe ihr findet hier einige Ideen und dieses Tutorial hilft euch dabei euren Header ansprechend zu stylen. Ist noch etwas unklar geblieben oder habt ihr Vorschl\u00e4ge f\u00fcr weitere Tutorials? Haut in die Tasten und lasst es uns wissen!<\/p>\n
\n