Caracteristicas
Planes y precios
Comunidad
Soporte
Nosotros
EN PT ES
Wiki
Buscar
Contenido
Discusión
Historial
Backlinks

¿Cómo crear un sitio de una sola página con efectos de desplazamiento?

En este artículo se explica cómo armar un sitio donde las opciones apunten a distintos lugares dentro de una misma página y que el salto no sea brusco.

Veamos primero cómo crear opciones que se desplacen a otro lugar dentro de la misma página.

Para lograr esto se tendrán que seguir dos pasos que se explican a continuación:
 
1) Crear el menú con cada una de sus opciones, definiendo que cada opción apunte a un link externo, y el link será el nombre de un ancla.
Por ejemplo, una opción apuntará al link externo #servicios. 
En la siguiente imagen se muestra cómo definir las opciones:

 




 

2) Definir las anclas en los lugares que correspondan, es decir, a dónde se quiere llegar al hacer clic en cada una de las opciones.

El código HTML para definir un ancla es el siguiente:
<a name="servicios"></a>

Sí solamente queremos definir un ancla en un lugar determinado, se puede agregar un GXportlet HTML Libre y que su código sea el que se mostró anteriormente. Esto se repetirá para cada una de las anclas a crear.
Si se quiere agregar un ancla donde hay un GXportlet Contenido, se puede agregar este código al principio del resumen o del cuerpo del contenido.

Con estos dos pasos ya tendremos definido un menú con sus opciones y que al hacer clic en una opción se vaya a un lugar determinado dentro de la misma página.

En el sitio G. CASCO y en el sitio TecnoSeguridad se puede ver en acción lo que se explicó hasta aquí.
 

¿Cómo definir el desplazamiento con cierto efecto?

Si este desplazamiento se quiere hacer de una forma menos brusca a la que brinda html, se agregará código JavaScript al principio de la página.

Para eso se deberán seguir los siguientes pasos:
 
1) En el backend, ir a la opción Diseño -> HTML
Hacer clic en el botón Nuevo y se abrirá un editor.
Hacer clic en el botón 

En el área de edición copiar el siguiente código:

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

Sustituir http://www.misitio.com por la URL de su sitio en producción.

Hacer clic en el botón Grabar.
 
Si el sitio está en más de un idioma, este código lo tendrá que agregar en cada uno de los idiomas.


2) Ir a diseñar la página del sitio, agregar el GXportlet HTML Libre al principio de la página.
Hacer clic en el botón  y asociar el código HTML definido en el paso anterior.




Categorías:

Wiki inicio
Categorías
Cambios recientes
¿Quieres enterarte de las últimas novedades? Síguenos en

PRODUCTO
Caracteristicas
GXportal Online
GXportal Corporativo
Preguntas Frecuentes
TOUR
Demo
Curso online gratis
Documentación
Showcase
EMPRESA
Acerca de nosotros
Contacto
Soporte
Términos de uso
COMUNIDAD
Wiki
Blog
Facebook
Twitter
© Todos los derechos reservados. GeneXus y sus productos son marcas registradas por GeneXus S.A. | Política de privacidad | Información de contacto