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

<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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(2 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

2 comentarios en “Tutorial Divi: Cómo enlazar a partes de una página”

  1. Caribay Camacho

    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?

    1. 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?

Deja un comentario

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

 

Ir arriba Ir al contenido