StyleEdit 3-Tutorials (Teil 3): Anpassen des Headers

18. April 2018

Der Header ist das Aushängeschild eines Onlineshops. Ist dieser wenig ansprechend gestaltet oder mit Informationen überfrachtet, so ist ein potenzieller Kunde schnell wieder weg. Um einen professionellen Eindruck zu hinterlassen, ist ein durchdachter Header Pflicht.

Da wir im letzten Tutorial die wichtigsten Begriffe und Seitenelemente kennen gelernt haben, möchte ich heute zeigen, was man im StyleEdit 3 alles mit dem Header anstellen kann.

Ich möchte zudem auch die häufigsten Fehler aufzeigen und Lösungen anbieten, wie sich diese Probleme vermeiden lassen, damit die Darstellung des Headers nie kaputt aussieht. Außerdem möchte ich euch ein paar Tipps und Tricks zeigen, um den Header möglichst so zu gestalten, wie ihr ihn euch vorstellt.

Ich werde meine Beispiele möglichst so beschreiben, dass sie für alle drei Basisstyles im StyleEdit 3 durchführbar sind. Sollte es style-abhängige Einstellungen geben, werde ich bei diesen darauf hinweisen.

Grundsätzliches

Der Header befindet sich zwischen der Sekundär- und der horizontalen Kategorienavigation (auch Hauptnavigation genannt). Er beinhaltet im Standard das Shop-Logo, ein Eingabefeld für die Suche, ein im Content Manager befüllbares Inhaltsfeld und den kleinen Warenkorb.

Auch hier finden wir das schon oft angesprochene Gridsystem von Bootstrap wieder, denn die vier Elemente im Header werden über die im StyleEdit 3 eingestellten Werte für die Gridspalten proportioniert und positioniert.

Die Anzahl der Spalten für die einzelnen Elemente lässt sich wie gewohnt mit den Optionen “Grid-Spalten Klein”, “Grid-Spalten Medium” und “Grid-Spalten Groß” für die einzelnen Elemente und Displaygrößen im StyleEdit 3 konfigurieren.

Hier sollte wie immer beachtet werden, dass die Gesamtzahl der Spalten für eine Displaygröße den Wert zwölf ergibt, da zwölf Spalten einer voll ausgefüllten Zeile entsprechen. Bei mehr als zwölf Elementen brechen die Inhalte um, bei weniger füllen Sie nicht die volle Breite.

Erklärungswürdige Begriffe

  • Vertikaler Abstand: Diese Option regelt den inneren vertikalen Abstand eines Elements. Sie kann beim kleinen Warenkorb zum Beispiel dafür verwendet werden, die Artikelanzahl ein wenig vom Warenkorbsymbol zu trennen. Im CSS würde hier vom padding gesprochen werden.
  • Äußerer Vertikaler Abstand: Diese Option regelt den äußeren vertikalen Abstand eines Elements zum umliegenden Headercontainer. Wenn der Header in der Höhe verändert wurde, können mit dieser Option die einzelnen Elemente im Header in der Höhe positioniert werden. Im CSS würde hier vom margin gesprochen werden.
  • Sticky: Optionen mit dem Begriff “Sticky” 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.
Achtung:Den Sticky-Header gibt es nicht im Boxed-Basisstyle des Honeygrid-Templates, so dass die Einstellungen dort nicht von Belang sind.

Häufige Fehler

Zu viele Spalten vergeben

Dies ist meiner Erfahrung nach einer der häufigsten Fehler bei der Konfiguration des Headers: Die Spaltenanzahl für z.B. das Logo wird erhöht, 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 äußerstes rechtes Element in eine neue Zeile.

Die Lösung ist hier ganz einfach: passt bei den übrigen Elementen die Spaltenanzahl so an, dass sie insgesamt wieder zwölf ergibt.

StyleEdit-Tutorial: zu viele Spalten vergeben

Abb. 1: Hier sind zu viele Spalten vergeben

Zu wenig Spalten vergeben

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öht wurde. Das lässt den Header „zusammenrutschen“.

Auch hier ist die Lösung die gleiche wie weiter oben: Erhöht die Spaltenanzahl der Elemente, die noch im Header angezeigt werden sollen, auf einen Wert, dass sie zusammen wieder insgesamt zwölf ergeben.

StyleEdit-Tutorials: Zu wenig Spalten vergeben

Abb. 2: Hier sind zu wenig Spalten vergeben

Nur die Höhe des Headers erhöhen

Häufig passiert es auch, dass die Gesamthöhe des Headers angepasst worden ist, die Darstellung sich aber nicht so verhält wie gewünscht. Die Position der Hauptnavigation orientiert sich nämlich nicht an der allgemeinen Höhe des Headers sondern an der Höhe des höchsten darin liegenden Elements.

Wird also nur die Höhe des Headers angepasst, entsteht nur Platz für die Erhöhung der innenliegenden Elemente und so bleibt, wenn diese nicht auch angepasst wird, eine leere Fläche unterhalb der Hauptnavigation, die im Normalfall nicht gut aussieht.

StyleEdit-Tutorials: Höhe des Headers zu hoch

Abb. 3: Hier ist die Höhe des Headers zu Hoch für die Elemente

Mein Lösungsvorschlag: Erhöht mindestens die Höhe eines der innenliegenden Elemente auf einen zur allgemeinen Headerhöhe passenden Wert. Dieser Wert lässt sich errechnen, wenn von der Headerhöhe die Höhe der Haupt- und Sekundärnavigation abgezogen wird.

Beispiel: Ich habe die Höhe meines Headers auf 250px erhöht. Damit das Ganze jetzt nicht kaputt aussieht, passe ich auch die Höhe des “Frei gestaltbaren Bereichs” an. Wenn wir davon ausgehen, dass die Hauptnavigation 40px und die Sekundärnavigation 30px hoch ist, muss die Höhe des “Frei gestaltbaren Bereichs” auf 180px erhöht werden, damit die Hauptnavigation richtig positioniert ist.

Höhe des Headers unpassend zur Höhe der Elemente wählen

Eins vorweg: In Ausnahmefällen kann dies sogar sinnvoll sein. Sollen zum Beispiel die Elemente des Headers über einem Teaser-Slider liegen oder das horizontale Menü in diesen hereinragen, kann das auf diese Weise erreicht werden.

Hier passiert aber oft Folgendes: dadurch, dass die Höhe des Headers verringert wurde, aber die innenliegenden Elemente noch gleich hoch sind wie vorher, legen sich die innenliegenden Elemente über Teile der anderen Shopelemente.

Das kann zum Beispiel ein Produktswiper oder ein wichtiger Text sein, die durch diese Überlagerung unlesbar beziehungsweise unbenutzbar werden. Gleiches passiert auch, wenn nur die Höhe der Elemente erhöht wird, ohne die Höhe des Headers anzupassen.

 

StyleEdit-Tutorials: Elemente zu groß für den Header

Abb. 4.1: Elemente zu Groß für den Header

 

StyleEdit-Tutorials: Header zu klein für normal große Elemente

Abb. 4.2: Header zu klein für normal große Elemente

Folgendes könnt ihr zur Lösung des Problems versuchen: Passt die Höhe der innenliegenden Elemente auf einen Wert an, der zur Höhe des Headers passt.

Das funktioniert aber nur dann, wenn ihr die Höhe des Headers nicht viel zu klein gewählt habt. Steht der Wert für den Header zum Beispiel auf 50px, ist das zu klein, um die Elemente darin überhaupt noch lesbar unterzubringen, da sowohl Haupt- als auch Sekundärnavigation noch Platz benötigen, um benutzbar zu sein.

Wenn die Höhe der innenliegenden Headerelemente nicht mehr verkleinert werden kann, um eine saubere Darstellung zu ermöglichen, dann führt kein Weg daran vorbei, die Höhe des Headers auf einen größeren Wert zu erhöhen, in dem sowohl Haupt- und Sekundärnavigation als auch die Elemente lesbar Platz finden.

Eine Anpassung der Höhe der innenliegenden Headerelemente kann hier aber trotzdem noch notwendig sein, wenn diese bei einem oder mehreren der Elemente viel zu hoch gewählt ist.

Viele der oben aufgeführten Fehler können auch im Sticky-Header auftreten. Die Lösungsvorschläge gelten für diesen dann analog.

Einen weiteren Fehler, der dann aber nur mit Sticky-Header auftritt, möchte ich auch noch aufgreifen:

Haupt- und Sekundärnavigation im Sticky angezeigt, ohne die Höhe des Headers anzupassen

Im Standard wird der Sticky-Header ohne die Haupt- und Sekundärnavigation angezeigt. Im StyleEdit 3 gibt es allerdings auch die Möglichkeit den Sticky so zu konfigurieren, dass beide oder auch nur eines der beiden Elemente mit in diesem feststehenden Header angezeigt werden sollen.

Auch hier gibt es Fehlerpotenzial, denn auch der Sticky-Header muss in seiner Höhe angepasst werden, wenn zusätzliche, in ihm liegende Elemente angezeigt werden sollen. Wird dies nicht gemacht, sind oft ungewollte Sprungeffekte oder Überlagerungen von Inhalten die Folge, wenn auf der Seite nach unten gescrollt wird und der Header auf die Sticky-Ansicht wechselt.

Hinweis: Dieser Fehler tritt nicht in Shops mit aktivem Boxed-Basisstyle auf, da es in der boxed Darstellung keinen feststehenden Header gibt.
StyleEdit-Tutorials: Sekundär- und Topnavigation nicht in Sticky-Header mit eingerechnet

Abb. 5: Sekundär- und Topnavigation nicht in Sticky-Header mit eingerechnet

Um das Problem zu lösen reicht es, wenn ihr einfach die Headerhöhe auf einen Wert anpasst, der die Höhen von Haupt- und Sekundärnavigation im Sticky mit einbezieht.

Beispiel: Der Sticky-Header hat normalerweise eine Höhe von 60px. Wird der Wert von Kategorien > Höhe Sticky von 0 auf 40px und der Wert von Sekundärnavigation > Höhe Sticky auf 30px erhöht, damit beide im Sticky angezeigt werden, so muss die Header-Höhe in der Sticky-Ansicht um 70px auf 130px erhöht werden, damit dieser sauber dargestellt wird.

Nachdem wir nun die häufigsten Fehler mit möglichen Lösungsvorschlägen erarbeitet haben, möchte ich zu ein paar Tipps und Tricks kommen, die die Darstellung eures Headers nach euren Wünschen verbessern können. Damit solltet ihr dann die Möglichkeit haben, möglichst viel aus eurem Header herauszuholen, sodass dieser beim Aufruf des Shops gleich einen guten Eindruck macht. Vorher aber noch zwei grundsätzliche Tipps:

Klingt vielleicht banal, hilft aber ungemein dabei einen sauberen und aufgeräumten Header zu erreichen. Ist das Logo schon nicht gut oder mit Details überfrachtet, wird es schwer dieses im Header sinnvoll unterzubringen. Meine Tipps für ein gutes Logo:

  • Verwendet einfache Symboliken, die auch in kleinen Ansichten noch gut aussehen: Kleine Details oder Schnörkel gehen beim Skalieren für eine mobile Ansicht oft verloren oder stören die Lesbarkeit und den Wiedererkennungswert eines Logos.
  • Ein Logo, dass die volle Breite des Headers einnehmen soll, ist nicht gut geeignet. Auf mobilen Geräten ist es sehr schwer, dieses gut darzustellen. Arbeitet also besser mit einem schmaleren Logo und platziert dazu dann eine zusätzliche Hintergrundgrafik im Header, wenn ihr den vollgefüllt mögt.
  • Verwendet Bilder, die sich entweder gut skalieren lassen (z.B. Vektorgrafiken) oder eine gute Auflösung haben. Übertreibt bei der Größe nicht maßlos nach oben, aber nichts sieht unseriöser aus als ein verpixeltes Logo im Header.
  • Verwendet ein Bild mit einem transparenten Hintergrund oder einer Farbe, die zur gewählten Headerfarbe passt: Transparenten Hintergründe 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.
  • Stellt Schriftzüge ausreichend groß dar: Das verwendete Logo wird in den unterschiedlichen Ansichtsformen des Shops auch skaliert. Das heißt, wenn Schriftzüge in eurem Logo verwendet werden sollen, setzt diese so groß, dass sie auch in einer skalierten Ansicht für Mobilgeräte noch lesbar sind.

2. Weniger ist mehr

Auch ein recht banaler, aber umso wichtigerer Tipp: Ein Header, der mit zu vielen Informationen gespickt ist, sorgt meistens eher dafür, dass ein potenzieller Kunde verwirrt ist, weil er von den vielen Informationen in diesem Bereich erschlagen wird.

Großes Potenzial, um wichtige Inhalte zu präsentieren, hat der „Frei gestaltbare Bereich“. Dort lässt sich im Grunde alles platzieren und für die Kunden sichtbar machen. Aber Vorisicht: Bitte nicht vergessen eine passende Höhe für den Bereich zu konfigurieren!

Hier ist also vorsichtige Zurückhaltung geboten. Es sollten maximal kleine Icons, Logos von Bewertungsportalen oder Zahlungsweisen oder kurze Texte mit Kontaktdaten oder Ähnlichem präsentiert werden. So bleibt der Header schnell erfassbar und wirkt nicht überfrachtet.

Tipps und Tricks für aufgeräumte Header

Logo vergrößern

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ässt sich dem aber entgegenwirken:

Das Logo ist breiter als der verfügbare Platz

Dadurch, dass das Logo responsiv im Header eingebunden wird, passt es sich automatisch dem verfügbaren 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ür das Logo zu erhöhen und entsprechend die der anderen Elemente zu verringern. Anschließend sollte das Logo größer angezeigt werden.

Das Logo ist höher als der verfügbare Platz

Auch in diesem Szenario wird das Logo kleinskaliert, da es ansonsten nicht in den Header passen würde. Um dem entgegenzuwirken, kann zuerst die Höhe des Headers angepasst werden, um genug Platz für das größere Logo zu schaffen. Anschließend kann die Höhe des Logos auf den gewünschten Wert erhöht werden, wodurch das Logo dann größer angezeigt wird.

Gleiches gilt, wenn das Logo auch in der Sticky-Ansicht vergrößert werden soll. Hier sind dann die benötigten Einstellungen Header > Allgemein > Höhe Sticky und Header > Logo > Logo Höhe Sticky.

Für das Logo in der mobilen Ansicht verhält es sich ein wenig anders: Hier errechnet sich die Höhe des Logos aus der Höhe des Headers in der mobilen Ansicht, damit es nicht zu Darstellungsfehlern kommt.

Ist ein Logo sowohl breiter als auch höher als der im Header verfügbare Platz, so müssen beide gerade beschriebenen Beispiele angewendet werden, um eine optimale Darstellung des Logos zu ermöglichen.

Die anderen Elemente im Header passend zum Logo positionieren

Wurde die Höhe des Headers und des Logos angepasst, um die Darstellung des Logos zu vergrößern, so sitzen die anderen Elemente des Headers nun weiterhin an ihrer alten Position. Es wird oft so wirken, als würden diese am oberen Rand des Headers “festkleben”. Um diesen Eindruck zu minimieren, kann auf die Optionen zum Einstellen des vertikalen Abstands der einzelnen Elemente zurückgegriffen werden.

Mit diesen lassen sich – wie der Name schon sagt – Abstände auf der vertikalen Achse von oben definieren, die die anderen Elemente in die gewünschte Position im Header herunterschieben. Ändert hier den Wert so, dass euch die Darstellung gefällt und dass die übrigen Elemente in ihrer Position zum vergrößerten Logo passen.

Eine feste Vorgabe oder Regel, welche Pixelwerte zu einem angepassten Logo passen, kann hier allerdings nicht gegeben werden, da das immer abhängig von der eigenen Logo- und Headerhöhe ist.

Shoplogo über die gesamte Breite des Headers

In besonderen Fällen ist es erforderlich, dass das Logo über den gesamten Bereich des Headers gezogen wird, damit keine Details verloren gehen. Hierfür möchte ich zwei verschiedene Lösungsvorschläge aufzeigen.

Logo als Hintergrundbild

Hierbei darf euer eigentliches Logo nicht über den Logo Manager im Gambio Admin unter Darstellung > Logo Manager hochgeladen werden.

Über den StyleEdit 3 habt ihr die Möglichkeit ein Hintergrundbild für den Header zu definieren. Hier könnt ihr euer Logo hinterlegen, wenn dieses sich über den gesamten Bereich erstrecken soll. Um trotzdem einen anklickbaren Bereich im Header zu haben, mit dem Besucher auf die Startseite zurückkommen können, kann über den Logo Manager des Gambio Admins statt eines Logos ein transparentes Bild eingefügt werden. So habt ihr trotzdem eine klickbare Fläche, die aber euer Logo nicht überlagert.

Bei dieser Variante ist allerdings zu beachten, dass entsprechende Bilder für die mobile und die Sticky-Ansicht hinterlegt werden müssen, da diese ansonsten euer Logo nicht enthalten.

Logo mit Hintergrundbild/Hintergrundfarbe

Eine weitere Variante, um euer Logo über die gesamte Headerbreite zu bekommen, erfordert ein bisschen mehr Arbeit und funktioniert nur dann, wenn ihr einen Bereich habt, der als klickbares Element über den Logo Manager eingefügt werden kann. Hierfür ist dann folgendes notwendig:

  • Schneidet das Element, welches ihr als klickbares Element im Header haben wollt, aus eurem Bild aus und füllt die entstehende Lücke mit einem passenden Hintergrund
  • Entfernt von dem ausgeschnittenen Element alle Hintergrundfarben, so dass dieses einen transparenten Hintergrund hat
  • Fügt das ausgeschnittene Element im Gambio Admin über den Logo Manager als euer Logo ein
  • 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

Wenn kein spezielles Muster sondern nur eine Hintergrundfarbe oder ein Farbverlauf verwendet werden soll, so muss kein Hintergrundbild hinterlegt werden, denn das lässt sich auch mit den Optionen zum Hinterlegen einer Hintergrundfarbe realisieren. Für die Erzeugung eines Farbverlaufs kann ich folgenden Artikel empfehlen: Farbverläufe in CSS. Dieses CSS kann auch unter dem Punkt “Hintergrundfarbe” hinterlegt werden, sodass der Header dann diesen Verlauf als Hintergrund verwendet.

Bedenkt auch hier, dass sowohl für den Sticky-Header als auch für die mobile Ansicht zusätzliche Einstellungen vorgenommen werden müssen, damit die Hintergrundfarbe, der Farbverlauf oder das Hintergrundbild auf diesen angezeigt werden.

Shoplogo mittig positionieren

In manchen Designs ist es sinnvoll, das Logo in die Mitte des Headers zu verschieben. Auch hier gibt es verschiedene Möglichkeiten dies zu erreichen. An dieser Stelle möchte ich zwei dieser Möglichkeiten nennen, wobei eine davon eine kleine Templateanpassung benötigt, um korrekt funktionieren zu können.

Ohne Anpassung des Templates

Hierfür machen wir uns etwas zunutze, was ich oben schon einmal als häufigen Fehler beschrieben habe: Wir erhöhen die Spaltenanzahl der Headerelemente so, dass sie umbrechen und sich zum Teil in eine neuen Zeile legen. Anschließend benötigen wir noch ein wenig CSS, um die Elemente richtig zu positionieren. Die Höhe des Headers muss auch angepasst werden, damit sich nichts überlagert.

Beginnen wir mit dem Logo: Hier vergebt ihr im StyleEdit 3 zwölf Spalten, so dass dieses die volle Headerbreite einnimmt und sich alle anderen Elemente in eine neue Zeile verschieben.

Um das Logo dann mittig in dem frei gewordenen Bereich zu positionieren braucht ihr folgendes CSS, welches ihr über “Eigenes CSS” einfügen könnt:

#navbar-brand a img {
    display: block;   
    margin: 0 auto;
}

Nachdem wir das geschafft haben, müssen wir nur noch dafür sorgen, dass die übrigen Elemente wieder schön positioniert werden und dass der Header keine anderen Teile des Shops überlagert.

Ich empfehle bei dieser Variante den “Frei gestaltbaren Bereich” 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 “Frei gestaltbaren Bereich im Header ausblenden” im StyleEdit 3, um diesen auszublenden.

Die jetzt frei gewordenen Spalten können wir dann dafür verwenden, die Suche und den kleinen Warenkorb neu auszurichten.

Für mein Beispiel erhöhe ich die Spaltenanzahl der Suche so, dass diese zusammen mit den Spalten des kleinen Warenkorbs wieder zwölf in der Summe ergeben. Nebeneffekt dieser Aktion ist dann allerdings, dass das Eingabefeld für die Suche sehr groß wird. Wenn dies nicht gewünscht ist, können wir auch hier mit ein bisschen CSS nachhelfen:

#search form {
  max-width: 25%<;
}

Passt hierbei den Wert für max-width auf etwas an, das euch gefällt und die Suche nicht zu gedrungen aussehen lässt.

Wenn die Darstellung wie gewünscht ausfällt, reicht es, die Höhe 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.

Gebt hier einfach einen negativen Wert für den “vertikalen äußeren Abstand” ein und schon werden die Elemente nach oben verschoben. Anschließend muss noch die Höhe des Headers angepasst werden – fertig.

Wichtig: Mein Beispiel beschreibt hier das grundsätzliche Vorgehen. Dies muss auch für den Sticky-Header und die anderen Ansichten durchgeführt werden, damit eine saubere responsive Darstellung erreicht wird.

Mit Anpassung des Templates

Wem das Spielen mit den Einstellungen im StyleEdit 3 zu viel ist, der kann auch den pragmatischen Weg wählen und einfach das Template für den Header anpassen, um das Logo zu zentrieren. Dies geht entweder über das bewährte USERMOD-System oder ab Version v3.7.1.0 des Shops per Smarty-Blöcken. Zum Thema Smarty-Blöcke und GXModules haben wir hier Tutorials veröffentlicht: Smarty-Blöcke und GXModules.

Per USERMOD-System

Erstellt euch eine Kopie der templates/Honeygrid/index.html. In dieser sucht ihr folgenden Codeblock:

{block name="index_outer_wrapper_header_inside_header"}
    {assign var="hideLogo" value={template_setting name="gx-hide-logo-col"}}
    {assign var="hideSearch" value={template_setting name="gx-hide-search-col"}}
    {assign var="hideCustom" value={template_setting name="gx-hide-custom-1-col"}}
    {assign var="hideCart" value={template_setting name="gx-hide-cart-col"}}

    <div class="navbar-header" data-gambio-widget="mobile_menu">
        {if !$hideLogo}
            {block name="index_outer_wrapper_header_inside_header_logo"}
                {include file="get_usermod:{$tpl_path}snippets/header/logo.html" logo_url=$logo_url logo_link=$logo_link}
            {/block}
        {/if}
        {block name="index_outer_wrapper_header_inside_header_buttons"}
            {include file="get_usermod:{$tpl_path}snippets/header/header_navbar_buttons.html"}
        {/block}
    </div>
{/block}

Verschiebt diesen Block zwischen folgende:

{block name="index_outer_wrapper_header_inside_top_search_if"}
    {if !$hideSearch}
        {block name="index_outer_wrapper_header_inside_top_search"}{$TOP_SEARCH}{/block}
    {/if}
{/block}

{block name="index_outer_wrapper_header_inside_custom_content_if"}
    {if !$hideCustom}
        {block name="index_outer_wrapper_header_inside_custom_content"}
            {include file="get_usermod:{$tpl_path}snippets/header/header_custom_content.html" content={content_manager group=4321001}}
        {/block}
    {/if}
{/block}

Das Ergebnis sollte dann wie folgt aussehen:

{block name="index_outer_wrapper_header_inside_top_search_if"}
    {if !$hideSearch}
        {block name="index_outer_wrapper_header_inside_top_search"}{$TOP_SEARCH}{/block}
    {/if}
{/block}

{block name="index_outer_wrapper_header_inside_header"}
    {assign var="hideLogo" value={template_setting name="gx-hide-logo-col"}}
    {assign var="hideSearch" value={template_setting name="gx-hide-search-col"}}
    {assign var="hideCustom" value={template_setting name="gx-hide-custom-1-col"}}
    {assign var="hideCart" value={template_setting name="gx-hide-cart-col"}}

    <div class="navbar-header" data-gambio-widget="mobile_menu">
    {if !$hideLogo}
        {block name="index_outer_wrapper_header_inside_header_logo"}
            {include file="get_usermod:{$tpl_path}snippets/header/logo.html" logo_url=$logo_url logo_link=$logo_link}
        {/block}
    {/if}
        {block name="index_outer_wrapper_header_inside_header_buttons"}
            {include file="get_usermod:{$tpl_path}snippets/header/header_navbar_buttons.html"}
        {/block}
    </div>
{/block}

{block name="index_outer_wrapper_header_inside_custom_content_if"}
    {if !$hideCustom}
        {block name="index_outer_wrapper_header_inside_custom_content"}
            {include file="get_usermod:{$tpl_path}snippets/header/header_custom_content.html" content={content_manager group=4321001}}
        {/block}
    {/if}
{/block}
Per Smarty-Block

Legt euch im GXModules-Verzeichnis folgende Struktur an: GXModules/<ModulEntwickler>/<Modulname>/Shop/Templates/Honeygrid/index.html.

<ModulEntwickler> und <Modulname> sind hierbei als Platzhalter zu verstehen, die von euch mit einer sinnvollen Bezeichnung gefüllt werden sollten, damit ihr eure Änderungen später wiederfinden könnt.

In der erstellten index.html könnt ihr nun Folgendes machen: Kopiert euch den Block index_outer_wrapper_header_inside_header aus der original Datei und scheidet dessen Inhalt aus und speichert ihn zwischen. Anschließend kopiert ihr euch den Block index_outer_wrapper_header_inside_custom_content_if und kopiert den vorher ausgeschnittenen Inhalt in diesen Block hinein, wobei ihr den alten Inhalt überschreibt. In der Definition des Blocks muss nun noch eine kleine Erweiterung stattfinden. Schreibt hier ein prepend hinein. Vollständig sollte das dann wie folgt aussehen:

 

{block name="index_outer_wrapper_header_inside_header"}

{/block}
{block name="index_outer_wrapper_header_inside_custom_content_if" prepend}
    {assign var="hideLogo" value={template_setting name="gx-hide-logo-col"}}
    {assign var="hideSearch" value={template_setting name="gx-hide-search-col"}}
    {assign var="hideCustom" value={template_setting name="gx-hide-custom-1-col"}}
    {assign var="hideCart" value={template_setting name="gx-hide-cart-col"}}

    <div class="navbar-header" data-gambio-widget="mobile_menu">
    {if !$hideLogo}
        {block name="index_outer_wrapper_header_inside_header_logo"}
            {include file="get_usermod:{$tpl_path}snippets/header/logo.html" logo_url=$logo_url logo_link=$logo_link}
        {/block}
    {/if}
        {block name="index_outer_wrapper_header_inside_header_buttons"}
            {include file="get_usermod:{$tpl_path}snippets/header/header_navbar_buttons.html"}
        {/block}
    </div>
{/block}

Damit erreicht ihr, dass der ursprüngliche Block, der das Logo enthielt, geleert wird, während der Inhalt vor den Block index_outer_wrapper_header_inside_custom_content_if geschrieben wird.

Wurde eines der beiden Beispiele durchgeführt, müssen noch ein paar Einstellungen im StyleEdit 3 vorgenommen werden:

  • Deaktiviert auch hier den „Frei gestaltbaren Bereich“, da er in dieser Darstellung nur stören würde
  • Passt die Spaltenanzahl der übrigen Elemente so an, dass sie in ihrer Gesamtmenge wieder zwölf ergeben. Idealerweise wählt ihr die Spaltenanzahl für Suche und kleinen Warenkorb gleich groß und vergebt den Rest an das Logo.
  • Fügt auch hier folgendes CSS unter „Eigenes CSS“ ein:
    #navbar-brand a img {
       display: block;
       margin: 0 auto;
    }

Vorteil dieser Lösung ist meiner Meinung nach, dass das Logo hier nicht automatisch größer wird und nicht ganz so viel mit den Optionen im StyleEdit manipuliert werden muss, damit der Header artig aussieht.

Andererseits muss hierfür etwas an der grundlegenden Templatestruktur gändert und diese Änderungen bei Updates regelmäßig überprüft werden.

Auch hier ist das Vorgehen nur exemplarisch, das heißt die Einstellungen sollten auch für den Sticky-Header und die anderen Ansichten gemacht werden, damit der Header auf allen Endgeräten gut aussieht.

Abschluss

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äge für weitere Tutorials? Haut in die Tasten und lasst es uns wissen!


Für aktuelle News aus der Welt des E-Commerce folge uns bei Twitter

Selbstverständlich findest du uns auch bei Facebook

Erstelle mit Gambio ganz einfach noch heute deinen eigenen Onlineshop

Mehr erfahren