Caracteristicas
Planos e preços
Comunidade
Suporte
Nós
EN PT ES
Wiki
Buscar
Conteúdo
Discussão
Histórico
Backlinks

Como criar um site de apenas uma página com efeitos de deslocamento?

Neste artigo, explicamos como montar um site em que as opções apontem para diferentes lugares dentro da uma mesma página, e que o pulo não seja brusco.

Vejamos primeiro como criar opções que se deslocam para outro lugar dentro da mesma página.

Para conseguir isso, é preciso seguir os dois passos que explicamos abaixo:
 
1) Criar o menu com cada uma de suas opções, definindo que cada opção aponte para um link externo e que o link seja o nome de uma âncora.
Por exemplo, uma opção apontará ao link externo #serviços.
Na imagem abaixo, vemos como definir as opções:

 




 

2) Definir as âncora nos lugares correspondentes, ou seja, aonde se quer chegar ao clicar em cada uma das opções.

O código HTML para definir uma âncora é o seguinte:
<a name="serviços"></a>

Se quisermos apenas definir uma âncora em um lugar determinado, pode-se acrescentar um GXportlet HTML Livre com seu código sendo o mostrado anteriormente. Isso se repetirá para cada uma das âncoras criadas.
Caso se deseje acrescentar uma âncora onde há um GXportlet Conteúdo, pode-se acrescentar este código ao princípio do resumo ou do corpo do conteúdo. 

Com esses dois passos, já teremos definido um menu com suas opções e que ao clicar em uma opção, se vai a um lugar determinado dentro da mesma página.

No site G. CASCO e no site TecnoSeguridad , é possível ver funcionando o que foi explicado até aqui.
 

Como definir o deslocamento com certo efeito?

Se se quer fazer este deslocamento de uma forma menos brusca do que a que o HTML oferece, deve-se acrescentar o código JavaScript ao princípio da página.

Para isso, basta seguir os seguintes passos: 
 
1) No backend, você deve ir à opção Desenho -> HTML.
Clicar no botão Novo e então será aberto um editor.
Clique no botão 

Na área de edição, copie o seguinte código:

<script src="http://www.meusite.com/static/shared/jquery/jquery-1.7.1.min.js"></script>
<script src="http://www.meusite.com/static/shared/jquery/jquery.noconflict.js"></script>
<script src="http://www.meusite.com/static/landingpages/plugins.js"></script>

Substituir http://www.meusite.com pela URL de seu site em produção.

Clique no botão Gravar. 
 
Se o site estiver em mais de um idioma, este código deverá ser adicionado em cada um dos idiomas.


2) Vá a Design da página do site e acrescente o GXportlet HTML Livre ao princípio da página.
Clique no botão   e associe o código HTML definido no passo anterior.




Categorias:

Wiki inicio
Categorias
Mudanças recentes
Quer ficar por dentro das novidades? Siga-nos  

PRODUTO
Caracteristicas
GXportal Online
GXportal Corporativo
Perguntas Frequentes
TOUR
Demo
Curso gratuito
Documentação
Showcase
EMPRESA
Quem Somos
Contato
Suporte
Termos de uso
COMUNIDADE
Wiki
Blog
Facebook
Twitter
© Todos os direitos reservados. GeneXus e seus produtos são marcas registradas de GeneXus S.A. | Política de privacidade | Informação para contato