Una funció com el botó "amunt" del lloc fa que el recurs d'Internet sigui més còmode per als seus visitants. T'ajuda a moure't fàcilment des de qualsevol lloc de la pàgina fins a la part superior de la pàgina. Això és imprescindible per a botigues en línia i llocs amb articles grans que requereixen un desplaçament llarg cap avall.
Per a què serveix
De moment, la majoria de llocs no tenen una funció com el botó "amunt" i no hi ha res crític en això. Però el seu ús pot aportar molts avantatges tant per al recurs d'Internet com per als seus visitants.
Benefici per als visitants
Sovint passa quan la pàgina d'un recurs d'Internet està molt carregada d'informació, quan un article informatiu ocupa molt d'espai i cal desplaçar-se cap avall per la pàgina amb la roda del ratolí. A més d'això, al final de l'article hi pot haver molts comentaris.
Quan un visitant llegeix un article, desplaçar-se cap avall per la pàgina no fa res de cansat, però quan el text ha acabat i has de moure't cap amunt, comença a ser una mica cansat. La majoria de la gent serà massa mandra per desplaçar-se durant molt de temps i tancarà el lloc, en lloc de fer un altre passeig per les seves extensions.
Fent servir el botópassar instantàniament a la part superior de la pàgina fa que sigui més còmode passar temps al lloc.
Benefici del recurs d'Internet
Els aspectes positius del recurs en si mateix provenen de factors passats, ja que la navegació al lloc més fàcil millora els factors de comportament, ja que tots els visitants seran més actius en les seves accions i passaran a altres pàgines.
Així, aquests factors de comportament afecten l'actitud de tots els motors de cerca envers el lloc i condueixen a una millora de la posició als resultats de la cerca.
Com crear el botó "amunt" al lloc tu mateix
Tractar més. Sempre podeu crear un botó de desplaçament cap amunt per a un lloc a qualsevol dels CMS vos altres mateixos seguint només uns quants passos extremadament senzills:
- creació d'imatges;
- creació d'un guió;
- crear estil de botó;
- afegit al lloc.
Imatge del botó
Per afegir un botó "amunt" al lloc, primer heu de fer la pròpia icona, quan feu clic, l'usuari es mourà a la part superior de la pàgina. Per fer-ho, podeu utilitzar opcions ja fetes, entre les quals sempre podeu triar la més adequada.
Per millorar l'aparença del botó, hem de fer algunes millores, és a dir, fer un sprite que ens permeti combinar imatges de fons basades en CSS, creant així una animació a partir d'elles.
Per a treballs gràfics, podeu utilitzar qualsevol editor. Però l'opció més convenient seria un servei en línia. PIXLR, ja que no hi ha res per descarregar aquí i el podeu utilitzar directament al vostre navegador.
Per començar, a la finestra de l'editor que apareix, seleccioneu el camp "Penja la imatge des de l'ordinador". Prenem com a exemple la imatge d'un coet.
Si les dimensions de la icona seleccionada són massa grans, haureu de fer un petit ajust de mida. Per fer-ho, aneu al menú superior i seleccioneu el camp "Edita", i després de "Transformació lliure…"
A continuació, apareixen marcadors especials al costat de la imatge, movent-los per canviar la mida de la imatge. Per mantenir les proporcions, podeu utilitzar la tecla Maj, premuda la qual necessiteu per moure els marcadors blaus. Al final d'aquests passos, s'obté una imatge d'un coet.
El següent pas és crear una còpia de la capa.
Ara heu de moure una mica la imatge del coet des de la nova capa. Per fer-ho, serà convenient utilitzar l'eina de moviment, que es troba a la segona columna del menú de l'esquerra, i la fletxa amunt del teclat.
Ara hem de fer la imatge superior en blanc i negre. Això es pot fer mitjançant l'element "Correcció" - "Tonalitat / Saturació" al menú superior. Per a una desaturació completa, el control lliscant Saturació s'hauria de posar a -100. Aquesta acció us permetrà crear un efecte en què el botó "Amunt" passarà de blanc i negre a color quan passeu el cursor per sobre.
El toc final és l'eliminació d'espai addicional al voltant de les dues imatges. Per fer-ho, seleccioneu l'element "Retallar" del menú de l'esquerra iseleccionem només dos coets en un rectangle. Per retallar, es prem la tecla Intro.
El resultat és una imatge en què no hi ha espai lliure addicional. Haureu d'anotar l'amplada i l'alçada de la imatge resultant, ja que aquestes dades us seran útils en el pas següent.
Per desar, cal que feu clic a "Fitxer" - "Desa", on al paràgraf esquerre "El meu ordinador" escrivim el nom de la imatge (només el disseny en anglès), seleccioneu el format (en aquest cas, PNG) i feu clic al botó "Sí".
Fitxer amb el guió del botó "amunt"
En aquest cas, no cal escriure cap script. Serà possible utilitzar la versió pública, fent algunes esmenes al codi acabat.
Per fer-ho, heu de descarregar qualsevol editor de codi. L'opció més popular i també gratuïta és Notepad++. Després d'instal·lar-lo, heu de copiar i enganxar-hi tot aquest codi:
| $(document).ready(function(){ $(window).scroll(funció () {si ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} sinó {$('scroller').fadeOut();}}); $('scroller').clic (funció () {$('body, html').animate({scrollTop: 0}, 400); retorna fals;}); }); |
A continuació, feu clic al menú superior "Fitxer" - "Desa com a…", després del qual desem el codi en format.js. Després d'això, podeu utilitzar aquest codi al vostre lloc penjant-hi els fitxers d'script i les imatges mitjançant una connexió FTP.
Instal·lar al lloc
Per configurar el botó de desplaçament cap amunt del lloc, cal que hi col·loqueucodi de lloc requerit. Heu d'introduir-lo abans de l'etiqueta.
Crear un estil de botó amb CSS
La majoria de vegades, el botó "amunt" del lloc es troba a la part inferior ("peu de pàgina").
El codi següent s'ha d'afegir al fitxer style.css del lloc:
|
/Botó amunt/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/camí de la imatge nativa/ width:39px;/ botó amplada/ alçada:96px;/50% d'alçada del botó/ bottom:5px;/encoixinat inferior en posició fixa/ esquerra:89%;/desplaça cap a l'esquerra/ }.scrollTop:hover{ background-position:0 -108px; } /desplaçament de fons/" |
En aquest cas, les dades d'amplada i alçada de la imatge seran necessàries. Només queda introduir les dades rebudes al codi i el botó "amunt" del lloc estarà a punt! Què més?
Botó amunt per al lloc de Wordpress
Per a aquest CMS, el botó "Amunt" es pot fer amb connectors, així com de manera independent.
El mètode dels connectors és el més còmode i fàcil d'instal·lar, ja que només requereix que feu clic al botó d'instal·lació i configureu totes les funcionalitats al menú dels connectors.
L'elecció d'aquest últim s'ha de plantejar amb precaució, ja que amb ella serà fàcil adquirir un virus al lloc. L'opció més popular i provada és un connector anomenat Scroll Back to Top. Podeu descarregar-lo mitjançant la cerca estàndard de connectors de Wordpress.
Aquesta extensió téfuncionalitat múltiple, i serà molt fàcil personalitzar el botó "amunt" per a un lloc de Wordpress. No cal canviar tots els valors, només cal que configureu l'aparença i la ubicació del botó a la pàgina del lloc.
Com podeu veure, configurar el botó de configuració amb connectors és molt fàcil. Però hi ha un matís important, que és que cada connector instal·lat carrega el CMS. Això pot afectar la velocitat del recurs d'Internet. És per això que la majoria de propietaris de llocs intenten fer tots els canvis directament al codi, i no amb l'ajuda d'extensions de tercers. Podeu crear un botó "amunt" per a un lloc HTML, que minimitzarà els recursos consumits.
Abans de canviar tots els fitxers del sistema de Wordpress, n'heu de fer una còpia de seguretat. A continuació, podeu seguir tots els passos per crear el vostre propi botó, descrits anteriorment.
Botó "amunt" per a Joomla
CMS Joomla també admet la instal·lació de connectors, com ara Wordpress. La versió més exitosa del botó "amunt" per a un lloc a Joomla 3 és una extensió anomenada Part superior de la pàgina.
En aquest CMS, qualsevol connector es pot instal·lar mitjançant el "Gestor d'extensions". Per a això necessites:
- baixar el connector a Internet;
- feu clic al botó "Navega" al gestor d'extensions;
- seleccioneu l'arxiu baixat;
- feu clic a "Baixa" i instal·leu.
Ara l'has d'activar al "Gestor de connectors". Per aixòheu d'anar a aquesta secció, trobar el connector i canviar el seu estat a "activat".
El següent pas és configurar tots els paràmetres de l'extensió utilitzant la mateixa secció on heu de trobar els "Paràmetres bàsics" d'aquest connector a la part dreta.
La part superior de la pàgina té les funcions següents:
- Executar/administrador: habilitant l'opció no només al recurs d'Internet, sinó també al mateix panell CMS de Joomla.
- Button Reveal Position: quants píxels ha de rebobinar l'usuari perquè aparegui el botó amunt.
- Omet el text del botó: la presència de text al botó.
- Sempre a la part superior: la pàgina del lloc sempre es mostrarà des de la part superior. Quan utilitzeu àncores per desplaçar-vos a una ubicació específica de la pàgina, aquesta opció no cal que estigui activada.
- Smooth Scroll: fa que el desplaçament de la pàgina sigui més suau.
- Durada de desplaçament: el temps després del qual la pàgina es mourà completament al principi.
- Transició de desplaçament: afegeix més efectes visuals al desplaçament.
- Transition Easing - "debilitant" el moviment a la part superior de la pàgina.
- Ubicació de l'enllaç: la ubicació de la icona. De manera predeterminada, el botó es troba a l'extrem inferior dret.
- Utilitzar estils: estil de botó individual, que es pot configurar al camp següent. Si es canvia a un valor negatiu, totes les configuracions d'estil es prendran del tema actiu del lloc.
- Estil d'enllaç: un camp per introduir els paràmetres d'estil del botó.
Per personalitzar l'estil del botó "amunt", heu de tenir almenys un mínimConeixement CCS. En cas contrari, hauríeu de canviar el valor del penúltim paràmetre a "No".
Un altre matís important és que la inscripció habitual a la icona conté el text en anglès: Tornar a d alt. Aquest text no pot estar present en un lloc en llengua russa, de manera que simplement hauríeu de desactivar-lo als paràmetres del connector o canviar-lo al rus.
Per canviar aquesta inscripció, heu d'anar al servidor del lloc mitjançant FTP o el gestor de fitxers integrat a l'allotjament. A continuació, al directori "/administrator/language/en-GB/" heu de trobar un fitxer anomenat "en-GB.plg_system_topofthepage.ini".
Abans de canviar el text, hauríeu de canviar la codificació d'aquest document a UTF-8. Això farà que es mostrin les lletres russes de manera normal.
A continuació trobem la línia següent:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Tornar a la part superior"" |
i canvieu la frase entre cometes al rus. Podeu utilitzar frases com "Amunt!", "A d alt!" o "Amunt!".
Al final, haureu de desar el fitxer modificat i comprovar si hi ha el botó "amunt" del lloc a Joomla.
Botó amunt per a Ucoz
El botó "amunt" del lloc a Ucoz s'haurà de fer mitjançant la injecció de codi, ja que és impossible connectar connectors per a aquest CMS. Tanmateix, això no requereix un llarg estudi dels fitxers del sistema i cercar les línies necessàries, només cal que enganxeu un petit codi al lloc correcte.
Per instal·lar-nosrequerit:
- anar a "Tauler de control -> Disseny -> Gestió de disseny (plantilles) -> Part inferior del lloc;
- insereix el guió (es pot trobar al lloc web oficial del projecte i recursos de tercers).
Conclusió
Després d'això, apareixerà una icona a l'extrem inferior dret, movent l'usuari a la part superior de la pàgina.
Com podeu veure, configurar el botó enrere per a qualsevol dels CMS no va ser especialment difícil. Podeu utilitzar tant un mètode d'instal·lació automatitzat (connectors) com un de manual. Tanmateix, aquesta darrera opció segueix sent la més adequada, ja que no afecta negativament el rendiment del lloc.
Podeu utilitzar el botó "tornar a d alt" d'un lloc HTML per minimitzar el consum de recursos del lloc, ja que un gran nombre d'extensions poden tenir un impacte negatiu en el rendiment del recurs. Un connector del botó "amunt" no podrà afectar molt el temps de càrrega de les pàgines del lloc, però en la majoria dels casos l'usuari té almenys una dotzena de connectors instal·lats al CMS. En aquest cas, qualsevol connector pot afectar negativament el rendiment de les pàgines del lloc.
