Un recurso muy utilizado en muchas webs es enlazar a partes de una página, ofreciendo un menú o listado de enlaces que, en vez de dirigir a otra página de la web, enlazan a secciones o puntos específicos de esa misma página.
Me refiero a esto…
Esto, que ya hemos visto como hacerlo con HTML, e incluso cómo añadir una tabla de contenidos sencilla desde el editor de WordPress, en Divi cobra una nueva dimensión, por lo fácil que es.
Hay varias maneras de conseguir ese efecto tan práctico, así que vamos a verlo por partes.
Índice de contenidos
Cómo crear los anclajes
Lo primero de todo es crear los llamados anclajes, los puntos específicos de la página a los que queremos enlazar.
¡Nada más fácil!
Solo tienes que editar la sección, fila, módulo al que quieras enlazar y, en los ajustes avanzados, en ID y Clases CSS, poner el nombre que quieras en la caja llamada «Identificador CSS»
En el ejemplo le he llamado contacta , nada más obvio, aunque puedes poner lo que prefieras, números, lo que sea. Simplemente evita poner espacios, acentos, mayúsculas, limítate a minúsculas, algo sencillo.
Añade enlaces a tus anclajes
A partir de aquí, hayas creado uno o decenas de anclajes mediante identificadores CSS, solo queda elegir desde dónde los enlazarás.
Enlazar a un anclaje desde un menú
Un lugar muy común sería un elemento de tu menú personalizado.
Para hacerlo ve al personalizador de WordPress (Apariencia > Personalizar > Menús) y añade al menú que quieras un enlace personalizado.
Ponle el texto que quieras al enlace, el truco está en el enlace en sí.
Si tu identificador CSS era contacta, entonces como enlace pon #contacta.
Un detalle importante: Si el anclaje, tu identificador CSS, está en la página de portada de tu web no te olvides de la barra inicial (/), es un error muy común, pues si no la pones el enlace solo funcionará en la página en la que esté tu identificador CSS, tu anclaje, en este ejemplo la portada, y no funcionará si alguien le hace clic desde otra página.
Por otra parte, si el identificador CSS está en otra página deberás anteceder la parte de su URL al enlace.
Por ejemplo, si el anclaje está en la página https://tudominio.es/servicios/, pondrías /servicios/#contacta en la URL del enlace personalizado.
Enlazar a un anclaje desde un botón
Más fácil es aún enlazar a tu anclaje desde un botón que tengas en la misma página.
Simplemente edita el módulo y en el campo de la URL del enlace del botón pon tu anclaje con el símbolo de # delante, como hemos visto antes, pero ahora no hay que preocuparse de rutas y páginas.
Enlazar a un anclaje desde cualquier texto
Para finalizar, si quieres añadir un enlace a un anclaje desde cualquier texto también es sencillísimo.
Simplemente abre el módulo que contenga el texto para editarlo, selecciona el texto a enlazar y haz clic en el icono del editor para añadir enlaces.
Igual que en los ejemplos anteriores, solo tienes que poner tu texto del anclaje precedido de la almohadilla (#)
El enlace que se generará en HTML, por si sientes curiosidad, será algo así:
<a href="#mianclaje">Texto del enlace</a>
Fácil ¿no?
Seguro que se te ha abierto un mundo de posibilidades sabiendo esto, como por ejemplo que no necesitas crear una página de contacto cuando puedes poner el formulario en la misma portada y crear un enlace para llegar a él rápidamente ¿verdad?
Y así hasta el infinito. De hecho hay webs que prácticamente son de página única, en las que todos los enlaces llevan a anclajes de secciones de la única página de inicio, y a veces es más que suficiente.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Gracias por la entrada, como siempre llena de valor. Cada vez que lo hago, me salta a esa sección pero no define bien los límites, digamos si es un título comienza un poco más abajo. ¿Algún truco extra que me está faltando?
Bueno, Divi tiene sus cosas, y la manera de saltárselas es sencilla:
– Pon el anclaje justo al módulo anterior
– Mete un separador de altura 0 justo antes y mete ahí el anclaje
Ya me pillas por donde voy ¿no?
Hola, esta bueno el post pero yo tengo un caso específico. Yo en cada pagina tengo un formulario abajo (no en el pie)
y quiero que no vaya a la pagina de inicio si no solo al formulario abajo en cada pagina! como puedo hacer esto…
Buenas tardes, en mi caso he implementado este sistema en varias webs y siempre ha funcionado perfecto, ahora me encuentro con un problema:
He creado los anclajes y el menú y en dispositivos móviles funciona correctamente, pero en escritorio al pulsar cualquiera de las secciones del menú actua como si no hubiera enlace o estuviera roto, volviendo a la cabecera de la pagina.
He probado de todo y no doy con la solución. ¿Os ha pasado alguna vez?
Gracias de antemano!!
Hola Rafa. Te platico que yo me encontraba en la misma situación (versión web no funcionaba y me mandaba al top de la página y versión móvil si daba resultado), tenía la versión 4.6.1 de Divi y actualicé a la más reciente desde el panel de Wordpress y ya funciona!! Espero te sea de utilidad. Un saludo desde México y cualquier duda estoy a tus órdenes
Hola Fernando,
Gracias por el tutorial, me ha venido de maravilla porque no lograba hacer un enlace de texto. Ahora tengo una duda, cómo se hace para que te lleve a otra pagina?.
Ejemplo: «pincha aquí» y al clickear te direccione a una pagina de servicios
Saludos,
Celeste
Hola muy buen post, me ha funcionado bien, pero porque sólo me funciona en mobile y en laptop no me arranca el anclaje?
No tiene ningún sentido, los anclajes funcionan en cualquier dispositivo, son enlaces HTML puros y duros
Tengo un problema estoy usando el módulo blog de divi donde muestro los proyectos y con css logro que me quede la imagen a la izquierda y el texto a la derecha pero nosé como hacer para que el texto del proyecto no sea un enlace ya que no puede tener página propia.
Hola, quiero agregar enlaces en los títulos pero no me lo permite, solo me deja en la caja del diseño
¿has probado lo que pongo en el tutorial?