Gumb `up` za spletno stran: kako narediti

Takšna funkcija, kot je gumb "navzgor" za spletno mesto, naredi internetne vire bolj primerne za svoje obiskovalce. Pomaga enostavno premikati od koder koli na strani do vrha. To je potrebno samo za spletne trgovine in spletna mesta z velikimi izdelki, ki zahtevajo dolg premik navzdol.

Za kaj je to?

Trenutno na večini mest ni nobene takšne funkcije, kot je gumb "gor", in nič ni kritično glede tega. Toda njegova uporaba lahko prinese številne prednosti za internetne vire in za svoje obiskovalce.

Koristi za obiskovalce

Pogosto se zgodi, ko je stran internetnega vira močno naložena s količino informacij, ko informacijski članek zajema veliko prostora in se morate pomakniti navzdol po strani s kolescem miške. Poleg tega je na koncu članka lahko veliko komentarjev.

Ko obiskovalec prebere članek, ni nič dolgočasnega za pomikanje navzdol po strani, toda ko se besedilo konča in je treba premakniti navzgor, se začne malo pomešati. Večina ljudi bo preprosto preveč lena, da bo vodila dolg pomik, in samo zapreti spletno mesto, namesto da bi se še vedno sprehajala po svojih prostorih.

Uporaba gumba za takojšnjo premikanje na vrh strani naredi zabavo na spletnem mestu bolj priročno.

Koristi za internetni vir

Pozitivni vidiki vira sama temelji na zgodovinskih dejavnikov, ker je lažje za navigacijo stran izboljšuje vedenjske dejavnike, saj bodo vsi obiskovalci bolj aktivni v svojih dejanjih in premakniti na drugih straneh.

Tako, podatki Vedenjski dejavniki vplivajo na odnos vseh iskalnikov na spletno mesto in vodijo do izboljšanja lokacije v SERP-u.

Kako narediti gumb "gor" na spletnem mestu sami

Nadalje razumemo. Gumb za pomikanje navzgor za spletno mesto v kateremkoli CMS-u lahko vedno naredite sami, le nekaj preprostih korakov:

• ustvarjanje slike;
• Oblikovanje scenarija;
• ustvarjanje sloga gumba;
• dodajanje na spletno stran.

Gumbna slika

Če želite na mestu dodati gumb »gor«, morate najprej narediti ikono, ko jo kliknete, se bo uporabnik premaknil navzgor. Če želite to narediti, lahko uporabite že pripravljene možnosti, med katerimi lahko vedno izberete najbolj primerne.

Če želite izboljšati videz gumba, morate narediti nekaj izboljšav, in sicer ustvariti sprite, ki vam omogočajo, da združite slike v ozadju na podlagi CSS in s tem ustvarite animacijo iz njih.

Za grafična dela lahko uporabite katerikoli urejevalnik. Najprimernejša pa bo spletna storitev PIXLR, saj vam ni treba ničesar prenesti tukaj in jo lahko uporabite v svojem brskalniku.

Če želite začeti delati v urejevalnem oknu, ki se prikaže, izberite polje »Prenesi sliko iz računalnika«. Kot primer vzemite podobo rakete.

Če so dimenzije izbrane ikone prevelike, bo potrebna manjša nastavitev dimenzij. Če želite to narediti, pojdite v zgornji meni in izberite polje »Uredi« ter po »Prosti pretvornik«

Naslednje ob sliki so posebni označevalci, ki jih premikajo, lahko spremenite velikost slike. Če želite shraniti razmerje, lahko s pritiskom na tipko Shift uporabite modre oznake. Na koncu teh dejanj se pridobi podoba rakete.

Naslednji korak je ustvariti kopijo sloja.

Zdaj morate rahlo premakniti raketno sliko iz nove plasti. Če želite to narediti, je priročno uporabiti orodje za premikanje, ki se nahaja v drugem stolpcu levega menija in puščico »navzgor« na tipkovnici.

Zdaj morate narediti zgornjo sliko v črno-beli barvi. To lahko storite z uporabo "Correction" - "Hue / Saturation" element v zgornjem meniju. Za popolno razbarvanje mora biti drsnik zasičenosti nastavljen na -100. To dejanje bo vplivalo na to, da se bo gumb "Up" ob premiku premaknil iz črno-bele barve v barvo.

Končni dotik je odstranitev presežnega prostora okoli slike. Če želite to narediti, v levem meniju izberite postavko "Obreži" in v pravokotniku izberite samo dve projektili. Za obrezovanje pritisnite tipko Enter.

Rezultat je slika, v kateri ni preveč prostora. Treba bo zapisati širino in višino nastale slike, saj bodo ti podatki uporabni v naslednjem koraku.

Če želite shraniti morali klikniti na "File" - "Save", kjer se levo pod "My Computer" napisati ime slike (samo v angleškem postavitev tipkovnice), izbere obliko (v tem primeru - PNG) in kliknite "Da".

Datoteko s tipko navzgor skripte

V tem primeru vam ni treba napisati scenarija. Možno bo izkoristiti javno možnost, s čimer bo nekaj popravkov končane kode.

Če želite to narediti, morate prenesti katerega koli urejevalnika kod. Najbolj priljubljena in brezplačna različica je Notepad ++. Ko jo namestite, jo morate kopirati in prilepiti vso to kodo:

Nato kliknite zgornji meni "File" - "Save ashellip;" in shranite kodo v .js formatu. Po tem lahko to kodo uporabite na svojem spletnem mestu, naložite datoteke skript in slike s pomočjo povezave FTP.

Namestitev na mestu

Če želite za spletno mesto nastaviti gumb za pomikanje, morate kodo postaviti na želeno mesto. Vnesti jo morate pred oznako .

Ustvarjanje sloga gumba v CSS

Najpogosteje je gumb "gor" za spletno stran na dnu ("klet").

V datoteki style.css morate vnesti naslednjo kodo:

V tem primeru potrebujete podatke o širini in višini slike. Ostaje šele, da vnesete podatke v kodo in gumb »gor« za spletno stran bo pripravljen! Kaj še?

Gor gumb za spletno mesto Wordpress

Za ta CMS lahko gumb "Up" lahko naredite s pomočjo vtičnikov, kot tudi neodvisno.

Metoda z vtičniki je najprimernejša in enostavna za namestitev, ker to zahteva samo klik na gumb za namestitev in prilagodite vse funkcije v meniju vtičnikov.

Izbira slednjih je treba pristopiti previdno, saj bo skupaj z njim enostavno pridobiti virus na mestu. Najbolj priljubljena in dokazana možnost je vtičnik, imenovan Pomik nazaj na vrh. Lahko ga prenesete s standardnim iskanjem vtičnikov Wordpress.

Ta razširitev ima več funkcij in zelo enostavno bo individualizirati gumb »gor« za spletno mesto WordPress. Vse vrednosti ni treba spreminjati, konfigurirati morate samo videz in lokacijo gumba na strani spletnega mesta.

Kot vidite, nastavitev gumba »navzgor« s pomočjo vtičnikov je zelo preprosta. Ampak obstaja en pomemben odtenek, da vsaka nameščena vtičnica naloži CMS. To lahko vpliva na hitrost internetnega vira. Zato večina lastnikov spletnih mest poskuša izvršiti vse spremembe neposredno v kodi in ne s pomočjo razširitev tretjih oseb. Lahko naredite gumb »gor« za spletno mesto v HTML-ju, kar bo zmanjšalo porabljene vire.

Pred spreminjanjem vseh sistemskih datotek mora WordPress narediti varnostne kopije. Nato lahko sledite vsem korakom, da ustvarite svoj gumb, opisan zgoraj.

Knoka "up" za Joomla

CMS Joomla podpira tudi namestitev vtičnikov, kot je Wordpress. Najbolj uspešna različica gumba »navzgor« za spletno mesto v Joomla 3 je razširitev, imenovana »Vrh strani«.

V tem CMS lahko katerikoli vtičnik namestite prek "Nadzornika razširitve". Če želite to narediti, potrebujete:

• prenesite vtičnik na internetu;
• Kliknite gumb »Prebrskaj« v upravitelju razširitev;
• izberite prenesen arhiv;
• kliknite »Prenos« in ga namestite.

Zdaj jo morate aktivirati v "Plugin Manager". Če želite to narediti, pojdite na ta razdelek, poiščite vtičnik in preklopite njeno stanje na »vklopljeno«.

Nato konfigurirate vse možnosti razširitev z uporabo istega razdelka, kjer morate na desni strani najti "Osnovne parametre" tega vtičnika.

Na vrhu strani so naslednje funkcije:

• Run in / administrator - omogočite možnost ne le na internetnih virih, ampak tudi v sami CMS Joomla.
• Gumb za odkrivanje gumba - koliko slikovnih pik uporabite za premikanje, da se prikaže gumb »gor«.
• Gumb Gumb - besedilo na gumbu.
• Vedno na vrhu - stran od spletnega mesta bo vedno prikazana od začetka. Ko uporabljate »sidra« za pomik na določeno mesto na strani, te možnosti ni treba aktivirati.
• Gladka pomikanje - naredi stran bolj gladko.
• Trajanje pomika - čas, ko se stran popolnoma premakne na začetek.
• Scroll Transition - dodaja pomikanje za velike vizualne učinke.
• Olajšanje prehoda - "omilite" premik na vrh strani.
• Lokacija povezave - lokacija ikone. Standardno se gumb nahaja v spodnjem desnem kotu.
• Uporabi sloge - posamezni slog gumba, ki ga lahko nastavite v spodnjem polju. Če preklopite na negativno vrednost, bodo vse nastavitve sloga vzete iz teme aktivne strani.
• Link Style - polje za vnos nastavitev sloga gumba.

Če želite prilagoditi slog gumba »gor«, morate imeti vsaj minimalno znanje o CCS. V nasprotnem primeru je treba vrednost predzadnjega parametra spremeniti na »Ne«.

Drug pomemben odtenek je, da običajen napis na ikoni vsebuje angleško besedilo: Return to Top. Na spletnem mestu v ruskem jeziku takega besedila ne more biti prisotno, zato ga izključite v nastavitvah vtičnika ali ga spremenite v ruski jezik.

Če želite spremeniti ta napis, morate obiskati strežnik spletnega mesta z uporabo FTP ali vgrajenega upravitelja datotek gostiteljev. Nato v imeniku »/ administrator / language / sl-GB /« najdete datoteko, imenovano »en-GB.plg_system_topofthepage.ini«.

Pred spreminjanjem besedila morate spremeniti kodiranje tega dokumenta v UTF-8. To bo normalno prikazovanje ruskih črk.

Naslednje najdemo naslednjo vrstico:

in spremenite besedno zvezo v kotacijah v ruski jezik. Uporabite lahko fraze, kot so "Up!", "Na začetku!" Ali "Up!".

Na koncu boste morali shraniti spremenjeno datoteko in preveriti, ali je gumb »gor« za spletno mesto na Joomli.

Gumb gor za Ucoz

Gumb »up« za spletno mesto na Ucozu bo treba narediti z uvedbo kode, saj vtičnikov za ta CMS ni mogoče povezati. Vendar to ne zahteva dolgotrajne študije o sistemskih datotekah in poiščite potrebne vrstice, na zahtevano mesto morate vstaviti samo majhno kodo.

Za namestitev potrebujemo:

• pojdite na "Nadzorna plošča -> Oblikovanje -> Upravljanje projektov (Predloge) -> Dno strani -
• vstavite skript (lahko ga najdete na uradni spletni strani projekta in vire tretjih oseb).

Zaključek

Nato se v spodnjem desnem kotu prikaže ikona, ki uporabnika premakne na sam vrh strani.

Kot lahko vidite, nastavitev gumba »Gor« za katero koli od CMS ni bila posebej zahtevna. Uporabite lahko samodejni način namestitve (vtičnike) in ročno. Toda zadnja možnost ostaja najustreznejša, saj ne vpliva negativno na uspešnost spletnega mesta.

Uporabite gumb »gor« za spletno mesto v HTMLu, da bi zmanjšali porabo virov spletnega mesta, saj lahko veliko število razširitev negativno vpliva na uspešnost virov. En vtični gumb "gor" ne more močno vplivati ​​na čas nalaganja strani na spletnem mestu, vendar v večini primerov ima uporabnik nameščen vsaj ducat vtičnikov v CMS. V tem primeru lahko kateri koli vtičnik negativno vpliva na uspešnost strani spletnega mesta.