Return to previous page joomla 3. How to make a back button on a web page

In this video tutorial we will look at 3 options for how to make a BACK button to move around the site to previous pages in reverse order. The BACK button is also necessary when links from several pages of the site (A1, A2...An) lead to the same page (B), and from this page (B) you need to return to the previous page (An) of the site from which you got to page (B).

Watch the new video tutorial:

In this video tutorial we will make a button to go back to previous pages of the site in Adobe program Muse. This button will return along the same path that we followed on the site.

In order to make this lesson, I prepared a small project, or rather it cannot be called small, here it consists of top-level pages, first-level pages, and also for the “page-2” page there are several more child pages. And for variety, I created two templates. I applied the first template to the first three pages. And I applied the second template to everyone else.

Let's get started. We will create a Back button in “Template C” so that it immediately appears on those pages to which this template is applied. I go to edit this template, and this is where we will insert our back button.

We can insert a “Back” button in three ways. I have special file, which I had already prepared in a notepad. And there are three ways, three codes, using which we can insert such a button on the site.

The first option is just text. The button will be in the form of text. I copy this code:

And I paste it into the template. It looks like this. We just have text and it is highlighted in white. I'll post it here. In order to understand how this all works, we press the ctrl+alt+E keys to view the entire site with all its pages in the browser. This is what the main page of the site looks like. We can surf the menu, select pages. Here we have drop down menus. And, for example, from the main page we immediately went to page “page-3”. And here we have a back button.

This button is active, but when you hover the mouse over it, a hand with a finger does not appear. We can safely click on this button, and we will be redirected back to the main page. In the same way, we can click on page “page-3”, then go to page “page-4” and click on the “Back” button, it will take us to page “page-3”, and if we click on the “Back” button again ", then it takes us to the main page. This is how the back button works.

But it’s difficult to call this button a button, since it is just such an inscription, highlighted in white. If we want to edit it in Muse, we can only change the text size, for example, I'll put "36" here so you can see it better. In my opinion, we cannot change the color of the text. Now I'll try to put red. I chose red, but this did not affect our lettering in any way, so we cannot change the color. We can change the size. Let's try to make it bold and center it. All we can do is edit like this. If we want to fill this block, for example, make it orange, then our text will still be highlighted in white, and, in principle, it does not look very nice.

Now we will copy it. I press ctrl+C and go to the program, and press ctrl+V to paste it into the site. It looks like this link. Our link is blue. Now she is not very visible. Let's also make a 36th font to enlarge it and see it closer. Here we have just a blue link. If we now press ctrl+alt+E, we will see that when viewed, it looks like this regular blue link. Let's go over it a couple more times to see, click once, twice, come back. This link has the same appearance as a regular link.

We can apply link styles to it in Adobe Muse. Find link styles in the “Hyperlinks” section, select “Edit link styles”. I already have a prepared version. Now I already have a prepared version. You can see that it has a style applied to it. In the standard state and when hovering the mouse cursor, the color is blue and in the active state - red. You saw it while watching. The second style I created was simply all black states. We can apply this style to this button. For example, I'll select and apply this custom style to this button. And you will see that our inscription has become black.

Here we can also do a fill, for example, I'll do it with the same orange color. Here you can already edit the text. Let's put it in the middle and make it bold. And, in principle, this option is already more similar to a button. There is no longer such a white highlight, and, in principle, this option is already quite suitable. While browsing (ctrl+alt+E), let's go to page "page-3", to page "page-4" and click again. This button works exactly the same as the first one, only it has more options for editing the design.

And the third option for how we can place a button is that the button will be an image. I copy this code:

I go to Muse and click “Insert”. And this third option we have is a picture. In order for us to have some kind of picture here, we need to download some picture file from the Internet or create it ourselves. We add the picture through the program’s “File” function, select “Add files for transfer.” I have already downloaded a couple of pictures from the Internet. We can choose one. Let's select this one with the back button. Now if we look in the “Resources” section, we have added a button “back2.png” - “Transmit”. We have this file for transfer.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Back" / > < / a >

That's it, click "OK". We won't see any changes in Muse itself. We will see all changes only when viewing the site in a browser. Let's press ctrl+alt+E again to view the site in the browser and try to surf our pages.

Let's go to the page, for example, "page 2-1", now let's go to page "page-2", now let's go to page "page 3", then to page "page-4". And now, if we press the back button, we will go back sequentially in reverse order to home page site. Click “Back”, move to page “page-3”, to page “page-2”. And here we no longer have a button. If we placed it in a template that was applied to page “page-2”, then we would also have a “Back” button here. Since we don't have one, we have to navigate to the main page only by clicking on the "Home" button in the menu. Let's go, for example, to page “page 2-2-2”, then go to page “page 2-2-1”, then to pages “page-3” and “page-4”. And now in reverse order: page “page-3”, page “page 2-2-1”, page “page 2-2-2” and to the main page.

Of course, you don’t have to place this button on your website, but use regular arrows in your browser. But if you want such a button to be on your website, then you can do it in these ways... And the link to the article will be under this video. That's all. Dmitry Shapovalov was with you. Like this video, subscribe to the channel, write comments below, and I say goodbye to you until the next video lessons.

In this article we will look at how you can create a “Go Back” button in any place you need. I think from the name of the button it is already clear what will happen when you click on it. Such a button can be inserted both into a category and into the material itself. Everything is done quite simply.

There are several options for how you can add a button, but I personally only used one way. Namely, the third option out of the three I proposed. A little further I’ll tell you why.

What options do we have:

The advantage of the third option is that if you need to edit the text on a button or change/add a style class, you will only need to fix the module itself, and not fix the button in all the places where it is located.

So, on one of my sites I used the third option:

The “HTML code” module was created and the button code was inserted there using the “Sourcerer” extension, which makes it possible to add any code to the material.

My working button code:

Go back

The text is slightly decorated with an arrow using components from Bootstrap 3, and the button itself is styled via CSS.

Many usability studies show that users (both new and experienced) often use the "go back" button in the browser. Unfortunately, front-end designers and marketers rarely consider what implications this might have for usability, given modern web design models that use apps, animation, video, and more. Often, the technical structure of these layouts does not respond correctly to the “go back” function, breaking the user’s mental pattern and degrading their experience.

The consequences of this can be dire: during experiments, the site’s inadequate response to pressing the “back” button was the reason for many users leaving, with abuse and unflattering reviews. In most cases, even the venerable, gray-haired subjects lost their temper terribly.

From this article you will learn:

• what users expect from the “go back” button;
• what are the 5 most common mistakes;
• a simple solution to these problems.

The solution is really very simple, but it is often neglected even by the largest brands. Shall we fix this error?

User Expectations

In short: Users expect a “go back” button to show them what they perceive as the previous page. The word “perceive” is very important, because there is a huge difference between what appears to be the previous page and what technically is it.

The question arises: what exactly do users interpret as a new page? In most cases, if a page is significantly different visually, but is conceptually related to the site, then it is perceived as new. Therefore, it is very important to monitor how the site processes various interactive elements: lightboxes, forms, filters, etc.

Most visitors do not understand technical aspects, but rely only on intuitive ideas about how the resource should work. Therefore, when they click the “back” button, they expect a page where they have already had an important experience, but they receive a page with a slightly changed interface.

Below are the most popular interactive elements and recommendations for using them to maximize user experience and usability.

The purpose of implementing overlays and lightboxes is to show the user an element that appears on top of the page. Therefore, users perceive such elements as new pages, and press the “back” button to return to their original position - but they end up in a completely different place than they expected. This is especially unfortunate, because the use of lightboxes only multiplies the negative perception of the web page - most users do not like these elements on online shopping sites.

Using filters often transforms a page and gives a person a new experience. Therefore, after sorting, the page is perceived as new, even if nothing was loaded on it. This happens because after each visitor interaction with an online store page, a new result is generated.

This example highlights that people do not go into technical aspects when determining new page, but use only intuition and formed perception.

3. Registration/payment form

Payment pages are perceived as new pages, and even worse - as a multi-step process, each stage of which can be canceled with a “go back” button.

This approach can cause problems; a simple example is that a person wants to go back a step in filling out a form in order to edit the information entered. Pressing the “back” button returns it to the trash can and deletes all (!) entered data. Irritation and leaving the site is a natural effect.

AJAX technology may not meet user expectations: Each AJAX page is technically under the same URL, but it appears that new pages are opening.

In the context of e-commerce, users have a clear perception that page 3 and page 4 are separate and can be navigated from page 4 to page 3 using the back button.

Users are not ready to give up the back button

Considering how widely used this Internet browser feature is, the issue of mismatch between user expectations and the developers' vision becomes critical and should not be taken lightly.

Users especially liked the “go back” button mobile applications and websites. As the study showed mobile versions sites, the majority of users used this function on all offered resources. Moreover, the use of the button is not limited to rolling back one page - some subjects pressed it up to 15 (!) times in a row.

PC users also frequently press the button - but not as much as mobile phone owners, because users desktop computers Convenient site navigation is available.

Solution

The good news is that HTML5 has a relatively simple solution to the problem, and it's called the HTML5 History API. More specifically, the history.pushState() function allows you to change the URL without reloading the page. Accordingly, the site will behave in accordance with the expectations of the user who clicked the “go back” button.

Good afternoon, I have a question about how to move the button back and place it next to the next button when placing an order. Now it looks like this for me. https://yadi.sk/i/_ZNvGrvEhqSk3 If you move it down, it stops working. The code is responsible for. ..

There is a solution

Hello, can anyone tell me how to make a back button, for example, in the shopping cart, so that a person can return to the previous page?

Insert a button wherever you want into the template, for example, this

+1

When I press the back button on the browser, all the styles seem to disappear until I refresh the page. The default theme should show as in the screenshot below) Tell me what the problem is

Hello, I made a “Go back” button in the cart, not even a button, but just a link with the code Go back Now when returning back to the cart...

There is a solution

Good afternoon! I encountered the following problem: when you add an item to your cart and click the “back” button in the browser, information about the items in the cart (in the additional block) is not saved until you refresh the page. Those. go to the site, go...

The site you indicated uses a plugin for the cart. As an option with modifications, you can use sending the addition of goods not to?html=1, but to?html=1&items=1; this will respond with the full contents of the cart.

Good afternoon. At each step during checkout, a “Next” button is indicated. In the “Suprime” topic, I found the button code: