Reveniți la pagina anterioară joomla 3. Cum să faceți un buton înapoi pe o pagină web

În acest tutorial video ne vom uita la 3 opțiuni pentru cum să faceți un buton ÎNAPOI pentru a vă deplasa pe site la paginile anterioare în ordine inversă. Butonul ÎNAPOI este necesar și atunci când link-urile din mai multe pagini ale site-ului (A1, A2...An) duc la aceeași pagină (B), iar din această pagină (B) trebuie să reveniți la pagina anterioară (An) a site-ului de pe care ai ajuns la pagina (B).

Urmărește noul tutorial video:

În acest tutorial video vom face un buton pentru a reveni la paginile anterioare ale site-ului în programul Adobe Muză. Acest buton va reveni pe aceeași cale pe care am urmat-o pe site.

Pentru a realiza această lecție, am pregătit un mic proiect, sau mai degrabă nu poate fi numit mic, aici este format din pagini de nivel superior, pagini de nivel întâi, iar pentru pagina „pagina-2” mai sunt câțiva copii. pagini. Și pentru varietate, am creat două șabloane. Am aplicat primul șablon pe primele trei pagini. Și am aplicat al doilea șablon tuturor celorlalți.

Să începem. Vom crea un buton Înapoi în „Șablonul C”, astfel încât să apară imediat pe acele pagini cărora li se aplică acest șablon. Mă duc să editez acest șablon și aici vom introduce butonul înapoi.

Putem introduce un buton „Înapoi” în trei moduri. am dosar special, pe care o pregătisem deja într-un blocnotes. Și există trei moduri, trei coduri, cu ajutorul cărora putem introduce un astfel de buton pe site.

Prima opțiune este doar textul. Butonul va fi sub formă de text. Copiez acest cod:

Și îl lipesc în șablon. Arata cam asa. Avem doar text și este evidențiat în alb. O voi posta aici. Pentru a înțelege cum funcționează toate acestea, apăsăm tastele ctrl+alt+E pentru a vizualiza întregul site cu toate paginile sale în browser. Așa arată pagina principală a site-ului. Putem naviga prin meniu, selecta pagini. Aici avem meniuri derulante. Și, de exemplu, din pagina principală am mers imediat la pagina „pagina-3”. Și aici avem un buton înapoi.

Acest buton este activ, dar când treceți mouse-ul peste el, o mână cu un deget nu apare. Putem face clic în siguranță pe acest buton și vom fi redirecționați înapoi la pagina principală. În același mod, putem face clic pe pagina „pagina-3”, apoi mergem la pagina „pagina-4” și facem clic pe butonul „Înapoi”, ne va duce la pagina „pagina-3”, iar dacă facem clic pe pe butonul „Înapoi” din nou”, apoi ne duce la pagina principală. Așa funcționează butonul înapoi.

Dar acest buton cu greu poate fi numit buton, deoarece este doar această inscripție, evidențiată în alb. Dacă vrem să-l edităm în Muse, putem schimba doar dimensiunea textului, de exemplu, voi pune „36” aici ca să-l vedeți mai bine. În opinia mea, nu putem schimba culoarea textului. Acum voi încerca să pun roșu. Am ales roșul, dar asta nu ne-a afectat în niciun fel inscripția, așa că nu putem schimba culoarea. Putem schimba dimensiunea. Să încercăm să o facem îndrăzneață și să o centram. Tot ce putem face este să edităm astfel. Dacă vrem să umplem acest bloc, de exemplu, să îl facem portocaliu, atunci textul nostru va fi în continuare evidențiat în alb și, în principiu, nu arată foarte frumos.

Acum îl vom copia. Apăsez ctrl+C și merg la program și apes ctrl+V pentru a-l lipi pe site. Arată ca acest link. Link-ul nostru este albastru. Acum nu e prea vizibilă. Să facem și un al 36-lea font pentru a-l mări și a-l vedea mai aproape. Aici avem doar un link albastru. Dacă apăsăm acum ctrl+alt+E, vom vedea că atunci când este vizualizat, arată ca această legătură albastră obișnuită. Să mai trecem peste el de câteva ori pentru a vedea, faceți clic o dată, de două ori, reveniți. Acest link are același aspect ca un link obișnuit.

Îi putem aplica stiluri de link în Adobe Muse. Găsiți stiluri de link în secțiunea „Hiperlinkuri”, selectați „Editați stiluri de link”. Am deja o versiune pregătită. Acum am deja o versiune pregătită. Puteți vedea că are un stil aplicat. În starea standard și când treceți cursorul mouse-ului, culoarea este albastră și în starea activă - roșu. Ai văzut-o în timp ce te uitai. Al doilea stil pe care l-am creat a fost pur și simplu toate stările negre. Putem aplica acest stil acestui buton. De exemplu, voi selecta și voi aplica acest stil personalizat acestui buton. Și veți vedea că inscripția noastră a devenit neagră.

Aici putem face și o umplere, de exemplu, o voi face cu aceeași culoare portocalie. Aici puteți deja edita textul. Să-l punem la mijloc și să-l facem îndrăzneț. Și, în principiu, această opțiune este deja mai asemănătoare cu un buton. Nu mai există o astfel de lumină albă și, în principiu, această opțiune este deja destul de potrivită. În timp ce navigați (ctrl+alt+E), să mergem la pagina „pagina-3”, la pagina „pagina-4” și să facem din nou clic. Acest buton funcționează exact la fel ca primul, doar că are mai multe opțiuni pentru editarea designului.

Și a treia opțiune pentru cum putem plasa un buton este că butonul va fi o imagine. Copiez acest cod:

Mă duc la Muse și dau clic pe „Insert”. Și această a treia opțiune pe care o avem este o imagine. Pentru ca noi să avem un fel de imagine aici, trebuie să descarcăm un fișier imagine de pe Internet sau să le creăm noi înșine. Adăugăm imaginea prin funcția „Fișier” a programului, selectați „Adăugați fișiere pentru transfer”. Am descărcat deja câteva poze de pe internet. Putem alege unul. Să îl selectăm pe acesta cu butonul înapoi. Acum, dacă ne uităm în secțiunea „Resurse”, am adăugat un buton „back2.png” - „Transmit”. Avem acest fișier pentru transfer.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Spate" / > < / a >

Asta este, faceți clic pe „OK”. Nu vom vedea nicio schimbare în Muse în sine. Vom vedea toate modificările numai atunci când vizualizam site-ul într-un browser. Să apăsăm din nou ctrl+alt+E pentru a vizualiza site-ul în browser și pentru a încerca să navigăm pe paginile noastre.

Să mergem la pagina, de exemplu, „pagina 2-1”, acum să mergem la pagina „pagina-2”, acum să mergem la pagina „pagina 3”, apoi la pagina „pagina-4”. Și acum, dacă apăsăm butonul înapoi, ne vom întoarce secvenţial în ordine inversă pagina de start site-ul. Faceți clic pe „Înapoi”, treceți la pagina „pagina-3”, la pagina „pagina-2”. Și aici nu mai avem buton. Dacă l-am plasa într-un șablon care a fost aplicat la pagina „pagina-2”, atunci am avea și un buton „Înapoi” aici. Deoarece nu avem unul, trebuie să navigăm la pagina principală doar făcând clic pe butonul „Acasă” din meniu. Să mergem, de exemplu, la pagina „pagina 2-2-2”, apoi la pagina „pagina 2-2-1”, apoi la paginile „pagina-3” și „pagina-4”. Și acum în ordine inversă: pagina „pagina-3”, pagina „pagina 2-2-1”, pagina „pagina 2-2-2” și la pagina principală.

Desigur, nu trebuie să plasați acest buton pe site-ul dvs. web, ci să utilizați săgeți obișnuite în browser. Dar dacă doriți ca un astfel de buton să fie pe site-ul dvs., atunci o puteți face în aceste moduri... Iar linkul către articol va fi sub acest videoclip. Asta e tot. Dmitri Shapovalov a fost cu tine. Dă like acestui videoclip, abonează-te la canal, scrie comentarii mai jos și îmi iau rămas bun de la tine până la următoarele lecții video.

În acest articol vom analiza cum puteți crea un buton „Înapoi” în orice loc de care aveți nevoie. Cred că din numele butonului este deja clar ce se va întâmpla când dai clic pe el. Un astfel de buton poate fi introdus atât într-o categorie, cât și în materialul în sine. Totul se face destul de simplu.

Există mai multe opțiuni pentru cum puteți adăuga un buton, dar eu personal am folosit doar un singur mod. Și anume a treia variantă din cele trei pe care le-am propus. Puțin mai departe vă spun de ce.

Ce optiuni avem:

Avantajul celei de-a treia opțiuni este că, dacă trebuie să editați textul pe un buton sau să modificați/adăugați o clasă de stil, va trebui doar să remediați modulul în sine, și nu să reparați butonul în toate locurile în care se află.

Deci, pe unul dintre site-urile mele am folosit a treia opțiune:

Modulul „HTML code” a fost creat și codul butonului a fost introdus acolo folosind extensia „Sourcerer”, care face posibilă adăugarea oricărui cod la material.

Codul meu de lucru:

Întoarce-te

Textul este ușor decorat cu o săgeată folosind componente din Bootstrap 3, iar butonul în sine este stilat prin CSS.

Multe studii de utilizare arată că utilizatorii (atât cei noi, cât și cei cu experiență) folosesc adesea butonul „du-te înapoi” din browser. Din păcate, designerii și marketerii front-end rareori iau în considerare implicațiile pe care le-ar putea avea acest lucru pentru utilizare, având în vedere modelele moderne de design web care folosesc aplicații, animații, videoclipuri și multe altele. Adesea, structura tehnică a acestor layout-uri nu răspunde corect la funcția „du-te înapoi”, rupând tiparul mental al utilizatorului și degradându-i experiența.

Consecințele acestui lucru pot fi îngrozitoare: în timpul experimentelor, răspunsul inadecvat al site-ului la apăsarea butonului „înapoi” a fost motivul pentru care mulți utilizatori au plecat, cu abuzuri și recenzii nemăgulitoare. În cele mai multe cazuri, chiar și venerabilii subiecți cu părul cărunt și-au pierdut cumpătul îngrozitor.

Din acest articol veți învăța:

• ce așteaptă utilizatorii de la butonul „du-te înapoi”;
• care sunt cele mai frecvente 5 greșeli;
• o soluție simplă la aceste probleme.

Soluția este într-adevăr foarte simplă, dar este adesea neglijată chiar și de cele mai mari mărci. Să reparăm această eroare?

Așteptările utilizatorilor

Pe scurt: utilizatorii se așteaptă la un buton „înapoi” pentru a le arăta ceea ce percep ei ca fiind pagina anterioară. Cuvântul „percepe” este foarte important, deoarece există o diferență uriașă între ceea ce pare a fi pagina anterioară și ceea ce este tehnic.

Apare întrebarea: ce anume interpretează utilizatorii ca pe o pagină nouă? În cele mai multe cazuri, dacă o pagină este semnificativ diferită din punct de vedere vizual, dar este legată conceptual de site, atunci este percepută ca nouă. Prin urmare, este foarte important să monitorizați modul în care site-ul procesează diverse elemente interactive: casete lightbox, formulare, filtre etc.

Majoritatea vizitatorilor nu înțeleg aspectele tehnice, ci se bazează doar pe idei intuitive despre cum ar trebui să funcționeze resursa. Prin urmare, atunci când fac clic pe butonul „înapoi”, se așteaptă la o pagină în care au avut deja o experiență importantă, dar primesc o pagină cu o interfață ușor modificată.

Mai jos sunt cele mai populare elemente interactive și recomandări pentru utilizarea lor pentru a maximiza experiența utilizatorului și capacitatea de utilizare.

Scopul implementării suprapunerilor și casetelor lightbox este de a arăta utilizatorului un element care apare în partea de sus a paginii. Prin urmare, utilizatorii percep astfel de elemente ca pagini noi și apasă butonul „înapoi” pentru a reveni la poziția inițială - dar ajung într-un loc complet diferit de cel la care se așteptau. Acest lucru este deosebit de regretabil, deoarece utilizarea lightbox-urilor nu face decât să multiplice percepția negativă a paginii web - majoritatea utilizatorilor nu le plac aceste elemente pe site-urile de cumpărături online.

Folosirea filtrelor transformă adesea o pagină și oferă unei persoane o experiență nouă. Prin urmare, după sortare, pagina este percepută ca nouă, chiar dacă nu a fost încărcat nimic pe ea. Acest lucru se întâmplă deoarece după fiecare interacțiune a vizitatorului cu o pagină de magazin online, este generat un nou rezultat.

Acest exemplu evidențiază faptul că oamenii nu intră în aspecte tehnice atunci când determină noua pagina, dar folosește doar intuiția și percepția formată.

3. Formular de înregistrare/plată

Paginile de plată sunt percepute ca pagini noi și chiar mai rău - ca un proces în mai mulți pași, fiecare etapă poate fi anulată cu un buton „înapoi”.

Această abordare poate cauza probleme un exemplu simplu este că o persoană dorește să facă un pas înapoi în completarea unui formular pentru a edita informațiile introduse. Apăsarea butonului „înapoi” îl întoarce în coș și șterge toate (!) datele introduse. Iritația și părăsirea locului este un efect natural.

Este posibil ca tehnologia AJAX să nu satisfacă așteptările utilizatorilor: fiecare pagină AJAX se află din punct de vedere tehnic sub aceeași adresă URL, dar se pare că se deschid noi pagini.

În contextul comerțului electronic, utilizatorii au o percepție clară că pagina 3 și pagina 4 sunt separate și pot fi navigate de la pagina 4 la pagina 3 folosind butonul înapoi.

Utilizatorii nu sunt pregătiți să renunțe la butonul înapoi

Având în vedere cât de larg utilizată este această caracteristică a browserului de internet, problema nepotrivirii dintre așteptările utilizatorilor și viziunea dezvoltatorilor devine critică și nu trebuie luată cu ușurință.

Utilizatorilor le-a plăcut în special butonul „du-te înapoi”. aplicații mobileși site-uri web. După cum a arătat studiul versiuni mobile site-uri, majoritatea utilizatorilor au folosit această funcție pe toate resursele oferite. Mai mult, utilizarea butonului nu se limitează la rularea înapoi cu o pagină - unii subiecți l-au apăsat de până la 15 (!) ori la rând.

Utilizatorii de computere apasă adesea pe buton - dar nu la fel de mult ca posesorii de telefoane mobile, deoarece utilizatorii computere desktop Este disponibilă o navigare convenabilă pe site.

Soluţie

Vestea bună este că HTML5 are o soluție relativ simplă la problemă și se numește HTML5 History API. Mai precis, funcția history.pushState() vă permite să schimbați adresa URL fără a reîncărca pagina. În consecință, site-ul se va comporta în conformitate cu așteptările utilizatorului care a făcut clic pe butonul „Înapoi”.

Bună ziua, am o întrebare despre cum să muți butonul înapoi și să-l plasez lângă butonul următor atunci când plasez o comandă jos, nu mai funcționează.

Există o soluție

Bună ziua, îmi poate spune cineva cum să fac un buton înapoi, de exemplu, în coșul de cumpărături, astfel încât o persoană să se poată întoarce la pagina anterioară?

Introduceți un buton oriunde doriți în șablon, de exemplu, acesta

+1

Când apăs pe butonul Înapoi din browser, toate stilurile par să dispară până când reîmprospătează pagina. Tema implicită ar trebui să se afișeze ca în captura de ecran de mai jos) Spune-mi care este problema

Bună ziua, am făcut un buton „Înapoi” în coș, nici măcar un buton, ci doar un link cu codul Înapoi Acum, când te întorci la cărucior...

Există o soluție

Bună ziua! Am întâmpinat următoarea problemă: când adăugați un articol în coș și faceți clic pe butonul „înapoi” din browser, informațiile despre articolele din coș (în blocul suplimentar) nu sunt salvate până când reîmprospătați pagina. Aceste. intra pe site, mergi...

Site-ul pe care l-ați indicat utilizează un plugin pentru coș cart.

Bună ziua La fiecare pas în timpul comenzii, este indicat un buton „Următorul” În subiectul „Suprime”, am găsit codul butonului: