StyleEdit 3-Tutorials (Teil 4): Anpassen des Footers

19. Juni 2018

Von ganz oben nach ganz unten: Nachdem wir vor kurzem viel über den Header gelernt haben, möchte ich heute einmal einen Blick mit euch auf den Footer werfen. Ein ansprechend gestalteter Footer, der in allen Ansichten des Shops gut dargestellt wird, gehört zu einer guten Shopgestaltung einfach dazu.

Häufig verkommt dieser allerdings zu einer Ansammlung von Links oder wird mit zu vielen Bildern überladen. Um diese – und noch andere häufige Fehler bei der Gestaltung des Footers – möchte ich mich mit diesem Tutorial kümmern

Grundsätzliches

Der Footer gliedert sich in zwei Bereiche. Zum einen gibt es dort den Footer-Header und dann den in Spalten aufgeteilten Footer-Body.

In der ersten Spalte des Footer-Bodys findet sich eine Auflistung von Links diverser Contentseiten. Hierbei handelt es sich um die Box “Mehr über”, welche im EyeCandy-Template noch in der linken Menüleiste auftauchte und im Honeygrid nun an diese Position umgezogen ist. Hier werden alle Contents verlinkt, die im aktuellen Content Manager ab GX3.7 in Infoseiten positioniert und sichtbar geschaltet sind.

Soll hier die Sortierreihenfolge der Links bearbeiten werdne, geht dies per Drag and Drop. Einträge, die im Admin weiter oben aufgeführt werden, werden später auch im Footer weiter oben gelistet. Soll ein Content, der zunächst in einem anderen Bereich einsortiert war, als Link in der Box “Mehr über” erscheinen, so kann dieser auch per Drag and Drop in den Bereich “Infoseiten” verschoben werden.

Die Inhalte aller weiteren Spalten können direkt über den Content Manager befüllt werden. Wechselt hierfür im Content Manager in den Tab “Elemente”, in dem ihr den Bereich Footer findet. Dort findet ihr die Einträge “Footer”, “Footer 2. Spalte”, “Footer 3. Spalte” und “Footer 4. Spalte”.

Mit dem Content “Footer” könnt ihr Inhalte im Footer-Header platzieren, während die anderen Content-Elemente für die einzelnen Spalten verwendet werden können.

Erklärungswürdige Begriffe

Auch bei der Konfiguration haben sich ein paar Begriffe versteckt, die einer kurzen Erklärung bedürfen, da sie nicht direkt für jeden verständlich sind. Um diese soll es nun in diesem Teil des Tutorials gehen, damit wir später voll in die Materie einsteigen können.

Footer Header

Der Footer Header ist sozusagen das Kopf-Element eines Footers. Er wird nur dann angezeigt, wenn sich im Content “Footer” Inhalt befindet und dieser sichtbar geschaltet ist. Andernfalls wird er einfach ausgeblendet.

Dieser Content eignet sich sehr gut dazu Inhalte hervorzuheben, etwa die Anmeldung zu einem Newsletter, da er optisch auch von den anderen Teilen des Footers abweichend und über die volle Breite dargestellt wird. (Live-Beispiel)

Ein anderer Anwendungsfall könnte das Platzieren der Versand- und Zahlungsicons der Anbieter sein, die in eurem Shop angeboten werden, sollten diese nicht in einer der Footer-Spalten schon dargestellt werden. (Live-Beispiel)

 

Beispielhafte Darstellung eines Footer-Headers

Abb. 1: Beispielhafte Darstellung eines Footer-Headers

Footer Body

Der Footer Body ist das Hauptelement des Footers. Er beinhaltet alle weiteren Inhalte, die im Footer platziert und dargestellt werden können. Dazu gehören auch die einzelnen Footer-Spalten.

 

Beispielhafte Darstellung des Footer-Body

Abb. 2: Beispielhafte Darstellung des Footer-Body

Footer-Spalten

Der Footer Body gliedert sich in einem unangepassten Honeygrid-Template in vier Spalten. Die erste Spalte beinhaltet immer die Box “Mehr über”, die eine Liste wichtiger Content-Links zur Verfügung stellt. Die übrigen drei Boxen findet ihr unter Content Manager > Elemente und können nach belieben von euch mit Inhalt gefüllt werden.

 

Beispielhafte Darstellung der Footer-Spalten

Abb. 3: Beispielhafte Darstellung der Footer-Spalten

Mindesthöhe

Mit der Option “Mindesthöhe” könnt ihr im StyleEdit 3 einstellen, wie hoch die einzelnen Footer-Spalten sein sollen. Dies kann notwendig sein, wenn man eine recht volle und hohe Spalte hat und die anderen Spalten recht klein sind. Diese würden dann untereinander rutschen und zu Darstellungsfehlern führen. Der Standardwert beträgt hier 400px.

Höhe

Mit der Option “Höhe” wird die absolute Höhe der Spalten angegegeben. Sollte der Inhalt einer Spalte höher sein als der eingestellte Wert, wird dieser abgeschnitten. Auch diese Option dient dazu, Darstellungsfehler zu vermeiden, die durch unterschiedliche Spaltenhöhen entstehen können. Der Standardwert beträgt hier 400px.

Häufige Fehler

Wie auch im Header gibt es auch im Footer ein paar Fehler, die eine unschöne Darstellung verursachen können. Wie diese wieder rückgängig gemacht, beziehungsweise komplett vermieden werden können, möchte ich in diesem Abschnitt einmal erläutern.

Die erste Spalte des Footers ist leer

Dieser Fehler passiert sehr häufig nach einem Update aus einer Shopversion, in der noch das EyeCandy-Template genutzt worden ist.

Wenn im EyeCandy die Box “Mehr über” deaktiviert worden ist, wird diese auch nach dem Update auf das Honeygrid-Template nicht mehr angezeigt. Da diese aber für die Darstellung der ersten Footer-Spalte genutzt wird, ist die Spalte folglich leer. Natürlich lässt sich das Problem auch auslösen, in dem die Box “Mehr über” im StyleEdit 3 deaktiviert wird.

 

Erste Footer-Spalte ist leer

Abb. 4: Erste Footer-Spalte ist leer

 

Um das Problem zu lösen, öffnet einfach den StyleEdit 3 eures Shops und öffnet hier in der Bearbeitung des Styles den Punkt “Menübox Positionen”. Dort sucht ihr den Punkt “Mehr über” und aktiviert die Box einfach wieder mit einem Klick auf den Schalter. Nach dem Abspeichern des Styles und dem Schließen des StyleEdit 3, wird die Box dann wieder in der ersten Spalte des Footers angezeigt.

Footer doppelt vorhanden

Etwas seltener ist das Problem, dass zwei Footer übereinander angezeigt werden. Ursache ist hier auch häufig ein Update von einem Shop, der vorher EyeCandy oder ein EyeCandy-basiertes Template verwendet hat.

Der Content für den gesamten Inhalt des Footers aus dem EyeCandy wird nämlich nach einem Update für den Footer-Header im Honeygrid benutzt. Wurde dort also der gesamte Footer aufgebaut und gestaltet, kann es dazu kommen, dass dieser zusätzlich zu den Spalten des Footer-Bodys angezeigt wird, was dann in dieser Dopplung resultiert.

 

Footer doppelt vorhanden

Abb. 5: Footer doppelt vorhanden

 

Die Lösung dieses Darstellungsproblems ist auch hier relativ simpel: Übertragt die Inhalte, die ihr aus dem alten Footer behalten wollt, in die neue Struktur der Footer-Spalten und entfernt dann den Inhalt aus dem Content für den Footer-Header. Anschließend ist das Problem gelöst.

Höhe und Mindesthöhe zu niedrig gewählt

Wenn die beiden Optionen “Höhe” und “Mindesthöhe” zu niedrig eingestellt werden, die Inhalte der Footer-Spalten aber eigentlich höher sind als der eingestellte Wert, kann es dazu kommen, dass die Inhalte der Spalten unten abgeschnitten werden. Dies sieht in der Regel nicht wirklich gut aus und sollte dann entsprechend korrigiert werden.

 

Höhen falsch konfiguriert

Abb. 6: Höhen falsch konfiguriert

 

Zu lösen ist auch dieses Problem relativ einfach: Passt entweder die Inhalte eurer Footer-Spalten so an, dass sie nicht mehr zu hoch sind oder erhöht die Werte für die beiden Optionen “Höhe” und “Mindesthöhe”, so dass wieder genug Platz vorhanden ist.

Gesamte Spaltenanzahl zu hoch

Wie eigentlich das gesamte Honeygrid Template, basiert auch der Footer auf Bootstrap und nutzt dessen Grid-System. Im StyleEdit 3 habt ihr die Möglichkeit, die Spaltenverteilung der einzelnen Spalten anzupassen, wenn die gleichmäßige Verteilung auf die vier Footer-Spalten nicht zu eurem gewünschten Design passt.

Hierbei kann es passieren, dass die maximal erlaubte Spaltenanzahl von zwölf Spalten überschritten wird. Das Ergebnis ist eine verschobene Darstellung des gesamten Footers, da dann die Spalten nicht mehr genug Platz haben, um nebeneinander dargestellt zu werden.

 

Umbruch wegen einer zu hohen Spaltenanzahl

Abb. 7: Umbruch wegen einer zu hohen Spaltenanzahl

 

Um dieses Umbrechen der einzelnen Footer-Spalten zu verhindern, passt die Verteilung der Gridspalten so an, dass sie in der Summe nicht mehr als zwölf ergeben. Anschließend werden dann die Footer-Spalten wieder richtig nebeneinander angezeigt.

Inhalte zu groß und nicht responsiv eingebunden

Wenn in den einzelnen Footer-Spalten recht große Bilder eingebunden werden sollen, kann es dazu kommen, dass diese die Darstellung des Footers beeinflussen, beziehungsweise Darstellungsfehler auslösen, sollten sie nicht responsiv eingebunden worden sein.

 

Bild nicht responsiv eingebunden

Abb. 8: Bild nicht responsiv eingebunden

 

Achtet daher im Content Manager direkt darauf, dass die Bilder responsiv eingebunden werden, so dass sie sich dem verfügbaren Platz anpassen können.

Wie ihr dies umsetzen könnt, möchte ich im Folgenden einmal beschreiben:

In der Bearbeitung eines Contents habt ihr den CKEditor als WYSIWYG (What You See Is What You Get)-Editor. Wenn ihr über diesen ein Bild einfügen wollt, öffnet sich ein kleines Fenster mit allerlei Optionen zum Bild:

 

Optionen beim Einfügen eines Bildes per CKEditor

Abb. 9: Optionen beim Einfügen eines Bildes per CKEditor

 

Achtet hier zunächst darauf, dass nach dem Hochladen des Bildes keine Werte für “Höhe” und “Breite” eingetragen sind, da diese der responsiven Einbindung im Weg stehen. Sollten hier bereits Zahlen stehen, entfernt diese, tragt aber bitte keine neuen Werte mehr ein. Die Felder müssen leer bleiben.

Wechselt anschließend in den Tab “Erweitert”, der sich auch in dem kleinen Fenster zum Einbinden von Bildern befindet. Hier findet ihr ein Eingabefeld mit dem Label “Formatvorlagenklassen”. Tragt dort folgendes ein:

img-responsive

 

Erweiterte Bildoptionen des CKEditors

Abb. 10: Erweiterte Bildoptionen des CKEditors

 

Damit weiß das Honeygrid-Template dann später, dass es sich hierbei um ein Bild handelt, welches sich dem maximal verfügbaren Platz anpassen soll und verkleinert dies dann entsprechend. Nach dem Speichern des Contents sollte dann die Darstellung des Footers wieder in Ordnung sein.

Tipp:
Um diese Einstellungen bei einem schon bestehenden Bild vorzunehmen muss das bestehende Bild nicht gelöscht werden. Macht in der Bearbeitung des Contents, der das Bild enthält einfach einen Doppelklick auf das Bild. Danach öffnet sich dann das Fenster für die Bildeinstellungen erneut und ihr könnt eventuelle Fehler korrigieren.

Tipps und Tricks

Nachdem wir uns nun mit den häufigsten Fehlern und ihren Lösungen beschäftigt haben, möchte ich noch ein paar Tipps und Tricks präsentieren, mit denen ihr das Beste aus eurem Footer herausholen könnt.

Weniger ist mehr

Wie auch schon beim Header erwähnt, ist es auch im Footer sinnvoll zu überlegen, was wirklich Wert ist, im Footer angezeigt zu werden. Ein zu voller und überladener Footer wirkt genau so schnell unausgewogen wie ein überladener Header. Es sollten also wirklich nur die Informationen angezeigt werden, die auch einen Mehrwert für den Kunden bieten.

Dies können Logos der Zahlungsweisen sein, die ihr im Shop anbietet oder auch Logos der von euch verwendeten Versanddienstleister. Diese sollten allerdings voneinander getrennt in verschiedenen Spalten eingebunden werden.

Eine andere beliebte Option ist das Einbinden von Links zu Social Media Kanälen, auf denen man selbst aktiv ist. Als Beispiel kann hier die Variante aus unserem Testshop 1 dienen. Wenn ihr diese Darstellung übernehmen wollt, reicht es aus, wenn ihr folgenden Quellcode in den Content “Footer 4. Spalte” einfügt:

<ul class=“social-media-icons“>
<li><a class=“facebook“ href=“#“><i class=“fa fa-facebook-f“></i></a></li>
<li><a class=“twitter“ href=“#“><i class=“fa fa-twitter“></i></a></li>
<li><a class=“instagram“ href=“#“><i class=“fa fa-instagram“></i></a></li>
<li><a class=“youtube“ href=“#“><i class=“fa fa-youtube“></i></a></li>
<li><a class=“googleplus“ href=“#“><i class=“fa fa-google-plus“></i></a></li>
</ul>

Ihr müsst hier dann lediglich die Links zu euren Social Media Auftritten im href eintragen. Das Styling für diese Icons ist bereits im Honeygrid-Template hinterlegt, sodass ihr hier keinen weiteren Aufwand habt.

Nicht zu viel Mischen

Wie unter “Weniger ist mehr” bereits erwähnt, ist es sinnvoll, die im Footer präsentierten Inhalte nach Themen zu gruppieren und voneinander zu trennen. Dies fördert die Übersicht und macht einen seriöseren Eindruck. Achtet auch darauf, dass ihr nicht zu viel Text und Bilder im Wechsel verwendet, um die Übersicht nicht zu gefährden.

Box “Mehr über” aus dem Footer entfernen oder um eigenen Inhalt erweitern

Soll die Box “Mehr über” nicht in der ersten Spalte des Footers dargestellt oder soll diese noch um zusätzlichen Content erweitert werden, so ist das über eine kleine Anpassung des Templates möglich. 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 Datei templates/Honeygrid/module/footer.html und nennt diese footer-USERMOD.html. Löscht die Originaldatei dabei aber bitte auf keinen Fall. Diese muss in jedem Fall erhalten bleiben.

Öffnet eure footer-USERMOD.html und sucht da nach folgendem:

{block name=“module_footer_inside_content1″}
<div class=“footer-col-1″>{menubox name=content}</div>
{/block}

Wollt ihr statt der Box “Mehr über” einfach eine andere Box an dieser Stelle einfügen so tauscht bei {menubox name=content} einfach das “content” gegen die interne Bezeichnung der gewünschten Menübox aus. Diese Bezeichungen findet ihr in der Datei /templates/Honeygrid/template_settings.php in dem Bereich “MENUBOXES“. Achtet hierbei allerdings auch darauf, dass die gewählte Box über den StyleEdit 3 aktiviert wurde, denn sonst seht ihr nach dieser Anpassung nur eine leere erste Footer-Spalte.

Um die Box “Mehr über” durch einen eigenen Content auszutauschen benötigt ihr folgenden kleinen Codeschnipsel:

{content_manager group=XXX}

Diesen fügt ihr für das {menubox name=content} in den obigen Code ein. Anschließend ersetzt ihr das “XXX” mit der ID des Contents, den ihr einbinden wollt. Die ID erfahrt ihr, wenn ihr im neuen Content Manager in der Übersicht mit der Maus über den gewünschten Content hovert. Die ID wird dann in einem extra Tooltip angezeigt. Im alten Content Manager ist die ID direkt in der Tabelle der Content Übersicht vermerkt.

Wenn ihr unter der Box “Mehr über” noch zusätzlichen Content einfügen wollt, könnt ihr das mit dem gleichen Code tun, nur dass hier nicht das {menubox name=content} ersetzt wird, sondern der Code einfach darunter eingefügt wird. Das sieht dann wie folgt aus:

{block name=“module_footer_inside_content1″}
<div class=“footer-col-1″>
{menubox name=content}
<br>
{content_manager group=xxx}
</div>
{/block}

Das <br>-Tag dient hier nur dazu einen Umbruch zu erzwingen, damit der neue Content auch garantiert unter dem anderen Inhalt angezeigt wird.

Per Smarty-Block

Legt euch im GXModules-Verzeichnis folgende Struktur an: GXModules/<ModulEntwickler>/

<Modulname>/Shop/Templates/Honeygrid/Module/footer.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 von euch erstellten Datei könnt ihr nun folgenden Block einfügen:

{block name=“module_footer_inside_content1″}
<div class=“footer-col-1″>{menubox name=content}</div>
{/block}

Sämtliche anderen Anpassungen können dann analog vorgenommen werden, wie schon unter “Per USERMOD-System” beschrieben.

Eine weitere Box im Footer statt normaler Spalte

Natürlich kann man auch in den anderen Footer-Spalten Boxen einbinden, die normalerweise in der linken, vertikalen Navigation angezeigt werden. Das Vorgehen ist dabei sehr ähnlich wie gerade schon beschrieben.

Per USERMOD-System:

Auch hier brauchen wir wieder eine footer-USERMOD.html, die wie oben beschrieben zu erstellen ist. Solltet ihr schon eine footer-USERMOD.html haben, so können eure weiteren Änderungen natürlich in dieser durchgeführt werden.

Für mein Beispiel werde ich die zweite Spalte des Footers anpassen, die notwendigen Schritte lassen sich aber komplett auf die anderen Spalten übertragen. Sucht in eurer footer-USERMOD.html nach folgendem Code-Block:

{block name=“module_footer_inside_content2″}
<div class=“footer-col-2″>{content_manager group=4321005}</div>
{/block}

Hier ersetzen wir nun das {content_manager group=4321005} mit {menubox name=XXX} und ersetzen das XXX mit dem internen Namen der Box, die ihr in der Spalte anzeigen wollt. Wie ihr den internen Namen einer Menübox herausbekommt, hatte ich weiter oben ja schon beschrieben und wird deswegen hier nicht mehr extra erwähnt.

Wenn ihr die Box zusätzlich zum eigentlichen Content einfügen wollt, funktioniert das auch hier analog zur Anpassung der ersten Footer-Spalte. Ein mögliches Endergebnis könnte dann wie folgt aussehen:

{block name=“module_footer_inside_content2″}
<div class=“footer-col-2″>

{content_manager group=4321005}
<br>

{menubox name=XXX}
</div>
{/block}

Per Smarty-Block:

Legt euch auch hierfür wie oben schon beschrieben eine footer.html im GXModules-Verzeichnis an. Solltet ihr diese schon haben kann dieser Schritt natürlich übersprungen werden.

Mein Beispiel bezieht sich auch hier wieder auf eine Anpassung der zweiten Footer-Spalte, kann aber auch auf alle übrigen Spalten übertragen werden.

Fügt in eurer erstellten footer.html folgenden Block ein oder den Smarty-Block, den ihr überladen wollt:

{block name=“module_footer_inside_content2″}
<div class=“footer-col-2″>{content_manager group=4321005}</div>
{/block}

Nehmt dann in diesem eingefügten Block die Änderungen vor, wie sie auch schon unter “Per USERMOD-System” beschrieben worden sind.

Zusätzliche Footer-Spalte(n) hinzufügen

Das Hinzufügen von neuen Spalten im Footer erfordert ein paar mehr Kniffe und ist daher eher etwas für Experten beziehungsweise für Template-Entwickler. Wie sich dies bewerkstelligen lässt, haben wir unter developers.gambio.de beschrieben.

Abschluss

Das war es auch schon wieder von mir. Ich hoffe ihr konntet dieses Tutorial dazu nutzen euren Footer zu optimieren oder konntet Anregungen finden, diesen zu gestalten.

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