Powrót do poprzedniej strony Joomla 3. Jak zrobić przycisk Wstecz na stronie internetowej

W tym samouczku wideo przyjrzymy się 3 opcjom utworzenia przycisku WSTECZ umożliwiającego poruszanie się po witrynie do poprzednich stron w odwrotnej kolejności. Przycisk WSTECZ jest także niezbędny, gdy linki z kilku stron serwisu (A1, A2...An) prowadzą do tej samej strony (B), a z tej strony (B) trzeba wrócić na poprzednią stronę (An) witryny, z której trafiłeś na stronę (B).

Obejrzyj nowy samouczek wideo:

W tym samouczku wideo stworzymy przycisk umożliwiający powrót do poprzednich stron witryny programu Adobe Muza. Ten przycisk powróci tą samą ścieżką, którą podążaliśmy na stronie.

Aby przeprowadzić tę lekcję, przygotowałem mały projekt, a raczej nie można go nazwać małym, tutaj składa się on ze stron najwyższego poziomu, stron pierwszego poziomu, a także dla strony „strona-2” jest jeszcze kilka podrzędnych strony. A dla urozmaicenia stworzyłam dwa szablony. Zastosowałem pierwszy szablon na pierwszych trzech stronach. I zastosowałem drugi szablon do wszystkich pozostałych.

Zacznijmy. Utworzymy przycisk Wstecz w „Szablonie C”, aby natychmiast pojawiał się na tych stronach, do których zastosowano ten szablon. Przechodzę do edycji tego szablonu i tutaj wstawimy nasz przycisk Wstecz.

Przycisk „Wstecz” możemy wstawić na trzy sposoby. Ja mam specjalny plik, który przygotowałem już w notatniku. A są trzy sposoby, trzy kody, za pomocą których możemy wstawić taki przycisk na stronę.

Pierwsza opcja to po prostu tekst. Przycisk będzie miał postać tekstu. Kopiuję ten kod:

I wklejam to do szablonu. Wygląda to tak. Mamy tylko tekst i jest on podświetlony na biało. Opublikuję to tutaj. Aby zrozumieć, jak to wszystko działa, wciskamy klawisze ctrl+alt+E, aby wyświetlić w przeglądarce całą witrynę wraz ze wszystkimi jej stronami. Tak wygląda strona główna serwisu. Możemy surfować po menu, wybierać strony. Tutaj mamy rozwijane menu. I np. ze strony głównej od razu przeszliśmy na stronę „strona-3”. I tutaj mamy przycisk Wstecz.

Przycisk ten jest aktywny, jednak po najechaniu na niego myszką nie pojawia się dłoń z palcem. Możemy bezpiecznie kliknąć w ten przycisk, a zostaniemy przekierowani z powrotem na stronę główną. W ten sam sposób możemy kliknąć stronę „strona-3”, następnie przejść do strony „strona-4” i kliknąć przycisk „Wstecz”, przeniesie nas to na stronę „strona-3”, a jeśli klikniemy ponownie na przycisk „Wstecz”, po czym przenosi nas na stronę główną. Tak działa przycisk Wstecz.

Ale tego przycisku trudno nazwać przyciskiem, ponieważ jest to właśnie ten napis, podkreślony na biało. Jeśli chcemy to edytować w Muse, możemy jedynie zmienić wielkość tekstu, np. wstawię tutaj „36”, żeby było lepiej widać. Moim zdaniem nie możemy zmienić koloru tekstu. Teraz spróbuję umieścić kolor czerwony. Wybrałam kolor czerwony, jednak nie miało to żadnego wpływu na nasze liternictwo, dlatego nie możemy zmienić koloru. Możemy zmienić rozmiar. Spróbujmy to pogrubić i wyśrodkować. Wszystko, co możemy zrobić, to edytować w ten sposób. Jeżeli chcemy wypełnić ten blok np. uczynić go pomarańczowym to nasz tekst i tak będzie podświetlony na biało i w zasadzie nie wygląda to zbyt ładnie.

Teraz to skopiujemy. Naciskam ctrl+C i przechodzę do programu, po czym naciskam ctrl+V, aby wkleić go na stronę. Wygląda jak ten link. Nasz link jest niebieski. Teraz nie jest bardzo widoczna. Zróbmy też czcionkę 36-tą, żeby ją powiększyć i zobaczyć bliżej. Tutaj mamy tylko niebieski link. Jeśli teraz naciśniemy ctrl+alt+E, zobaczymy, że po wyświetleniu będzie wyglądać jak zwykły niebieski link. Przejrzyjmy to jeszcze kilka razy, aby zobaczyć, kliknij raz, dwa razy i wróć. Link ten ma taki sam wygląd jak zwykły link.

Możemy zastosować do niego style łączy w Adobe Muse. Znajdź style linków w sekcji „Hiperłącza”, wybierz „Edytuj style linków”. Mam już przygotowaną wersję. Teraz mam już przygotowaną wersję. Widać, że ma zastosowany styl. W stanie standardowym oraz po najechaniu kursorem myszki kolor jest niebieski, a w stanie aktywnym - czerwony. Widziałeś to podczas oglądania. Drugi styl, który stworzyłem, to po prostu wszystkie czarne stany. Możemy zastosować ten styl do tego przycisku. Na przykład wybiorę i zastosuję ten niestandardowy styl do tego przycisku. I zobaczysz, że nasz napis stał się czarny.

Tutaj też możemy zrobić wypełnienie, ja np. zrobię to tym samym pomarańczowym kolorem. Tutaj możesz już edytować tekst. Umieśćmy to na środku i odważmy się. W zasadzie ta opcja jest już bardziej podobna do przycisku. Nie ma już takiego białego podświetlenia i w zasadzie ta opcja jest już całkiem odpowiednia. Przeglądając (ctrl+alt+E) przejdźmy do strony "strona-3", do strony "strona-4" i kliknijmy ponownie. Przycisk ten działa dokładnie tak samo jak pierwszy, z tą różnicą, że posiada więcej opcji edycji projektu.

Trzecią opcją umieszczenia przycisku jest obraz. Kopiuję ten kod:

Wchodzę do Muse i klikam „Wstaw”. Trzecią opcją, którą mamy, jest zdjęcie. Abyśmy mogli mieć tutaj jakieś zdjęcie, musimy pobrać jakiś plik obrazu z Internetu lub sami go stworzyć. Dodajemy zdjęcie za pomocą funkcji „Plik” programu, wybierz „Dodaj pliki do przesłania”. Pobrałem już kilka zdjęć z Internetu. Możemy wybrać jedno. Wybierzmy ten za pomocą przycisku Wstecz. Teraz, jeśli zajrzymy do sekcji „Zasoby”, dodaliśmy przycisk „back2.png” - „Prześlij”. Mamy ten plik do przesłania.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Z powrotem" / > < / a >

To wszystko, kliknij „OK”. W samym Muse żadnych zmian nie zobaczymy. Wszystkie zmiany zobaczymy dopiero przeglądając stronę w przeglądarce. Naciśnijmy ponownie ctrl+alt+E, aby wyświetlić witrynę w przeglądarce i spróbujmy surfować po naszych stronach.

Przejdźmy do strony, na przykład „strona 2-1”, teraz przejdźmy do strony „strona-2”, teraz przejdźmy do strony „strona 3”, następnie do strony „strona-4”. A teraz, jeśli naciśniemy przycisk Wstecz, cofniemy się sekwencyjnie w odwrotnej kolejności strona główna strona. Kliknij „Wstecz”, przejdź do strony „strona-3”, do strony „strona-2”. I tutaj nie mamy już przycisku. Gdybyśmy umieścili go w szablonie, który został zastosowany do strony „strona-2”, to mielibyśmy tutaj również przycisk „Wstecz”. Ponieważ jej nie mamy, musimy przejść do strony głównej jedynie poprzez kliknięcie przycisku „Strona główna” w menu. Przejdźmy np. do strony „strona 2-2-2”, następnie przejdźmy do strony „strona 2-2-1”, następnie do stron „strona-3” i „strona-4”. A teraz w odwrotnej kolejności: strona „strona-3”, strona „strona 2-2-1”, strona „strona 2-2-2” i do strony głównej.

Oczywiście nie musisz umieszczać tego przycisku na swojej stronie, ale użyj zwykłych strzałek w przeglądarce. Jeśli jednak chcesz, aby taki przycisk znalazł się na Twojej stronie, możesz to zrobić w ten sposób... A link do artykułu będzie pod tym filmem. To wszystko. Był z wami Dmitrij Shapovalov. Polub ten film, subskrybuj kanał, napisz komentarz poniżej i żegnam się z Tobą do kolejnych lekcji wideo.

W tym artykule przyjrzymy się, jak utworzyć przycisk „Wróć” w dowolnym miejscu. Myślę, że z nazwy przycisku jest już jasne, co się stanie, gdy na niego klikniesz. Taki przycisk można wstawić zarówno do kategorii, jak i do samego materiału. Wszystko odbywa się po prostu.

Istnieje kilka opcji dodania przycisku, ale ja osobiście użyłem tylko jednego sposobu. Mianowicie trzecia opcja z trzech, które zaproponowałem. Nieco dalej powiem dlaczego.

Jakie mamy opcje:

Zaletą trzeciej opcji jest to, że jeśli chcesz edytować tekst na przycisku lub zmienić/dodać klasę stylu, wystarczy naprawić sam moduł, a nie naprawiać przycisk we wszystkich miejscach, w których się on znajduje.

Tak więc na jednej z moich witryn skorzystałem z trzeciej opcji:

Utworzono moduł „Kod HTML” i wprowadzono do niego kod przycisku za pomocą rozszerzenia „Sourcerer”, które umożliwia dodanie do materiału dowolnego kodu.

Mój działający kod przycisku:

Wracać

Tekst jest lekko ozdobiony strzałką przy użyciu komponentów z Bootstrap 3, a sam przycisk jest stylizowany za pomocą CSS.

Wiele badań użyteczności pokazuje, że użytkownicy (zarówno nowi, jak i doświadczeni) często korzystają z przycisku „wróć” w przeglądarce. Niestety projektanci front-endu i marketerzy rzadko zastanawiają się, jakie konsekwencje może to mieć dla użyteczności, biorąc pod uwagę nowoczesne modele projektowania stron internetowych, które wykorzystują aplikacje, animacje, wideo i nie tylko. Często struktura techniczna tych układów nie reaguje poprawnie na funkcję „wróć”, co zakłóca schemat mentalny użytkownika i pogarsza jego doświadczenia.

Konsekwencje tego mogą być tragiczne: podczas eksperymentów niewystarczająca reakcja witryny na naciśnięcie przycisku „wstecz” była powodem odejścia wielu użytkowników, co doprowadziło do nadużyć i niepochlebnych recenzji. W większości przypadków nawet czcigodni, siwowłosi poddani strasznie tracili panowanie nad sobą.

Z tego artykułu dowiesz się:

• czego użytkownicy oczekują od przycisku „wróć”;
• jakie jest 5 najczęstszych błędów;
• proste rozwiązanie tych problemów.

Rozwiązanie jest naprawdę bardzo proste, jednak często jest zaniedbywane nawet przez największe marki. Mamy naprawić ten błąd?

Oczekiwania użytkowników

W skrócie: użytkownicy oczekują przycisku „wróć”, który pokaże im to, co postrzegają jako poprzednią stronę. Słowo „postrzegać” jest bardzo ważne, ponieważ istnieje ogromna różnica pomiędzy tym, co wydaje się być poprzednią stroną, a tym, czym jest technicznie.

Powstaje pytanie: co dokładnie użytkownicy interpretują jako nową stronę? W większości przypadków, jeśli strona znacznie różni się wizualnie, ale jest koncepcyjnie powiązana z witryną, wówczas jest postrzegana jako nowa. Dlatego bardzo ważne jest monitorowanie tego, jak witryna przetwarza różne elementy interaktywne: lightboxy, formularze, filtry itp.

Większość odwiedzających nie rozumie aspektów technicznych i polega jedynie na intuicyjnych pomysłach na temat tego, jak powinien działać zasób. Dlatego też, klikając przycisk „wstecz”, oczekują strony, na której mieli już ważne doświadczenie, ale otrzymują stronę z nieco zmienionym interfejsem.

Poniżej znajdują się najpopularniejsze elementy interaktywne oraz zalecenia dotyczące ich wykorzystania w celu maksymalizacji doświadczenia użytkownika i użyteczności.

Celem implementacji nakładek i lightboxów jest pokazanie użytkownikowi elementu, który pojawia się na górze strony. Dlatego użytkownicy postrzegają takie elementy jako nowe strony i wciskają przycisk „wstecz”, aby powrócić do pierwotnej pozycji - jednak trafiają w zupełnie inne miejsce, niż się spodziewali. Jest to szczególnie niefortunne, ponieważ użycie lightboxów tylko potęguje negatywny odbiór strony internetowej – większość użytkowników nie lubi tych elementów na stronach sklepów internetowych.

Korzystanie z filtrów często zmienia stronę i zapewnia użytkownikowi nowe doświadczenia. Dlatego po posortowaniu strona jest postrzegana jako nowa, nawet jeśli nic na nią nie zostało załadowane. Dzieje się tak, ponieważ po każdej interakcji odwiedzającego ze stroną sklepu internetowego generowany jest nowy wynik.

Ten przykład pokazuje, że przy ustalaniu parametrów ludzie nie biorą pod uwagę aspektów technicznych nowa strona, ale używaj tylko intuicji i uformowanej percepcji.

3. Formularz rejestracji/płatności

Strony płatności postrzegane są jako nowe strony, a co gorsza – jako proces wieloetapowy, z którego każdy etap można anulować przyciskiem „wróć”.

Takie podejście może powodować problemy; prostym przykładem jest sytuacja, w której osoba chce cofnąć się o krok podczas wypełniania formularza, aby edytować wprowadzone informacje. Naciśnięcie przycisku „wstecz” powoduje powrót do koszyka i usunięcie wszystkich (!) wprowadzonych danych. Podrażnienie i opuszczenie miejsca jest efektem naturalnym.

Technologia AJAX może nie spełniać oczekiwań użytkowników: technicznie każda strona AJAX znajduje się pod tym samym adresem URL, ale wygląda na to, że otwierają się nowe strony.

W kontekście handlu elektronicznego użytkownicy mają jasne przekonanie, że strona 3 i strona 4 to oddzielne strony i można nawigować od strony 4 do strony 3 za pomocą przycisku Wstecz.

Użytkownicy nie są gotowi zrezygnować z przycisku Wstecz

Biorąc pod uwagę szerokie wykorzystanie tej funkcji przeglądarki internetowej, kwestia rozbieżności pomiędzy oczekiwaniami użytkowników a wizją twórców staje się krytyczna i nie należy jej lekceważyć.

Użytkownikom szczególnie spodobał się przycisk „wróć”. aplikacje mobilne i strony internetowe. Jak wykazało badanie wersje mobilne witryn, większość użytkowników korzystała z tej funkcji we wszystkich oferowanych zasobach. Co więcej, użycie przycisku nie ogranicza się do cofnięcia o jedną stronę – niektórzy badani naciskali go nawet 15 (!) razy z rzędu.

Użytkownicy komputerów PC również często naciskają przycisk – ale nie tak często, jak właściciele telefonów komórkowych, bo użytkownicy komputery stacjonarne Dostępna jest wygodna nawigacja po witrynie.

Rozwiązanie

Dobra wiadomość jest taka, że ​​HTML5 ma stosunkowo proste rozwiązanie tego problemu i nazywa się ono API historii HTML5. Mówiąc dokładniej, funkcja history.pushState() umożliwia zmianę adresu URL bez konieczności ponownego ładowania strony. Dzięki temu strona będzie zachowywać się zgodnie z oczekiwaniami użytkownika, który kliknął przycisk „wróć”.

Dzień dobry, mam pytanie, jak przenieść przycisk z powrotem i umieścić go obok następnego przycisku podczas składania zamówienia. Teraz u mnie wygląda to tak https://yadi.sk/i/_ZNvGrvEhqSk3 Jeśli go przesuniesz w dół, przestaje działać. Kod jest odpowiedzialny za ..

Istnieje rozwiązanie

Witam, czy ktoś mógłby mi podpowiedzieć jak zrobić przycisk Wstecz np. w koszyku, żeby ktoś mógł wrócić do poprzedniej strony?

Wstaw przycisk w dowolnym miejscu szablonu, na przykład ten

+1

Kiedy naciskam przycisk Wstecz w przeglądarce, wszystkie style wydają się znikać, dopóki nie odświeżę strony. Domyślny motyw powinien wyglądać jak na zrzucie ekranu poniżej. Powiedz mi, na czym polega problem

Witam, w koszyku zrobiłem przycisk „Wróć”, nawet nie przycisk, a jedynie link z kodem. Wróć Teraz, wracając do koszyka...

Istnieje rozwiązanie

Dzień dobry! Napotkałem następujący problem: po dodaniu towaru do koszyka i kliknięciu w przeglądarce przycisku „wstecz” informacja o towarach znajdujących się w koszyku (w dodatkowym bloku) nie zostaje zapisana do momentu odświeżenia strony. Te. wejdź na stronę, idź...

Wskazana przez Ciebie witryna korzysta z wtyczki do koszyka. Opcjonalnie z modyfikacjami możesz skorzystać z możliwości dodania towaru nie do?html=1, ale do?html=1&items=1; wózek.

Dzień dobry. Na każdym etapie realizacji transakcji wskazany jest przycisk „Dalej”. W temacie „Suprime” znalazłem kod przycisku: