Retornar à página anterior joomla 3. Como fazer um botão Voltar em uma página da web

Neste tutorial em vídeo, veremos 3 opções de como fazer um botão VOLTAR para navegar pelo site para as páginas anteriores na ordem inversa. O botão VOLTAR também é necessário quando links de diversas páginas do site (A1, A2...An) levam à mesma página (B), e desta página (B) é necessário retornar à página anterior (An) do site de onde você acessou a página (B).

Assista ao novo vídeo tutorial:

Neste vídeo tutorial faremos um botão para voltar às páginas anteriores do site em Programa Adobe Musa. Este botão retornará pelo mesmo caminho que seguimos no site.

Para fazer esta lição, preparei um projeto pequeno, ou melhor, não pode ser chamado de pequeno, aqui é composto por páginas de nível superior, páginas de primeiro nível, e também para a página “página-2” existem vários mais filhos páginas. E para variar, criei dois modelos. Apliquei o primeiro modelo nas três primeiras páginas. E apliquei o segundo modelo a todos os outros.

Vamos começar. Criaremos um botão Voltar no “Modelo C” para que apareça imediatamente nas páginas às quais este modelo é aplicado. Vou editar este template, e é aqui que inseriremos nosso botão Voltar.

Podemos inserir um botão “Voltar” de três maneiras. Eu tenho arquivo especial, que eu já havia preparado em um bloco de notas. E existem três formas, três códigos, com os quais podemos inserir esse botão no site.

A primeira opção é apenas texto. O botão terá a forma de texto. Copio este código:

E eu colo no modelo. Parece assim. Temos apenas texto e ele está destacado em branco. Vou postar aqui. Para entender como tudo isso funciona, pressionamos as teclas ctrl+alt+E para visualizar todo o site com todas as suas páginas no navegador. Esta é a aparência da página principal do site. Podemos navegar no menu, selecionar páginas. Aqui temos menus suspensos. E, por exemplo, da página principal fomos imediatamente para a página “página-3”. E aqui temos um botão Voltar.

Este botão está ativo, mas quando você passa o mouse sobre ele, não aparece uma mão com dedo. Podemos clicar neste botão com segurança e seremos redirecionados de volta à página principal. Da mesma forma, podemos clicar na página “página-3”, depois ir para a página “página-4” e clicar no botão “Voltar”, nos levará para a página “página-3”, e se clicarmos no botão “Voltar” novamente ", então nos leva para a página principal. É assim que funciona o botão Voltar.

Mas é difícil chamar esse botão de botão, pois é exatamente essa inscrição, destacada em branco. Se quisermos editá-lo no Muse, só podemos alterar o tamanho do texto, por exemplo, vou colocar “36” aqui para vocês verem melhor. Na minha opinião, não podemos mudar a cor do texto. Agora vou tentar colocar vermelho. Escolhi o vermelho, mas isso não afetou em nada o nosso lettering, por isso não podemos mudar a cor. Podemos alterar o tamanho. Vamos tentar torná-lo em negrito e centralizá-lo. Tudo o que podemos fazer é editar assim. Se quisermos preencher este bloco, por exemplo, torná-lo laranja, então nosso texto ainda ficará destacado em branco e, a princípio, não ficará muito bonito.

Agora vamos copiá-lo. Eu pressiono ctrl+C e vou para o programa, e pressiono ctrl+V para colar no site. Parece este link. Nosso link é azul. Agora ela não está muito visível. Vamos fazer também uma 36ª fonte para ampliar e ver mais de perto. Aqui temos apenas um link azul. Se agora pressionarmos ctrl+alt+E, veremos que, quando visualizado, ele se parece com este link azul normal. Vamos repassar mais algumas vezes para ver, clique uma vez, duas vezes, volte. Este link tem a mesma aparência de um link normal.

Podemos aplicar estilos de link a ele no Adobe Muse. Encontre estilos de link na seção “Hiperlinks”, selecione “Editar estilos de link”. Já tenho uma versão preparada. Agora já tenho uma versão preparada. Você pode ver que ele tem um estilo aplicado a ele. No estado padrão e ao passar o cursor do mouse, a cor é azul e no estado ativo é vermelho. Você viu enquanto assistia. O segundo estilo que criei foi simplesmente todos os estados negros. Podemos aplicar este estilo a este botão. Por exemplo, selecionarei e aplicarei esse estilo personalizado a este botão. E você verá que nossa inscrição ficou preta.

Aqui também podemos fazer um preenchimento, por exemplo, farei com a mesma cor laranja. Aqui você já pode editar o texto. Vamos colocá-lo no meio e torná-lo ousado. E, em princípio, esta opção já se parece mais com um botão. Não existe mais esse destaque branco e, em princípio, esta opção já é bastante adequada. Enquanto navegamos (ctrl+alt+E), vamos para a página "página-3", para a página "página-4" e clicamos novamente. Este botão funciona exatamente da mesma forma que o primeiro, só que possui mais opções de edição do design.

E a terceira opção de como podemos colocar um botão é que o botão será uma imagem. Copio este código:

Vou até o Muse e clico em “Inserir”. E esta terceira opção que temos é uma foto. Para termos algum tipo de imagem aqui, precisamos baixar algum arquivo de imagem da Internet ou criá-lo nós mesmos. Adicionamos a imagem através da função “Arquivo” do programa, selecione “Adicionar arquivos para transferência”. Já baixei algumas fotos da Internet. Podemos escolher um. Vamos selecionar este com o botão Voltar. Agora, se olharmos na seção “Recursos”, adicionamos um botão “back2.png” - “Transmitir”. Temos este arquivo para transferência.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Voltar" / > < / a >

É isso, clique em "OK". Não veremos nenhuma mudança no próprio Muse. Veremos todas as alterações somente ao visualizar o site em um navegador. Vamos pressionar ctrl+alt+E novamente para visualizar o site no navegador e tentar navegar em nossas páginas.

Vamos para a página, por exemplo, “página 2-1”, agora vamos para a página “página-2”, agora vamos para a página “página 3”, depois para a página “página-4”. E agora, se pressionarmos o botão Voltar, voltaremos sequencialmente na ordem inversa para página inicial site. Clique em “Voltar”, vá para a página “página 3” e para a página “página 2”. E aqui não temos mais botão. Se o colocássemos em um modelo aplicado à página “página 2”, também teríamos um botão “Voltar” aqui. Como não temos, temos que navegar até a página principal apenas clicando no botão “Home” do menu. Vamos, por exemplo, para a página “página 2-2-2”, depois para a página “página 2-2-1”, depois para as páginas “página-3” e “página-4”. E agora na ordem inversa: página “página-3”, página “página 2-2-1”, página “página 2-2-2” e para a página principal.

Claro, você não precisa colocar este botão em seu site, mas use setas normais em seu navegador. Mas se você quiser que esse botão esteja em seu site, você pode fazer isso das seguintes maneiras... E o link para o artigo estará abaixo deste vídeo. Isso é tudo. Dmitry Shapovalov estava com você. Curta esse vídeo, inscreva-se no canal, deixe comentários abaixo, e me despeço de vocês até as próximas videoaulas.

Neste artigo veremos como você pode criar um botão “Voltar” em qualquer lugar que precisar. Acho que pelo nome do botão já fica claro o que acontecerá quando você clicar nele. Esse botão pode ser inserido tanto em uma categoria quanto no próprio material. Tudo é feito de forma bastante simples.

Existem várias opções de como adicionar um botão, mas eu pessoalmente usei apenas uma maneira. Ou seja, a terceira opção das três que propus. Um pouco mais adiante direi por quê.

Que opções temos:

A vantagem da terceira opção é que se você precisar editar o texto de um botão ou alterar/adicionar uma classe de estilo, você só precisará consertar o próprio módulo, e não fixar o botão em todos os locais onde ele está localizado.

Então, em um dos meus sites usei a terceira opção:

Foi criado o módulo “código HTML” e nele inserido o código do botão utilizando a extensão “Sourcerer”, que possibilita adicionar qualquer código ao material.

Meu código de botão de trabalho:

Volte

O texto é levemente decorado com uma seta usando componentes do Bootstrap 3, e o próprio botão é estilizado via CSS.

Muitos estudos de usabilidade mostram que usuários (novos e experientes) costumam usar o botão “voltar” no navegador. Infelizmente, os designers front-end e profissionais de marketing raramente consideram quais implicações isso pode ter para a usabilidade, dados os modelos modernos de web design que usam aplicativos, animação, vídeo e muito mais. Muitas vezes, a estrutura técnica desses layouts não responde corretamente à função “voltar”, quebrando o padrão mental do usuário e degradando sua experiência.

As consequências disso podem ser terríveis: durante os experimentos, a resposta inadequada do site ao pressionar o botão “voltar” foi o motivo da saída de muitos usuários, com abusos e críticas pouco lisonjeiras. Na maioria dos casos, até mesmo os veneráveis ​​súditos de cabelos grisalhos perdiam terrivelmente a paciência.

Neste artigo você aprenderá:

• o que os usuários esperam do botão “voltar”;
• quais são os 5 erros mais comuns;
• uma solução simples para estes problemas.

A solução é realmente muito simples, mas muitas vezes é negligenciada até pelas maiores marcas. Vamos corrigir esse erro?

Expectativas do usuário

Resumindo: os usuários esperam um botão “voltar” para mostrar o que eles consideram a página anterior. A palavra “perceber” é muito importante, pois existe uma enorme diferença entre o que parece ser a página anterior e o que tecnicamente é.

Surge a pergunta: o que exatamente os usuários interpretam como uma nova página? Na maioria dos casos, se uma página for significativamente diferente visualmente, mas estiver conceitualmente relacionada ao site, ela será percebida como nova. Portanto, é muito importante monitorar como o site processa diversos elementos interativos: lightboxes, formulários, filtros, etc.

A maioria dos visitantes não entende de aspectos técnicos, confiando apenas em ideias intuitivas sobre como o recurso deve funcionar. Portanto, ao clicar no botão “voltar”, esperam uma página onde já tiveram uma experiência importante, mas recebem uma página com uma interface um pouco alterada.

Abaixo estão os elementos interativos mais populares e recomendações para usá-los para maximizar a experiência do usuário e a usabilidade.

O objetivo da implementação de sobreposições e lightboxes é mostrar ao usuário um elemento que aparece no topo da página. Portanto, os usuários percebem tais elementos como novas páginas, e pressionam o botão “voltar” para retornar à posição original – mas acabam em um lugar completamente diferente do esperado. Isto é especialmente lamentável, porque o uso de lightboxes apenas multiplica a percepção negativa da página web – a maioria dos usuários não gosta desses elementos em sites de compras online.

O uso de filtros geralmente transforma uma página e proporciona à pessoa uma nova experiência. Portanto, após a classificação, a página é percebida como nova, mesmo que nada tenha sido carregado nela. Isso acontece porque após cada interação do visitante com a página de uma loja online, um novo resultado é gerado.

Este exemplo destaca que as pessoas não entram em aspectos técnicos ao determinar nova página, mas use apenas a intuição e a percepção formada.

3. Forma de inscrição/pagamento

As páginas de pagamento são percebidas como novas páginas e, pior ainda, como um processo de várias etapas, cada etapa pode ser cancelada com um botão “voltar”.

Essa abordagem pode causar problemas; um exemplo simples é que uma pessoa deseja voltar uma etapa no preenchimento de um formulário para editar as informações inseridas. Pressionar o botão “voltar” retorna à lixeira e exclui todos (!) os dados inseridos. Irritação e saída do local são efeitos naturais.

A tecnologia AJAX pode não atender às expectativas do usuário: cada página AJAX está tecnicamente na mesma URL, mas parece que novas páginas estão sendo abertas.

No contexto do comércio eletrônico, os usuários têm uma percepção clara de que a página 3 e a página 4 são separadas e podem ser navegadas da página 4 para a página 3 usando o botão Voltar.

Os usuários não estão prontos para desistir do botão Voltar

Considerando o quão amplamente utilizado é esse recurso do navegador da Internet, a questão do descompasso entre as expectativas dos usuários e a visão dos desenvolvedores torna-se crítica e não deve ser encarada levianamente.

Os usuários gostaram especialmente do botão “voltar” aplicativos móveis e sites. Como o estudo mostrou versões móveis sites, a maioria dos usuários utilizou esta função em todos os recursos oferecidos. Além disso, o uso do botão não se limita a retroceder uma página – alguns sujeitos o pressionaram até 15 (!) vezes seguidas.

Os usuários de PC também pressionam frequentemente o botão - mas não tanto quanto os proprietários de telefones celulares, porque os usuários computadores desktop A navegação conveniente no site está disponível.

Solução

A boa notícia é que o HTML5 tem uma solução relativamente simples para o problema, chamada HTML5 History API. Mais especificamente, a função history.pushState() permite alterar o URL sem recarregar a página. Dessa forma, o site se comportará de acordo com as expectativas do usuário que clicou no botão “voltar”.

Boa tarde, tenho uma dúvida sobre como mover o botão para trás e colocá-lo ao lado do próximo botão ao fazer um pedido. Agora fica assim para mim https://yadi.sk/i/_ZNvGrvEhqSk3 Se você movê-lo. desativado, ele para de funcionar. O código é responsável por ..

Existe uma solução

Olá, alguém pode me dizer como fazer um botão voltar, por exemplo, no carrinho de compras, para que uma pessoa possa retornar à página anterior?

Insira um botão onde quiser no modelo, por exemplo, este

+1

Quando pressiono o botão Voltar do navegador, todos os estilos parecem desaparecer até que eu atualize a página. O tema padrão deve aparecer como na imagem abaixo) Diga-me qual é o problema.

Olá, fiz um botão “Voltar” no carrinho, nem mesmo um botão, mas apenas um link com o código Voltar Agora, ao retornar ao carrinho...

Existe uma solução

Boa tarde! Encontrei o seguinte problema: quando você adiciona um item ao carrinho e clica no botão “voltar” do navegador, as informações dos itens do carrinho (no bloco adicional) não são salvas até que você atualize a página. Aqueles. vai no site, vai...

O site que você indicou utiliza um plugin para o carrinho Como opção com modificações, você pode usar o envio da adição de mercadorias não para?html=1, mas para?html=1&items=1; carrinho.

Boa tarde. A cada etapa do checkout é indicado um botão “Avançar”. No tópico “Suprime”, encontrei o código do botão: