Povratak na prethodnu stranicu joomla 3. Kako napraviti dugme za povratak na web stranicu

U ovom video tutorijalu ćemo pogledati 3 opcije kako napraviti dugme BACK za kretanje po sajtu na prethodne stranice obrnutim redosledom. Dugme BACK je takođe neophodno kada linkovi sa više stranica sajta (A1, A2...An) vode na istu stranicu (B), a sa ove stranice (B) se morate vratiti na prethodnu stranicu (An) stranice sa koje ste došli na stranicu (B).

Pogledajte novi video tutorijal:

U ovom video tutorijalu napravićemo dugme za povratak na prethodne stranice sajta Adobe program Muse. Ovo dugme će se vratiti istom putanjom koju smo pratili na sajtu.

Da bih napravio ovu lekciju, pripremio sam mali projekat, odnosno ne može se nazvati malim, ovdje se sastoji od stranica najvišeg nivoa, stranica prvog nivoa, a takođe i za stranicu „stranica-2“ postoji još nekoliko djece stranice. A radi raznolikosti, napravio sam dva šablona. Primijenio sam prvi šablon na prve tri stranice. I primijenio sam drugi šablon na sve ostale.

Hajde da počnemo. Napravit ćemo dugme Natrag u “Šablonu C” tako da se odmah pojavi na onim stranicama na koje je ovaj predložak primijenjen. Idem da uredim ovaj šablon, i ovde ćemo umetnuti naše dugme za povratak.

Dugme „Nazad” možemo umetnuti na tri načina. jesam poseban fajl, koji sam već pripremio u notesu. I postoje tri načina, tri koda pomoću kojih možemo ubaciti takvo dugme na sajt.

Prva opcija je samo tekst. Dugme će biti u obliku teksta. Kopiram ovaj kod:

I zalijepim ga u šablon. To izgleda ovako. Imamo samo tekst i on je istaknut bijelom bojom. Ja ću to objaviti ovdje. Da bismo razumjeli kako sve ovo funkcionira, pritisnemo tipke ctrl+alt+E da vidimo cijelu stranicu sa svim njenim stranicama u pretraživaču. Ovako izgleda glavna stranica stranice. Možemo pretraživati ​​meni, birati stranice. Ovdje imamo padajuće menije. I, na primjer, sa glavne stranice smo odmah otišli na stranicu „stranica-3“. I ovdje imamo dugme za povratak.

Ovo dugme je aktivno, ali kada pređete mišem preko njega, ruka sa prstom se ne pojavljuje. Možemo bezbedno da kliknemo na ovo dugme i bićemo preusmereni nazad na glavnu stranicu. Na isti način možemo kliknuti na stranicu “stranica-3”, zatim otići na stranicu “page-4” i kliknuti na dugme “Back”, odvest će nas na stranicu “page-3”, a ako kliknemo ponovo na dugme "Nazad", a zatim nas vodi na glavnu stranicu. Ovako radi dugme za povratak.

Ali ovo dugme se teško može nazvati dugmetom, jer je to samo ovaj natpis, istaknut belom bojom. Ako želimo da ga uredimo u Museu, možemo samo da promenimo veličinu teksta, na primer, ovde ću staviti "36" da ga bolje vidite. Po mom mišljenju, ne možemo promijeniti boju teksta. Sada ću pokušati staviti crvenu. Izabrao sam crvenu, ali to ni na koji način nije uticalo na naše pismo, tako da ne možemo promijeniti boju. Možemo promijeniti veličinu. Pokušajmo ga podebljati i centrirati. Sve što možemo je da uredimo ovako. Ako želimo popuniti ovaj blok, na primjer, učiniti ga narandžastim, onda će naš tekst i dalje biti istaknut bijelom bojom i, u principu, ne izgleda baš lijepo.

Sada ćemo to kopirati. Pritisnem ctrl+C i idem na program, i pritisnem ctrl+V da ga zalijepim na stranicu. Izgleda kao ovaj link. Naša veza je plava. Sada nije mnogo vidljiva. Napravimo i 36. font da ga uvećamo i vidimo bliže. Ovdje imamo samo plavu vezu. Ako sada pritisnemo ctrl+alt+E, vidjet ćemo da kada se pogleda, izgleda kao ova obična plava veza. Prođimo još par puta da vidimo, klikni jednom, dvaput, vrati se. Ova veza ima isti izgled kao i obična veza.

Na njega možemo primijeniti stilove veza u Adobe Muse. Pronađite stilove veza u odjeljku "Hiperveze", odaberite "Uredi stilove veze". Već imam pripremljenu verziju. Sada već imam pripremljenu verziju. Možete vidjeti da ima stil primijenjen na njega. U standardnom stanju i kada lebdite kursorom miša, boja je plava, a u aktivnom stanju - crvena. Videli ste to dok ste gledali. Drugi stil koji sam stvorio bila su jednostavno crna stanja. Ovaj stil možemo primijeniti na ovo dugme. Na primjer, odabrat ću i primijeniti ovaj prilagođeni stil na ovo dugme. I vidjet ćete da je naš natpis pocrnio.

Ovdje također možemo napraviti ispunu, na primjer, ja ću to učiniti istom narandžastom bojom. Ovdje već možete uređivati ​​tekst. Hajde da ga stavimo u sredinu i učinimo ga podebljanim. I, u principu, ova opcija je već sličnija gumbu. Više ne postoji takav bijeli naglasak i, u principu, ova opcija je već sasvim prikladna. Dok pretražujete (ctrl+alt+E), idemo na stranicu "stranica-3", na stranicu "page-4" i kliknite ponovo. Ovo dugme radi potpuno isto kao i prvo, samo što ima više opcija za uređivanje dizajna.

I treća opcija kako možemo postaviti dugme je da dugme bude slika. Kopiram ovaj kod:

Idem u Muse i kliknem na “Insert”. A ova treća opcija koju imamo je slika. Da bismo imali nekakvu sliku ovdje, potrebno je da skinemo neku sliku sa interneta ili da je sami napravimo. Dodamo sliku kroz funkciju "Datoteka" programa, odaberite "Dodaj datoteke za prijenos". Već sam skinuo par slika sa interneta. Možemo izabrati jednu. Odaberimo ovu tipkom za povratak. Sada, ako pogledamo u odeljku “Resursi”, dodali smo dugme “back2.png” - “Transmit”. Imamo ovaj fajl za prijenos.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Nazad" / > < / a >

To je to, kliknite na "OK". Nećemo vidjeti nikakve promjene u samoj Muse. Sve promjene ćemo vidjeti samo kada pregledate stranicu u pretraživaču. Hajde da ponovo pritisnemo ctrl+alt+E da pogledamo sajt u pretraživaču i pokušamo da surfujemo našim stranicama.

Idemo na stranicu, na primjer, "strana 2-1", sada idemo na stranicu "stranica-2", sada idemo na stranicu "strana 3", pa na stranicu "strana-4". A sada, ako pritisnemo dugme za povratak, vratićemo se uzastopno obrnutim redosledom početna stranica site. Kliknite na “Nazad”, prijeđite na stranicu “page-3”, na stranicu “page-2”. I ovdje više nemamo dugme. Ako bismo ga postavili u šablon koji je primijenjen na stranicu “stranica-2”, onda bismo ovdje također imali dugme “Nazad”. Pošto ga nemamo, na glavnu stranicu moramo se kretati samo klikom na dugme "Početna" u meniju. Idemo, na primjer, na stranicu “strana 2-2-2”, zatim na stranicu “strana 2-2-1”, pa na stranice “strana-3” i “stranica-4”. A sada obrnutim redoslijedom: stranica “strana-3”, stranica “stranica 2-2-1”, stranica “stranica 2-2-2” i na glavnu stranicu.

Naravno, ne morate postaviti ovo dugme na svoju web stranicu, već koristite obične strelice u vašem pretraživaču. Ali ako želite da takvo dugme bude na vašoj web stranici, onda to možete učiniti na ove načine... A link na članak će biti ispod ovog videa. To je sve. Dmitrij Šapovalov je bio sa vama. Lajkujte ovaj video, pretplatite se na kanal, pišite komentare ispod, a ja se pozdravljam s vama do narednih video lekcija.

U ovom članku ćemo pogledati kako možete kreirati dugme „Nazad” na bilo kom mestu koje vam je potrebno. Mislim da je iz naziva dugmeta već jasno šta će se desiti kada kliknete na njega. Takvo dugme se može umetnuti i u kategoriju i u sam materijal. Sve se radi prilično jednostavno.

Postoji nekoliko opcija kako možete dodati dugme, ali ja sam lično koristio samo jedan način. Naime, treća opcija od tri koje sam predložio. Malo dalje ću vam reći zašto.

Koje opcije imamo:

Prednost treće opcije je da ako treba da uredite tekst na dugmetu ili promenite/dodate klasu stila, potrebno je samo da popravite sam modul, a ne dugme na svim mestima gde se nalazi.

Dakle, na jednoj od mojih stranica koristio sam treću opciju:

Modul “HTML code” je kreiran i tu je ubačen kod dugmeta pomoću ekstenzije “Sourcerer”, što omogućava dodavanje bilo kog koda u materijal.

Kod mog radnog dugmeta:

Idi nazad

Tekst je blago ukrašen strelicom koristeći komponente iz Bootstrapa 3, a samo dugme je stilizovano preko CSS-a.

Mnoge studije upotrebljivosti pokazuju da korisnici (i novi i iskusni) često koriste dugme „nazad” u pretraživaču. Nažalost, front-end dizajneri i trgovci rijetko razmatraju kakve bi implikacije to moglo imati na upotrebljivost, s obzirom na moderne modele web dizajna koji koriste aplikacije, animaciju, video i još mnogo toga. Često tehnička struktura ovih rasporeda ne reaguje ispravno na funkciju „vrati se“, razbijajući mentalni obrazac korisnika i degradirajući njihovo iskustvo.

Posljedice ovoga mogu biti strašne: tokom eksperimenata, neadekvatan odgovor stranice na pritiskanje dugmeta "nazad" bio je razlog za odlazak mnogih korisnika, uz zloupotrebe i neugodne kritike. U većini slučajeva, čak su i poštovani, sedokosi subjekti strašno izgubili živce.

Iz ovog članka ćete naučiti:

• šta korisnici očekuju od dugmeta „nazad”;
• koje su 5 najčešćih grešaka;
• jednostavno rješenje ovih problema.

Rješenje je zaista vrlo jednostavno, ali ga često zanemaruju čak i najveći brendovi. Hoćemo li popraviti ovu grešku?

Očekivanja korisnika

Ukratko: korisnici očekuju da im dugme „vrati nazad“ pokaže šta percipiraju kao prethodnu stranicu. Riječ „opažiti“ je vrlo važna, jer postoji ogromna razlika između onoga što izgleda kao prethodna stranica i onoga što je tehnički.

Postavlja se pitanje: šta tačno korisnici tumače kao novu stranicu? U većini slučajeva, ako je stranica značajno drugačija vizualno, ali je konceptualno povezana s web-mjestom, onda se doživljava kao nova. Stoga je vrlo važno pratiti kako stranica obrađuje različite interaktivne elemente: lightboxove, forme, filtere itd.

Većina posjetitelja ne razumije tehničke aspekte, već se oslanjaju samo na intuitivne ideje o tome kako bi resurs trebao funkcionirati. Stoga, kada kliknu na dugme „nazad“, očekuju stranicu na kojoj su već imali važno iskustvo, ali dobijaju stranicu sa malo izmenjenim interfejsom.

Ispod su najpopularniji interaktivni elementi i preporuke za njihovo korištenje kako biste maksimalno povećali korisničko iskustvo i upotrebljivost.

Svrha implementacije preklapanja i lightboxova je da se korisniku pokaže element koji se pojavljuje na vrhu stranice. Stoga korisnici takve elemente doživljavaju kao nove stranice i pritiskaju tipku “nazad” da se vrate na prvobitnu poziciju – ali oni završavaju na potpuno drugom mjestu nego što su očekivali. Ovo je posebno žalosno, jer upotreba lightbox-a samo umnožava negativnu percepciju web stranice – većina korisnika ne voli ove elemente na stranicama za online kupovinu.

Korištenje filtera često transformira stranicu i daje osobi novo iskustvo. Stoga se nakon sortiranja stranica percipira kao nova, čak i ako na njoj ništa nije učitano. To se događa jer se nakon svake interakcije posjetitelja sa stranicom online trgovine generira novi rezultat.

Ovaj primjer naglašava da ljudi ne ulaze u tehničke aspekte prilikom određivanja nova stranica, ali koristite samo intuiciju i formiranu percepciju.

3. Obrazac za registraciju/uplatu

Stranice za plaćanje se doživljavaju kao nove stranice, a još gore - kao proces u više koraka, čija se svaka faza može otkazati tipkom „nazad“.

Ovaj pristup može uzrokovati probleme, jednostavan primjer je da osoba želi da se vrati korak unazad u ispunjavanju obrasca kako bi uredila unesene informacije. Pritiskom na dugme “nazad” vraća se u korpu i brišu se svi (!) uneseni podaci. Iritacija i napuštanje mjesta je prirodan učinak.

AJAX tehnologija možda neće ispuniti očekivanja korisnika: svaka AJAX stranica je tehnički pod istim URL-om, ali izgleda da se otvaraju nove stranice.

U kontekstu e-trgovine, korisnici imaju jasnu percepciju da su stranica 3 i stranica 4 odvojene i da se mogu kretati sa stranice 4 na stranicu 3 pomoću dugmeta za povratak.

Korisnici nisu spremni da se odreknu dugmeta za povratak

S obzirom na to koliko je široko korištena ova funkcija internet pretraživača, pitanje neusklađenosti između očekivanja korisnika i vizije programera postaje kritično i ne treba ga uzimati olako.

Korisnicima se posebno svidjelo dugme „nazad“. mobilne aplikacije i web stranice. Kako je studija pokazala mobilne verzije stranicama, većina korisnika je koristila ovu funkciju na svim ponuđenim resursima. Štaviše, upotreba dugmeta nije ograničena na vraćanje jedne stranice unazad - neki subjekti su ga pritiskali i do 15 (!) puta zaredom.

Korisnici računara takođe često pritiskaju dugme - ali ne toliko koliko vlasnici mobilnih telefona, jer korisnici desktop računare Dostupna je zgodna navigacija web stranice.

Rješenje

Dobra vijest je da HTML5 ima relativno jednostavno rješenje problema, a zove se HTML5 History API. Konkretnije, funkcija history.pushState() vam omogućava da promijenite URL bez ponovnog učitavanja stranice. Shodno tome, stranica će se ponašati u skladu s očekivanjima korisnika koji je kliknuo na dugme „nazad“.

Dobar dan, imam pitanje kako da pomerim dugme nazad i da ga stavim pored sledećeg dugmeta prilikom narudžbe dolje, prestaje raditi kod.

Postoji rješenje

Pozdrav, da li mi neko može reći kako da napravim dugme za povratak, na primer, u korpi za kupovinu, da se osoba može vratiti na prethodnu stranicu?

Umetnite dugme gde god želite u šablon, na primer, ovo

+1

Kada pritisnem dugme za povratak na pretraživaču, čini se da svi stilovi nestaju dok ne osvežim stranicu Podrazumevana tema treba da se prikaže kao na slici ispod) Recite mi u čemu je problem

Zdravo, napravio sam dugme "Vrati se" u korpi, čak nije ni dugme, već samo link sa kodom Vrati se nazad Sada kada se vraćate nazad u kolica...

Postoji rješenje

Dobar dan naišao sam na sledeći problem: kada dodate artikal u korpu i kliknete na dugme „nazad” u pretraživaču, informacije o artiklima u korpi (u dodatnom bloku) se ne čuvaju dok ne osvežite stranicu! One. idi na sajt, idi...

Stranica koju ste naveli koristi dodatak za košaricu kolica.

Dobar dan Na svakom koraku tokom naplate, dugme „Sledeće“ je naznačeno u temi „Suprime“, pronašao sam kod dugmeta.