Los saltos de enlace o enlaces ancla son un tipo especial de enlace que te llevarán a una parte específica de una determinada página, aunque mayormente son usados para llevarte a una misma página, es posible usarlo para llevarte a una parte específica de una URLs externa.
Generalidades
Los saltos de enlace son muy útiles cuando tienes una página con mucho contenido, ya que te permitirán desplazarte de manera simple a través de las diferentes secciones.
Supongamos que tienes un contenido similar a lo que se muestra en la imagen adjunta, crearemos un enlace que lleve directamente a la sección señalada.
1- Creando el punto de destino
Primero tenemos que modificar el punto destino hacia el cual el salto de enlace nos llevará. Para ello tenemos que trabajar en la vista HTML y ubicar el título, a este título le agregaremos el atributo ID, es decir un identificador, tal como se muestra en el siguiente código:
<h2 id="donde-conseguirlo">¿Dónde puedo conseguirlo?</h2>
2- Creando el salto de enlace
A continuación crearemos el enlace de ancla, para esto podemos usar la vista de diseño, seleccionando el texto aparecerá una caja para añadir el enlace, también es posible usar opciones de enlace, tal como se ve en la siguiente imagen:
Aparecerá un popup en el cual podemos colocar el enlace. Puesto que el contenido al cual queremos «saltar» esta en la misma página simplemente colocamos el signo # seguido del identificador creado anteriormente.
3- Salto de enlace como ítem de menú
Es posible también hacer un enlace de ancla como ítem de menú para llevar a una parte específica de tu sitio, en este caso tendrías que usar la url absoluta y al final el identificador, tal como se ve en la siguiente imagen.
Conclusión
Como ves, crear saltos de enlace para una página en WordPress es simple, sólo hay que editar un poco de HTML para crear el identificador y luego puedes hacer referencia a este identificador desde cualquier enlace, agregando siempre el símbolo # al inicio.
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
Me encanta esta pagina!
Me gustaría saber como crear el menú de «Artículos relacionados» que por ejemplo utilizas tu en esta página.
Hola, te sugiero revisar el siguiente artículo: https://decodecms.com/posts-relacionados-sin-plugins-en-wordpress/
Muchas gracias!!!
Gracias Jhon Marreros lo vi buscando en Google y una explicación rápida y sencilla.
y con elementor como seria
Hola, no habría mayor diferencia, esto es algo estándar de HTML por lo que aplicaría igual.
bryan lograste hacerlo con elementor ???
Hola!
Muy útil el post.
Una pregunta, de cara una estructura web de un site de servicios ¿qué es mejor? ¿Hacer cada servicio como un enlace dentro de la misma página, o crear páginas separadas por cada servicio?
¡Gracias!
Hola, si quieres destacar algún servicio o servicios específicos mejor tenerlos en una página individual cada uno, si todos los servicios son similares y no quieres destacar alguno podrías ponerlos todos en una página.
Hola!
Probé esta función en un contendió dividido por tablas (con el Plugin: Tabby Responsive Tabs – para reducir el contenido extenso), para ir a un contenido especifico dentro de una de las tablas y NO FUNCIONA.
Al parecer solo funciona para CONTENIDO VERTICAL,que se puede ver en una misma cara. Mas NO para CONTENDIÓ HORIZONTAL, segmentado por tablas.
Web Ejemplo: https://www.incredibleperutours.com/es/machu-picchu-and-huayna-picchu-by-train-1-day/
ALGUNA SOLUCIÓN?
Hola Sergio, entiendo que quieres activar un tab específico, lo que sucede es que no hay un ID para ir al tab, es decir la construcción o estructura HTML de tu tabla no esta preparada para esto, pero si que es posible, si revisas por ejemplo el detalle de producto de una tienda en WooCommerce, cada Tab tiene un ID y el enlace se puede acceder con #. Consulta con los desarrolladores del plugin, es posible que tengas una opción para poner un ID al título del tab.
Hola, hice un enlace personalizado y me sale con el hover activado. Es decir, el resto de ítems de menú, que son páginas, cambian de color al pasar el cursor, pero en el ítem que es el enlace está ya con el color cambiado, y no hace ningún tipo de hover al pasar el cursor.
¿Cómo puedo solucionarlo?
Gracias
Hola, entiendo que has colocado el enlace como un ítem de menú, según lo que comentas debe ser por el ítem de menú actual que se esta mostrando, si cambias a otro ítem de menú este aparece seleccionado?, de manera general sería cambiar el color por CSS en caso quieras mostrar otro color.
Gracias por el artículo 🙂
Muy ineresante y útil el artículo. Enhorabuena y gracias.
Me sirvió, muchas gracias, muy bien explicado.
Hola excelente post además muy sencillo de hacer y no utiliza recursos del servidor. Sin embargo note que solo funciona en dispositivos de escritorio y no en dispositivos moviles, sabes como se puede solucionar?
Hola, los saltos de página son un estándar HTML debería funcionarte, prueba ver este sitio web en movil, en el inicio del artículo tienes una tabla de contenido, es la misma lógica.
Me salvaste. Bien explicadito, con gracia, directo e imágenes. ¡Gracias!
pero como se hace si codigo…en visual composer y ubermenu … por fa? estare muy mut agradecidos,,
Hola, si quieres tener esta funcionalidad desde un ítem de menú sería similar usa el ID del elemento destino como parte de la url, es decir usará una url personalizada de menú.
Hola
Muchas gracias por la ayuda, era lo que necesitaba, pero tengo un inconveniente. cree dos enlaces en una misma página a secciones diferentes a parte de los enlaces a otras páginas, pero el problema es que quiero resaltar la página activa y cuando estoy en la pagina con esos enlaces se me resaltan los dos que tienen el enlace en esa misma página. Como puedo hacer para que solo esos enlaces no se resalten o no queden como activos
Muchas gracias
Hola, no me queda claro a lo que te refieres, si te va bien puedes escribirme al formulario de contacto detallando un poco más tu problema: https://decodecms.com/contacto/
Gracias por el post! He conseguido hacer el salto de enlace, que llevaba tiempo intentándolo sin éxito. El vídeo ha sido la ayuda definitiva 🙂
Hola, que bueno que te sirivió.
Gracias, me ayudó mucho!