Cómo crear enlaces en la navegación que dirijan a secciones de tu página

Tabla de Contenidos

1. Introducción
2. Cómo crear enlaces en la navegación superior que dirijan a secciones de tu página
3. Ejemplo de un sitio web de una productora de videos
4. Ejemplo de un sitio web de alquileres vacacionales para perros
5. Crear enlaces con identificadores de sección
6. Crear enlaces con la extensión Squarespace ID Finder
7. Crear enlaces que dirijan a secciones desde la página de inicio
8. Solucionar problemas de enlaces que no funcionan desde otras páginas
9. Dónde encontrar el slug de la URL de una página
10. Conclusión

Cómo crear enlaces en la navegación superior que dirijan a secciones de tu página

En ocasiones, es posible que desees crear enlaces en la navegación superior de tu sitio web que dirijan a secciones específicas de una página. Esto permite a los visitantes acceder directamente a las secciones relevantes sin tener que desplazarse por toda la página.

Ejemplo de un sitio web de una productora de videos

Veamos un ejemplo de un sitio web de una productora de videos para comprender cómo se pueden crear estos enlaces. En la página de inicio, hay cuatro enlaces en la navegación superior: "Inicio", "Nuestro Trabajo", "Sobre Nosotros" y "Contáctanos". Sin embargo, los dos últimos enlaces no dirigen a páginas separadas, sino que llevan a secciones específicas de la página de inicio.

Si hacemos clic en "Sobre Nosotros", la página se desplaza automáticamente a la sección correspondiente, donde se encuentra la información sobre la empresa. De manera similar, si hacemos clic en "Contáctanos", la página se desplaza hasta la sección de contacto.

Este enfoque da la impresión de que hay páginas separadas para "Sobre Nosotros" y "Contáctanos", pero en realidad son enlaces que llevan a secciones específicas de la página de inicio.

Ejemplo de un sitio web de alquileres vacacionales para perros

Veamos otro ejemplo de un sitio web llamado "Dogs Welcome", el cual fue diseñado para ayudar a las personas a encontrar alquileres vacacionales que admitan perros en Estados Unidos y Canadá. En este sitio web, además de los enlaces a diferentes páginas, hay un botón de búsqueda. Al hacer clic en este botón, se dirige directamente a la sección de búsqueda de alquileres vacacionales, en lugar de tener que desplazarse por toda la página.

Estos ejemplos demuestran cómo se pueden crear enlaces en la navegación superior que dirijan a secciones específicas de una página en lugar de páginas separadas. A continuación, te mostraré dos formas diferentes de lograr esto.

Crear enlaces con identificadores de sección

La primera forma de crear enlaces que dirijan a secciones específicas de una página es utilizando identificadores de sección. Esto se hace agregando un identificador único a la sección a la que deseas que el enlace lleve.

Por ejemplo, en mi sitio web "Millionaire Web Designer", tengo una página de directorio de diseñadores web, diseñadores gráficos, redactores, etc. Esta página es la única enlace que se muestra en la navegación superior en este momento, y quiero crear enlaces que lleven a subsecciones específicas de la página de directorio.

Para hacer esto, primero debo agregar un bloque de código a la sección a la que quiero dirigir el enlace. Puedo hacerlo haciendo clic en cualquier parte de la sección, seleccionando el signo más y añadiendo un bloque de código.

A continuación, debo agregar el siguiente código personalizado en el bloque de código:

<a id="write-your-title-here"></a>

El título que escribo después de # puede ser cualquier cosa, lo más importante es utilizar exactamente ese mismo título en el enlace.

Luego, guardo los cambios y voy a la navegación principal para crear el enlace. En la sección de navegación principal, hago clic en el signo más y selecciono "Añadir enlace". En la opción de enlace, añado #write-your-title-here, asegurándome de que coincida con el título que escribí en el código personalizado.

Una vez guardado, puedo ver que el enlace ha aparecido en la navegación superior. Al hacer clic en él, la página se desplaza hasta la sección correspondiente.

Esta es una forma de crear enlaces que dirijan a secciones específicas de una página utilizando identificadores de sección. Sin embargo, también hay otra forma de lograr lo mismo utilizando una extensión llamada Squarespace ID Finder. Continuaré explicando esta opción a continuación.