# Agregar enlaces de anclaje al contenido del correo electrónico con HTML
## Descripción

Un enlace de anclaje lleva al lector a otro lugar del mismo correo electrónico, por ejemplo, desde un índice en la parte superior hasta una sección más abajo. Este artículo explica cómo crear el destino con un bloque HTML y cómo dirigir hacia él un enlace, un botón o un elemento de menú.

Este método funciona en un boletín normal creado con el diseñador de arrastrar y soltar. No necesita escribir su correo electrónico en HTML: solo agrega un pequeño bloque HTML para cada destino.

## Por qué es importante

Los enlaces de anclaje hacen que los boletines largos y los correos de tipo resumen sean más fáciles de leer. Los lectores saltan directamente a las secciones que les interesan, se desplazan menos e interactúan más con su contenido. Los enlaces de anclaje son útiles para correos con varios temas, presentaciones de productos o calendarios de eventos.

<Callout type="caution">
Use el atributo `id` en una etiqueta `<a>` vacía, por ejemplo `<a id="section1"></a>`. No use el atributo `name`: la plataforma lo elimina al enviar el correo y el enlace no lleva a ninguna parte. Un `<div>` con un `id` tampoco funciona.
</Callout>

<Callout type="caution">
**Gmail (en la web y en la aplicación) no admite los enlaces a una sección del mismo correo: el enlace no hace nada.** Funcionan en la mayoría de las demás aplicaciones de correo, como Apple Mail y Outlook. Si muchos de sus suscriptores usan Gmail, prefiera enlaces a páginas web.
</Callout>

## Instrucciones paso a paso

<Stepper>

1. Agregue un bloque HTML
   - En el diseñador de correos electrónicos, abra la pestaña **Contenido**.
   - Arrastre el bloque **HTML** al lugar donde debe llegar el lector, justo encima de la sección a la que desea enlazar.
   - El resto de su correo no cambia: sus textos, imágenes y botones siguen siendo bloques normales.

1. Agregue la marca de destino
   - Seleccione el bloque HTML. Su código aparece a la derecha, en el panel **Propiedades de HTML**.
   - Borre el código de ejemplo del bloque y pegue este código en su lugar:
   ```html
   <a id="section1"></a>
   ```
   Esta etiqueta vacía marca el destino. El lector no la ve en el correo.

   ![Panel Propiedades de HTML con el código de la marca](/images/campaign-creation/anchor-link-html-block.png)

1. Cree el enlace hacia el destino
   - **Enlace en un texto**: seleccione el texto y haga clic en el icono de enlace (**Insertar/editar enlace**) de la barra de herramientas del texto. La ventana **Insert link** se abre en inglés: en el campo **Url**, escriba `#section1` y haga clic en **Save**.
   - **Botón**: seleccione el botón. En sus propiedades, en **Acción**, escriba `#section1` en el campo **Url**.
   - **Elemento de menú**: seleccione el menú. En **Configurar elementos del menú**, active **Más opciones** para el elemento y escriba `#section1` en el campo **Url**. Cada campo de un elemento de menú se explica en [Uso del bloque Menú](/es/docs/campaign-creation/using-the-menu-block).

   La dirección es el signo `#` seguido del `id` exacto del destino.

1. Guarde y pruebe
   - Guarde su correo electrónico.
   - Envíese un correo de prueba y haga clic en cada enlace de anclaje para comprobar que lleva al lugar correcto.

</Stepper>

### Reglas para los nombres de anclaje

- Dé a cada destino un `id` único en el correo.
- No use espacios ni acentos en el `id`. Use letras, números y guiones, por ejemplo `section1` o `menu-postres`.
- La dirección del enlace debe coincidir exactamente con el `id`, precedida del signo `#`: `id="section1"` y `#section1`.

### Ejemplo de código HTML

Este es un ejemplo con un enlace en la parte superior del correo y su destino más abajo:

```html
<p><a href="#section1">Ir a la sección 1</a></p>

<!-- ... otro contenido ... -->

<a id="section1"></a>
<h2>Sección 1</h2>
<p>Contenido de la sección 1.</p>
```

Cuando el lector hace clic en **Ir a la sección 1**, el correo se desplaza hasta la etiqueta `<a id="section1"></a>`, justo encima del título de la sección.

El seguimiento de clics no modifica los enlaces de anclaje. Siguen siendo `#section1` en el correo enviado.

## Solución de problemas

**El enlace no lleva a ninguna parte**

- No use el atributo `name` (`<a name="section1">`). La plataforma lo elimina al enviar el correo. Use `id` en su lugar: `<a id="section1"></a>`.
- Un `<div>` con un `id` (`<div id="section1">`) no funciona como destino. Use una etiqueta `<a>` vacía con un `id`.
- Compruebe que el `id` no tenga espacios ni acentos.
- Compruebe que la dirección del enlace coincida exactamente con el `id`, incluidas mayúsculas y minúsculas.

**El enlace lleva al lugar incorrecto**

- Compruebe que cada `id` se use una sola vez en el correo.
- Coloque la etiqueta de destino justo antes del contenido que el lector debe ver.

**Compatibilidad del cliente de correo electrónico**

- Gmail (en la web y en la aplicación) no admite los enlaces de anclaje: el enlace no hace nada. Funcionan en la mayoría de las demás aplicaciones de correo, como Apple Mail y Outlook.
- Pruebe en las aplicaciones de correo que más usa su público.
- En un correo muy largo, agregue también un breve resumen en la parte superior para que todos los lectores encuentren la información.

**El código HTML no se muestra**

- Use el bloque **HTML**, no un bloque de texto, para la etiqueta de destino.
- Compruebe que cada etiqueta esté bien cerrada.

## Artículos relacionados

- [Uso del bloque Menú](/es/docs/campaign-creation/using-the-menu-block) - Elementos de menú hacia secciones
- [Uso del diseñador de correos electrónicos](/es/docs/campaign-creation/using-the-email-designer) - Modo de edición HTML
- [Importar su código HTML](/es/docs/email-templates/importing-your-html-code) - Trabajar con HTML
- [Agregar una encuesta a una campaña](/es/docs/campaign-creation/integrating-survey-forms) - Enlazar a secciones
- [Creación de campañas](/es/docs/campaign-creation/creating-campaigns) - Conceptos básicos de campañas
- [Probar su campaña](/es/docs/campaign-creation/testing-your-campaign) - Probar enlaces de anclaje