Añadir una tabla de contenidos a una campaña 

Añade una tabla de contenido a tu diseño de campaña para mantener tu contenido claro, organizado y fácil de navegar. Esto ayuda a tus suscriptores a encontrar rápidamente la información que les interesa, por lo que permanecen comprometidos con tus campañas.

Mailchimp ofrece dos formas de configurar una tabla de contenido en una campaña: la etiqueta merge **|MC:TOC|** y los enlaces de anclaje personalizados. La etiqueta merge **|MC:TOC|** crea una tabla de contenido que contiene enlaces a los títulos de la campaña. Los enlaces de anclaje te permiten construir tu propia tabla de contenido con texto, estilo de enlaces y formatos personalizados.

En este artículo, descubrirás dos formas de añadir una tabla de contenido a tu campaña.

Antes de empezar

  • La etiqueta merge *|MC:TOC|* y los enlaces de anclaje no son compatibles con todos los clientes de correo electrónico, por lo que pueden no funcionar según lo previsto al visualizar la campaña en un dispositivo móvil. Por eso te aconsejamos que hagas pruebas previas al lanzamiento de una campaña.
  • La etiqueta merge *|MC:TOC|* hereda el estilo del texto del enlace de la sección de campaña correspondiente. Esto significa que si la colocas en la sección del encabezado, se verá como otro texto de enlace de la sección del encabezado. Para cambiar el formato de la tabla de contenido, mueve la etiqueta a una sección diferente o usa enlaces de anclaje.

Cómo utilizar la etiqueta merge *|MC:TOC|*

La etiqueta merge *|MC:TOC|* inserta una tabla de contenido con enlaces a los encabezados que elijas. Primero, formatea el texto del encabezado que deseas que aparezca en la tabla de contenido. A continuación, añade la etiqueta merge *|MC:TOC|* a la sección de la campaña en la que deseas colocar la tabla de contenido.

Cuando envíes una campaña a tu público, sustituiremos la etiqueta merge por una tabla de contenidos que incluya los encabezados que has formateado.

Formatea encabezados y títulos de la tabla de contenido

En primer lugar, selecciona qué tipo de estilo de TOC heading (Encabezado de TOC) vas a emplear. Para aplicar a un texto un formato estándar de encabezado, elige un estilo de encabezado de TOC en el menú desplegable. Si deseas diseñar manualmente el aspecto del encabezado en el cuerpo de la campaña, elige TOC title (Título de TOC) y aplica los estilos que más te gusten. Ten en cuenta que los cambios que realices aquí no afectarán el aspecto de la tabla de contenido.

Para aplicar a un texto el formato de TOC heading (Encabezado de TOC) o TOC title (Título de TOC), sigue los siguientes pasos.

  1. En la sección Content (Contenido) del Campaign Builder (Generador de campañas), haz clic en Edit Design (Editar diseño).
    hacer clic en edit design
  2. En el paso Design (Diseño), haz clic en el bloque de contenido Text (Texto) que contiene el encabezado que deseas incluir en la tabla de contenido.
  3. En el panel de edición, resalta el encabezado que deseas formatear.
    El cursor resalta el texto.
  4. En la barra de herramientas del editor, haz clic en el menú desplegable Styles (Estilos) y selecciona TOC heading (Encabezado de TOC) o TOC title (Título de TOC).
    Estilos de la tabla de contenido
    Si seleccionas TOC title (Título de TOC), usa los otros botones de la barra de herramientas para aplicar más estilos al encabezado.
  5. Haz clic en Save & Close (Guardar y cerrar).
  6. Repite estos pasos con cada uno de los encabezados que desees incluir en la tabla de contenido.

Añade la etiqueta merge de la tabla de contenido

Después de formatear los encabezados de contenido, añade la etiqueta merge *|MC:TOC|* a cualquier bloque de contenido Text (Texto) para insertar la tabla de contenido. El estilo del texto y del enlace de la tabla de contenido coincidirá con la sección de la campaña en la que se encuentre y no se podrá cambiar. Si necesitas personalizarlo, prueba con los enlaces de anclaje.

  1. En la sección Content (Contenido) del Campaign Builder (Creador de campañas), haz clic en Design Email (Diseñar correo electrónico).
  2. Haz clic en el área de texto donde quieres añadir la tabla de contenidos.
  3. Haz clic en el menú desplegable Merge Tags (Etiquetas merge) y selecciona Table of Contents (Tabla de contenido).
    Etiqueta de tabla de contenido
  4. Haz clic en Save & Close (Guardar y cerrar).

¡Todo listo! Has añadido con éxito una tabla de contenido a tu campaña. Para ver la apariencia de tu campaña en las bandejas de entrada de tus destinatarios, consúltalo en el Modo de vista preliminar.

Previsualiza y prueba tu campaña por correo electrónico

Cómo ver y editar el diseño de una sección

Añade una tabla de contenido a una plantilla HTML personalizada

Aunque utilices una plantilla HTML personalizada, puedes emplear la etiqueta merge *|MC:TOC|* para insertar la tabla de contenido. Eso sí, asegúrate de formatear cada encabezado con las etiquetas correctas.

Primero, abre el código fuente de la plantilla y añade class="title" o class="mc-toc-title" a las etiquetas < span >, < div >, < h1 > o < h2 > de los encabezados que deseas que aparezcan en la tabla de contenido. Estas clases no funcionan con las etiquetas < h3 > y < h4 >, así que prueba con las etiquetas < span > si es necesario.

Tus encabezados formateados deben usar uno de los ejemplos de esta tabla. Se puede usar cualquiera de estos tipos de clase.

titlemc-toc-title
<span class="title"><span class="mc-toc-title">
<div class="title"><div class="mc-toc-title">
<h1 class="title"><h1 class="mc-toc-title">
<h2 class="title"><h2 class="mc-toc-title">

Después de editar las etiquetas, añade *|MC:TOC|* en el lugar de la plantilla donde deseas que aparezca la tabla de contenido.

*|MC:TOC|*
< div class= "title" id= "alumni-news" >

Dónde editar el código de la plantilla

Crear enlaces de anclaje

Crea enlaces a las anclas en tu contenido de campaña para una mayor flexibilidad. Requiere un poco más de trabajo, pero te permite personalizar el estilo de texto y enlace en tu tabla de contenido. Primero, añade anclas a los encabezados en tu contenido de campaña. A continuación, introduce el texto de la tabla de contenido y enlaza cada elemento con su enlace de anclaje.

Añade enlaces de anclaje

Para añadir enlaces de anclaje al texto de tu encabezado, sigue estos pasos:

  1. En la sección Content (Contenido) del Campaign Builder (Creador de campañas), haz clic en Edit Design (Editar diseño).
    hacer clic en edit design
  2. En el paso Design (Diseño), haz clic en el bloque de contenido Text (Texto) que contiene el encabezado que deseas incluir en la tabla de contenido.
  3. Coloca el cursor al inicio del encabezado y, a continuación, haz clic en el icono de ancla de la barra de herramientas.
    El cursor hace clic en el icono de ancla.
  4. En la ventana emergente Anchor Properties (Propiedades de anclaje), escribe el nombre del anclaje en el campo Anchor Name (Nombre de anclaje) y haz clic en OK (Aceptar). No uses espacios ni caracteres especiales en el nombre del anclaje.
    El cursor hace clic en ok.
  5. Haz clic en OK (Aceptar).
  6. Repite este proceso con todos los encabezados que quieras enlazar a la tabla de contenido.

Formatea la tabla de contenido

Ahora que has añadido a tu campaña los enlaces de anclaje, estás listo para introducir el texto de la tabla de contenido y añadir enlaces a cada elemento.

Para añadir y formatear tu tabla de contenido, sigue estos pasos:

  1. Haz clic en el bloque de contenido Text (Texto) donde deseas añadir la tabla de contenido.
  2. En el panel de edición, introduce la tabla de contenido.
    Captura de pantalla de la tabla de contenido.
  3. Resalta el primer elemento y haz clic en el icono de enlace de la barra de herramientas.
    El cursor resalta el texto de enlace.
    Asegúrate de resaltar únicamente el texto que deseas enlazar y evita los espacios alrededor del elemento. Esto te será útil al formatear más adelante el texto.
  4. En la ventana emergente Insert or Edit Link (Insertar o editar enlace), haz clic en el menú desplegable Link to: (Enlazar a:) y selecciona Anchor Link (Enlace de anclaje).
  5. Haz clic en el menú desplegable Select An Anchor To Link To (Seleccionar un anclaje al que enlazar) y selecciona el nombre del anclaje al que enlazará este elemento. 
  6. Haz clic en Advanced Options (Opciones avanzadas) y desmarca la casilla junto a Open in a new window (Abrir en una ventana nueva).
  7. Haz clic en Insert (Insertar).
    El cursor hace clic en insert.
  8. Repite estos pasos con cada elemento de la tabla de contenido.

Puedes usar los botones en la barra de herramientas del editor para personalizar el estilo y texto de tu tabla de contenido. Cuando editas tu tabla de contenido asegúrate de resaltar únicamente el texto que deseas cambiar. En función de la revisión que hagas, puedes quitar un enlace existente y debes volverlo a añadir. Para ver la apariencia que tendrán los enlaces de anclaje previsualiza y prueba tu campaña.

Cómo previsualizar y probar tu campaña

Probar y resolver problemas de la tabla de contenido

No todos los clientes de correo electrónico son compatibles con la etiqueta merge *|MC:TOC|* y los enlaces de anclaje, por lo que pueden no funcionar según lo previsto al visualizar la campaña en un dispositivo móvil.

De modo que antes de enviarla, te recomendamos previsualizar y probar tu campaña y enviarte unos cuantos correos de prueba. Para ver cómo aparecerá tu tabla de contenido en diversos clientes de correo, usa nuestra herramienta Inbox Preview.

Comportamiento de una campaña en dispositivos móviles

Cómo previsualizar y probar tu campaña

Cómo realizar pruebas con Inbox Preview

He aquí algunas cosas a tener en cuenta si tu tabla de contenido no se muestra según lo previsto.

  • Si usaste la etiqueta merge *|MC:TOC|* para generar una tabla de contenido, asegúrate de que el texto del encabezado est´e formateado como un TOC heading (encabezado del TOC) o un TOC title (título del TOC). Para comprobar el formato del encabezado, resalta el texto y haz clic en el menú desplegable Styles (Estilos) para ver qué estilo está seleccionado.
  • Si importaste HTML para crear una campaña, ten en cuenta que añadiremos una etiqueta < base > al código que puede romper los enlaces de anclaje. Para evitar que se rompan los enlaces de anclaje, tienes que editar el código antes de importarlo a Mailchimp. En tu editor HTML, añade tu propia etiqueta base vacía como < base href = " " > dentro del elemento < head > y, a continuación, importa el código HTML. Si detectamos una etiqueta < base > vacía en el momento de la importación, no añadiremos la nuestra.

La etiqueta < base > vacía que añades a tu HTML debe ser como esta.

< head >
 < base href= " ">
< /head >

¿Te fue útil este artículo?

¿Hay algo más que podemos hacer para mejorar nuestro sitio?