Uma função como o botão "para cima" do site torna o recurso da Internet mais conveniente para seus visitantes. Ele ajuda você a mover-se facilmente de qualquer lugar na página para o topo da página. Isso é obrigatório para lojas on-line e sites com artigos grandes que exigem uma longa rolagem para baixo.
Para que serve
No momento, a maioria dos sites não tem a função de botão "para cima", e não há nada de crítico nisso. Mas seu uso pode trazer muitas vantagens tanto para o recurso da Internet quanto para seus visitantes.
Benefício para visitantes
Isso geralmente acontece quando a página de um recurso da Internet está muito carregada de informações, quando um artigo informativo ocupa muito espaço e você precisa rolar a página para baixo com a roda do mouse. Além disso, no final do artigo pode haver muitos comentários sobre ele.
Quando um visitante lê um artigo, não há nada de cansativo em rolar a página para baixo, mas quando o texto chega ao fim e você tem que subir, começa a ficar um pouco cansativo. A maioria das pessoas simplesmente ficará com preguiça de rolar por um longo tempo e simplesmente fechará o site, em vez de dar outra caminhada por suas extensões.
Usando o botãomover instantaneamente para o topo da página torna mais conveniente passar algum tempo no site.
Benefício para o recurso da Internet
Os aspectos positivos do recurso em si vêm de fatores anteriores, pois a navegação mais fácil no site melhora os fatores comportamentais, pois todos os visitantes serão mais ativos em suas ações e passarão para outras páginas.
Assim, esses fatores comportamentais afetam a atitude de todos os mecanismos de pesquisa em relação ao site e levam a uma melhora na posição nos resultados da pesquisa.
Como fazer você mesmo o botão "para cima" no site
Negociando mais. Você sempre pode criar um botão de rolagem para um site em qualquer um dos CMS seguindo apenas alguns passos extremamente simples:
- criação de imagem;
- criando um script;
- criar estilo de botão;
- adicionando ao site.
Imagem do botão
Para adicionar um botão "up" no site, primeiro você precisa fazer o próprio ícone, ao ser clicado, o usuário passará para o topo da página. Para fazer isso, você pode usar opções prontas, entre as quais você sempre pode escolher a mais adequada.
Para melhorar a aparência do botão, precisamos fazer algumas melhorias, a saber, fazer um sprite que nos permita combinar imagens de fundo baseadas em CSS, criando assim uma animação a partir delas.
Para trabalhos gráficos, você pode usar qualquer editor. Mas a opção mais conveniente seria um serviço online. PIXLR, já que não há nada para baixar aqui e você pode usá-lo diretamente no seu navegador.
Para começar, na janela do editor que aparece, selecione o campo "Carregar imagem do computador". Vamos pegar a imagem de um foguete como exemplo.
Se as dimensões do ícone selecionado forem muito grandes, você precisará fazer um pequeno ajuste de tamanho. Para fazer isso, vá ao menu superior e selecione o campo "Editar", e após "Transformação livre…"
A seguir, marcadores especiais aparecem ao lado da imagem, movendo os quais você pode alterar o tamanho da imagem. Para manter as proporções, você pode usar a tecla Shift, segurando a qual você precisa para mover os marcadores azuis. Ao final dessas etapas, obtém-se uma imagem de um foguete.
O próximo passo é criar uma cópia da camada.
Agora você precisa mover a imagem do foguete da nova camada um pouco para cima. Para fazer isso, será conveniente usar a ferramenta mover, localizada na segunda coluna do menu esquerdo, e a seta para cima no teclado.
Agora precisamos deixar a imagem de cima em preto e branco. Isso pode ser feito usando o item "Correção" - "Matiz / Saturação" no menu superior. Para dessaturação completa, o controle deslizante Saturação deve ser definido como -100. Essa ação permitirá que você crie um efeito no qual o botão "Para cima" mudará de preto e branco para colorido quando você passar o mouse sobre ele.
O toque final é a remoção do espaço extra ao redor das duas fotos. Para fazer isso, selecione o item "Cortar" no menu esquerdo eselecionamos apenas dois foguetes em um retângulo. Para realizar o recorte, a tecla Enter é pressionada.
O resultado é uma imagem na qual não há espaço livre extra. Você precisará anotar a largura e a altura da imagem resultante, pois esses dados serão úteis na próxima etapa.
Para salvar, você precisa clicar em "Arquivo" - "Salvar", onde no parágrafo esquerdo "Meu Computador" escrevemos o nome da imagem (somente o layout em inglês), selecione o formato (neste caso, PNG) e clique no botão "Sim".
Arquivo com o script do botão "up"
Você não precisa escrever um script neste caso. Será possível utilizar a versão pública, fazendo algumas alterações no código finalizado.
Para fazer isso, você precisa baixar qualquer editor de código. A opção mais popular e também gratuita é o Notepad++. Depois de instalá-lo, você precisa copiar e colar todo este código nele:
| $(document).ready(function(){ $(window).scroll(function() {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Em seguida, clique no menu superior "Arquivo" - "Salvar como …", após o qual salvamos o código no formato.js. Depois disso, você pode usar este código em seu site enviando os arquivos de script e imagens para ele usando uma conexão FTP.
Instalar no local
Para configurar o botão de rolagem para cima para o site, você precisa colocarcódigo de lugar necessário. Você precisa inseri-lo antes da tag.
Criando um estilo de botão com CSS
Na maioria das vezes, o botão "para cima" do site está localizado na parte inferior ("rodapé").
O código a seguir deve ser adicionado ao arquivo style.css do site:
|
/Botão Cima/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/caminho da imagem nativa/ width:39px;/ botão largura/ height:96px;/50% da altura do botão/ bottom:5px;/preenchimento inferior na posição fixa/ left:89%;/shift left/ }.scrollTop:hover{ background-position:0 -108px; } /deslocamento de fundo/" |
Neste caso, esses dados de largura e altura da imagem serão necessários. Resta apenas inserir os dados recebidos no código, e o botão "para cima" do site estará pronto! O que mais?
Botão para cima para site Wordpress
Para este CMS, o botão "Up" pode ser feito usando plugins, bem como de forma independente.
O método de plugins é o mais conveniente e fácil de instalar, pois requer apenas que você clique no botão instalar e configure todas as funcionalidades no menu de plugins.
A escolha deste último deve ser abordada com cautela, pois com ele será fácil adquirir um vírus no site. A opção mais popular e comprovada é um plugin chamado Scroll Back To Top. Você pode baixá-lo usando a pesquisa padrão de plugins do Wordpress.
Esta extensão temmúltiplas funcionalidades, e será muito fácil personalizar o botão "para cima" para um site Wordpress. Não é necessário alterar todos os valores, você só precisa configurar a aparência e a localização do botão na página do site.
Como você pode ver, configurar o botão up com plugins é muito fácil. Mas há uma nuance importante, que é que cada plugin instalado carrega o CMS. Isso pode afetar a velocidade do recurso da Internet. É por isso que a maioria dos proprietários de sites tenta fazer todas as alterações diretamente no código, e não com a ajuda de extensões de terceiros. Você pode criar um botão "para cima" para um site HTML, o que minimizará os recursos consumidos.
Antes de alterar todos os arquivos do sistema Wordpress, você precisa fazer backup deles. Então você pode seguir todos os passos para criar seu próprio botão, descritos acima.
Botão "para cima" para Joomla
CMS Joomla também suporta a instalação de plugins, como Wordpress. A versão mais bem sucedida do botão "para cima" para um site no Joomla 3 é uma extensão chamada Topo da Página.
Neste CMS, qualquer plugin pode ser instalado através do "Extension Manager". Para isso você precisa de:
- baixa o plugin na Internet;
- clique no botão "Procurar" no gerenciador de extensões;
- selecione o arquivo baixado;
- clique em "Download" e instale.
Agora você precisa ativá-lo no "Gerenciador de Plugins". Por estavocê precisa ir para esta seção, encontrar o plugin e mudar seu status para "ativado".
O próximo passo é configurar todos os parâmetros de extensão usando a mesma seção onde você precisa encontrar os "Parâmetros básicos" deste plugin no lado direito.
Topo da página tem a seguinte funcionalidade:
- Executar em/administrador - habilita a opção não apenas no recurso da Internet, mas também no próprio painel do Joomla CMS.
- Posição de revelação do botão - quantos pixels o usuário deve retroceder para que o botão para cima apareça.
- Omit Button Text - a presença de texto no botão.
- Sempre no topo - a página do site sempre será exibida a partir do topo. Ao usar âncoras para rolar para um local específico na página, esta opção não precisa ser ativada.
- Rolagem suave - torna a rolagem da página mais suave.
- Scroll Duration - o tempo após o qual a página será completamente movida para o início.
- Scroll Transition - Adiciona mais efeitos visuais à rolagem.
- Transition Easing - "enfraquecendo" o movimento para o topo da página.
- Link Location - a localização do ícone. Por padrão, o botão está localizado no canto inferior direito.
- Use Styles – estilo de botão individual, que pode ser configurado no campo abaixo. Se alterado para um valor negativo, todas as configurações de estilo serão tiradas do tema ativo do site.
- Link Style - um campo para inserir seus parâmetros de estilo de botão.
Para personalizar o estilo do botão "para cima", você deve ter pelo menosConhecimento CCS. Caso contrário, você deve mudar o valor do penúltimo parâmetro para "Não".
Outra nuance importante é que a inscrição usual no ícone contém o texto em inglês: Return to Top. Esse texto não pode estar presente em um site em russo, então você deve simplesmente desativá-lo nos parâmetros do plugin ou alterá-lo para russo.
Para alterar esta inscrição, você precisa ir ao servidor do site usando FTP ou o gerenciador de arquivos embutido na hospedagem. Em seguida, no diretório "/administrator/language/en-GB/" você precisa encontrar um arquivo chamado "en-GB.plg_system_topofthepage.ini".
Antes de alterar o texto, você deve alterar a codificação deste documento para UTF-8. Isso fará com que as letras russas sejam exibidas normalmente.
A seguir encontramos a seguinte linha:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Voltar ao topo"" |
e altere a frase entre aspas para russo. Você pode usar frases como "Para cima!", "Para o topo!" ou “Para cima!”.
No final, você precisará salvar o arquivo modificado e verificar o botão "up" do site no Joomla.
Botão para cima para Ucoz
O botão "up" para o site no Ucoz terá que ser feito usando injeção de código, pois é impossível conectar plugins para este CMS. No entanto, isso não requer um longo estudo dos arquivos do sistema e busca pelas linhas necessárias, basta colar um pequeno código no lugar certo.
Para nos instalarobrigatório:
- vá para "Painel de Controle -> Design -> Gerenciamento de Design (modelos) -> Parte inferior do site;
- insira o script (pode ser encontrado no site oficial do projeto e recursos de terceiros).
Conclusão
Depois disso, um ícone aparecerá no canto inferior direito, movendo o usuário para o topo da página.
Como você pode ver, configurar o botão Voltar para qualquer um dos CMS não foi particularmente difícil. Você pode usar um método de instalação automatizado (plugins) e um manual. No entanto, a última opção continua sendo a mais adequada, pois não afeta negativamente o desempenho do site.
Você pode usar o botão "voltar ao topo" de um site HTML para minimizar o consumo de recursos do site, pois um grande número de extensões pode ter um impacto negativo no desempenho do recurso. Um plugin de botão "up" não poderá afetar muito o tempo de carregamento das páginas do site, mas na maioria dos casos o usuário tem pelo menos uma dúzia de plugins instalados no CMS. Neste caso, qualquer plugin pode afetar negativamente o desempenho das páginas do site.
