Hosting WordPress Webempresa

Crear saltos de enlaces en una misma página en WordPress

por | Dic 22, 2021 | Aprender WordPress

Enlaces ancla misma página WordPress

Los saltos de enlace o conocidos también como enlaces ancla son especialmente útiles cuando se muestra mucho contenido y se genera un scroll en la misma página.

Además te ayudarán a mejorar la experiencia de tus usuarios cuando navegan por tu sitio.

Al hacer uso de los saltos de enlaces llevarás directamente al usuario al contenido en el cual esta interesado, ya sea si este contenido esta en la misma página o incluso en otra url diferente.

 

Ejemplo de creación de saltos de enlaces

 

En la siguiente imagen vemos una página que tiene mucho contenido, vamos a realizar un salto de enlace desde la sección de “Nosotros” hacia la sección de “Nuestros valores

Resultado salto enlace

De manera general los pasos que seguiremos serán:

1- Crear un identificador en la sección destino, en nuestro ejemplo crearemos el identificador en la sección “Nuestros valores”

2- Definir el enlace de origen, en nuestro ejemplo será el texto que estará en la sección de “Nosotros

 

Creación de Saltos de enlace usando el editor Gutenberg

 

El editor de Gutenberg nos permite crear saltos de enlace de manera visual.

Primero ubicamos la sección de destino, en nuestro ejemplo es una cabecera.

Gutenberg selección header destino

Tras seleccionarla, en la parte lateral derecha, en la sección de Bloque > Avanzado, ubicaremos una opción para agregar el nombre del ancla.

 Para el nombre es recomendable usar un texto en minúsculas y sin espacios.

En nuestro ejemplo será: nuestros-valores

Gutenberg bloque avanzado ancla
Una vez tenemos el ancla creada, entonces ahora podemos definir desde donde será llamada.
Para esto ubicamos nuestro párrafo de origen y específicamente algún texto el cual llamará a esta ancla.

Tras seleccionar el texto crearemos un enlace.

Gutenberg selección texto origen
El enlace tendrá el nombre del ancla que habíamos definido inicialmente, sin embargo tenemos que colocar delante el símbolo numeral (#), en nuestro ejemplo: #nuestros-valores.
Gutenberg creación enlace

Usamos directamente el numeral más el nombre del ancla puesto que la estamos llamando desde la misma página, de otro modo tendríamos que colocar la url completa antes del símbolo de numeral, por ejemplo:

https://dominio.com/pagina/#nuestros-valores

 

Cursos gratuitos de Gutenberg

Si quieres dominar el editor de WordPress Gutenberg te invitamos a realizar dos cursos GRATUITOS en menos de 1 hora.

Podrás matricularte en cualquiera de nuestros cursos en Webempresa University, donde aprenderás todo lo que necesitas para construir tu proyecto.

 

Creación de Saltos de enlace usando el editor Clásico

 

Si estás usando el editor clásico de WordPress en lugar del editor Gutenberg los pasos son similares.

Primero crearemos el identificador en la sección de destino.

El editor clásico tiene una vista HTML, tras seleccionarla verás el código HTML.

Hay que establecer a la cabecera un identificador con el nombre del ancla, tal como se muestra en la siguiente imagen.

En nuestro ejemplo será: id=“nuestros-valores”

Ten en cuenta que el nombre del identificador tiene que ir sin espacios y se recomienda usar letras minúsculas.

Editor clásico definición ancla

Luego en la sección de origen, podemos regresar a la vista visual del editor.

Ubicamos el texto que hará de enlace, tras seleccionarlo ubicamos el botón en enlace en el editor.

Editor clásico selección texto origen

Aparecerá una pantalla para ingresar el enlace, en nuestro caso usaremos el nombre del ancla que habíamos definido anteriormente precediéndolo con el símbolo numeral (#).

El enlace quedaría: #nuestros-valores.

Añadimos directamente el nombre del ancla ya que estamos en la misma página, si tienes como destino otra página tienes que anteponer la url completa.

Editor clásico creación enlace ancla

Conclusión

 

Como has podido comprobar, crear un salto de enlace consiste en definir primero un ancla y luego crear un enlace usando el nombre de esta ancla.

En este artículo hemos visto cómo realizar esto de manera simple usando tanto el editor clásico como el editor Gutenberg.

Hosting WPFácil