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)

<a href="http://midominio.com/">texto del enlace</a>

Y los enlaces ancla¬†se crean a√Īadiendo el ID (identificaci√≥n) de cualquier elemento, en la parte final de la url del enlace.

<a href="http://midominio.com/#id">texto del enlace</a>

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.

<a href="http://midominio.com/pagina/#id">texto del enlace</a>

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

<a href="#id">texto del enlace</a>

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!

8 comentarios en “C√≥mo crear enlaces ancla en html para WordPress

  1. A mí en mi WordPress las anclas se me solapan con la barra. Es decir pinchas el enlace y no va al párrafo concreto, sino un poco mas abajo porque el inicio del párrafo lo tapa la barra superior.. Eso me fastidia y puede que no me mude a WordPress por eso. Aunque también pasa en blogspot. Solo no me pasa en mi pagina actual, en blogia.

  2. Hola Gerardo, acabo de encontrar tu post y me parece excelente, te felicito. Tengo un problema y no se si puedas ayudarme, estoy creando un sitio web con el tema Jupiter, que usa Wpbakery page builder, el antiguo Visual Composer, quiero hacer igualmente un men√ļ de desplazamiento en la misma p√°gina, donde cada enlace me lleve a unas pesta√Īas horizontales en la parte inferior de la p√°gina y abran el contenido de cada pesta√Īa en especifico de cada enlace, he logrado que los enlaces se desplacen hacia abajo en la p√°gina a donde est√°n las pesta√Īas, pero no logro que las abran, he probado de diferentes maneras y formas la combinaci√≥n de enlaces e identificadores, pero no lo consigo, crees que puedas aconsejarme

  3. Hola Gerardo, muy buen articulo. Yo tengo un peque√Īo problema al realizar los pasos para hacer un men√ļ con anclas. Utilizo el tema Avada y cuando hago el ancla en el menu, tal como indicas, se me quedan todos los enlaces del men√ļ que llevan ancla (algunos no llevan), se me quedan destacados como si estuvieran se√Īalados todos, Es decir, por ejemplo si el color de los elementos del menu es negro, pero cuando pulsamos sobre uno de ellos para ir a esa pagina se marca en otro color. Pues en el caso de los elementos con ancla se quedan todos se√Īalados…. Sabrias orientarme por que puede ser??
    Mil gracias

    1. Pues debe de ser el estilo de la plantilla, busca en las opciones de la plantilla si hay opciones para retocar el estilo de los enlaces, si no tendrás que cambiarlos con CSS, o también puedes informar al soporte de avada si crees que es un problema del tema.
      Un saludo

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

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. m√°s info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar