Wenn Schuhe der letzte Bestandteil eines Outfits sind, dann ist die Fußzeile einer E-Commerce-Website das letzte Element ihres Verkaufsdesigns. Durch die Konzentration auf das unterste Element, die Fußzeile, können moderne Websites ihre Persönlichkeit auf jede erdenkliche Weise zur Geltung bringen. In einem wettbewerbsintensiven E-Commerce-Umfeld gibt es genügend originelle Ideen, Kreativität und Designtrends. Bevor Sie die Fußzeile einer E-Commerce-Website diversifizieren, sollten Sie wichtige Punkte berücksichtigen. Was muss zuerst platziert werden und wie geht das am besten? Unsere Zusammenstellung inspirierender Fußzeilendesigns bietet einige interessante Optionen.
Lesen Sie auch: 13 E-Commerce-Marketingtrends für 2019
Interessante Statistiken von Chartbeat. Eine Untersuchung des Verhaltens von 25 Millionen Nutzern zeigte, wie intensiv sie Seiten durchsuchen. Es stellt sich heraus, dass die Aufmerksamkeit des Benutzers auf den Raum unterhalb der Faltlinie gelenkt wird. Praktischer werden nützliche Informationen Besucher verweilen am längsten im Bereich 1200 Pixel vom oberen Rand der Seite (bei einem durchschnittlichen vertikalen Bildschirm von 700 Pixel im Browser) oder hinter dem zweiten Bildschirm.
Anzeigezeit (Sek.) / Entfernung vom Seitenanfang (Pixel)
Es besteht eine große Lücke in der Betrachtungsdauer des ersten und zweiten Bildschirms. Der TOP beträgt 4 Sekunden, die Dauer erreicht ein Maximum (16 Sekunden) bei 1200 Pixeln von oben und nimmt mit weiterem Scrollen langsam ab.
Anteil der Besucher (%) / Entfernung vom Seitenanfang (Pixel)
Ein erheblicher Teil der Besucher (mehr als 25 %) wartet nicht einmal, bis der Inhalt geladen ist, und beginnt mit dem Scrollen der Seite. Das bedeutet, dass nur 75 % zuerst die oberste Seite sehen. Der am häufigsten angezeigte Bereich der Seite ist 550 Pixel groß (direkt über der Faltlinie).
Die Studie räumt mit dem Mythos auf, dass Nutzer nicht bis zum Ende der Seite scrollen und sich den gesamten Inhalt ansehen. Auch der Footer ist für eine moderne E-Commerce-Seite wichtig und hat sogar seine eigenen Vorteile.
Ideen zur Gestaltung eines „Kellers“ (Fußzeile), Beispiele für den Verkauf von Designs
Mit diesen 10 Tipps erfahren Sie, wie Sie die Fußzeile einer Website schön gestalten – nach den Regeln der Gestaltung im Webdesign und der Lösung vorrangiger Aufgaben. Wenden Sie die am besten geeigneten Taktiken an, um die Benutzerfreundlichkeit und UX (Benutzererfahrung) zu verbessern und sogar den Umsatz zu steigern.
1. Erforderliche Informationen
Traditionell werden die erforderlichen organisatorischen und rechtlichen Aspekte in der Fußzeile der Website behandelt. Benachrichtigungen sind mit weniger auffälligem Text gestaltet, wodurch andere Bereiche der Seiten für aussagekräftigere Elemente frei werden. Hier ist eine Beispielliste, die Sie berücksichtigen sollten:
- Urheberrechtshinweise
- Rechtliche Hinweise
- Abrechnungsdaten
- Cookie-Hinweis
Die Website, auf der das Produkt verkauft wird, muss den gesetzlichen Anforderungen entsprechen und über den Ablauf und die Rückgabefristen informieren. Seine Platzierung in der Fußzeile ist sowohl für die Verkaufsressource als auch für Besucher praktisch.
Fußzeilenbeispiel: Yves Rocher
Online-Shop Warenzeichen Yves Rocher: Vollbild-Fußzeile mit einem schönen Design aus abwechselnden Ebenen. Informiert über das Unternehmen und die Infrastruktur der verkaufenden Website – von der Auftragsverfolgung bis hin zur Richtlinie zu personenbezogenen Daten. Es gibt auch Tipps zur Verwendung des Produkts, Boni und Werbeaktionen
Beispielfußzeile: Lumity
Für Händler von Nahrungsergänzungsmitteln gelten erhöhte gesetzliche Anforderungen. Verantwortung. Es gibt einige Dinge, die sie auf ihrer Verkaufswebsite sagen sollten bzw. nicht sagen sollten. Links zu rechtlichen Informationen sind zur besseren Sichtbarkeit fett hervorgehoben.
Eine Fußzeile mit einem schönen Hintergrundbild fügt sich sehr organisch in das Gesamtdesign der Website ein. Es gibt keine klare Grenze, vielmehr dient der Inhalt selbst als Trennzeichen
Beispielfußzeile: Saddleback Leather Co
Eine Verkaufswebsite mit einem wunderschönen Retro-Kopf- und Fußzeilendesign. 100 Jahre Garantie auf Material- und Verarbeitungsfehler. Die Rückgabebedingungen werden von interessanten Geschichten begleitet... Es stellt sich heraus, dass mit den notwendigen E-Commerce-Informationen nicht alles so traurig ist
2. Negativraum – ausreichender Sichtabstand
Wenn Sie die Anzahl der Fußzeilen-Links begrenzen, sollten Sie nicht an negativem Platz sparen – dies wird einen erstaunlichen Effekt auf die visuelle Wahrnehmung haben und die Lesbarkeit verbessern. Allgemeine Regel: Durch die Wahrung der visuellen Hierarchie werden zentrale Elemente schneller wahrgenommen (können zu Ihrem Vorteil genutzt werden!).
Fußzeilenbeispiel: QUAY AUSTRALIA
Mit einem minimalistischen Stil und einem festen Dropdown-Menü kann sich der Online-Shop eine großzügige Fußzeile leisten
Beispiel für eine Fußzeile: Incase
Über einen großen Mikronegativraum (zwischen kleinen Elementen) können wir Folgendes sagen: Solange alle notwendigen Informationen vorhanden, lesbar und schnell wahrnehmbar sind, ist alles in Ordnung
Beispielfußzeile: Stumptown Coffee Roasters
Die großzügige Fußzeile einer Kaffeeseite ist eine hervorragende Ergänzung einer klaren Designkomposition, in der viel makronegativer Raum („Luft“ zwischen Abschnitten/Abschnitten) vorhanden ist.
3. Letzter Aufruf zum Handeln
Lesen Sie auch: Über 30 Beispiele und Ideen für die Gestaltung von Zielaktionsschaltflächen
Das stilvolle Design der Fußzeile sagt Bände über die Ressource selbst. Wichtig zu beachten: Der Käufer verweilt hier etwas länger als an anderen Stellen der Seite. Eine günstige Gelegenheit für einen weiteren, letzten Aufruf zum Handeln. Oft handelt es sich dabei um ein Abonnement/einen Newsletter, Sie können aber auch einen CTA-Anruf mit der Kontoregistrierung verknüpfen.
Beispiel für eine Fußzeile: Greetabl
Greetabl hat einen schlicht gestalteten unteren Rand seiner Seiten, der einen Aufruf zum Abonnieren enthält. Mit einem Minimum an Elementen wird der Ruf spürbar und im Einklang mit dem türkisfarbenen Hintergrund wird er zur Dekoration der Website
Fußzeilenbeispiel: Ecwid
Schönes Design mit Handlungsaufforderungen am Ende der Seiten. Die Struktur des Verkaufs-Website-Builders ist universell. Für seine Millionen Kunden wurde es in 35 Sprachen übersetzt.
4. Floating Cart – Erhöhung der Verfügbarkeit der Verkaufsfunktionalität
Der Zugriff auf den Warenkorb vom unteren Rand der Website aus ist eine hervorragende Möglichkeit, die Benutzerfreundlichkeit und die Verkaufsqualitäten der Website zu verbessern.
Fußzeilenbeispiel: Lemonadela
Die Verkaufswebsite des Cateringunternehmens ist angenehm anzusehen und für den Käufer bequem
5. Fußzeilennavigation
Der untere Teil der Website ist ideal für Informationen, die nicht oft angezeigt werden: über das Unternehmen, Nutzungsbedingungen und Datenschutzrichtlinien. In diesem Fall besteht die Funktion der Fußzeile darin, alle zu retten. Jemand fühlt sich in der E-Commerce-Umgebung verloren, interessiert sich für die E-Commerce-Infrastruktur und scrollt instinktiv weiter ...
Negativraum ist für die Lesbarkeit von Inhalten unerlässlich. Im Allgemeinen dient die „Fußzeile“ im Gegensatz zu einem Menü oder einer Sitemap nicht der Navigation. Nur in seltenen Fällen platzieren E-Commerce-Seiten einzelne Produktkategorien in der Fußzeile (
Hallo, liebe Leser der Blogseite. Wir führen das Thema Blocklayout fort, das in den drei vorherigen Artikeln begonnen und fortgeführt wurde. Im Prinzip ist es uns bereits gelungen, sowohl ein zwei- als auch ein dreispaltiges Site-Layout zu erstellen, und wir haben es sogar geschafft, die Nuancen der Erstellung eines flüssigen Layouts zu berücksichtigen.
Darüber hinaus wurden in den ersten Artikeln zum Website-Layout () einige grundlegende Konzepte des Webmasterings besprochen, ohne deren Verständnis es ziemlich schwierig wäre, die Nuancen zu verstehen.
Welche Probleme hatten wir mit unserem Website-Layout?
Heute werden wir versuchen, ein kleines Problem zu lösen, das bei dem zuvor erstellten Layout auftreten kann. Am häufigsten tritt diese Situation bei der Anzeige auf großen Monitoren (mit hoher Auflösung) und bei der Anzeige einer Seite mit wenigen Informationen auf.
In diesem Fall kann es vorkommen, dass die Fußzeile nicht bis zum unteren Rand des Bildschirms gedrückt wird, sondern sich fast auf mittlerer Höhe befindet, was in den meisten Fällen hässlich und ästhetisch nicht ansprechend aussieht.
Dennoch ist es meiner Meinung nach notwendig, die Fußzeile ganz unten im Site-Layout zu platzieren, und dies gilt insbesondere dann, wenn die Seitenhöhe geringer ist als die Höhe des Bildschirms des Benutzers. Schematisch lässt sich das so darstellen:
Diese. Das korrekte Fußzeilenverhalten für den Fall, dass auf der Seite nur wenige Informationen vorhanden sind und der Benutzerbildschirm groß ist, sieht wie folgt aus:
Um dies umzusetzen, müssen wir eine Reihe von Manipulationen am Code unseres Layouts vornehmen. Darüber hinaus werden wir nicht nur Änderungen an der Style-Datei vornehmen CSS-Styling Style.css, aber auch in Index.html enthalten HTML Quelltext und Bildung von Div-Blöcken. Aber das Wichtigste zuerst.
Als Beispiel verwenden wir das zuvor erstellte dreispaltige Website-Layout. In diesem Fall sieht Index.html folgendermaßen aus:
Und die folgenden CSS-Eigenschaften wurden in die Datei Style.css geschrieben:
Körper, HTML ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( Hintergrundfarbe: #FFC0FF; klar: beide; )
Nun, das Layout selbst sah ungefähr so aus:
Wie Sie sehen, wird die Fußzeile nicht nach unten gedrückt und entspricht daher nicht unseren Anforderungen (sie befindet sich immer unter der untersten Spalte), sodass wir Anpassungen am Code vornehmen müssen. Das Gleiche kann für ein zweispaltiges Layout und auch für ein Rubber-Layout durchgeführt werden. Die Methode ist universell.
So verschieben Sie die Fußzeile an den unteren Rand des Website-Layouts
Daher müssen wir den Div-Container mit der Fußzeile an den unteren Bildschirmrand verschieben. Dazu müssen Sie zunächst die Höhe der gesamten Seite auf einhundert Prozent einstellen (sie nimmt den gesamten Bildschirm ein). Dies ist notwendig, um anschließend die Größe des Hauptblocks mit dem Layout auf 100 % zu ändern.
Der gesamte Inhalt der Site-Seite wird in den öffnenden und schließenden Body-Tags platziert. Daher müssen wir in Style.css eine weitere CSS-Eigenschaft für das Body-Tag hinzufügen und die Höhe auf 100 % festlegen:
Körper, HTML ( margin:0px; padding:0px; height: 100%; )
Das Erscheinungsbild wird dadurch noch nicht beeinträchtigt, der Hauptblog kann nun aber auf die volle Bildschirmhöhe gestreckt werden. Diese. es war eine Art Vorbereitungsphase.
Grundlegende CSS-Eigenschaften können Sie sich bei Bedarf ansehen. Nun setzen wir den Container Div, der unser gesamtes Layout enthält, auf eine Mindesthöhe von 100 %:
Ich möchte es auch hervorheben (div mit id="maket"). Dazu gebe ich ihm mithilfe der entsprechenden Border()-Eigenschaft einen Rahmen:
Mit der Eigenschaft „Rahmen: solide 3 Pixel schwarz“ können Sie für diesen Container einen festen Rahmen (durchgehend) mit einer Dicke von 3 Pixeln in Schwarz festlegen. Dadurch können Sie auch bei wenigen Informationen auf der Seite deutlich erkennen, dass sich der Container mit dem Layout über die gesamte Höhe des Bildschirms erstreckt:
Jetzt müssen wir den Fußzeilenblock aus dem allgemeinen Container nehmen und ihn direkt nach dem allgemeinen Container darunter platzieren. Was wird es geben? Und die Tatsache, dass die Fußzeile im Layout endlich nach unten geht und nicht wie zuvor an die längste Spalte gedrückt wird. In diesem Fall sieht Index.html folgendermaßen aus:
Bitte beachten Sie, dass sich der Block mit der Fußzeile nicht mehr im allgemeinen Container (maket) befindet und daher seine Breite nicht mehr durch die für maket in der Datei Style.css angegebenen CSS-Eigenschaften reguliert wird. Die Breite der Fußzeile erstreckt sich über den gesamten Bildschirm, sie befindet sich jedoch weiterhin am unteren Bildschirmrand, direkt unter dem Hauptblock:
Doch erneut entsteht ein Problem, denn um die Fußzeile zu sehen, muss man nun im Browser über den Bildschirm scrollen (siehe Bildlaufleiste im Bild oben).
Dies liegt daran, dass der Hauptcontainer (maket) die gesamte Höhe des Bildschirms einnimmt (dies wird durch die Eigenschaft „min-height“ bestimmt: 100 %) und sich die Fußzeile direkt dahinter befindet. Um sie anzuzeigen, müssen Sie scrollen, was bedeutet ist nicht sehr praktisch und funktional.
Sie können dieses Problem lösen, indem Sie einen negativen Abstand für den Div-Container mit der Fußzeile festlegen, sodass dieser um einen Abstand nach oben verschoben wird, der seiner Höhe entspricht. In diesem Fall überlappt der Fußzeilencontainer den Hauptcontainer und passt in die Höhe des Browserbildschirms (d. h. Sie müssen nicht scrollen, um ihn anzuzeigen).
Um jedoch einen negativen Versatz von oben festzulegen, müssen Sie genau diese Höhe der Fußzeile kennen, aber wir wissen sie noch nicht.
Daher legen wir zunächst die Höhe des Containers fest, der die Fußzeile enthält, indem wir die entsprechende Eigenschaft in Style.css festlegen:
#footer( Hintergrundfarbe:#FFC0FF; klar: beide; Höhe: 50 Pixel; )
Und dann legen wir oben einen negativen Rand fest, der seiner Höhe entspricht:
Dadurch kann die Fußzeile genau auf ihre eigene Höhe angehoben werden und somit in den Browserbildschirm passen (Sie können das CSS jetzt entfernen). Grenzgrundstück: solides 3px-Schwarz aus der Regel für maket, damit die Dicke des Rahmens nicht verhindert, dass unser gesamtes Layout, einschließlich der Fußzeile, in die Höhe des Bildschirms passt):
Wie Sie sehen, wird die Bildlaufleiste jetzt nicht im Browser angezeigt und unser gesamtes dreispaltiges blockbasiertes Site-Layout passt auf einen Bildschirm (falls die Seite nur wenige Informationen enthält) und verfügt ganz unten über eine Fußzeile . Das ist genau das, was wir tun mussten.
Wir fügen den Abstandshalter ein und bekämpfen den Internet Explorer
Aber es entsteht ein Problem, das nur angezeigt wird, wenn mehr Informationen auf der Layoutseite vorhanden sind und die folgende Situation auftreten kann:
Es stellt sich heraus, dass es vorkommen kann, dass die Informationen in einer der Layoutspalten die Fußzeile überlappen, was nicht schön aussieht. Dies geschieht aufgrund der berüchtigten negativen Polsterung, die wir dafür festgelegt haben und die dazu beigetragen hat, unseren Keller gegenüber dem Hauptlayout-Container anzuheben.
Diese. Es stellt sich heraus, dass am unteren Bildschirmrand zwei einander überlappende Blöcke im Kellerbereich liegen.
Die Lösung für dieses Problem besteht darin, einen neuen leeren Div-Container (den sogenannten Abstandshalter) in den Hauptcontainer unseres Layouts (maket), an der Stelle, an der sich zuvor der Block mit der Fußzeile befand.
Indem wir diesen neuen Container auf eine Höhe einstellen, die der Höhe der Fußzeile entspricht, können wir verhindern, dass Informationen aus dem Hauptcontainer mit dem Block mit der Fußzeile kollidieren. Weisen wir diesem Container namens Rasporka eine ID () zu und als Ergebnis sieht die Index.html unseres dreispaltigen Layouts so aus:
Und in Style.css werden wir dafür schreiben ( , wodurch die Höhe dieses Abstandscontainers gleich der Höhe des Kellers festgelegt wird:
#rasporka (Höhe: 50px;)
Dadurch wird die Fußzeile von unten nicht auf die im Hauptcontainer enthaltenen Informationen (z. B. den Text in der obersten Spalte) gedrückt, sondern auf einen Bereich, der der Höhe der Fußzeile mit einem Abstandscontainer entspricht, der keine Informationen enthält .
Dadurch vermeiden wir Kollisionen und Verzerrungen in unserem dreispaltigen Layout. Alles wird klar und schön (zart und edel) sein:
Wie ich oben bereits erwähnt habe, muss nun die Breite der Fußzeile separat eingestellt werden, denn... Dieser Container ist nicht mehr Teil des Hauptcontainers. Dazu müssen Sie der CSS-Datei zusätzliche Eigenschaften für die Fußzeile hinzufügen, mit denen Sie deren Breite festlegen und sie horizontal in der Mitte des Bildschirms ausrichten können.
Es ist sinnvoll, die Breite mithilfe der Eigenschaft „Breite“ auf die Breite des gesamten Layouts festzulegen. Die horizontale Ausrichtung kann auf die gleiche Weise erfolgen, wie wir es für das gesamte Layout auf einem Blocklayout getan haben.
Daher müssen wir zusätzliche Eigenschaften für die ID-Fußzeile hinzufügen:
#footer( Hintergrundfarbe:#FFC0FF; klar: beide; Höhe: 20 Pixel; Rand oben: -20 Pixel; Breite: 800 Pixel; Rand links: automatisch; Rand rechts: automatisch; )
Mit der Eigenschaft width:800px wird die Breite auf 800 Pixel eingestellt und mit den beiden Eigenschaften margin-left:auto und margin-right:auto wird der Einzug links und rechts der Fußzeile automatisch eingestellt, wodurch wodurch diese Einzüge gleich sind und unser Held in der Mitte ausgerichtet wird:
Nun, es scheint, als gäbe es nichts mehr zu verbessern, aber das war nicht der Fall. Wie immer unser Lieblingsbrowser Internet Explorer 6 versteht etwas aus den von uns verwendeten CSS-Eigenschaften nicht. In diesem Browser (und vielleicht auch in einigen anderen alten) wird die Fußzeile trotz aller Bemühungen nicht nach unten gedrückt, sondern bleibt immer noch in der obersten Spalte des Site-Layouts.
Dies alles geschieht, weil ( die Eigenschaft min-height: 100% nicht versteht, mit der wir die Mindesthöhe des Hauptblocks festgelegt haben. gleiche Höhe Bildschirm.
Um dieses Problem zu lösen, müssen wir daher einen sogenannten Hack verwenden, der es uns ermöglicht, älteren Browsern (an unseren Fingern) zu erklären, was zu tun ist. Vor Liste von CSS Eigenschaften für maket müssen Sie die folgende Kombination einfügen:
* html #maket ( Höhe: 100 %; )
Diese Regel gilt nur für Internet-Browser Explorer 6, der Rest wird es nicht berücksichtigen und umsetzen.
Das endgültige Aussehen von Style.css mit der Fußzeile am unteren Bildschirmrand sieht also wie folgt aus:
Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # header( Hintergrundfarbe:#C0C000; ) #left( Hintergrundfarbe:#00C0C0; Breite:200px; float:left; ) #right( Breite:200px; Hintergrundfarbe:#FFFF00; float:right; ) #content ( Hintergrundfarbe: #8080FF; Rand links: 202 Pixel; Rand rechts: 202 Pixel; ) #footer (Hintergrundfarbe: # FFC0FF; klar: beide; Höhe: 50 Pixel; Rand oben: -50 Pixel; Breite: 800 Pixel; margin-left: auto; margin-right: auto; ) #rasporka ( height: 50px; )
Nun, die endgültige Form von Index.html wurde oben angegeben. Damit ist diese Artikelserie zum Blocklayout von 2- und 3-spaltigen festen und flüssigen Website-Layouts abgeschlossen.
Sie können sich auch das Video „Arbeiten mit Html-Div-Tags“ ansehen:
Viel Erfolg! Bis bald auf den Seiten der Blog-Site
Du könntest interessiert sein
Blocklayout – Wir erstellen zweispaltige, dreispaltige und fließende Layouts für die Site 
DiV-Layout – Erstellen Sie Blöcke für ein zweispaltiges Layout in HTML, bestimmen Sie deren Größe und legen Sie die Positionierung in CSS fest
Das ist eine Art Albtraum! Warum „taucht“ die Fußzeile Ihrer Website wieder auf und verändert das Design? Ist es wirklich unmöglich, die Fußzeile mit etwas richtig an den unteren Rand der Seite zu drücken? Zumindest Inhalt oder Steine! Brick passt nicht in den Monitor?
Ich verstehe, dann sitzen Sie da und tun Sie nichts, bis Sie unseren Artikel bis zum Ende gelesen haben.
Erstellen Sie die richtige Fußzeile für Ihre Website
Bei vielen Websitebesitzern tritt dieses Problem auf, wenn die Fußzeile der Seite einfach nach oben schwebt. Und dann ist nicht klar, was zu tun ist. Am häufigsten leiden Website-Designs, die Sie in aller Eile selbst erstellt haben, unter diesem Nachteil ( Kreis „verrückte Hände“) oder unerfahrene Webmaster.
Gleichzeitig passiert in den ersten Lebensphasen der Website nichts Schlimmes. Und diese Idylle bleibt so lange bestehen, wie der Inhalt „sein Gewicht“ auf den Keller legt und ihn daran hindert, in die Höhe zu steigen. Es lohnt sich jedoch, kleinere Materialmengen auf der Seite zu platzieren, und die kürzlich „ruhige“ Fußzeile steigt sofort nach oben und verleiht dem gesamten Website-Design ein unangemessenes Aussehen.
Um diesen „Fehler“ der entworfenen Vorlage zu beseitigen, ist es nicht notwendig, Geld für die Dienste eines Webmasters auszugeben. In den meisten Fällen kann die Fußzeile der Website selbst erstellt werden. Betrachten wir alles Möglichkeiten So beheben Sie dieses Problem:
Erster Weg
Die erste Möglichkeit, eine Fußzeile am Ende der Seite zu verankern, basiert auf CSS. Geben wir zunächst den Beispielcode und schauen uns dann seine Implementierung genauer an:
html (Höhe: 100 %;) Kopfzeile, Navigation, Abschnitt, Artikel, Seite, Fußzeile (Anzeige: Block;) Körper (Höhe: 100 %;) #Wrapper (Breite: 1000 Pixel; Rand: 0 automatisch; Mindesthöhe: 100 %; height: auto !important; height: 100%; ) #header ( height: 150px; background-color: rgb(0,255,255); ) #content ( padding: 100px; height:400px; background-color: rgb(51,255,102) ; ) #footer ( Breite: 1000px; Rand: -100px automatisch 0; Höhe: 100px; Position: relativ; Hintergrundfarbe: rgb(51,51,204); )
Zum Anhängen eines Fußzeilen-Tags am unteren Rand der Seite
html (Höhe: 100 %;) Körper (Höhe: 100 %;)
Außerdem legen wir die Mindesthöhe der Containerebene auf 100 % fest. Falls die Breite des Inhalts größer als die Höhe des Containers ist, setzen Sie die Eigenschaft auf auto . Dadurch passt sich der Wrapper automatisch an die Breite des auf der Seite platzierten Inhalts an:
#wrapper ( min-height: 100 %; height: auto !important; height: 100 %; )
Die Codezeile „height: 100 %“ ist für ältere IE-Versionen gedacht, die die Eigenschaft „min-height“ nicht akzeptieren.
Um im Seitendesign Platz für eine Fußzeile zu schaffen, legen wir einen Einzug für das Tag fest
#content (Auffüllung: 100px;)
Zu diesem Zeitpunkt haben wir eine Webseite mit Vollbildbreite und zusätzlichen 100 Pixeln, die durch einen negativen Randwert für die Fußzeile (Rand: -100 Pixel) „neutralisiert“ werden, wenn ihre Position auf „relativ“ (Position: relativ). Durch die Verwendung eines negativen Füllwerts „ziehen“ wir also die Fußzeile in den Bereich des Containers, dessen Höhe auf 100 % eingestellt ist.
In diesem Beispiel wird das Markup des Webdokuments mithilfe relativ neuer HTML 5-Tags festgelegt, die falsch interpretiert werden können veraltete Versionen Browser. Aus diesem Grund wird möglicherweise nicht das gesamte Seitendesign korrekt angezeigt. Um dies zu vermeiden, müssen Sie die neuen Tags aus dem Arsenal der Version 5 der Hypertextsprache durch reguläre ersetzen
Verbesserte Version
Die oben besprochene Methode, die Fußzeile am Ende der Seite „unerschütterlich“ zu machen, ist nicht für jeden geeignet. Wenn Sie in Zukunft das Design Ihrer Website mithilfe von Pop-ups ändern und verbessern möchten, ist es besser, die vorherige Implementierung nicht mehr zu verwenden.
Wird am häufigsten bei der Implementierung von Popup-Fenstern verwendet CSS-Eigenschaft Z-Index. Mithilfe seiner Werte legen Sie die Reihenfolge fest, in der die Ebenen übereinander gestapelt werden.
Je höher der Z-Index-Wert eines Elements ist, desto höher erscheint es im gesamten „Layering“-Stapel.
Aber aufgrund der Tatsache, dass wir im vorherigen Beispiel verwendet haben negative Bedeutung Wenn Sie die Fußzeilenpolsterung anpassen, überlappt der untere Rand des Popups den oberen Fußzeilenbereich. Auch wenn es einen höheren Z-Index-Wert haben wird. Weil das übergeordnete Element (Wrapper) des Popup-Fensters immer noch einen niedrigeren Wert für diese Eigenschaft hat.
Hier ist eine erweiterte Option:
CSS - Beispielcode:
html, body ( height: 100 %; ) .header ( height:120px; Hintergrundfarbe: rgb(0,255,102); ) .main ( min-height:100 %; position: relative; Hintergrundfarbe: rgb(100,255,255); ) .footer ( Höhe:150px; Position: absolut; links: 0; unten: 0; Breite: 100%; Hintergrundfarbe: rgb(0,0,153); )
Wie Sie dem Code entnehmen können, haben wir die Fußzeile als Teil des Hauptelements platziert. Wir legen die relative Positionierung für den Container und die absolute Positionierung für die Fußzeile fest. Wir haben den Keller ganz unten im Container befestigt und seine Position links und oben auf 0 gesetzt.
Option für einen Keller mit nicht fester Höhe
Die bisherigen Implementierungen können dafür sorgen, dass sich die Fußzeile immer am Ende der Seite befindet. Aber nur, wenn die Fußzeile eine feste Breite hat. Was aber, wenn die Menge der darin veröffentlichten Inhalte nicht vorhersehbar ist?
Dies erfordert eine erweiterte Option für einen nicht festen Keller. Für die Anzeigeeigenschaft wird die Fußzeile auf Tabellenzeile festgelegt. Dadurch wird es als Tabellenzeile angezeigt.
Jeder, der an vollständig gestaltete Website-Seiten gewöhnt ist, bevorzugt das Aussehen von etwas, das am unteren Rand der Seitenfußzeile „festgenagelt“ (klebrig) ist. Doch im Internet gibt es zwei Probleme: Eingabefelder, die nicht nach unten wachsen und Fußzeilen, die nicht festgenagelt sind (am unteren Rand des Fensters). Wenn wir beispielsweise kurze Seiten wie habrahabr.ru/settings/social öffnen, fällt sofort auf, dass die Informationen, die am unteren Rand des Anzeigefensters angezeigt werden sollen, am Inhalt hängen bleiben und sich irgendwo in der Mitte oder sogar dort befinden den oberen Rand des Fensters, wenn der untere leer ist.
Also statt .
Dieser Leitfaden für Layout-Designer-Anfänger zeigt, wie Sie in 45 Minuten eine „genagelte“ Fußzeile erstellen, die Mängel selbst einer so angesehenen Publikation wie Habr beheben und mit ihr in der Qualität der Ausführung Ihres vielversprechenden Projekts konkurrieren können.
Schauen wir uns die Implementierung einer Art Nagelfußzeile aus dem Netzwerk an und versuchen zu verstehen, was passiert. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, body, #wrap ( height: 100 %; ) body > #wrap (height: auto; min-height: 100 %;) #main ( padding-bottom: 150px; ) /* muss die gleiche Höhe wie die Fußzeile haben */ #footer ( position: relative; margin-top: -150px; /* negativer Wert der Fußzeilenhöhe */ height: 150px; clear:both;) /* CLEAR FIX* / .clearfix:after (Inhalt: „.“; Anzeige: Block; Höhe: 0; klar: beide; Sichtbarkeit: versteckt;) .clearfix (Anzeige: inline-block;) /* Versteckt sich vor IE-Mac \*/ * html .clearfix (height: 1%;).clearfix (display: block;) /* End hide from IE-mac */
HTML:
Beginnen wir mit der Theorie
Die übliche Implementierung einer genagelten Fußzeile basiert auf der einzigartigen CSS2-Eigenschaft, deren Elemente unmittelbar untergeordnete Elemente sind KÖRPER- Prozentuale Höhe beibehalten ( Höhe: 100 % oder anders) relativ zum Fenster, wenn alle ihre übergeordneten Elemente beginnend mit dem Tag die gleiche prozentuale Höhe haben HTML. Früher ohne Doctypes, aber jetzt im Quirks-Modus werden prozentuale Höhen von Elementen auf jeder Ebene und in modernen Doctypes nur innerhalb prozentual definierter Elemente unterstützt. Wenn wir also einen Inhaltsblock erstellen (nennen wir ihn #Layout) mit einer Höhe von 100 % scrollt es wie ein Fenster. Alle (Streaming-)Inhalte werden darin platziert, außer der Fußzeile und möglicherweise der Kopfzeile.Die Fußzeile wird nach diesem Block platziert und erhält eine Höhe von 0 Pixel. Im Allgemeinen können Sie folgen #Layout Platzieren Sie so viele Blöcke, wie Sie möchten, aber sie sollten alle entweder 0 Pixel hoch sein oder außerhalb des Dokumentflusses liegen (nicht). Position: statisch). Und es gibt noch einen weiteren wichtigen Trick, der normalerweise verwendet wird. Es ist nicht notwendig, die Höhe auf 0 zu setzen. Sie können die Höhe festlegen, sie aber mithilfe der Eigenschaft vom Hauptblock subtrahieren margin-bottom: -(height);.
Menschlich gesehen erzeugen Stile eine leere „Tasche“ am unteren Rand, in die die Fußzeile eingefügt wird, und diese bleibt immer entweder am unteren Rand des Fensters hängen oder am unteren Rand des Dokuments, wenn die Höhe zu groß ist Das Dokument ist größer als die Höhe des Fensters. Es gibt viele Footer-Implementierungen im Internet und auf Habré, die in allen Browsern unterschiedlich erfolgreich sind. Lassen Sie uns es selbst weiter bauen und dabei Habrs Layout als „Arbeitstier“ verwenden.
Weil der untere Teil des Blocks #Layout- Dies ist eine Tasche. Die Fußzeile sollte leer sein und keine Seitenobjekte anzeigen. Und hier stoßen wir auf eine weitere Einschränkung: Wir können keine leere Tasche auf Kosten von erstellen Polsterung V #Layout, denn dann wird es mehr als 100 % sein. Es wird dich auch nicht retten Marge- Leere muss mithilfe der Eigenschaften verschachtelter Elemente erzeugt werden. Außerdem muss sichergestellt werden, dass schwebende Elemente nicht unter die Blockgrenze kriechen, was beispielsweise durch den Block geschieht
Schauen wir uns den Aufbau der Seiten unserer Testperson an. Der einfachste Weg, dies zu tun, besteht darin, das Firebug-Fenster oder ein ähnliches Fenster (Entwicklertools (Strg-F12)) in Chrome zu öffnen.
Kommen wir zu einem funktionierenden Beispiel
Welche sehen wir? Layoutfehler im Hinblick auf die Umsetzung der Wirkung einer genagelten Fußzeile? Wir sehen das1) Die Fußzeile der Site befindet sich innerhalb eines Blocks mit der ID=Layout, der keine prozentuale Höhe hat. Theoretisch müssen er, die Eltern und der Inhalt block.content-left die Höhe auf 100 % setzen. Bei Letzterem gibt es Probleme, es ist dafür nicht geeignet. Folglich fehlt ein Zwischenschichtblock oder die Fußzeile befindet sich nicht auf der richtigen Höhe. Außerdem,
2) Die Höhe der Fußzeile ist variabel (abhängig von der Anzahl der Elemente in der Liste und der Schriftgröße, ist dies nicht aus dem HTML, sondern aus dem CSS ersichtlich). UND
3) über #Layout es gibt einen Werbeblock mit einer festen Höhe von 90px;
4) Es gibt weder in der Fußzeile noch (allgemein) im Block Ausrichtungsblöcke #Layout(Ja, aber über dem Block .rotated_posts; vielleicht sollte es jedoch als Fußzeile klassifiziert werden).
Punkt 4 – Sie müssen es mit einem Skript zeichnen.
Es scheint einfach, mit dem dritten Punkt umzugehen, indem man #layout(margin-top:-90px;) hinzufügt. Bedenken Sie jedoch, dass dieser Block möglicherweise nicht existiert – er wird durch das Ausschneiden von Bannern unterdrückt oder Werbetreibende entscheiden sich plötzlich, ihn nicht anzuzeigen. Es gibt eine Reihe von Seiten auf der Website, auf denen dies nicht der Fall ist. Daher die Abhängigkeit Rand oben aus einem Werbeblock ist eine schlechte Idee. Es ist viel besser, es drinnen zu platzieren #Layout- dann wird er sich in nichts einmischen.
Der erste Punkt ist, dass Sie, damit die genagelte Fußzeile überhaupt funktioniert, einen Fußzeilenblock darunter platzieren müssen #Layout. Allerdings mit mit Javascript Sie können andere genagelte Fußzeilenschemata implementieren, aber in jedem Fall benötigen Sie JS oder ein zunächst korrektes Layout, um darauf verzichten zu können.
Da wir nicht stärker sein können als der neueste Website-Layout-Designer, der die Fußzeile in den Inhalt „eingefügt“ hat, werden wir die Idee, die Fußzeile auf unserer zukünftigen Website (die daher „cooler“ sein wird) richtig zu platzieren, beiseite legen. als Habr!), und wir werden Habr mit Javascript (Userscript) in die richtige Bedingung zerlegen. (Sagen wir gleich, dass nicht der Layouter oder Umsetzer schuld ist, sondern die Art der Site bestimmt natürlich die strategische Entscheidung des Projektmanagements.) So werden wir das Ideal nicht erreichen, denn im In der ersten oder zweiten Sekunde des Ladevorgangs weist die Seite ein falsches Layout auf. Aber was uns wichtig ist, ist das Konzept und die Möglichkeit, die beliebteste Website der IT-Welt qualitativ zu übertreffen.
Deshalb schreiben wir an der richtigen Stelle im Skript (früh am Ende des Seitenladens) Übertragungen der DOM-Werbe- und Fußzeilenblöcke an die richtigen Stellen. (Seien wir darauf vorbereitet, dass die Lösung aufgrund von Benutzerskripten komplizierter sein wird als eine reine Lösung.)
var dQ = function(q)(return document.querySelector(q);) //zum Verkürzen var topL = dQ("#topline"),lay = dQ("#layout"), foot = dQ("#footer" ); if(topL &&lay) //banner – innerhalb des Inhaltsblockslay.insertBefore(topL,lay.firstChild); if(lay && foot &&lay.nextSibling) //Verschieben der Fußzeilelay.parentNode.insertBefore(footer,lay.nextSibling);
Wir haben die Blöcke an ihren Plätzen platziert – jetzt müssen nur noch den Elementen die notwendigen Eigenschaften zugewiesen werden. Die Fußzeilenhöhe muss genau eingestellt werden, einfach weil wir sie bereits kennen, wenn das Benutzerskript aktiv ist (Ende des Seitenladens). Durch den oben erwähnten Triggerpunkt des Userscripts ist ein Sprung in der Darstellung des Footers auf der Seite unvermeidlich. Man kann versuchen, ein „gutes Gesicht“ aufzusetzen, aber mit einem „schlechten Spiel“? Wofür? Das „schlechte Spiel“ der Website ermöglicht es Ihnen, ohne zusätzlichen Aufwand ein Konzept zu erstellen, das zur Beurteilung der Qualität ausreicht und für das „richtige Spiel“ Ihres Projekts nicht benötigt wird.
if(foot)( //block-aligner
Hier haben wir uns erlaubt, eine selbstgeschriebene Funktion zu nutzen h.apnd_el, was ungefähr das Gleiche tut wie in jQuery -
$("").css((height: footH ||0)).appendTo($(footer))
Und dann – eine weitere typische Funktion der Implementierung von CSS-Regeln – h.addRules. Darauf kann man hier nicht verzichten, da man eine Regel mit „deklarieren“ muss. !wichtig" - gerade wegen der Besonderheiten der Prioritäten von Stilen aus dem Benutzerskript.
Mit diesen Codeteilen können wir die festgenagelte Fußzeile im Userscript sehen (nachdem wir nach unten gesprungen sind) und vollständig verstehen, wie das Seitenlayout erstellt wird. Die tägliche Verwendung eines Sprungmusters ist unangenehm, daher wird empfohlen, es ausschließlich zu Demonstrations- und Testzwecken durchzuführen. Im HabrAjax-Benutzerskript habe ich ein ähnliches Skript installiert und es mit der Einstellung „underFooter“ geschlossen (aktivieren Sie das Kontrollkästchen in der Liste der Einstellungen vor „Fußzeile nach unten genagelt“), beginnend mit Version 0.883_2012-09-12.
Beeinflusst das Nageln der Fußzeile die Notwendigkeit, ZenComment-Stile zu aktualisieren, wenn sie installiert sind? Ja tut es. Aufgrund der komplexen Kette von Stilprioritäten, in der vom Benutzerskript eingefügte Stile die niedrigste Priorität haben, mussten wir die Benutzerstile für leicht anpassen Möglichkeiten Arbeiten mit genagelter Fußzeile. Wenn Sie Ihre Benutzerstile nicht aktualisieren (auf 2.66_2012-09-12 +), funktioniert die Fußzeile nicht richtig.
Block rotierter_post (drei beliebte Beiträge aus der Vergangenheit) sieht mit einer Fußzeile logischer aus, daher wird sie im echten Skript auch in die Fußzeile verschoben.
Der zweite Punkt (aus der Liste der Layoutmängel) ist eine reine Diskussion für Habr (er gilt nicht für Benutzerskripte und wiederholt teilweise die vorherigen).
Auf den Seiten gibt es ein Problem, das verhindert, dass sie eine festgenagelte Fußzeile haben reines CSS- undefinierte Fußzeilenhöhe, abhängig von den Standardschriftgrößen im Browser. Um eine Fußzeile mithilfe von CSS zu implementieren, müssen Sie die relativen Höhen der Schriftarten auswählen. Diese funktionieren jedoch möglicherweise nicht, wenn der Computer des Benutzers nicht über die erforderlichen Schriftarten verfügt. Daher muss die Lösung ein JavaScript enthalten, das mithilfe von Übergängen die ungefähre Position der Fußzeile an die exakte Position anpassen kann. Oder schauen Sie sich die Akzeptanz der im Benutzerskript vorgenommenen Lösung an verschiedene Plattformen Machen Sie eine kalkulierte Installation der genagelten Fußleiste – erste Beobachtungen zeigen, dass die Lösung praktikabel ist.
Fazit: Es ist möglich, ein Layout vollständig auf Habré zu entwerfen, aber dafür benötigen Sie einen Layout-Designer, der das Verhalten des Layouts genau versteht und die Blöcke in der richtigen Reihenfolge platziert. (Derzeit befinden sich die Fußzeile und das obere Banner „an der falschen Stelle“ und nicht so, dass Sie die Fußzeile einfach auf den Punkt bringen können.) Sie können auf JS verzichten, wenn Sie die Höhe der Fußzeile in relativen Einheiten festlegen und einige davon nehmen Raum für Schriftartunsicherheit.
Implementierung
Wenn Sie HabrAjax 0.883+ aktivieren, wird die „genagelte Fußzeile“ funktionieren. Mithilfe von Skripten passt es sich in der Höhe an. Damit können Sie beurteilen, wie viel besser Seiten mit einer genagelten Fußzeile im Vergleich zu normalen Seiten aussehen. ZenComment-Benutzerstile sind mit Skripten kompatibel, aber damit die genagelte Fußzeile ordnungsgemäß mit ihnen funktioniert, müssen Sie ZenComment Version 2.66_2012-09-12 + installieren.Fakten zum Umsetzungsverhalten
Schamanismus mit Fußzeile, Stilen und Skripten ist Schamanismus (nur durch Theorie unterstützt). IN verschiedene Browser etwas anderes Verhalten, aber an manchen Stellen - unerwartet. Ohne Benutzerskripte und das Neuanordnen von Blöcken werden die Ergebnisse anders ausfallen. Dies haben Experimente mit der Implementierung im Benutzerskript ergeben.1) Firefox – unerwarteter Mangel an Fußzeilensprüngen. Es ist seltsam, dass sie nicht vorhanden sind – das Rendern erfolgt, nachdem die Fußzeile unten platziert wurde.
2) Chrome – es hat mich mit dem „wandernden Scrollen“ überrascht – Leerzeichen am unteren Rand werden im Abstand von einer Sekunde zur Seite hinzugefügt – bei der Höhenberechnung passiert ein Fehler. Die Lösung besteht darin, html,body(height:100%) im Benutzerstil zu schreiben, es gibt jedoch keine Garantie dafür, dass es immer funktioniert. Zuverlässiger ist es zu prüfen, ob das Dokument nicht über die Fensterhöhe hinausragt, und wenn nicht, verschieben Sie die Fußzeile, andernfalls - nichts. Springen ist in Ordnung, es existiert.
3) Opera – keine Sprünge (Version 12.02), wenn die Seite zum ersten Mal geladen wird, aber ein hastiges Neuladen kann zu einem Sprung in der Fußzeile führen. Ansonsten verhält es sich nicht weniger korrekt als Fx.
Nun, Sie müssen Chrome speziell das korrekte Verhalten beibringen (mit einem Skript) und die Version in dieser Form zur Anzeige ausrollen. Daher ist der Abschnitt im Benutzerskript etwas komplizierter als der im Artikel angegebene.
Es sei daran erinnert, dass es sich hierbei nicht um eine vollständige Implementierung handelt – sie berücksichtigt beispielsweise nicht die Fälle, in denen der Benutzer die Fenstergröße ändert. Es gibt auch (in der Praxis) seltene Kombinationen der Änderung der Fußzeilenhöhe vor und nach dem Verschieben, bei denen die Logik zu versagen beginnt, ohne dass es zu Unannehmlichkeiten kommt. Die Mängel wurden bewusst belassen, da ein Gleichgewicht zwischen der Komplexität der Verbesserung und dem vorübergehenden Charakter der Lösung gewahrt wurde.
Als Ergebnis haben wir ein durchaus funktionsfähiges Betriebssystem erhalten, zumindest für schnelle Desktop-Computer. Wenn ein fehlerhaftes Verhalten der Fußzeile festgestellt wird, sollte die Einstellung „underFooter“ deaktiviert werden.
Für welche Seiten ist das nützlich?
Auf einer Standard-Website ohne Benutzerstile sind selbst kurze Frage- und Antwortseiten länger als 1500 Pixel, was bei horizontalen Monitoren in den meisten Fällen nicht auffällt. Aber auch bei gewöhnlichen Monitoren stößt man häufig auf persönliche Benutzerseiten mit einer Höhe von etwa 1300 Pixeln, auf denen der freistehende Fußbereich in seiner ganzen Pracht zur Geltung kommt. Auch die Seitenanzahl in den Benutzereinstellungen ist nicht sehr groß.Wenn Sie ZenComment-Benutzerstile verwenden, reduzieren diese die erforderliche Seitenhöhe erheblich und das HabrAjax-Benutzerskript zeigt möglicherweise einige oder alle Seitenblöcke in der Seitenleiste nicht an. Daher ist bei Skripten und Stilen der Effekt einer nicht angehängten Fußzeile deutlich häufiger zu beobachten. Daher ist es logisch, dass die Fußzeilenkorrektur zum ersten Mal in HabrAjax erschien. Aber auch eine normale Website hat eine Reihe von Seiten, auf denen eine genagelte Fußzeile nützlich wäre.
Wird es Unterstützung geben?
Das Verhalten der Website im vergangenen Jahr zeigt, dass die Entwickler (und damit das Management) damit begonnen haben, Funktionen einzuführen, die zuvor nur in Benutzerskripten und Benutzerstilen vorhanden waren. Ich habe zum Beispiel Anfang des Jahres geschrieben, wo ich viele kleine Wünsche gesammelt habe. Sechs Monate später kehrte ich darauf zurück und stellte erfreut fest (direkt im Text; Sie können das „UPD“ und die Daten sehen), dass eine Reihe von als Wünsche bezeichneten Funktionen bereits in die Website implementiert worden waren.
Schauen wir uns als Nächstes die „Pfeile“ anstelle der Quadrate für Bewertungskommentare an. Sie tauchten vor 3 Jahren in almalexa-Benutzernamen („Prettifier“) auf und wurden vor 2 Jahren in ZenComment übernommen. Vor etwa 2-3 Monaten erschienen sie auf der Website. Man beginnt zu glauben, dass die Pfeile nach einiger Zeit einen gewissen Abstand voneinander haben, wie es bei ZenComment der Fall ist (ein Pfeil links von der Zahl, der zweite rechts), um weniger zu übersehen.
Daher ist die „festgenagelte Fußzeile“ auf Habré vielleicht nicht so fantastisch, wie sie vor drei Jahren vielleicht schien.
Weitere Features im HabrAjax-Skript, die erschienen sind für die letzten 3 Monate (kann in den Einstellungen deaktiviert werden):
* Automatisches Wachstum von Eingabefeldern (in Opera kann es bei großen Texten langsamer werden);
* Wochentage für andere Daten als „heute“ und „gestern“;
* Ereignisse im Feed, reduziert auf 1 Zeile und 2 Zeichen;
* Abkürzung der Wörter „habr*“ zu „χ·“ und „χα“;
* Datumshinweise durch Artikelnummern – es wird angegeben, aus welchem Monat und Jahr der Artikel stammt, bevor er heruntergeladen wird, anhand der Nummer in der URL;
* „Ähnliche Beiträge“ wurden auf 2 Wörter reduziert. Screenshot der auftauchenden „Ähnlichen Beiträge“ (zeigt 12 Links, nicht 4).
Wir beginnen mit der fünften Lektion zum Bearbeiten von Vorlagen im CMS Joomla 3. Dieses Mal werden wir über die Fußzeile der Website sprechen. Schauen wir uns mögliche Designoptionen für Fußzeilen und einige Ansätze zu deren Erstellung an.
Was ist eine Fußzeile?
Die Fußzeile oder Fußzeile einer Site ist der unterste Teil davon, der normalerweise Informationen über die Site, das Urheberrecht usw. enthält. Standardversion in Vorlage Protostern, die Fußzeile enthält keine aussagekräftigen Informationen:
Der Standardinhalt der Fußzeile ist das aktuelle Jahr, der Name der Website und der Link „Zurück nach oben“, der zum Seitenanfang führt. Um ehrlich zu sein, ist diese Fußzeilenoption für Besucher unserer Website völlig nutzlos, außerdem ist der „Zurück zum Anfang“-Link in unserem Fall absolut unnötig, wir haben für diese Zwecke bereits einen schönen Button erstellt.
Daher empfehle ich zunächst, den Standard-Fußzeileninhalt zu entfernen. Öffne die Datei index.php Standard-Protostar-Vorlage und suchen Sie nach dem Code, der für die Anzeige der Fußzeile verantwortlich ist. Der Code zwischen den Zeilen 205 und 219 ist für die Anzeige der Fußzeile verantwortlich, die wie folgt aussieht (abhängig von der Joomla-Version und den an der Indexdatei vorgenommenen Änderungen können die Codezeilen unterschiedlich sein):
Entfernen wir nun den zusätzlichen Code aus den Zeilen 210 bis 217; als Ergebnis wird der Code für die Fußzeile wie folgt aussehen:
Im Wesentlichen haben wir alles Mögliche entfernt und nur die Möglichkeit übrig gelassen, Module in der Fußzeile anzuzeigen. Dafür ist diese Zeile verantwortlich:
Wir speichern die Indexdatei, gehen zur Site und aktualisieren die Seite. Der Inhalt der Fußzeile ist verschwunden, was wir wollten. Jetzt können Sie der Fußzeile nach eigenem Ermessen neue Informationen hinzufügen. Bevor Sie diese hinzufügen, sollten Sie jedoch die Frage beantworten: Was kann in der Fußzeile der Website enthalten sein?
Welche Informationen in der Fußzeile der Website angezeigt werden sollen
Damit die Fußzeile effektiv ist, muss sie Informationen enthalten, die für Website-Besucher von Interesse sein könnten. Je nach Schwerpunkt der Website können diese Angaben variieren. Hier ist ein kleines Beispiel für dieselben Informationen, die in der Fußzeile enthalten sein können:
- Extra-Menü- Dieses Menü kann ein vorhandenes duplizieren oder einzigartig sein. Das Duplizieren des Menüs in der Fußzeile ist nützlich, wenn Ihre Website häufig von Mobilgeräten aus besucht wird. Der Besucher kann, nachdem er ganz nach unten auf der Seite gescrollt hat, von der zusätzlichen Navigation auf der Website profitieren.
- Kontaktinformationen- Für den Verkauf von Websites oder für Websites, die verschiedene Dienstleistungen anbieten, ist das Vorhandensein von Kontaktinformationen lediglich erforderlich, und die Fußzeile ist der richtige Ort dafür.
- Schaltflächen für soziale Medien- In der modernen Welt sind soziale Netzwerke für viele Menschen alles, daher werden solche Informationen niemals überflüssig sein.
- Diverse Links– zum Beispiel Links zu einer Sitemap, Newsfeeds usw.
- Widgets- Sie können in der Fußzeile Informationen zur Aktivität auf der Website, Verkehrszähler, aktuelle Kommentare usw. anzeigen.
- Werbung- Es kommt der Zeitpunkt, an dem Sie von der Website nicht nur ihre Präsenz, sondern auch Gewinn erzielen möchten. In diesem Fall ist die Fußzeile möglicherweise kein schlechter Werbeträger.
Versuchen Sie nicht, all das oben Genannte in die Fußzeile Ihrer Website zu stopfen; ein Übermaß an Informationen führt ebenso wie deren Fehlen zu nichts Gutem.
Andererseits spielt es keine Rolle, welche Informationen in der Fußzeile Ihrer Website enthalten sein werden. Hauptsache, sie passen in das Gesamtdesign und sind schön gestaltet.
Erstellen einer Fußzeile für die Site
Lassen Sie uns nun die Theorie verwerfen und direkt mit der Erstellung der Fußzeile fortfahren. Es gibt verschiedene Möglichkeiten, eine Fußzeile zu erstellen:
- Auto- beinhaltet die Verwendung verschiedener Module zur Anzeige bestimmter Informationen
- Handbuch- Module werden nicht verwendet, alle Änderungen werden manuell mithilfe von Bearbeitungstools für Vorlagendateien vorgenommen
- Gemischt- In diesem Fall werden beide oben genannten Optionen zusammen verwendet
Jede der Methoden ist auf ihre Art gut, zum Beispiel wird die Verwendung von Modulen in der Anfangsphase die Aufgabe erheblich vereinfachen, und die Methode, wenn keine Module verwendet werden, beschleunigt das Laden der Seite. In jedem Fall liegt die Wahl bei Ihnen.
Um alle möglichen Optionen abzuwägen, werde ich mich für die dritte Option entscheiden. Auf diese Weise erhalten Sie eine allgemeine Vorstellung davon, was bearbeitet wird und wie.
Als Beispiel habe ich beschlossen, die Fußzeile in drei vertikale Teile zu unterteilen. Links werden Links zu bestimmten Seiten der Website angezeigt, in der Mitte befindet sich eine Art Logo und rechts wird kleiner Text angezeigt. Die Module sind für die Anzeige des linken und rechten Teils der Fußzeile verantwortlich und wir schreiben das Logo manuell in die Indexdatei.
Erstellen wir zunächst neue Positionen für Module in der Fußzeile (wir haben darüber in der Lektion zum Einrichten und Bearbeiten von Vorlagen gesprochen), und zwar im Umfang von zwei Teilen. Da sie sich auf der linken und rechten Seite der Fußzeile befinden, haben sie einen entsprechenden Namen – Fußzeile links Und Fußzeile rechts. Wir deklarieren sie in der Datei templateDetails.xml.
Jetzt nehmen wir Änderungen an der Vorlagenindexdatei vor. Mein Code sieht so aus:
Basisurl. „Vorlagen/“. $this->template . "/images/joom4all.png"?>" />Und zur Verdeutlichung ein Screenshot:
Es ist klar, wie die Module angezeigt werden, aber ich möchte näher auf das Logo eingehen. Der für die Anzeige des Logos verantwortliche Code ist:
Auf den ersten Blick sieht es aus wie ein gewöhnlicher HTML-Tag für ein Bild, aber statt des üblichen Dateipfads ist er geschrieben PHP-Code. Dieser Code mag auf den ersten Blick kompliziert und unverständlich erscheinen, aber tatsächlich wird beim Betrachten klar, dass er nichts Kompliziertes enthält:
- - Beginn des PHP-Codes
- Echo- verantwortlich für die Ausgabe einer Zeichenfolge
- $this->baseurl– Diese Zeile gibt den Site-Namen zurück
- Vorlagen/- Hier geben wir an, dass das Bild im Vorlagenordner gespeichert ist
- $this->template- gibt den Namen der aktuellen Vorlage zurück
- /images/joom4all.png- Pfad zum Bild im Stammordner der Vorlage und Name der Datei mit dem Bild
- ?> - Ende des PHP-Codes
Durch die Verwendung dieses PHP-Codes erhalten wir den relativen Pfad zur Bilddatei. Mit anderen Worten: Das Bild wird aus dem Bilderordner der ausgewählten Vorlage entnommen, unabhängig davon, welchen Namen die Site hat oder welche Vorlage verwendet wird.
Wir speichern die Datei index.php, jetzt können wir sie schließen, wir werden sie nicht mehr benötigen.
Nun erstellen wir mehrere Module, die wir an den neu erstellten neuen Positionen anzeigen. Das erste Modul zeigt ein Menü in der Fußzeile an und das zweite Modul zeigt kleinen Text an.
Im nächsten Schritt erstellen wir Module – für ein Menü vom Typ „Menü“ und für Text vom Typ „HTML-Code“ (so erstellen Sie ein Modul). Als Stellen dafür wählen wir die neu geschaffenen Modulplätze aus:
Um unser Fußzeilenmenü vom Rest des Menüs auf der Website zu unterscheiden, fügen wir in den Menümoduleinstellungen das Klassensuffix „_footer“ hinzu:
Um nicht zu erklären, was für ein Modul vom Typ „HTML-Code“ es ist, zeige ich im Screenshot das Funktionsprinzip:
Ich habe dieses Modul mit bestimmtem Text gefüllt, der in der Fußzeile angezeigt wird. Zusätzlich zum regulären Text habe ich einen kleinen PHP-Code geschrieben, der das aktuelle Jahr anzeigt:
Wir speichern die Module und gehen auf die Website, um das Ergebnis zu überprüfen. Folgendes habe ich erhalten:
Obwohl das Ergebnis da ist, ist es nicht sehr beeindruckend. Jetzt müssen wir die Fußzeilenelemente mithilfe von CSS angemessener gestalten.
Erstellen wir zunächst neue Fußzeilenblöcke:
Foot-left, .foot-center(float: left;) /*Fußblockausrichtung*/ .foot-left (width: 20%;) /*left block width*/ .foot-center (margin-left: -6px ;) /*zentraler Blockeinzug*/ .foot-right ( /*rechter Block*/ float: none; height: 60px; )
Der nächste Kandidat für das Styling ist das Menü, auf das ich die folgenden Stile angewendet habe:
Ul.nav.menu_footer (margin: 0;) /*null Ränder für das Menü*/ ul.nav.menu_footer li ( /*Gestaltung des Menütextes*/ Schriftfamilie: „Lobster“, kursiv; Schriftgröße: 16px ; line -height: 18px; ) ul.nav.menu_footer li.item-179 a ( /*Sitemap-Menüelement*/ margin-left: 15px; color: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /*Menüpunkt „Über die Website“*/ Farbe: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Menüpunkt „Kontakte“*/ margin-left: 45px; Rand unten: 3 Pixel einfarbig #0f70ad; Farbe: #0f70ad; )
Und schließlich trennen wir die Fußzeile vom Hauptteil des Inhalts:
Footer.footer hr (border-top: 3px solid #fc8f30;) /*Fußzeile vom Hauptinhalt trennen*/
Speichern Sie die Stildatei, gehen Sie zur Website und sehen Sie sich das Ergebnis an:
Deshalb haben wir für unsere Website eine Fußzeile erstellt, die viel lustiger aussieht als die Standardfußzeile. Damit ist diese Lektion abgeschlossen und in der nächsten Lektion werden wir mögliche Fehler im adaptiven Design überprüfen und einige Mängel beheben. Darüber hinaus empfehle ich Ihnen, den Artikel darüber zu lesen, wie Sie mit Bootstrap schnell eine Joomla 3-Vorlage und insbesondere eine Fußzeile von Grund auf erstellen können.
