Como crear un enlace ancla a una sección de página y One Page Websites

Como crear un enlace ancla a una sección de página y One Page Websites

En este post te explico cómo crear enlaces internos anclados dentro de una misma página, también llamados enlaces ancla, enlaces de anclajeanclas html, page jumps o saltos de enlaces dirigidos a una determinada sección o parte específica de la misma página, en lugar de dirigirte a una página diferente que tenga una URL distinta. Con este concepto podrás crear también “One Page websites”, que contienen una sola página y donde los elementos del menú se encargan de mostrarte una sección concreta de esa misma página.

Demostración: Haz Clic en el botón para bajar hasta el final del post

CLIC PARA DESLIZAR ABAJO

¡Sigamos!

Se trata de una función muy sencilla que a veces puede resultar muy, pero que muy útil! Yo lo utilizo por ejemplo dentro de la página del curso de wordpress de Autoempleo Bloguero, para destacar y enlazar la sección de la misma página donde se exponen las próximas fechas de los cursos así como el formulario de suscripción, elementos que debe ser fácilmente localizables.

Esto se puede hacer de diferentes formas, incorporando una breve linea de código en el editor de texto, o usando un maquetador visual, y en este videotutorial te explico como hacerlo paso a paso.

Como crear enlaces internos anclas html dentro de una página o post

El proceso sería añadir primero un enlace a través de nuestra herramienta de enlaces, con un texto identificador antecedido por una almohadilla “#” en el lugar donde se añade la URL convencional. Este identificador no debe contener espacios.

<a href=”#identificador>Sección</a>

Y en segundo lugar tendríamos que añadir una línea de código con ese identificador en la sección que queremos mostrar cuando alguien haga clic en dicho enlace. Esta línea habrá que añadirla desde el editor de Texto html de wordpress, al inicio de dicha sección.

<p id=identificador>Título Sección</p>

En el videotutorial, he creado una lista de enlaces ancla dentro de una misma página para demostrar como habría que hacerlo en caso de que quisieramos incluir más de un enlace ancla dentro de una misma página.

Como añadir un enlace ancla al Menú y crear One Page websites

Aprovechando que en nuestro Menú también podemos incluir enlaces, tenemos la oportunidad de enlazar a diferentes secciones de una misma página desde el menú principal, creando lo que se suele conocer como una web tipo One Page website

Para ello simplemente habrá que ir a Apariencia->Menús, y añadir un enlace personalizado escribiendo en el campo de URL, una almohadilla seguida del identificador correspondiente a la sección que querramos enlazar desde dicha pestaña, junto al texto correspondiente que figurará en dicha pestaña. Luego obbiamente la sección deberá contener la línea de código según el apartado anterior.

Como se explica en el videotutorial, la URL habría que escribirla incluyendo la ruta completa acabada en almohadilla más identificador, en caso de que tengamos en nuestra web más de una página. De no hacerlo así desjarían de funcionar los enlaces desde el Menú cuando estamos visualizando cualquier otra página que no contenga las líneas de código referenciadas.

Como crear enlaces anclas con los maquetadores visuales: Lo más divertido!!!

Todo esto se puede hacer de manera más sencilla y divertida con los maquetadores visuales, ya que nos permiten añadirle identificadores a cada una de las filas o secciones: Estas secciones suelen incluir en sus ajustes principales un campo donde indicarle un Identificador CSS, y es ahí donde lo escribiremos en lugar de hacerlo en el código html como lo hicimos anteriormente.

En el videotutorial te enseño a hacerlo con el constructor que trae incorporado el Tema Divi de Elegant Themes, uno de los temas premium más recomendables por su excelente diseño, arquitectura y usabilidad.

Luego basta con crear cualquier tipo de enlace, ya sea de texto, como enlace personalizado en Menús, o incrustado en botones o incluso imágenes, añadiendo como destino URL la almohadilla más identificador y ya está!

Como conseguir desplazamientos suaves al hacer clic en enlaces ancla

Esta propiedad corresponde a los estilos CSS del Tema. A veces por defecto conseguiremos desplazamientos suave sólo con hacer lo explicado anteriormente; Pero otras veces será necesario agregar alguna Clase extra junto al enlace, para lo que es conveniente consultar al soporte del tema.

En el Caso de Autoempleo Bloguero, donde usamos el Tema Dante, tenemos que agregarle un atributo llamado extraclass=”smooth-scroll-link” allí donde colocamos el enlace para conseguir este efecto.

 

¡Espero que te haya gustado el artículo!

SUBIR DE NUEVO

Hola, yo soy Juan Manuel Santaella, artista plástico, arquitecto, emprendedor, formador profesional y... creador de Autoempleo Bloguero! Más información...

8 Comentarios

  1. Jorge 9 meses hace

    Gracias Juanma!! Muy bueno y útil.

  2. mireay 9 meses hace

    Muy bueno el tutorial! Gracias. Súper práctico

  3. Zelene 7 meses hace

    Hola! te hago una consulta sabrias como hacerlo con el maquetador Page Builder? no encuentro en las preferencias de los bloques el identificador Css, solo figura Clase A CSS y Estilos CSS.
    Desde ya muchas gracias!!

    • Autor

      Hola Zelene! Puedes hacerlo por ejemplo en secciones de fila o en los módulos de espaciado, dentro encontrarás un campo identificador!

  4. Pablo Di Leva 4 meses hace

    Hola Juan Manuel. Gracias por el tutorial, se vé realmente sencillo. Tengo un duda. Quiero hacerlo sobre una plantilla que tengo comprada en la cual se maqueta mediante shortcodes (o eso creo, soy nuevo e ignorante en esto). Por mas que intento no me funciona tu explicación. Como puedo seguir investigando cual es el problema? Muchas gracias por tu tiempo

    • Autor

      Hola Pablo! Has probado a hacerlo en el editor de HTML como se explica en el tutorial? Eso funciona independientemente de la plantilla que uses.

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*