Tutorial Divi: Cómo enlazar a partes de una página

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.

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í:

Texto del enlace


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.

La entrada Tutorial Divi: Cómo enlazar a partes de una página la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Laura D´Cuero
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *