"Up" -Button für die Website: wie es geht
Diese Funktion, wie die "up" Schaltfläche für eine Site,macht die Internet-Ressource für seine Besucher bequemer. Es hilft dabei, von überall auf der Seite leicht nach oben zu gelangen. Dies ist nur für Online-Shops und Websites mit großen Artikeln erforderlich, die einen langen Bildlauf benötigen.
Wofür ist es?
Im Moment auf den meisten Websites wieFunktionen, wie der "up" -Knopf, nein, und es gibt nichts kritisches daran. Aber seine Verwendung kann viele Pluspunkte sowohl für die Internetquelle als auch für seine Besucher bringen.
Vorteile für Besucher
Es passiert oft, wenn die Seite der Internet-Ressourceist stark mit der Menge an Informationen geladen, wenn der Informationsartikel viel Platz in Anspruch nimmt und Sie mit dem Mausrad die Seite herunterscrollen müssen. Zusätzlich dazu, am Ende des Artikels, kann es viele Kommentare dazu geben.
Wenn ein Besucher einen Artikel liest, nichtslangweilig beim Scrollen auf der Seite ist nicht, aber wenn der Text zu einem Ende gekommen ist und es notwendig ist, sich nach oben zu bewegen, beginnt es ein wenig zu ermüden. Die meisten Leute werden einfach zu faul sein, eine lange Schriftrolle zu führen, und sie werden nur die Seite schließen, anstatt immer noch durch ihre Weiten zu schlendern.
Wenn Sie die Schaltfläche verwenden, um sofort zum Anfang der Seite zu wechseln, ist der Zeitvertreib auf der Website bequemer.
Vorteile für eine Internet-Ressource
Die positiven Seiten für die Ressource selbst kommen vonvon früheren Faktoren, da eine vereinfachte Bewegung auf der Website Verhaltensfaktoren verbessert, da alle Besucher aktiver in ihren Aktionen sind und auf andere Seiten wechseln.
Somit beeinflussen diese Verhaltensfaktoren die Einstellung aller Suchmaschinen zur Site und führen zu einer Verbesserung des Ortes der Suchergebnisse.
Wie mache ich den Button auf der Seite selbst?
Wir verstehen es weiter. Der Scroll-Up-Button für eine Site auf einem beliebigen CMS kann immer nur von Ihnen selbst ausgeführt werden, nur ein paar sehr einfache Schritte:
- ein Bild erstellen;
- Erstellung eines Skripts;
- Erstellen eines Schaltflächenstils
- Hinzufügen zur Website.
Schaltflächenbild
Um eine Schaltfläche "nach oben" auf der Website hinzuzufügen, zSie müssen das Symbol selbst erstellen. Wenn Sie darauf klicken, bewegt sich der Benutzer auf der Seite nach oben. Dazu können Sie vorgefertigte Optionen verwenden, unter denen Sie immer die am besten geeignete auswählen können.
Um die Darstellung der Schaltfläche zu verbessern, müssen Sie einige Verbesserungen vornehmen, nämlich ein Sprite zu erstellen, mit dem Sie Hintergrundbilder auf der Basis von CSS kombinieren und daraus eine Animation erstellen können.
Für grafische Arbeiten können Sie einen beliebigen Editor verwenden. Aber die bequemste Option ist der Online-Dienst PIXLR, da Sie hier nichts herunterladen müssen und Sie können es direkt in Ihrem Browser verwenden.
Um mit der Arbeit im angezeigten Editorfenster zu beginnen, wählen Sie das Feld "Bild von Computer hochladen". Nehmen wir als Beispiel das Bild der Rakete.
Wenn die Größe des ausgewählten Symbols zu groß ist, dannSie müssen eine kleine Anpassung an die Größe vornehmen. Um dies zu tun, gehen Sie zum Top-Menü und wählen Sie das Feld "Bearbeiten", und nach "Free transform ..."
Neben dem Bild gibt es spezielleMarker, durch Verschieben der, können Sie die Größe des Bildes ändern. Um die Proportionen zu speichern, können Sie die Umschalttaste verwenden, indem Sie die blauen Markierungen verschieben. Am Ende dieser Aktionen wird das Bild der Rakete erhalten.
Der nächste Schritt besteht darin, eine Kopie der Ebene zu erstellen.
Jetzt müssen Sie das Raketenbild von bewegeneine neue Schicht ein wenig nach oben. Um dies zu tun, wird es bequem sein, das Verschieben-Werkzeug, das sich in der zweiten Spalte des linken Menüs befindet, und den Pfeil "auf" auf der Tastatur zu verwenden.
Jetzt müssen Sie das obere Bild in schwarz und weiß machen. Dies kann mit dem Menüpunkt "Korrektur" - "Farbton / Sättigung" im oberen Menü erfolgen. Für eine vollständige Entfärbung slider „Sättigung“ sollte den Wert -100 nehmen. Diese Aktion bewirkt, dass sich die Schaltfläche "Nach oben" von schwarz auf weiß zu Farbe ändert, wenn Sie den Mauszeiger darüber bewegen.
Die letzte Berührung ist die Entfernung von überschüssigem Raumum zwei Bilder. Wählen Sie dazu im linken Menü den Menüpunkt "Crop" und selektieren Sie nur zwei Raketen im Rechteck. Um das Zuschneiden auszuführen, drücken Sie die Eingabetaste.
Das Ergebnis ist ein Bild, in dem kein überschüssiger Platz vorhanden ist. Es wird notwendig sein, die Breite und Höhe des resultierenden Bildes aufzuzeichnen, da diese Daten im nächsten Schritt nützlich sein werden.
Um zu speichern, klicken Sie auf "Datei" -"Speichern", wo im linken Eintrag "Arbeitsplatz" der Name des Bildes (nur englisches Layout) notiert wird, das Format (in diesem Fall PNG) ausgewählt und der "Ja" Knopf gedrückt wird.
Datei mit dem Button up Skript
In diesem Fall müssen Sie kein Skript schreiben. Es wird möglich sein, die öffentliche Option zu nutzen und einige Korrekturen am fertigen Code vorzunehmen.
Um dies zu tun, müssen Sie einen beliebigen Code-Editor herunterladen. Die beliebteste und kostenlose Version ist Notepad ++. Nach der Installation müssen Sie den gesamten Code kopieren und einfügen:
| <Skripttyp = "text / javascript"> $ (Dokument).ready (function () {$ (Fenster) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ( "# scroller") fadeIn () ;.} else {$ ( „# scroller ") fadeOut ();.}}); $ (" # scroller ") klicken (function () {$ (." body, html „) belebten ({scrollTop :. 0}, 400); return false;} );}); </ script> |
Klicken Sie dann auf das obere Menü "Datei" - "Speichernas ... ", dann speichern wir den Code im .js-Format. Danach können Sie diesen Code auf Ihrer Website verwenden und die Skriptdateien und Bilder über eine FTP-Verbindung dorthin hochladen.
Installation auf der Website
Um die Bildlaufschaltfläche für die Site einzurichten, müssen Sie den Code an der gewünschten Position platzieren. Sie müssen es vor dem Tag eingeben </ body>
Erstellen eines Schaltflächenstils in CSS
Meistens befindet sich der "Hoch" -Knopf für den Standort unten ("Keller").
In der Site style.css Datei müssen Sie den folgenden Code eingeben:
"/ * Hoch-Taste * / .scrollTop { |
In diesem Fall benötigen Sie die Datenbreite und -höhe des Bildes. Es bleibt nur, um die Daten in den Code einzugeben, und der "up" -Button für die Website wird bereit sein! Was sonst?
Up-Taste für Wordpress-Site
Bei diesem CMS kann der "Up" -Button sowohl mit Hilfe von Plugins als auch unabhängig voneinander erstellt werden.
Die Methode mit den Plugins ist am einfachsten und bequemsten zu installieren, da dazu nur auf die Schaltfläche Installieren geklickt werden muss und alle Funktionen im Plugin-Menü angepasst werden müssen.
Die Wahl des letzteren sollte von erreicht werdenVorsicht, da zusammen damit wird es leicht möglich sein, einen Virus auf der Website zu erwerben. Die beliebteste und bewährteste Option ist ein Plug-in namens Scroll Back To Top. Sie können es mit der Standard-Wordpress-Plugin-Suche herunterladen.
Diese Erweiterung hat mehrerefunktional, und es wird sehr einfach sein, die Schaltfläche "up" für die Website auf Wordpress zu individualisieren. Alle Werte müssen nicht geändert werden. Sie müssen nur das Erscheinungsbild und den Speicherort der Schaltfläche auf der Website konfigurieren.
Wie Sie sehen können, stellen Sie den Button mit einPlugins ist sehr einfach. Aber es gibt eine wichtige Nuance, dass jedes installierte Plugin das CMS lädt. Dies kann die Geschwindigkeit der Internet-Ressource beeinflussen. Aus diesem Grund versuchen die meisten Websitebesitzer, alle Änderungen direkt im Code auszuführen und nicht mithilfe von Erweiterungen von Drittanbietern. Sie können die Schaltfläche für die HTML-Site "auf" stellen, wodurch die verbrauchten Ressourcen minimiert werden.
Bevor Sie alle Systemdateien ändern, muss WordPress ihre Sicherungskopien erstellen. Als nächstes können Sie alle Schritte ausführen, um eine eigene Schaltfläche zu erstellen, wie oben beschrieben.
Knoka "up" für Joomla
CMS Joomla unterstützt auch die Installation von Plug-ins wie Wordpress. Die erfolgreichste Version des "up" -Buttons für eine Site auf Joomla 3 ist eine Erweiterung namens Top of the Page.
In diesem CMS kann jedes Plug-in über den "Extension Manager" installiert werden. Um dies zu tun, benötigen Sie:
- Plug-in im Internet herunterladen;
- Klicken Sie im Extension Manager auf die Schaltfläche "Durchsuchen".
- wähle das heruntergeladene Archiv aus;
- Klicken Sie auf "Herunterladen" und installieren Sie.
Jetzt müssen Sie es im "Plugin Manager" aktivieren. Um dies zu tun, gehen Sie zu diesem Abschnitt, finden Sie das Plug-in und schalten Sie seinen Status auf "ein".
Als nächstes konfigurieren Sie alle Erweiterungsoptionen mit demselben Abschnitt, in dem Sie die "Basisparameter" dieses Plug-Ins auf der rechten Seite finden müssen.
Oben auf der Seite befindet sich die folgende Funktionalität:
- Run in / administrator - Aktivieren Sie die Option nicht nur für die Internet-Ressource, sondern auch für das CMS Joomla.
- Button Reveal Position - Wie viele Pixel sollte der Benutzer zurückspulen, damit der "up" -Button angezeigt wird?
- Schaltfläche Text auslassen - der Text auf der Schaltfläche.
- Immer im Vordergrund - die Seite der Website wird immer von Anfang an angezeigt. Wenn Sie "Anker" verwenden, um zu einer bestimmten Stelle auf der Seite zu blättern, muss diese Option nicht aktiviert werden.
- Smooth Scroll - macht das Blättern der Seite sanfter.
- Scroll Duration - die Zeit, zu der die Seite vollständig an den Anfang verschoben wird.
- Scroll-Übergang - fügt Scrolling für große visuelle Effekte hinzu.
- Transition Easing - "Erleichterung" der Bewegung an den Anfang der Seite.
- Link Location - Der Speicherort des Symbols. Standardmäßig befindet sich die Schaltfläche in der unteren rechten Ecke.
- Stile verwenden - der individuelle Stil der Schaltfläche, der im Feld darunter eingestellt werden kann. Wenn Sie zu einem negativen Wert wechseln, werden alle Stileinstellungen aus dem aktiven Website-Design übernommen.
- Verknüpfungsstil - ein Feld zum Eingeben Ihrer Schaltflächenstileinstellungen.
Um den Stil des Buttons "up" anzupassen, benötigen Sie mindestens ein Minimum an CCS. Andernfalls muss der Wert des vorletzten Parameters auf "Nein" gesetzt werden.
Eine weitere wichtige Nuance ist dasDie übliche Inschrift auf dem Icon enthält den englischen Text: Return to Top. Auf einer russischsprachigen Website kann ein solcher Text nicht vorhanden sein. Sie können ihn also einfach in den Plugin-Einstellungen deaktivieren oder in Russisch ändern.
Um diese Inschrift zu ändern, gehen Sie zuServer-Site mit FTP oder integriertem Hosting-Dateimanager. Dann müssen Sie im Verzeichnis "/ administrator / language / en-GB /" eine Datei namens "en-GB.plg_system_topofthepage.ini" finden.
Bevor Sie den Text ändern, sollten Sie die Codierung dieses Dokuments in utf-8 ändern. Dadurch werden russische Buchstaben normal angezeigt.
Als nächstes finden wir die folgende Zeile:
| "PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Zurück zum Anfang "" |
und ändern Sie die Phrase in Anführungszeichen in die russische Sprache. Du kannst Sätze wie "Up!", "Am Anfang!" Oder "Up!" Verwenden.
Am Ende müssen Sie die geänderte Datei speichern und nach einer "up" -Schaltfläche für die Joomla-Site suchen.
Up-Taste für Ucoz
Der "up" -Button für die Site auf Ucoz muss erledigt werdenmit der Einführung von Code, da Plugins für dieses CMS nicht verbunden werden können. Dies erfordert jedoch kein langes Studium der Systemdateien und sucht nach den notwendigen Zeilen. Sie müssen nur einen kleinen Code an der gewünschten Stelle einfügen.
Um zu installieren, brauchen wir:
- Gehe zu "Systemsteuerung -> Design -> Design Management (Vorlagen) -> Unterseite der Website;
- Fügen Sie ein Skript ein (finden Sie auf der offiziellen Website des Projekts und Ressourcen von Drittanbietern).
Fazit
Danach erscheint ein Symbol in der unteren rechten Ecke, das den Benutzer ganz oben auf der Seite bewegt.
Wie Sie sehen können, stellen Sie die "Up" Taste für einIrgendein CMS war nicht besonders schwierig. Sie können sowohl die automatische Installationsmethode (Plug-Ins) als auch die manuelle Installation verwenden. Die letztere Option bleibt jedoch am geeignetsten, da sie die Leistung der Website nicht beeinträchtigt.
Sie können den "up" -Button für die Website auf derHTML, um den Verbrauch von Site-Ressourcen zu minimieren, da sich eine große Anzahl von Erweiterungen negativ auf die Ressourcenleistung auswirken kann. Ein Plug-in-Button "nach oben" kann die Ladezeit der Seiten der Site nicht stark beeinflussen, aber in den meisten Fällen hat der Benutzer mindestens ein Dutzend Plugins auf dem CMS installiert. In diesem Fall kann sich jedes Plug-in negativ auf die Leistung der Seiten auswirken.
