enlaces ancla

En este tutorial vamos a aprender a crear enlaces ancla en wordpress que nos permitirá crear enlaces que nos lleven a una zona concreta de nuestra página web.

Los enlaces tipo ancla html son muy fáciles de crear, por eso vamos a crearlos sin necesidad de instalar ningún plugin.

También te recomiendo leer Guía de Seo On Page para WordPress 2018

¿Que es un enlace ancla o anclaje html?

Un enlace ancla es un tipo de enlace html que nos lleva a un elemento concreto de nuestra página web, ya sea un título, una imagen, una sección de nuestra web u otros elementos.

Los enlaces anclados internos se utilizan normalmente para:

  • Mejorar la navegabilidad de la página web
  • Crear el menú de una web de página única
  • Crear un índice para los post
  • Enlazar desde una página a un contenido concreto de otra página diferente

¿Cómo crear enlaces ancla en WordPress?

Para crear un enlace ancla en WordPress necesitamos hacer dos cosas.

  • Crear el anclaje: El anclaje se crea añadiendo una”ID” (identificación css) al elemento al que quieres que lleve el enlace.
  • Crear el enlace ancla: con la identificación del elemento al final de la URL separado con “#”

Es decir, que antes de crear los enlaces ancla tienes que asignar un código ID a los elementos para identificarlos y añadirlo al enlace, lo vemos más adelante.

Primero, vamos a ver como tiene que ser la URL del enlace ancla.

Como puedes observar en la imagen, la URL del enlace ancla tiene que llevar el identificador que le hemos puesto al elemento separado con #id

que es un enlace ancla

Por ejemplo, el código de un enlace normal es así: (sin ID)

Y los enlaces ancla se crean añadiendo el ID (identificación) de cualquier elemento, en la parte final de la url del enlace.

En el enlace, puedes poner la ID detrás de la URL absoluta y te llevará al elemento aunque se encuentre en una página diferente.

O puedes poner solo el ID y te llevara al elemento si se encuentra en la misma URL.

También podemos crear enlaces ancla desde la opción “Enlazar” del editor de texto de WordPress como un enlace normal y añadirle al final de la URL el ID del elemento.

como crear un enlace ancla en wordpress

Por lo tanto, antes de crear los enlaces, tenemos que definir los Identificaciones para los elementos a los que queremos llegar.

Como poner anclajes a los elementos de WordPress

La id es una identificación que ponemos en la etiqueta html de un elemento para poder identificarlo para que el enlace ancla te lleve a ese elemento.

Puedes dar una ID a los elementos ya sean párrafos, títulos, imágenes y otros.

Simplemente ves a la pestaña HTML del editor de WordPress y añades id="lo-que-quieras" a un título h2, h3, a una imagen etc… (cambia  “lo-que-quieras” por una palabra que describa dónde vas para crear una url amigable)

añadir id html de los enlaces ancla

Si el elemento al que quieres que vaya el enlace no tiene etiqueta html, como los párrafos, puedes usar la etiqueta de párrafo de html  <p id="lo-que-quieras">aquí el texto</p>

O poner el contenido en un contenedor utilizando <spam id="lo-que-quieras">aquí el texto</spam>

Poner Id para los enlaces ancla en Divi

Si quieres crear enlaces ancla en Divi, puedes poner ID a casi cualquier elemento de forma sencilla, ya sean, filas, columnas, módulo de slider, modulo call to action, separadores, espacios en blanco etc…

Simplemente abre las opciones de la fila o el módulo y en el apartado CSS personalizado define su identificador CSS.

poner enlaces ancla en divi

Poner Id para los enlaces ancla en Visual Composer

Si quieres crear enlaces ancla en Visual Composer para llegar a sus elementos (ahora llamado WPBakery Page Builder for WordPress).

Para ello define el ID del elemento dentro de las opciones de un módulo.

como poner enlaces ancla en visual composer

Poner Id para los enlaces ancla en Elementor

En elementor también se pueden poner ID a los elementos para crear enlaces ancla fácilmente.

La opción está en las opciones avanzadas, Id de CSS.

poner enlaces ancla en elementor

Enlaces ancla en el menú de WordPress

Si queremos, podemos poner los enlaces ancla en el menú de WordPress, esto es muy útil si queremos hacer una página web de una sola página haciendo que el menú nos deslice hasta cada apartado.

Los enlaces con el ID los tenemos que poner en el menú utilizando la opción de “enlaces personalizados

enlace ancla en el menu

Consejo

Las ID que creas para los enlaces, formarán parte del enlace ancla, así que intenta hacerlos descriptivos para crear URL,s amigables.

Como ves crear enlaces ancla es muy fácil y no se necesitan plugins para crearlos.

Espero que este tutorial te sea de ayuda.

¿Tienes algún consejo extra? ¡Déjamelo en los comentarios!

[Total:7    Promedio:5/5]

4 comentarios en “Cómo crear enlaces ancla en html para WordPress

Deja un comentario

El email no será publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo García Asensio
  • Los datos se usarán para gestión de comentarios y medidas de seguridad
  • Legitimación: tu consentimiento.
  • Destinatarios: los datos estarán ubicados en los servidores de Siteground.
  • Derechos: podrás ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest