Una función como el botón "arriba" del sitio hace que el recurso de Internet sea más conveniente para sus visitantes. Le ayuda a moverse fácilmente desde cualquier lugar de la página hasta la parte superior de la página. Esto es imprescindible para las tiendas en línea y los sitios con artículos grandes que requieren un largo desplazamiento hacia abajo.
Para qué sirve
Por el momento, la mayoría de los sitios no tienen una función como un botón "arriba", y no hay nada crítico en esto. Pero su uso puede traer muchas ventajas tanto para el recurso de Internet como para sus visitantes.
Beneficio para visitantes
A menudo sucede cuando la página de un recurso de Internet está muy cargada de información, cuando un artículo informativo ocupa mucho espacio y tienes que desplazarte hacia abajo con la rueda del mouse. Además de esto, al final del artículo puede haber muchos comentarios al respecto.
Cuando un visitante lee un artículo, no hay nada tedioso en desplazarse hacia abajo en la página, pero cuando el texto llega a su fin y tienes que subir, empieza a ser un poco tedioso. La mayoría de las personas simplemente serán demasiado perezosas para desplazarse durante mucho tiempo, y simplemente cerrarán el sitio, en lugar de dar otro paseo por sus extensiones.
Uso del botónmoverse instantáneamente a la parte superior de la página hace que sea más conveniente pasar tiempo en el sitio.
Beneficio para el recurso de Internet
Los aspectos positivos del recurso en sí provienen de factores pasados, ya que una navegación más sencilla por el sitio mejora los factores de comportamiento, ya que todos los visitantes serán más activos en sus acciones y pasarán a otras páginas.
Por lo tanto, estos factores de comportamiento afectan la actitud de todos los motores de búsqueda hacia el sitio y conducen a una mejora en la posición en los resultados de búsqueda.
Cómo crear el botón "arriba" en el sitio usted mismo
Operando más. Siempre puede hacer un botón de desplazamiento hacia arriba para un sitio en cualquiera de los CMS siguiendo solo unos pocos pasos extremadamente simples:
- creación de imágenes;
- creando un guión;
- crear estilo de botón;
- agregando al sitio.
Imagen del botón
Para agregar un botón "arriba" en el sitio, primero debe crear el ícono en sí, cuando se hace clic, el usuario se moverá a la parte superior de la página. Para hacer esto, puede usar opciones ya preparadas, entre las cuales siempre puede elegir la más adecuada.
Para mejorar la apariencia del botón, necesitamos hacer algunas mejoras, a saber, crear un sprite que nos permita combinar imágenes de fondo basadas en CSS, creando así una animación a partir de ellas.
Para trabajos gráficos, puede usar cualquier editor. Pero la opción más conveniente sería un servicio en línea. PIXLR, ya que no hay nada que descargar aquí y puedes usarlo directamente en tu navegador.
Para comenzar, en la ventana del editor que aparece, seleccione el campo "Cargar imagen desde la computadora". Tomemos como ejemplo la imagen de un cohete.
Si las dimensiones del icono seleccionado son demasiado grandes, deberá realizar un pequeño ajuste de tamaño. Para hacer esto, vaya al menú superior y seleccione el campo "Editar", y luego "Transformación libre …"
A continuación, aparecen marcadores especiales junto a la imagen, moviéndolos, puede cambiar el tamaño de la imagen. Para mantener las proporciones, puede usar la tecla Shift, que necesita para mover los marcadores azules. Al final de estos pasos se obtiene la imagen de un cohete.
El siguiente paso es crear una copia de la capa.
Ahora necesitas mover un poco la imagen del cohete desde la nueva capa. Para ello, será conveniente utilizar la herramienta mover, que se encuentra en la segunda columna del menú de la izquierda, y la flecha hacia arriba del teclado.
Ahora tenemos que hacer la imagen superior en blanco y negro. Esto se puede hacer usando el elemento "Corrección" - "Tono / Saturación" en el menú superior. Para una desaturación completa, el control deslizante Saturación debe establecerse en -100. Esta acción te permitirá crear un efecto en el que el botón "Arriba" cambiará de blanco y negro a color cuando pases el cursor sobre él.
El toque final es la eliminación de espacio adicional alrededor de las dos imágenes. Para hacer esto, seleccione el elemento "Recortar" en el menú de la izquierda yseleccionamos solo dos cohetes en un rectángulo. Para realizar el recorte, se presiona la tecla Enter.
El resultado es una imagen en la que no hay espacio libre adicional. Deberá anotar el ancho y el alto de la imagen resultante, ya que estos datos serán útiles en el siguiente paso.
Para guardar, debe hacer clic en "Archivo" - "Guardar", donde en el párrafo izquierdo "Mi PC" escribimos el nombre de la imagen (solo el diseño en inglés), seleccione el formato (en este case, PNG) y haga clic en el botón "Sí".
Archivo con el script del botón "arriba"
No es necesario escribir un guión en este caso. Será posible usar la versión pública, haciendo algunas modificaciones al código terminado.
Para hacer esto, necesita descargar cualquier editor de código. La opción más popular y también gratuita es Notepad++. Después de instalarlo, debe copiar y pegar todo este código:
| $(documento).ready(función(){ $(ventana).scroll(función () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); devuelve falso;}); }); |
A continuación, haga clic en el menú superior "Archivo" - "Guardar como…", después de lo cual guardamos el código en formato.js. Después de eso, puede usar este código en su sitio cargando los archivos de script y las imágenes mediante una conexión FTP.
Instalar en el sitio
Para configurar el botón de desplazamiento hacia arriba para el sitio, debe colocar encódigo de lugar requerido. Debe ingresarlo antes de la etiqueta.
Crear un estilo de botón con CSS
La mayoría de las veces, el botón "arriba" del sitio se encuentra en la parte inferior ("pie de página").
Se debe agregar el siguiente código al archivo style.css del sitio:
|
/Botón Arriba/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/ruta de imagen nativa/ width:39px;/ botón width/ height:96px;/50% de altura del botón/ bottom:5px;/relleno inferior en posición fija/ left:89%;/desplazar a la izquierda/ }.scrollTop:hover{ background-position:0 -108px; } /desplazamiento de fondo/" |
En este caso, se necesitarán los datos de ancho y alto de la imagen. Solo queda ingresar los datos recibidos en el código, ¡y el botón "arriba" para el sitio estará listo! ¿Qué más?
Botón arriba para el sitio de Wordpress
Para este CMS, el botón "Arriba" se puede hacer mediante complementos, así como de forma independiente.
El método de complementos es el más conveniente y fácil de instalar, ya que solo requiere que haga clic en el botón de instalación y configure todas las funciones en el menú de complementos.
La elección de este último debe abordarse con precaución, ya que con él será fácil adquirir un virus en el sitio. La opción más popular y comprobada es un complemento llamado Scroll Back To Top. Puede descargarlo utilizando la búsqueda estándar de complementos de Wordpress.
Esta extensión tienemúltiples funciones, y será muy fácil personalizar el botón "arriba" para un sitio de Wordpress. No es necesario cambiar todos los valores en absoluto, solo necesita configurar la apariencia y la ubicación del botón en la página del sitio.
Como puede ver, configurar el botón de arriba con complementos es muy fácil. Pero hay un matiz importante, y es que cada complemento instalado carga el CMS. Esto puede afectar la velocidad del recurso de Internet. Es por eso que la mayoría de los propietarios de sitios intentan realizar todos los cambios directamente en el código y no con la ayuda de extensiones de terceros. Puede crear un botón "arriba" para un sitio HTML, lo que minimizará los recursos consumidos.
Antes de cambiar todos los archivos del sistema de Wordpress, debe hacer una copia de seguridad de ellos. Luego puede seguir todos los pasos para crear su propio botón, descritos anteriormente.
Botón "arriba" para Joomla
CMS Joomla también admite la instalación de complementos, como Wordpress. La versión más exitosa del botón "arriba" para un sitio en Joomla 3 es una extensión llamada Top of the Page.
En este CMS, se puede instalar cualquier complemento a través del "Administrador de extensiones". Para esto necesitas:
- descargue el complemento en Internet;
- haga clic en el botón "Examinar" en el administrador de extensiones;
- seleccione el archivo descargado;
- haga clic en "Descargar" e instale.
Ahora necesita activarlo en el "Administrador de complementos". Para estodebe ir a esta sección, buscar el complemento y cambiar su estado a "habilitado".
El siguiente paso es configurar todos los parámetros de la extensión usando la misma sección donde debe encontrar los "Parámetros básicos" de este complemento en el lado derecho.
La parte superior de la página tiene la siguiente funcionalidad:
- Ejecutar/administrador: habilita la opción no solo en el recurso de Internet, sino también en el propio panel de Joomla CMS.
- Posición de revelación del botón: cuántos píxeles debe retroceder el usuario para que aparezca el botón hacia arriba.
- Omitir texto del botón: la presencia de texto en el botón.
- Siempre en la parte superior: la página del sitio siempre se mostrará desde la parte superior. Cuando se usan anclas para desplazarse a una ubicación específica en la página, esta opción no necesita estar habilitada.
- Smooth Scroll: suaviza el desplazamiento de la página.
- Duración de desplazamiento: el tiempo después del cual la página se moverá completamente al principio.
- Transición de desplazamiento: agrega más efectos visuales al desplazamiento.
- Transition Easing: "debilitar" el movimiento hacia la parte superior de la página.
- Ubicación del enlace: la ubicación del icono. De forma predeterminada, el botón se encuentra en la esquina inferior derecha.
- Usar estilos: estilo de botón individual, que se puede configurar en el campo a continuación. Si se cambia a un valor negativo, todas las configuraciones de estilo se tomarán del tema activo del sitio.
- Estilo del enlace: un campo para ingresar los parámetros de estilo de los botones.
Para personalizar el estilo del botón "arriba", debe tener al menos un mínimoconocimiento CCS. De lo contrario, debe cambiar el valor del penúltimo parámetro a "No".
Otro matiz importante es que la inscripción habitual en el icono contiene el texto en inglés: Volver arriba. Dicho texto no puede estar presente en un sitio en idioma ruso, por lo que simplemente debe deshabilitarlo en los parámetros del complemento o cambiarlo a ruso.
Para cambiar esta inscripción, debe ir al servidor del sitio mediante FTP o el administrador de archivos integrado en el alojamiento. A continuación, en el directorio "/administrador/idioma/en-GB/" debe encontrar un archivo llamado "en-GB.plg_system_topofthepage.ini".
Antes de cambiar el texto, debe cambiar la codificación de este documento a UTF-8. Esto hará que las letras rusas se visualicen normalmente.
A continuación encontramos la siguiente línea:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Volver arriba"" |
y cambie la frase entre comillas a ruso. Puedes usar frases como "¡Arriba!", "¡Hasta arriba!" o "¡Arriba!".
Al final, deberá guardar el archivo modificado y buscar el botón "arriba" para el sitio en Joomla.
Botón arriba para Ucoz
El botón "arriba" del sitio en Ucoz deberá hacerse mediante inyección de código, ya que es imposible conectar complementos para este CMS. Sin embargo, esto no requiere un largo estudio de los archivos del sistema y buscar las líneas necesarias, solo necesita pegar un pequeño código en el lugar correcto.
Para instalarnosrequerido:
- ir a "Panel de control -> Diseño -> Gestión de diseño (plantillas) -> Parte inferior del sitio;
- inserte el script (se puede encontrar en el sitio web oficial del proyecto y en recursos de terceros).
Conclusión
Después de eso, aparecerá un ícono en la esquina inferior derecha, moviendo al usuario a la parte superior de la página.
Como puede ver, configurar el botón Atrás para cualquiera de los CMS no fue particularmente difícil. Puede utilizar tanto un método de instalación automatizado (complementos) como uno manual. Sin embargo, la última opción sigue siendo la más adecuada, ya que no afecta negativamente al rendimiento del sitio.
Puede usar el botón "volver arriba" para un sitio HTML para minimizar el consumo de recursos del sitio, ya que una gran cantidad de extensiones puede tener un impacto negativo en el rendimiento del recurso. Un complemento de botón "arriba" no podrá afectar en gran medida el tiempo de carga de las páginas del sitio, pero en la mayoría de los casos, el usuario tiene al menos una docena de complementos instalados en el CMS. En este caso, cualquier complemento puede afectar negativamente el rendimiento de las páginas del sitio.
