Butonul "sus" pentru un site: cum se face

O astfel de funcție, ca și butonul "up" pentru site, face ca resursa de Internet să fie mai convenabilă pentru vizitatorii săi. Vă ajută să vă mișcați cu ușurință de oriunde din pagină până la vârf. Acest lucru este necesar doar pentru magazinele online și site-urile cu articole mari care necesită o defilare lungă în jos.

Pentru ce este?

În prezent, nu există o astfel de funcție pe majoritatea site-urilor ca butonul "sus", și nu există nimic critic în legătură cu acest lucru. Dar utilizarea sa poate aduce multe plusuri atât pentru resursele de internet, cât și pentru vizitatorii săi.

Beneficii pentru vizitatori

Se întâmplă adesea, când pagina resursei de pe Internet este încărcată foarte mult cu cantitatea de informații, atunci când articolul de informații ocupă o mulțime de spațiu și trebuie să defilați în jos pagina cu rotița mouse-ului. În plus, la sfârșitul articolului ar putea fi multe comentarii.

Când un vizitator citește un articol, nu este nimic obositor în derularea paginii, dar când textul sa încheiat și este necesar să se mute în sus, începe să se înnebune puțin. Majoritatea oamenilor vor fi pur și simplu leneși pentru a conduce o lungă parcurgere și vor închide site-ul, în loc să se plimbe încă prin expansiuni.

Utilizarea butonului pentru a vă deplasa instantaneu în partea de sus a paginii face ca jocul pe site să fie mai convenabil.

Beneficii pentru o resursă de internet

Partile pozitive pentru resursa in sine se bazeaza pe factori din trecut, deoarece o miscare simplificata pe site imbunatateste factorii comportamentali, intrucat toti vizitatorii vor fi mai activi in ​​actiunile lor si se vor muta in alte pagini.

Astfel, datele Factori comportamentali afectează atitudinea tuturor motoarelor de căutare de pe site și conduc la o îmbunătățire a locației în SERP.

Cum de a face butonul "sus" pe site-ul dvs.

Înțelegem în continuare. Butonul de derulare în sus pentru un site de pe oricare din CMS poate fi întotdeauna făcut singur, doar câțiva pași foarte simpli:

• crearea unei imagini;
• Crearea unui scenariu;
• crearea unui stil de buton;
• adăugarea la site.

Imaginea butonului

Pentru a adăuga butonul "sus" de pe site, mai întâi trebuie să faceți pictograma în sine, atunci când faceți clic pe acesta, utilizatorul va deplasa pagina în sus. Pentru a face acest lucru, puteți utiliza opțiunile gata făcute, dintre care puteți alege întotdeauna cel mai potrivit.

Pentru a îmbunătăți aspectul butonului, trebuie să faceți unele îmbunătățiri, și anume, să creați o sprite, care vă permite să combinați imagini de fundal pe baza CSS, creând astfel o animație de la ei.

Pentru lucrări grafice, puteți utiliza orice editor. Dar cea mai convenabilă opțiune va fi serviciul online PIXLR, deoarece nu trebuie să descărcați nimic aici și îl puteți folosi chiar în browserul dvs.

Pentru a începe să lucrați în fereastra de editor care apare, selectați câmpul "Încărcați o imagine de pe computer". Ca exemplu, luați imaginea rachetei.

Dacă dimensiunile pictogramei selectate sunt prea mari, atunci va fi necesară o mică ajustare a dimensiunilor. Pentru a face acest lucru, mergeți la meniul de sus și selectați câmpul "Editare" și după "Free transformhell"

În dreptul imaginii, există marcatori speciali, deplasându-i, puteți modifica dimensiunea imaginii. Pentru a salva proporțiile, puteți utiliza tasta Shift, prin fixarea acesteia, trebuie să mutați marcatorii albastre. La sfârșitul acestor acțiuni, se obține imaginea rachetei.

Următorul pas este să creați o copie a stratului.

Acum trebuie să mutați imaginea rachetei din noul strat puțin mai sus. Pentru a face acest lucru, va fi convenabil să utilizați instrumentul de mutare, care se află în a doua coloană a meniului din stânga, și săgeata "sus" de pe tastatură.

Acum trebuie să faceți imaginea de sus în alb și negru. Acest lucru se poate face folosind elementul "Corecție" - "Hue / Saturation" din meniul de sus. Pentru decolorarea completă, glisorul Saturație trebuie să fie setat la -100. Această acțiune va face ca butonul "Sus" să se transforme de la alb-negru în culoare atunci când îl plasați pe hartă.

Atingerea finală este eliminarea spațiului în exces în jurul celor două imagini. Pentru aceasta, selectați elementul "Decupați" din meniul din stânga și selectați numai două rachete în dreptunghi. Pentru a executa decuparea, apăsați tasta Enter.

Rezultatul este o imagine în care nu există spațiu în exces. Va fi necesar să înregistrați lățimea și înălțimea imaginii rezultate, deoarece aceste date vor fi utile în etapa următoare.

Pentru a salva, faceți clic pe "Fișier" - "Salvați", unde în imaginea din stânga "My Computer" notăm numele imaginii (numai în engleză), selectați formatul (în acest caz PNG) și faceți clic pe butonul "Da".

Fișier cu butonul de sus în sus

În acest caz, nu este necesar să scrieți un script. Va fi posibil să profitați de opțiunea publică, făcând unele corecții la codul finit.

Pentru a face acest lucru, trebuie să descărcați orice editor de coduri. Cea mai populară și gratuită versiune este Notepad ++. După instalare, trebuie să copiați și să inserați în el tot acest cod:

Apoi faceți clic pe meniul superior "File" - "Save ashellip;", apoi salvați codul în formatul .js. După aceasta, puteți utiliza acest cod pe site-ul dvs., încărcând fișierele și imaginile de script folosind o conexiune FTP.

Instalarea pe site

Pentru a seta butonul de derulare în sus pentru site, trebuie să plasați codul în locația dorită. Trebuie să o introduceți înainte de etichetă .

Crearea unui stil de buton în CSS

Cel mai adesea, butonul "sus" pentru site este situat în partea de jos ("subsol").

În fișierul site.css al site-ului, trebuie să introduceți următorul cod:

În acest caz, aveți nevoie de lățimea și înălțimea datelor pentru imagine. Rămâne doar să introduceți datele în cod, iar butonul "sus" pentru site va fi gata! Ce altceva?

Butonul Sus pentru site-ul Wordpress

Pentru acest CMS, butonul "Sus" poate fi realizat cu ajutorul plugin-urilor, precum și independent.

Metoda cu plugin-uri este cea mai convenabilă și mai ușor de instalat, pentru că acest lucru necesită doar clic pe butonul de instalare și ajustați toate funcționalitățile din meniul plugin.

Alegerea celor din urmă ar trebui să fie abordată cu prudență, deoarece împreună cu aceasta va fi posibil să se obțină cu ușurință un virus pe site. Opțiunea cea mai populară și dovedită este un plug-in numit Derulare înapoi în sus. Puteți să o descărcați utilizând căutarea standard a pluginului Wordpress.

Această extensie are mai multe funcții și va fi foarte ușor să individualizați butonul "sus" pentru un site WordPress. Toate valorile nu trebuie modificate, trebuie doar să configurați aspectul și locația butonului de pe pagina site-ului.

După cum puteți vedea, setarea butonului "sus" cu ajutorul pluginurilor este foarte simplă. Dar există o nuanță importantă, că fiecare plugin instalat încarcă CMS. Acest lucru poate afecta viteza resursei Internet. De aceea, majoritatea proprietarilor de site-uri încearcă să execute toate modificările direct în cod, și nu cu ajutorul extensiilor de la terțe părți. Puteți face butonul "sus" pentru site-ul HTML, ceea ce va reduce la minimum resursele consumate.

Înainte de a schimba toate fișierele de sistem WordPress trebuie să facă copii de rezervă. Apoi, puteți urma toți pașii pentru a crea un buton propriu, descris mai sus.

Knoka "sus" pentru Joomla

CMS Joomla acceptă, de asemenea, instalarea de plug-in-uri, cum ar fi Wordpress. Versiunea cea mai de succes a butonului "up" pentru un site pe Joomla 3 este o extensie numită Top of the Page.

În acest CMS, orice plugin poate fi instalat prin "Extension Manager". Pentru a face acest lucru aveți nevoie de:

• descărcați plug-in-ul pe Internet;
• Dați clic pe butonul "Răsfoiți" din Managerul de extensii;
• selectați arhiva descărcată;
• faceți clic pe "Descărcați" și instalați.

Acum trebuie să o activați în "Managerul de pluginuri". Pentru a face acest lucru, mergeți la această secțiune, găsiți plug-in-ul și comutați starea acestuia la "on".

Apoi, configurați toate opțiunile de extensie folosind aceeași secțiune unde trebuie să găsiți "Parametrii de bază" ai acestui plug-in pe partea dreaptă.

Începutul paginii are următoarele funcționalități:

• Rulați în / administrator - activați opțiunea nu numai pe resursele de Internet, ci și în CMS Joomla în sine.
• Poziția de afișare a butonului - câte pixeli ar trebui să revină utilizatorul pentru a apărea butonul "sus".
• Omit Button Text - textul de pe buton.
• Întotdeauna în partea de sus - pagina site-ului va fi afișată întotdeauna de la început. Când utilizați "ancore" pentru a vă deplasa la un anumit loc de pe pagină, nu trebuie să activați această opțiune.
• Smooth Scroll - face ca pagina să deruleze mai ușor.
• Durata derulării - timpul în care pagina se mișcă complet la început.
• Scroll Transition - adaugă derularea pentru efecte vizuale mari.
• Tranziție de relaxare - "relaxarea" mutarea în partea de sus a paginii.
• Locația legăturii - locația pictogramei. Prin standard, butonul este situat în colțul din dreapta jos.
• Utilizați stiluri - stilul individual al butonului, care poate fi setat în câmpul de mai jos. Dacă treceți la o valoare negativă, toate setările de stil vor fi luate din tema site-ului activ.
• Stilul de legătură - un câmp pentru introducerea setărilor pentru stilul butonului.

Pentru a personaliza stilul butonului "sus", trebuie să aveți cel puțin o cunoaștere minimă a tehnologiei CCS. În caz contrar, este necesar să comutați valoarea penultimului parametru la "Nu".

O altă nuanță importantă este că inscripția obișnuită pe pictogramă conține textul în limba engleză: Revenire în sus. Pe un site în limba rusă, un astfel de text nu poate fi prezent, așa că îl dezactivați în setările pluginului sau îl puteți modifica în limba rusă.

Pentru a schimba această inscripție, trebuie să accesați serverul de site folosind FTP sau managerul de fișiere de găzduire încorporat. Apoi, în directorul "/ administrator / language / en-GB /" trebuie să găsiți un fișier numit "en-GB.plg_system_topofthepage.ini".

Înainte de a schimba textul, trebuie să modificați codificarea acestui document în UTF-8. Aceasta va face afișarea normală a literelor rusești.

Apoi găsim următoarea linie:

și să schimbe fraza în citate în limba rusă. Puteți folosi expresii precum "Sus!", "La început!" Sau "Sus!".

În cele din urmă, va trebui să salvați fișierul modificat și să verificați un buton "sus" pentru site-ul de pe Joomla.

Butonul Sus pentru Ucoz

Butonul "up" pentru site-ul de pe Ucoz va trebui să fie făcut cu introducerea codului, deoarece plug-in-urile pentru acest CMS nu pot fi conectate. Cu toate acestea, acest lucru nu necesită un studiu lung al fișierelor de sistem și căutați liniile necesare, trebuie doar să introduceți un cod mic în locația dorită.

Pentru a instala, avem nevoie de:

• mergeți la "Panou de control -> Design -> Management de proiectare (șabloane) -> Partea de jos a site-
• introduceți un script (poate fi găsit pe site-ul oficial al proiectului și al resurselor terților).

concluzie

După aceea, în colțul din dreapta jos va apărea o pictogramă, care va duce utilizatorul la partea superioară a paginii.

După cum puteți vedea, setarea butonului "Sus" pentru oricare dintre CMS nu a fost deosebit de dificil. Puteți utiliza atât metoda de instalare automată (plug-in-uri), cât și manualul. Cu toate acestea, ultima opțiune rămâne cea mai potrivită, deoarece nu afectează în mod negativ performanța site-ului.

Puteți utiliza butonul "up" pentru un site pe HTML pentru a minimiza utilizarea resurselor site-ului, deoarece un număr mare de extensii pot avea un impact negativ asupra performanței resurselor. Un buton plug-in "sus" nu poate afecta foarte mult timpul de încărcare al paginilor site-ului, dar în majoritatea cazurilor, utilizatorul are cel puțin douăsprezece plug-in-uri instalate în CMS. În acest caz, orice plugin poate afecta negativ performanța paginilor site-ului.