Llamadas a la acción (CTAs) y Popups Avanzados

Introducción

Las llamadas a la acción (CTAs) y los Popups Avanzados facilitan la creación de banners, ventanas emergentes y botones que motivan a los lectores a tomar medidas, como suscribirse a tu boletín informativo o convertirse en seguidores.

Para ayudarte a comenzar rápidamente, tu sitio web incluye plantillas listas para usar de forma predeterminada.

💡 Consejo: Al crear un nuevo CTA o Popup Avanzado, te recomendamos duplicar una de estas plantillas y realizar las ediciones sobre el texto, en lugar de modificar el original.

Existen 3 tipos de CTAs que consideramos los más útiles. ¡Conoce todo sobre ellos en las siguientes secciones!

1. CTAs deslizables (Slide-in CTAs)

Los CTAs deslizables son un tipo de popup o formulario de suscripción que aparece de forma sutil deslizándose desde las esquinas o los laterales de la pantalla.

👉 Nuestra recomendación:

Al configurar un CTA deslizable, recomendamos diseñarlo pensando en las siguientes dos diapositivas (slides):

• DIAPOSITIVA 1 

  El primer paso consiste en plantear al usuario una pregunta directa para confirmar si desea participar o no en una acción; por ejemplo, pregúntale si quiere suscribirse a tu boletín informativo.

  • Encabezado (Heading): Haz una petición directa. Esto será lo primero que lea el usuario, así que sé transparente sobre lo que le pides que haga. Procura que sea claro y conciso.

    Ejemplos: “Suscríbete a [Publicación XYZ]” o “Regístrate al boletín informativo de [Publicación XYZ]”.

  • Descripción: Explícales por qué y amplía la oferta. Detalla qué recibirán al registrarse. Puedes incluir la frecuencia y el día del envío, el tipo de contenido incluido, etc. Asegúrate de decirles por qué deberían suscribirse.
    
    

    Ejemplo: “Recibe noticias importantes de nuestra comunidad en tu bandeja de entrada dos veces por semana” o “Te entregaremos noticias locales directamente en tu correo cada miércoles”.

  • Botón: Asegúrate de que el botón destaque eligiendo colores llamativos y una fuente grande y en negrita.

• DIAPOSITIVA 2 El segundo paso solo aparecerá después de que el usuario se haya suscrito. Es una oportunidad para pedir su apoyo y ofrecer más información.

  • Encabezado (Heading): Aunque es poco probable que un usuario realice una contribución inmediatamente después de suscribirse, aprovecha la oportunidad para educarlo sobre cómo se financia tu medio. Familiarízalos con la idea mientras tienes su atención o enfatiza tu propuesta de valor.

  • Ejemplo: “Tú financias nuestro trabajo”, “Dependemos de nuestros miembros” o “100% local”.

  • Descripción: Hazles saber que agradeces su suscripción y que pronto recibirán tu boletín. Explica cómo su apoyo marca la diferencia. Muchos lectores aún se están acostumbrando a la idea de apoyar voluntariamente el periodismo local. Explica que cada lector que decide aportar es de gran importancia.

    Ejemplo: “¡Gracias por suscribirte! Funcionamos gracias a lectores como tú que invierten en noticias locales. Considera apoyarnos hoy mismo” o “¡Muchas gracias! Revisa tu bandeja de entrada y considera apoyarnos (o comienza a apoyarnos hoy mismo porque sabemos que te encantará)”.

  • Botón: Ofréceles más información. No queremos que su recorrido termine aquí, incluso si no están listos para contribuir. Dales la opción de saber más sobre quiénes son, conocer al equipo o leer sus principios editoriales. Pero, en última instancia, pídeles su apoyo. Como el apoyo es el objetivo final, dales la opción de realizar una contribución. Aunque no estén listos todavía, esto los prepara para esperar otra petición en el futuro.

👉 Mejores prácticas:

Es importante dar tiempo al lector para que conozca tu sitio web y navegue por él, especialmente si este CTA se está utilizando para campañas de donación. ​

En Configurar (Configure), ve a Lanzamiento (Launch) > Después de desplazarse / Mostrar dentro del rango (After Scroll/ Display Within Range) y actívalo. Desliza la opción Mostrar al - Mostrar cuando un usuario se desplaza por la página (Display at - Display when a user scrolls the page) al 40 %:

De esta manera, el CTA solo aparecerá después de que el lector se haya desplazado hacia abajo en tu página, lo que hace que la experiencia sea menos saturada.

Por defecto, el CTA de cookies en la parte inferior se superpondrá a cualquier otro CTA, incluyendo el Slide-in. Para cambiar el orden y hacer que el Slide-in aparezca en la parte superior, pide a los desarrolladores que añadan el siguiente código en tu sitio web:

.cp-module-slide_in .cp-popup { z-index: 9999999; }

2. Popups de ventana emergente (Pop-up CTAs)

Un CTA de ventana emergente (Pop-up CTA) es una superposición de tipo "light-box" que se puede activar en cualquier página web con una llamada a la acción específica.

💡 Nuestro consejo:

Haz que sea oportuno. Añade un temporizador de cuenta regresiva o utiliza un lenguaje que denote urgencia para incentivar la acción.

👉 Mejores prácticas:

Este tipo de popup es bastante invasivo e interrumpe el recorrido del usuario de forma muy abrupta. Si se activa inmediatamente después de que cargue la página o en varias páginas a la vez, puede provocar que el lector abandone tu sitio web.

Por ello, te recomendamos lo siguiente:

1. Ve a Configurar (Configure) > Lanzamiento (Launch).

2. Haz clic en Después de unos segundos en la página (After a Few Seconds on the Page) y desactívalo.

3. Puedes hacer clic en Después de un número de visitas a la página (After Number of Page Visits), activarlo y elegir el número de páginas visitadas necesarias para activar el popup, o bien activarlo Después de desplazarse (After Scroll).

4. Para este CTA específico, asegúrate de que el popup no se active de nuevo después de que el lector lo cierre; para ello, haz clic en Cookies en la barra de navegación de la izquierda.

3. CTAs de "Antes/Después" (Before/After CTAs)

Los CTAs de Antes/Después son banners o formularios de suscripción que pueden insertarse antes o después de la publicación de tu blog en una página.

Por ejemplo, colocar un CTA de "Donar ahora" al final de todas tus publicaciones es una excelente manera de atraer a los lectores que están interactuando con el trabajo que realizas.

Aquí tienes algunos consejos para configurar un CTA de Antes/Después:

• Encabezado (Heading): Sé directo. No evites el tema; deja claro que estás pidiendo su apoyo. El lector acaba de pasar un par de minutos leyendo tu artículo, por lo que está en el momento ideal para recibir esta petición.

  • Ejemplo: “Este artículo es posible gracias a nuestros lectores” o “¿Disfrutaste el artículo? Necesitamos tu apoyo para continuar este trabajo”.

• ​ Descripción: ¡Enfatiza el porqué! Aquí tienes mucho espacio para ser creativo. El lector ya llegó al final del artículo, por lo que es probable que se tome un minuto o dos adicionales para leer tu mensaje. ​

• Botón: Haz que resalte. Asegúrate de que el usuario no pueda pasar por alto el botón, incluso si no lee todo el texto.

👉 Mejores prácticas:

Recuerda establecer las Reglas de visualización (Display Rules) en "Todas las publicaciones" (All posts) en Configurar (Configure) > Destino (Target).

Gestión de CTAs

1. Puedes eliminar un CTA de tu sitio web simplemente desactivándolo (OFF):

En tu menú principal, ve a Advanced Popups > Dashboard (Escritorio). Allí verás todos tus CTAs; simplemente cambia el interruptor a ON/OFF.

2. Puedes editar el texto (copy) del CTA deseado haciendo clic en el nombre del mismo:

Haz doble clic en el texto para editarlo. Haz clic en "Save" (Guardar) y "Make public" (Hacer público).

📱 Vista de escritorio frente a Vista móvil

Al diseñar tus CTAs, es importante dar estilo tanto a la versión de escritorio (desktop) como a la móvil (mobile).

Para editar la versión móvil, haz clic en el ícono de móvil en la navegación superior, junto a Connect; esto te permitirá ver y ajustar cómo aparece tu diseño en dispositivos móviles.

Cómo habilitar un CTA en una página, categoría o publicación específica

Puedes habilitar un CTA en páginas, categorías o publicaciones específicas. Para hacerlo:

• Ve a House Ads > Dashboard (Escritorio) y abre el CTA deseado haciendo clic en su nombre.

• En la esquina superior izquierda, haz clic en "Configure" (Configurar).

• En la barra lateral, haz clic en "Target" (Destino).

• Haz clic en "Pages" (Páginas) y luego en "Display Rules" (Reglas de visualización).

   

  

   

• Asegúrate de establecer "Todas las publicaciones" (All Posts) en las reglas de visualización para los CTAs en línea (in-line) y de antes/después de las publicaciones.

• Selecciona "Target Specifics" (Objetivos específicos) para mostrar el CTA en un lugar específico:

  • Página (Page): Escribe el título de la página.

  • Publicación (Post): Escribe el título de la publicación.

  • Categoría (Category): Escribe el nombre de la categoría.

Cómo deshabilitar un CTA en una página, categoría o publicación específica

También puedes deshabilitar el CTA en páginas, categorías o publicaciones específicas:

• Ve a House Ads > Dashboard (Escritorio) y abre el CTA deseado haciendo clic en su nombre.

• En la esquina superior izquierda, haz clic en "Configure" (Configurar).

• En la barra lateral, haz clic en "Target" (Destino).

• Haz clic en "Pages" (Páginas) y luego en "Display Rules" (Reglas de visualización).

• Selecciona "Target Specifics" y añade el nombre de la página o el título de la publicación:

• A menudo, no querrás mostrar CTAs deslizables (slide-in CTAs) en las siguientes páginas:

  • Política de Privacidad (Privacy Policy)

  • Apóyanos (Support Us)

  • Boletín Informativo (Newsletter)

  • Términos de Uso y Política de Pago (Terms of Use and Payment Policy)

  • Gracias (Thank you)

  • Contáctanos (Contact us)

• Haz clic en "Save" (Guardar) y "Make public" (Hacer público).

🎨 Consejos de diseño

Al editar tus CTAs, asegúrate de que tengan suficiente:

• Contraste: Es importante que los botones y los textos resalten del fondo. Las imágenes de fondo pueden ser complicadas, así que debes tener mucho cuidado.

• Legibilidad: Las fuentes deben ser lo suficientemente grandes, especialmente en dispositivos móviles. Es difícil establecer un número exacto, pero funcionan mejor las fuentes superiores a 16px.

• Jerarquía: El botón debe resaltar más que el enlace de "Leer más" (Read more) y otros elementos.

Activación del modal de Pelcro (Triggering PELCRO Modal)

Para activar un modal de Pelcro utilizando los botones de House Ads, selecciona el botón en el editor de House Ads y haz clic en Advanced (Avanzado). En Custom Class (Clase personalizada), añade:

pelcro-subscribe-button

❓ ¿Necesitas un CTA diferente?

¡Ponte en contacto con nuestro equipo a través del sistema de solicitud de soporte en support@indiegraf.com para obtener más información!