En este artículo aprenderás cómo enlazar a otra sección de tu propia página de Divi.
¿Cuándo nos puede resultar útil?
- Cuando queremos poner un botón que te lleve más abajo, a la siguiente sección.
- Cuando queremos que un botón te lleve arriba del todo, al inicio.
- Cuando quieres que un texto te lleve a otro lugar de la misma página; por ejemplo una dirección te lleve directamente al mapa, o un botón de llamada a la acción que te lleve a un formulario.
- Cuando queremos enlazar a una sección que está en otra página de nuestro sitio web; por ejemplo, podemos crear un botón de Contacto en nuestra página de inicio que nos lleve al formulario de contacto de nuesta página de contacto.
La verdad es que las opciones son infinitas, échale imaginación y haz que tu página web sea única… Sobre todo puede tener utilidad en una landing page, o páginas muy largas donde navegar haciendo solo scroll puede ser muy tedioso.
Es muy sencillo, son solo dos pasos:
- Dar un identificador CSS a la zona de destino
- Enlazar el botón / texto / imágen (o lo que sea) que será clicado para llegar al destino.
Para el artículo vamos a hacer un ejemplo creando un botón que nos lleve al final de esta misma entrada:
Dar un identificador CSS
En el módulo al que queremos enlazar, en la pestaña de opciones avanzadas del módulo, en el campo Identificador CSS que está dentro de ID y clases de CSS le daremos un nombre, en nuestro caso final-entrada, y guardamos.
También podríamos añadir el identificador CSS a una sección o a una fila para enlazar a éstas.
La única precaución que debemos tener es que el identificador CSS debe de ser único en su página. No podemos usar el mismo identificador dos veces en la misma página (aunque sí lo podemos usar más de una vez en distintas páginas de nuestro sitio web).
Enlazar al identificador
Ahora tenemos que crear el enlace al identificador. En nuestro ejemplo hemos utilizado un botón, pero podríamos utilizar cualquier elemento en el que podamos crear un enlace: una imagen, un fragmento de texto, o incluso un modulo, fila o sección completo utilizando la opción de Enlace. En el campo Enlace escribe almohadilla y el nombre que diste en el paso anterior, en nuestro ejemplo: #final-entrada.
Si quisieramos enlazar a un identificador que está en una página distinta de la actual tendríamos que escribir el enlace de la siguiente forma: direccion-de-la-pagina#identificador. Por ejemplo: pixelinlove.net/contacto#formulario.
¡Y listo! No es magia, es código.