> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Agregar un Llamado a la Acción a un encabezado

> Anima a los visitantes de tu página a abrir una página separada, comprar una Oferta y más con un Llamado a la Acción.

## Resumen

Incluye un Llamado a la Acción en tu Encabezado para animar a los visitantes de tu página a abrir una página separada, comprar una oferta y más.

<Note>
  **Nota:** Esta guía se refiere a las Plantillas de Kajabi Pages. Si usas las Plantillas de Premier Legacy, [consulta esta guía](../../website/pages/how-to-add-a-call-to-action-to-your-header-with-premier).
</Note>

[Aprende más sobre el Llamado a la Acción](../../website/pages/how-to-use-a-call-to-action)

***

## Cómo agregar un Llamado a la Acción a tu encabezado

1. Abre la pestaña **Website** desde tu Dashboard.
2. Selecciona la pestaña **Pages**.
3. Abre el editor de páginas de tu Página. [Aprende más](../../website/pages/how-to-get-to-the-page-editor)
4. Haz clic en **Header** en la barra lateral.
5. Luego, haz clic en **Add Content**.
6. Desde la lista, haz clic en **Call to Action** para agregarlo a tu Header.
7. Personaliza el Texto del Llamado a la Acción, la Acción del Botón y la apariencia.
8. Para cambiar la ubicación del Botón de Llamado a la Acción, haz clic y arrastra el `=` junto al bloque en el editor de la barra lateral.
9. Haz clic en **Save**.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/bj2nukgalm" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Personaliza tu Llamado a la Acción

### Texto

Ingresa el texto que se mostrará en tu botón de Llamado a la Acción.

### Acción del botón

Selecciona una acción:

* Ir a una Landing Page
* Ir a una Página de Checkout
* Descargar un archivo
* Ir a una URL
* Abrir una ventana emergente de [opt-in de dos pasos](../../website/pages/how-to-use-the-two-step-optin-popup)
* Ir a una sección de la página

### Abrir en una pestaña nueva

Activa esta configuración para que tu acción se abra en una pestaña diferente del navegador de tu usuario.

### Color de fondo del botón

Haz clic en **Button Background Color** para seleccionar un color de tu paleta de colores del sitio.

Si prefieres usar un color personalizado, haz clic en la rueda de color y luego ingresa tu código de color RGB o usa los deslizadores para elegir tu color:

* El **cuadro** te permite ajustar el brillo y la saturación de tu color.
* La **barra horizontal de arcoíris** te permite seleccionar el tono.
* La **barra de degradado horizontal** te permite seleccionar la opacidad de tu color.

### Color de texto del botón

Complementa tu Color de Fondo del Botón con un **Button Text Color** diferente.

<Note>
  **Nota:** El Color de Texto del Botón es solo para [botones sólidos](../../website/pages/how-to-add-a-call-to-action-block-to-your-website-page-and-landing-page#h_4a31d1a6-26f8-4a0d-b917-5a7f8112e654).
</Note>

Haz clic en Button Text Color para seleccionar un color de tu paleta de colores del sitio.

Si prefieres usar un color personalizado, haz clic en la rueda de color y luego ingresa tu código de color RGB o usa los deslizadores para elegir tu color:

* El **cuadro** te permite ajustar el brillo y la saturación de tu color.
* La **barra horizontal de arcoíris** te permite seleccionar el tono.
* La **barra de degradado horizontal** te permite seleccionar la opacidad de tu color.

### Ancho del botón

Ajusta el ancho de tu Botón:

* Completo: llena el ancho del área del botón
* Automático: ajusta automáticamente el ancho para adaptarse al texto

### Estilo del botón

Cambia el estilo del Botón para mostrar:

* Botón de color sólido
* Contorno de tu Color de Fondo del Botón

### Tamaño del botón

Ajusta el tamaño de tu Botón de Llamado a la Acción:

* Pequeño
* Mediano
* Grande

Cambiar el tamaño de tu Llamado a la Acción cambiará tanto el fondo del botón como el tamaño del texto.

### Radio de borde

Personaliza el **Call to Action Border** para que se vea más redondeado o más cuadrado.

### Estirar bloque

Activa la configuración **Stretch Block** para llenar el espacio restante de la sección Header.

Una buena regla para usar la función Stretch Block es activarla para el Bloque ubicado más a la izquierda de tu sección Header.

Por ejemplo, si quieres tener tu Logo en el extremo izquierdo de tu Encabezado y un Menú y Menú de Usuario en el extremo derecho, selecciona **Stretch Block** para tu Logo.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/oitpibdldv" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

Controla la alineación y posición de tus Bloques ajustando el Stretch Block y la Alineación de Bloque para los Bloques de tu Header.

### Alineación de texto

Ajusta la alineación horizontal de tu Bloque en el Header para que aparezca más a la izquierda, centrado o a la derecha.

Ten en cuenta que esta configuración se verá afectada por los Bloques cercanos y su posición y alineación.