{"id":10075,"date":"2018-06-19T13:30:23","date_gmt":"2018-06-19T11:30:23","guid":{"rendered":"https:\/\/www.gambio.de\/blog\/?p=10075"},"modified":"2018-06-21T13:14:32","modified_gmt":"2018-06-21T11:14:32","slug":"styleedit-3-tutorials-teil-3-footer","status":"publish","type":"post","link":"https:\/\/www.gambio.de\/blog\/styleedit-3-tutorials-teil-3-footer\/","title":{"rendered":"StyleEdit 3-Tutorials (Teil 4): Anpassen des Footers"},"content":{"rendered":"

Von ganz oben nach ganz unten: Nachdem wir vor kurzem viel \u00fcber den Header gelernt<\/a> haben, m\u00f6chte 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\u00f6rt zu einer guten Shopgestaltung einfach dazu.<\/p>\n

H\u00e4ufig verkommt dieser allerdings zu einer Ansammlung von Links oder wird mit zu vielen Bildern \u00fcberladen. Um diese – und noch andere h\u00e4ufige Fehler bei der Gestaltung des Footers – m\u00f6chte ich mich mit diesem Tutorial k\u00fcmmern<\/p>\n\n

Grunds\u00e4tzliches<\/h2>\n

Der Footer gliedert sich in zwei Bereiche. Zum einen gibt es dort den Footer-Header und dann den in Spalten aufgeteilten Footer-Body.<\/p>\n

In der ersten Spalte des Footer-Bodys findet sich eine Auflistung von Links diverser Contentseiten. Hierbei handelt es sich um die Box \u201cMehr \u00fcber\u201d, welche im EyeCandy-Template noch in der linken Men\u00fcleiste 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.<\/p>\n

Soll hier die Sortierreihenfolge der Links bearbeiten werdne, geht dies per Drag and Drop. Eintr\u00e4ge, die im Admin weiter oben aufgef\u00fchrt werden, werden sp\u00e4ter auch im Footer weiter oben gelistet. Soll ein Content, der zun\u00e4chst in einem anderen Bereich einsortiert war, als Link in der Box \u201cMehr \u00fcber\u201d erscheinen, so kann dieser auch per Drag and Drop in den Bereich \u201cInfoseiten\u201d verschoben werden.<\/p>\n

Die Inhalte aller weiteren Spalten k\u00f6nnen direkt \u00fcber den Content Manager bef\u00fcllt werden. Wechselt hierf\u00fcr im Content Manager in den Tab \u201cElemente\u201d, in dem ihr den Bereich Footer findet. Dort findet ihr die Eintr\u00e4ge \u201cFooter\u201d, \u201cFooter 2. Spalte\u201d, \u201cFooter 3. Spalte\u201d und \u201cFooter 4. Spalte\u201d.<\/p>\n

Mit dem Content \u201cFooter\u201d k\u00f6nnt ihr Inhalte im Footer-Header platzieren, w\u00e4hrend die anderen Content-Elemente f\u00fcr die einzelnen Spalten verwendet werden k\u00f6nnen.<\/p>\n

Erkl\u00e4rungsw\u00fcrdige Begriffe<\/h2>\n

Auch bei der Konfiguration haben sich ein paar Begriffe versteckt, die einer kurzen Erkl\u00e4rung bed\u00fcrfen, da sie nicht direkt f\u00fcr jeden verst\u00e4ndlich sind. Um diese soll es nun in diesem Teil des Tutorials gehen, damit wir sp\u00e4ter voll in die Materie einsteigen k\u00f6nnen.<\/p>\n

Footer Header<\/h3>\n

Der Footer Header ist sozusagen das Kopf-Element eines Footers. Er wird nur dann angezeigt, wenn sich im Content \u201cFooter\u201d Inhalt befindet und dieser sichtbar geschaltet ist. Andernfalls wird er einfach ausgeblendet.<\/p>\n

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 \u00fcber die volle Breite dargestellt wird. (Live-Beispiel<\/a>)<\/p>\n

Ein anderer Anwendungsfall k\u00f6nnte 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<\/a>)<\/p>\n

 <\/p>\n

\"Beispielhafte<\/a>

Abb. 1: Beispielhafte Darstellung eines Footer-Headers<\/p><\/div>\n

Footer Body<\/h3>\n

Der Footer Body ist das Hauptelement des Footers. Er beinhaltet alle weiteren Inhalte, die im Footer platziert und dargestellt werden k\u00f6nnen. Dazu geh\u00f6ren auch die einzelnen Footer-Spalten.<\/p>\n

 <\/p>\n

\"Beispielhafte<\/a>

Abb. 2: Beispielhafte Darstellung des Footer-Body<\/p><\/div>\n

Footer-Spalten<\/h3>\n

Der Footer Body gliedert sich in einem unangepassten Honeygrid-Template in vier Spalten. Die erste Spalte beinhaltet immer die Box \u201cMehr \u00fcber\u201d, die eine Liste wichtiger Content-Links zur Verf\u00fcgung stellt. Die \u00fcbrigen drei Boxen findet ihr unter Content Manager > Elemente und k\u00f6nnen nach belieben von euch mit Inhalt gef\u00fcllt werden.<\/p>\n

 <\/p>\n

\"Beispielhafte<\/a>

Abb. 3: Beispielhafte Darstellung der Footer-Spalten<\/p><\/div>\n

Mindesth\u00f6he<\/h3>\n

Mit der Option \u201cMindesth\u00f6he\u201d k\u00f6nnt 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\u00fcrden dann untereinander rutschen und zu Darstellungsfehlern f\u00fchren. Der Standardwert betr\u00e4gt hier 400px.<\/p>\n

H\u00f6he<\/h3>\n

Mit der Option \u201cH\u00f6he\u201d wird die absolute H\u00f6he der Spalten angegegeben. Sollte der Inhalt einer Spalte h\u00f6her sein als der eingestellte Wert, wird dieser abgeschnitten. Auch diese Option dient dazu, Darstellungsfehler zu vermeiden, die durch unterschiedliche Spaltenh\u00f6hen entstehen k\u00f6nnen. Der Standardwert betr\u00e4gt hier 400px.<\/p>\n

H\u00e4ufige Fehler<\/h2>\n

Wie auch im Header gibt es auch im Footer ein paar Fehler, die eine unsch\u00f6ne Darstellung verursachen k\u00f6nnen. Wie diese wieder r\u00fcckg\u00e4ngig gemacht, beziehungsweise komplett vermieden werden k\u00f6nnen, m\u00f6chte ich in diesem Abschnitt einmal erl\u00e4utern.<\/p>\n

Die erste Spalte des Footers ist leer<\/h3>\n

Dieser Fehler passiert sehr h\u00e4ufig nach einem Update aus einer Shopversion, in der noch das EyeCandy-Template genutzt worden ist.<\/p>\n

Wenn im EyeCandy die Box \u201cMehr \u00fcber\u201d deaktiviert worden ist, wird diese auch nach dem Update auf das Honeygrid-Template nicht mehr angezeigt. Da diese aber f\u00fcr die Darstellung der ersten Footer-Spalte genutzt wird, ist die Spalte folglich leer. Nat\u00fcrlich l\u00e4sst sich das Problem auch ausl\u00f6sen, in dem die Box \u201cMehr \u00fcber\u201d im StyleEdit 3 deaktiviert wird.<\/p>\n

 <\/p>\n

\"Erste<\/a>

Abb. 4: Erste Footer-Spalte ist leer<\/p><\/div>\n

 <\/p>\n

Um das Problem zu l\u00f6sen, \u00f6ffnet einfach den StyleEdit 3 eures Shops und \u00f6ffnet hier in der Bearbeitung des Styles den Punkt \u201cMen\u00fcbox Positionen\u201d. Dort sucht ihr den Punkt \u201cMehr \u00fcber\u201d und aktiviert die Box einfach wieder mit einem Klick auf den Schalter. Nach dem Abspeichern des Styles und dem Schlie\u00dfen des StyleEdit 3, wird die Box dann wieder in der ersten Spalte des Footers angezeigt.<\/p>\n

Footer doppelt vorhanden<\/h3>\n

Etwas seltener ist das Problem, dass zwei Footer \u00fcbereinander angezeigt werden. Ursache ist hier auch h\u00e4ufig ein Update von einem Shop, der vorher EyeCandy oder ein EyeCandy-basiertes Template verwendet hat.<\/p>\n

Der Content f\u00fcr den gesamten Inhalt des Footers aus dem EyeCandy wird n\u00e4mlich nach einem Update f\u00fcr den Footer-Header im Honeygrid benutzt. Wurde dort also der gesamte Footer aufgebaut und gestaltet, kann es dazu kommen, dass dieser zus\u00e4tzlich zu den Spalten des Footer-Bodys angezeigt wird, was dann in dieser Dopplung resultiert.<\/p>\n

 <\/p>\n

\"Footer<\/a>

Abb. 5: Footer doppelt vorhanden<\/p><\/div>\n

 <\/p>\n

Die L\u00f6sung dieses Darstellungsproblems ist auch hier relativ simpel: \u00dcbertragt 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\u00fcr den Footer-Header. Anschlie\u00dfend ist das Problem gel\u00f6st.<\/p>\n

H\u00f6he und Mindesth\u00f6he zu niedrig gew\u00e4hlt<\/h3>\n

Wenn die beiden Optionen \u201cH\u00f6he\u201d und \u201cMindesth\u00f6he\u201d zu niedrig eingestellt werden, die Inhalte der Footer-Spalten aber eigentlich h\u00f6her 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.<\/p>\n

 <\/p>\n

\"H\u00f6hen<\/a>

Abb. 6: H\u00f6hen falsch konfiguriert<\/p><\/div>\n

 <\/p>\n

Zu l\u00f6sen ist auch dieses Problem relativ einfach: Passt entweder die Inhalte eurer Footer-Spalten so an, dass sie nicht mehr zu hoch sind oder erh\u00f6ht die Werte f\u00fcr die beiden Optionen \u201cH\u00f6he\u201d und \u201cMindesth\u00f6he\u201d, so dass wieder genug Platz vorhanden ist.<\/p>\n

Gesamte Spaltenanzahl zu hoch<\/h3>\n

Wie eigentlich das gesamte Honeygrid Template, basiert auch der Footer auf Bootstrap und nutzt dessen Grid-System. Im StyleEdit 3 habt ihr die M\u00f6glichkeit, die Spaltenverteilung der einzelnen Spalten anzupassen, wenn die gleichm\u00e4\u00dfige Verteilung auf die vier Footer-Spalten nicht zu eurem gew\u00fcnschten Design passt.<\/p>\n

Hierbei kann es passieren, dass die maximal erlaubte Spaltenanzahl von zw\u00f6lf Spalten \u00fcberschritten wird. Das Ergebnis ist eine verschobene Darstellung des gesamten Footers, da dann die Spalten nicht mehr genug Platz haben, um nebeneinander dargestellt zu werden.<\/p>\n

 <\/p>\n

\"Umbruch<\/a>

Abb. 7: Umbruch wegen einer zu hohen Spaltenanzahl<\/p><\/div>\n

 <\/p>\n

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\u00f6lf ergeben. Anschlie\u00dfend werden dann die Footer-Spalten wieder richtig nebeneinander angezeigt.<\/p>\n

Inhalte zu gro\u00df und nicht responsiv eingebunden<\/h3>\n

Wenn in den einzelnen Footer-Spalten recht gro\u00dfe Bilder eingebunden werden sollen, kann es dazu kommen, dass diese die Darstellung des Footers beeinflussen, beziehungsweise Darstellungsfehler ausl\u00f6sen, sollten sie nicht responsiv eingebunden worden sein.<\/p>\n

 <\/p>\n

\"Bild<\/a>

Abb. 8: Bild nicht responsiv eingebunden<\/p><\/div>\n

 <\/p>\n

Achtet daher im Content Manager direkt darauf, dass die Bilder responsiv eingebunden werden, so dass sie sich dem verf\u00fcgbaren Platz anpassen k\u00f6nnen.<\/p>\n

Wie ihr dies umsetzen k\u00f6nnt, m\u00f6chte ich im Folgenden einmal beschreiben:<\/strong><\/p>\n

In der Bearbeitung eines Contents habt ihr den CKEditor als WYSIWYG (What You See Is What You Get)-Editor. Wenn ihr \u00fcber diesen ein Bild einf\u00fcgen wollt, \u00f6ffnet sich ein kleines Fenster mit allerlei Optionen zum Bild:<\/p>\n

 <\/p>\n

\"Optionen<\/a>

Abb. 9: Optionen beim Einf\u00fcgen eines Bildes per CKEditor<\/p><\/div>\n

 <\/p>\n

Achtet hier zun\u00e4chst darauf, dass nach dem Hochladen des Bildes keine Werte f\u00fcr \u201cH\u00f6he\u201d und \u201cBreite\u201d 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\u00fcssen leer bleiben.<\/p>\n

Wechselt anschlie\u00dfend in den Tab \u201cErweitert\u201d, der sich auch in dem kleinen Fenster zum Einbinden von Bildern befindet. Hier findet ihr ein Eingabefeld mit dem Label \u201cFormatvorlagenklassen\u201d. Tragt dort folgendes ein:<\/p>\n

img-responsive<\/b><\/p>\n

 <\/p>\n

\"Erweiterte<\/a>

Abb. 10: Erweiterte Bildoptionen des CKEditors<\/p><\/div>\n

 <\/p>\n

Damit wei\u00df das Honeygrid-Template dann sp\u00e4ter, dass es sich hierbei um ein Bild handelt, welches sich dem maximal verf\u00fcgbaren Platz anpassen soll und verkleinert dies dann entsprechend. Nach dem Speichern des Contents sollte dann die Darstellung des Footers wieder in Ordnung sein.<\/p>\n

Tipp:<\/strong>
\nUm diese Einstellungen bei einem schon bestehenden Bild vorzunehmen muss das bestehende Bild nicht gel\u00f6scht werden. Macht in der Bearbeitung des Contents, der das Bild enth\u00e4lt einfach einen Doppelklick auf das Bild. Danach \u00f6ffnet sich dann das Fenster f\u00fcr die Bildeinstellungen erneut und ihr k\u00f6nnt eventuelle Fehler korrigieren.<\/div>\n

Tipps und Tricks<\/h2>\n

Nachdem wir uns nun mit den h\u00e4ufigsten Fehlern und ihren L\u00f6sungen besch\u00e4ftigt haben, m\u00f6chte ich noch ein paar Tipps und Tricks pr\u00e4sentieren, mit denen ihr das Beste aus eurem Footer herausholen k\u00f6nnt.<\/p>\n

Weniger ist mehr<\/h3>\n

Wie auch schon beim Header erw\u00e4hnt, ist es auch im Footer sinnvoll zu \u00fcberlegen, was wirklich Wert ist, im Footer angezeigt zu werden. Ein zu voller und \u00fcberladener Footer wirkt genau so schnell unausgewogen wie ein \u00fcberladener Header. Es sollten also wirklich nur die Informationen angezeigt werden, die auch einen Mehrwert f\u00fcr den Kunden bieten.<\/p>\n

Dies k\u00f6nnen 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.<\/p>\n

Eine andere beliebte Option ist das Einbinden von Links zu Social Media Kan\u00e4len, auf denen man selbst aktiv ist. Als Beispiel kann hier die Variante aus unserem Testshop 1<\/a> dienen. Wenn ihr diese Darstellung \u00fcbernehmen wollt, reicht es aus, wenn ihr folgenden Quellcode in den Content \u201cFooter 4. Spalte\u201d einf\u00fcgt:<\/p>\n

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

Ihr m\u00fcsst hier dann lediglich die Links zu euren Social Media Auftritten im href<\/b> eintragen. Das Styling f\u00fcr diese Icons ist bereits im Honeygrid-Template hinterlegt, sodass ihr hier keinen weiteren Aufwand habt.<\/p>\n

Nicht zu viel Mischen<\/h3>\n

Wie unter \u201cWeniger ist mehr\u201d bereits erw\u00e4hnt, ist es sinnvoll, die im Footer pr\u00e4sentierten Inhalte nach Themen zu gruppieren und voneinander zu trennen. Dies f\u00f6rdert die \u00dcbersicht und macht einen seri\u00f6seren Eindruck. Achtet auch darauf, dass ihr nicht zu viel Text und Bilder im Wechsel verwendet, um die \u00dcbersicht nicht zu gef\u00e4hrden.<\/p>\n

Box \u201cMehr \u00fcber\u201d aus dem Footer entfernen oder um eigenen Inhalt erweitern<\/h2>\n

Soll die Box \u201cMehr \u00fcber\u201d nicht in der ersten Spalte des Footers dargestellt oder soll diese noch um zus\u00e4tzlichen Content erweitert werden, so ist das \u00fcber eine kleine Anpassung des Templates m\u00f6glich. 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:<\/h3>\n

Erstellt euch eine Kopie der Datei templates\/Honeygrid\/module\/footer.html und nennt diese footer-USERMOD.html. L\u00f6scht die Originaldatei dabei aber bitte auf keinen Fall. Diese muss in jedem Fall erhalten bleiben.<\/p>\n

\u00d6ffnet eure footer-USERMOD.html und sucht da nach folgendem:<\/p>\n

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

Wollt ihr statt der Box \u201cMehr \u00fcber\u201d einfach eine andere Box an dieser Stelle einf\u00fcgen so tauscht bei {menubox name=content}<\/b> einfach das \u201ccontent\u201d gegen die interne Bezeichnung der gew\u00fcnschten Men\u00fcbox aus. Diese Bezeichungen findet ihr in der Datei \/templates\/Honeygrid\/template_settings.php in dem Bereich \u201cMENUBOXES\u201c. Achtet hierbei allerdings auch darauf, dass die gew\u00e4hlte Box \u00fcber den StyleEdit 3 aktiviert wurde, denn sonst seht ihr nach dieser Anpassung nur eine leere erste Footer-Spalte.<\/p>\n

Um die Box \u201cMehr \u00fcber\u201d durch einen eigenen Content auszutauschen ben\u00f6tigt ihr folgenden kleinen Codeschnipsel:<\/p>\n

{content_manager group=XXX}<\/em><\/p>\n

Diesen f\u00fcgt ihr f\u00fcr das {menubox name=content}<\/b> in den obigen Code ein. Anschlie\u00dfend ersetzt ihr das \u201cXXX\u201d mit der ID des Contents, den ihr einbinden wollt. Die ID erfahrt ihr, wenn ihr im neuen Content Manager in der \u00dcbersicht mit der Maus \u00fcber den gew\u00fcnschten Content hovert. Die ID wird dann in einem extra Tooltip angezeigt. Im alten Content Manager ist die ID direkt in der Tabelle der Content \u00dcbersicht vermerkt.<\/p>\n

Wenn ihr unter der Box \u201cMehr \u00fcber\u201d noch zus\u00e4tzlichen Content einf\u00fcgen wollt, k\u00f6nnt ihr das mit dem gleichen Code tun, nur dass hier nicht das {menubox name=content}<\/b> ersetzt wird, sondern der Code einfach darunter eingef\u00fcgt wird. Das sieht dann wie folgt aus:<\/p>\n

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

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

Per Smarty-Block<\/h3>\n

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

<Modulname>\/Shop\/Templates\/Honeygrid\/Module\/footer.html. <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 von euch erstellten Datei k\u00f6nnt ihr nun folgenden Block einf\u00fcgen:<\/p>\n

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

S\u00e4mtliche anderen Anpassungen k\u00f6nnen dann analog vorgenommen werden, wie schon unter \u201cPer USERMOD-System\u201d beschrieben.<\/p>\n

Eine weitere Box im Footer statt normaler Spalte<\/h2>\n

Nat\u00fcrlich kann man auch in den anderen Footer-Spalten Boxen einbinden, die normalerweise in der linken, vertikalen Navigation angezeigt werden. Das Vorgehen ist dabei sehr \u00e4hnlich wie gerade schon beschrieben.<\/p>\n

Per USERMOD-System:<\/h3>\n

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\u00f6nnen eure weiteren \u00c4nderungen nat\u00fcrlich in dieser durchgef\u00fchrt werden.<\/p>\n

F\u00fcr mein Beispiel werde ich die zweite Spalte des Footers anpassen, die notwendigen Schritte lassen sich aber komplett auf die anderen Spalten \u00fcbertragen. Sucht in eurer footer-USERMOD.html nach folgendem Code-Block:<\/p>\n

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

Hier ersetzen wir nun das {content_manager group=4321005}<\/b> mit {menubox name=XXX}<\/b> und ersetzen das XXX mit dem internen Namen der Box, die ihr in der Spalte anzeigen wollt. Wie ihr den internen Namen einer Men\u00fcbox herausbekommt, hatte ich weiter oben ja schon beschrieben und wird deswegen hier nicht mehr extra erw\u00e4hnt.<\/p>\n

Wenn ihr die Box zus\u00e4tzlich zum eigentlichen Content einf\u00fcgen wollt, funktioniert das auch hier analog zur Anpassung der ersten Footer-Spalte. Ein m\u00f6gliches Endergebnis k\u00f6nnte dann wie folgt aussehen:<\/p>\n

{block name=“module_footer_inside_content2″}<\/em>
\n<div class=“footer-col-2″><\/em><\/p>\n

{content_manager group=4321005}<\/em>
\n<br><\/em><\/p>\n

{menubox name=XXX}<\/em>
\n<\/div><\/em>
\n{\/block}<\/em><\/p>\n

Per Smarty-Block:<\/h3>\n

Legt euch auch hierf\u00fcr wie oben schon beschrieben eine footer.html im GXModules-Verzeichnis an. Solltet ihr diese schon haben kann dieser Schritt nat\u00fcrlich \u00fcbersprungen werden.<\/p>\n

Mein Beispiel bezieht sich auch hier wieder auf eine Anpassung der zweiten Footer-Spalte, kann aber auch auf alle \u00fcbrigen Spalten \u00fcbertragen werden.<\/p>\n

F\u00fcgt in eurer erstellten footer.html folgenden Block ein oder den Smarty-Block, den ihr \u00fcberladen wollt:<\/p>\n

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

Nehmt dann in diesem eingef\u00fcgten Block die \u00c4nderungen vor, wie sie auch schon unter \u201cPer USERMOD-System\u201d beschrieben worden sind.<\/p>\n

Zus\u00e4tzliche Footer-Spalte(n) hinzuf\u00fcgen<\/h2>\n

Das Hinzuf\u00fcgen von neuen Spalten im Footer erfordert ein paar mehr Kniffe und ist daher eher etwas f\u00fcr Experten beziehungsweise f\u00fcr Template-Entwickler. Wie sich dies bewerkstelligen l\u00e4sst, haben wir unter developers.gambio.de <\/a>beschrieben.<\/p>\n

Abschluss<\/h2>\n

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.<\/p>\n

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
\n

F\u00fcr aktuelle News aus der Welt des E-Commerce folge uns bei Twitter<\/strong> <\/a><\/p>\n

Selbstverst\u00e4ndlich findest du uns auch bei Facebook<\/strong> <\/a><\/p>\n<\/div>\n

Erstelle mit Gambio ganz einfach noch heute deinen eigenen Onlineshop<\/strong><\/p>\n

Mehr erfahren<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Von ganz oben nach ganz unten: Nachdem wir vor kurzem viel \u00fcber den Header gelernt haben, m\u00f6chte 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\u00f6rt zu einer guten Shopgestaltung einfach dazu. H\u00e4ufig verkommt dieser allerdings zu einer Ansammlung […]<\/p>\n","protected":false},"author":25,"featured_media":9926,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,154],"tags":[541,301,43,597,40,536],"class_list":["post-10075","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","category-shopfunktionen","tag-css","tag-design","tag-e-commerce","tag-footer","tag-gambio","tag-styleedit-3"],"_links":{"self":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/10075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/comments?post=10075"}],"version-history":[{"count":8,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/10075\/revisions"}],"predecessor-version":[{"id":10096,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/10075\/revisions\/10096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/media\/9926"}],"wp:attachment":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/media?parent=10075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/categories?post=10075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/tags?post=10075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}