Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.

Crear llamadas a la acción (CTA)

Última actualización: febrero 20, 2024

Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique de otro modo:

Marketing Hub Starter, Pro, Enterprise
CMS Hub Starter, Pro, Enterprise

Utiliza la herramienta de llamadas a la acción (CTA) para crear botones, banners o ventanas emergentes que luego puedas añadir a tus páginas de HubSpot para atraer a nuevos visitantes. También puede añadir CTA a páginas externas.

Antes de añadir una CTA a una página externa, debes instalar el código de seguimiento HubSpot, o instalar el plugin HubSpot WordPress en tu sitio WordPress. Una vez que hayas añadido la CTA, puedes controlar el tráfico dirigiendo a los visitantes a páginas específicas, a enlaces de reuniones o a URL externas. 

En los dispositivos móviles, puedes elegir entre activar un diseño responsive u ocultar la CTA en pantallas pequeñas en las opciones de CTA . Después de publicar tu CTA, aprende a analizar el rendimiento de tu CTA en

Diseña un CTA

Usa el editor de CTA para personalizar su diseño y atraer a más visitantes. 

  • En tu cuenta de HubSpot, ve a MarketingCaptación de leadsCTA.
  • En la parte superior izquierda, haz clic en el menú desplegable y selecciona CTAs.
  • En la parte superior derecha, haz clic en Crear.
  • Puedes crear un nuevo CTA desde cero o a partir de una plantilla:
    • Para crearla a partir de una plantilla, en el panel izquierdo, haz clic en Plantillas de HubSpot. A continuación, selecciona la plantilla que necesites. 
    • Para crear una CTA desde cero, en el panel izquierdo, haz clic en Empezar de cero. A continuación, selecciona un tipo de CTA:
      • Banner fijo: es un banner que aparece fijo en la parte superior o inferior de la página. El banner permanecerá mientras los visitantes se desplazan por su página. 
      • Cuadro emergente: es un cuadro que aparece en un horario determinado. 
      • Deslizante: es un banner que se desliza desde una esquina del sitio web. El banner permanecerá mientras los visitantes se desplazan por su página. 
      • Incrustado: un banner, una llamada a la acción o un botón que puedes utilizar en tu contenido de HubSpot para dirigir a clientes potenciales a páginas específicas.
      • Imagen incrustada: una imagen que puedes utilizar en tus páginas de HubSpot o en tus correos electrónicos.
      • Incrustado: un botón que puedes utilizar en tus páginas de HubSpot o en tus correos electrónicos.
  • En la pestaña Agregar del panel izquierdo, puedes añadir elementos y editar el diseño de la CTA: 
    • Para añadir más contenido a la CTA, arrastra nuevos elementos directamente al panel derecho del editor. También puedes añadir elementos de vídeo a tu CTA, aprende más sobre las opciones son requisitos cuando añadir vídeos a tus CTA
    • Para modificar el diseño, pasa el ratón sobre un elemento y arrástralo a una nueva posición.
    • Para duplicar un elemento, coloca el cursor sobre él y haz clic en el icono de clonación duplicate.
    • Para eliminar el elemento, pasa el ratón sobre él y haz clic en el icono de eliminación delete
    • Para editar un elemento, haga clic en él. En el panel izquierdo, puede editar el contenido y el diseño del elemento.
 

KB - Módulo de video 

  • En el panel izquierdo, haz clic en la pestaña Contenido para gestionar los elementos. 
    • Para editar un elemento, haz clic en su nombre. En el panel izquierdo, puede editar el contenido y el diseño del elemento. En los elementos de texto enriquecido puedes utilizar el asistente de contenido para crear o refinar el contenido de tu CTA. 
    • Para eliminar un elemento, pasa el ratón sobre él y haz clic en el icono de eliminación delete
  • En el panel izquierdo, haz clic en la pestaña Diseño para personalizar y previsualizar la CTA.
    • Para previsualizar la CTA en páginas específicas, en la parte superior derecha, haz clic en Vista previa. A continuación, haz clic en el menú desplegable Previsualizar en una página específica y selecciona la página de HubSpot en la que quieras previsualizar la CTA
    • Para personalizar la apariencia de tu CTA, selecciona una de las siguientes opciones. A continuación, configure sus cambios en el panel izquierdo. 
      • Posición: para los CTA de tipo banner adhesivo, puedes seleccionar una posición superior o inferior. Para las CTA de tipo deslizante, puedes elegir posicionar la CTA en la parte superior izquierda, inferior izquierda, superior derecha o inferior derecha de la página. 
      • Tamaño: configura la altura de tu CTA, puedes activar la opción de establecer la altura automáticamente en función del contenido de tu CTA.
      • Diseño: configura el diseño de tu CTA. Puedes añadir relleno al contenido de tu CTA. También puedes activar la opción para habilitar un diseño adaptable. Con un diseño responsivo, las columnas de tu CTA se apilarán verticalmente en pantallas pequeñas.
      • Estilos: establece los estilos para tu CTA, como la fuente principal, el borde y la sombra de la CTA. 
      • Fondo: establece un fondo para el CTA, puedes elegir entre establecer un color de fondo o subir una imagen de fondo.

Diseña un CTA HTML

Para crear un CTA HTML incrustado personalizado y aplicar tus propios temas o CSS:

  • En el panel izquierdo, haz clic en Empezar de cero
  • A continuación, haz clic para expandir Opciones avanzadas y selecciona HTML incrustado.
  • Haz clic en el menú desplegable Enlace a y selecciona una opción a la que redirigir tu CTA:
    • Dirección de correo electrónico: crea un enlace de mailto
    • Descarga de archivos: vincula tu CTA a un archivo en tu gestor de archivos. Selecciona un archivo existente o sube un archivo nuevo y, a continuación, marca la casilla Abrir página en nueva pestaña si quieres que los visitantes que hagan clic en el botón CTA vean la imagen en una nueva ventana del navegador. 
    • Enlace de reunión: enlaza tu CTA a un enlace de reunión de HubSpot. Haz clic en el menú desplegable Elige un enlace de reunión y, a continuación, selecciona un enlace de reunión . Para abrir este enlace en una página nueva, selecciona la casilla Abrir página en una pestaña nueva
    • Una de tus páginas: enlaza tu CTA a una de tus páginas o entradas de blog de HubSpot. Haz clic en el menú desplegable Página y luego selecciona una página o un puesto . El enlace del botón CTA estará vinculado al ID de la página y cualquier cambio en la URL de la página actualizará automáticamente el enlace del botón CTA.
    • URL: enlaza tu CTA a una página externa fuera de HubSpot. En el campo URL del enlace, introduce la URL del sitio web al que quieres dirigir a los visitantes.
    • CTA: utiliza el CTA personalizado para activar un banner adhesivo, una caja emergente o un CTA deslizante.
  • En el campo Contenido del botón, introduce el texto de tu CTA
  • Para personalizar aún más el diseño de tu CTA, haz clic en Avanzado.
     

 

  • En la página Advanced , puedes añadir clases o reglas CSS personalizadas:
    • Clases CSS personalizadas: introduce una clase personalizada a tu CTA. Utiliza clases personalizadas para aplicar estilos de diseño, como familias de fuentes, a varios CTA de tu sitio web. Cualquier clase CSS personalizada debe incluirse en la hoja de estilos CSS utilizada en tus páginas de HubSpot.
    • Reglas CSS personalizadas: añade reglas personalizadas para aplicar un estilo en línea específico a tu CTA.
      • Para añadir una nueva regla CSS, haz clic en Añadir una o + Añadir y configura tu selector y estilo. 
        • Selector: introduce un selector CSS. Este valor es opcional y se combinará con el selector del CTA. Por ejemplo, si el selector introducido es :hover , el selector combinado pasa a ser ${ctaSelector}:hover
        • Estilo: introduce una regla de estilo CSS personalizada para aplicarla al selector configurado. Puedes introducir un estilo sin introducir un selector. Por ejemplo, color: yellow;.
           

 

  • Para editar una regla CSS existente, pasa el ratón por encima de la regla y haz clic en el icono de edición edit
  • Para clonar una regla CSS, pasa el ratón por encima de la regla y haz clic en el icono de clon duplicate
  • Para gestionar la prioridad de tus reglas CSS, haz clic y arrastra cada regla para ordenarlas por orden de prioridad.
  • Para eliminar una regla CSS, pasa el ratón por encima de la regla y haz clic en el icono de eliminación delete
  • Para aplicar al CTA el mismo HTML y las mismas clases que a los CTA heredados, selecciona la casilla Usar marcado heredado. Si tienes hojas de estilo CSS en las páginas que dan estilo a los CTA heredados, al seleccionar esta casilla permitirás que el CTA HTML adopte los mismos estilos. 
  • Para terminar de configurar el diseño de tu CTA, haz clic en Guardar y aplicar.
     

 

 

Especificar dónde y cuándo se mostrará el banner fijo, el cuadro emergente o la CTA deslizante

Si estás creando un banner fijo, un cuadro emergente o una CTA deslizante, elige cuándo quieres que aparezca este elemento en el sitio. Más información sobre añadiendo CTAs a tus páginas

Puedes utilizar filtros para combinar varios conjuntos de reglas sobre qué visitantes ven tu CTA. Más información sobre cómo configurar tus reglas de orientación .

Desencadenantes 

Selecciona un desencadenante para determinar cuándo se mostrará la CTA en la página. La CTA aparecerá cuando se produzca el primer evento de activación. 

  • En la parte superior, haz clic en la pestaña Targeting.
  •  En la sección ¿Cuándo se mostrará?, activa el interruptor situado junto a los desencadenantes que quieras utilizar:
    • Activar cuando se haga clic en un botón: la CTA aparecerá cuando un visitante haga clic en un botón. Aprende a configurar tus CTA emergentes en para que se activen al hacer clic en un botón. Por defecto, esta opción está siempre activada. 
      • Usa esta opción en tus páginas de HubSpot con un módulo de botón predeterminado, o bien en tus páginas externas personalizando la clase de un botón.
      • Para definir este desencadenante en una página externa, debes instalar el código de seguimiento de HubSpot
    • Activar cuando el usuario se desplace por la página: la CTA aparecerá cuando el visitante se desplace por la página más allá de un porcentaje especificado.
    • Activar cuando el usuario vaya a salir de la página (solo en cuadros emergentes): la CTA aparecerá cuando el visitante mueva el cursor a la barra superior de la ventana del navegador.
    • Activar después de un tiempo: la CTA aparecerá cuando haya pasado el número de segundos especificado.
    • Activar tras inactividad: el CTA aparecerá después de que el visitante haya estado inactivo durante un número especificado de segundos.

URL de sitios web

Puedes añadir lógica condicional para URL de páginas web específicas y/o valores de parámetros de consulta en la misma pestaña Targeting . Por defecto, el CTA aparecerá en todas las páginas.

  • Para que la CTA se muestre cuando un visitante esté en una URL específica, en la sección URL del sitio web:
    • Haz clic en el primer menú desplegable y selecciona URL del sitio web.
    • Haz clic en el segundo menú desplegable  y selecciona una regla de selección .
    • Introduce los criterios de la regla en el campo de texto.
  • Para que la CTA se muestre cuando un visitante esté en la página de un sitio web cuya URL incluya parámetros de consulta específicos:
    • Haz clic en el primer menú desplegable y selecciona Parámetro de consulta.
    • En el primer campo, escribe el nombre del parámetro.
    • Haz clic en el menú desplegable y selecciona una regla de targeting.
    • En el segundo campo, escribe el valor del parámetro de consulta.
  • Para agregar otra regla, haz clic en Agregar regla.
  • Para excluir la CTA de determinadas páginas (por ejemplo, de una página de política de privacidad), haz clic en Agregar regla de exclusión.


Información y comportamiento del visitante (opcional)

También puedes dirigir tu CTA a contactos específicos basándote en la información y el comportamiento conocidos del visitante en la pestaña Targeting . El tipo de reglas de filtrado que puedes agregar depende de las suscripciones de tu cuenta. 

  • En la sección Información y comportamiento del visitante (Opcional), haz clic en el primer menú desplegable para elegir cómo quieres filtrar a tus visitantes.
  • Haz clic en el siguiente menú desplegable para seleccionar las reglas de filtrado.
  • Si quieres agregar más reglas para especificar cuándo se mostrará la CTA, haz clic en Agregar regla y selecciona los filtros que quieras.
  • Elige cuándo ocultar la CTA:
    • Haz clic en Agregar regla de exclusión.
    • Haz clic en el primer menú desplegable para elegir cuándo debería ocultarse la CTA. 
    • Haz clic en el siguiente menú desplegable para seleccionar las reglas de filtrado.
    • Si quieres agregar más reglas para especificar cuándo se ocultará la CTA, haz clic en Agregar regla de exclusión y selecciona los filtros que quieras.
  • Para crear otro grupo de reglas de filtrado, haz clic en Añadir grupo de filtrado y selecciona tus reglas de filtrado.




Mostrar frecuencia 

Después de que un visitante rechace tu banner adhesivo, cuadro emergente o CTA deslizante por primera vez, elige si la CTA debe mostrarse de nuevo y con qué frecuencia. En la pestaña Targeting , configura la frecuencia de visualización de tu CTA: 

  •  En la sección Con qué frecuencia se mostrará, haz clic en el menú desplegable Mostrar de nuevo y elige una frecuencia: 
    • Después de un periodo de tiempo establecido: establece el tiempo que debe transcurrir después de que un visitante descarte la CTA, antes de que se muestre de nuevo.
    • Repetir: muestra la CTA cada vez que los visitantes vuelven a las páginas web seleccionadas y realizan la acción desencadenante, aunque ya hayan interactuado con ella.
    • No volver a mostrar: la CTA solo se muestra a los visitantes una vez. Después de la visualización inicial, no vuelvas a mostrar la CTA. 

Nota: esto no se aplica a los CTA en los que el activador de activación utilizado es Activador al hacer clic en el botón.

 


Personaliza las opciones de la CTA

En las pestañas Opciones, puedes definir las diferentes opciones de la CTA. Por ejemplo, puedes elegir mostrarla en tamaños pequeños, definir qué campañas se asociarán con ellas y programar su aparición. 

  • En la parte superior, haz clic en la pestaña Opciones.
  • Si tienes una suscripción a Marketing Hub Professional o Enterprise, puedes asociar la CTA a una campaña:
    • Para asociar tu CTA a una campaña existente, haz clic en el menú desplegable Campaña y selecciona una campaña .
    • Para asociar tu CTA a una nueva campaña, haz clic en el menú desplegable Campaña y haz clic en Crear campaña. Después, continúa configurando tu campaña
  • Si usas banners fijos, cuadros emergentes o CTA deslizantes, tienes las siguientes opciones:
    • Para ocultar la CTA en tamaños de pantalla pequeños, en la sección Tamaños de pantalla pequeños, selecciona la casilla Desactivar en tamaños de pantalla pequeños.
    • Para definir cuándo empezará a mostrarse la CTA, activa el interruptor Programar para más tarde. A continuación, seleccione una fecha y hora deinicio
    • Para definir cuándo dejará de mostrarse la CTA, activa el interruptor Definir la fecha y la hora en que se dejará de publicar. A continuación, selecciona una fecha de finalización y una hora
       


Publicar la llamada a la acción 

Una vez que hayas terminado de configurar la CTA, publícala en tus páginas. 

  • En la parte superior derecha, haz clic en Revisar y publicar.
  • En el panel derecho, revisa la CTA y haz clic en Publicar ahora. La CTA se publicará automáticamente en las páginas de destino. 
     
¿Te resultó útil este artículo?
Este formulario se utiliza solo para recibir comentarios a la documentación. Cómo recibir ayuda con HubSpot.