> ## 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 tarjetas de precio a una página

> Aprendan a agregar un bloque de precio para exhibir sus productos, servicios, opciones de precio, y más.

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

<Note>
  **Nota:** esta guía se refiere al editor de páginas más reciente disponible con Website Builder y Kajabi Pages. Si están usando las plantillas heredadas de Premier, consulten la guía [aquí](/es/articles/website/pages/how-to-add-pricing-options-to-your-page-with-premier).
</Note>

***

## ¿Qué es una tarjeta de precio?

Una tarjeta de precio es una excelente forma de presentar una oferta mostrando todas las funciones de su producto mientras animan a sus visitantes a comprar con un botón de llamado a la acción.

Pueden usar múltiples tarjetas de precio juntas en una sección para exhibir múltiples ofertas que puedan tener para un producto, como planes de precio, paquetes, y más.

Aprendan a usar múltiples tarjetas de precio con la [sección de tarjetas de precio](/es/articles/website/pages/how-to-add-offers-pricing-sections#pricing-cards).

***

## Cómo agregar un bloque de tarjeta de precio

* Abran la pestaña **Website** desde el Dashboard.
* Seleccionen la pestaña **Pages**.
* Abran el editor de páginas de su página. [Aprendan más](/es/articles/website/pages/how-to-get-to-the-page-editor)
* Hagan clic en la sección que quieren editar o [creen una nueva sección](/es/articles/website/pages/add-sections-to-your-pages).
* En la barra lateral, hagan clic en **Add Content**.
* En la lista, seleccionen **Pricing Card**.
* Su nuevo bloque de tarjeta de precio se generará al final de la sección.
* Hagan clic en **Save** para guardar sus cambios:

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

***

## Cómo personalizar su bloque de tarjeta de precio

En un bloque de tarjeta de precio, personalicen:

* [Ancho del bloque](/es/articles/website/pages/how-to-customize-the-block-width)
* Imagen
* Atributo alt de la imagen
* Nombre
* Precio
* Leyenda del precio
* Texto
* Ícono de lista
* Configuración del bloque de tarjeta de precio

### Imagen

Personalicen la imagen que aparece en la tarjeta de precio y si se debe mostrar o no:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/58f7b6c8_31116794855707.png" alt="Kajabi_-__admin_themes_2159353685_settings_edit.jpg" />

### Atributo alt de la imagen

Personalicen el atributo alt de la imagen para SEO y activen o desactiven si la imagen se mostrará o no:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/fcf204f1_31116764810779.png" alt="Window_and_Kajabi_-__admin_themes_2159353685_settings_edit.jpg" />

### Nombre

Personalicen el texto y color que muestran el nombre de su opción de precio:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/980eea53_31116794867739.png" alt="Window_and_Kajabi_-__admin_themes_2159353685_settings_edit.jpg" />

### Precio

Especifiquen el texto y color usados comúnmente para mostrar el precio de la opción de precio específica:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/b454a4a8_31116764814875.png" alt="Window_and_Kajabi_-__admin_themes_2159353685_settings_edit.jpg" />

### Leyenda del precio

Personalicen el texto y color de la leyenda ubicada justo debajo del precio:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/a5bb6019_31116764817435.png" alt="Kajabi_-__admin_themes_2159353685_settings_edit.jpg" />

### Texto

Personalicen el mensaje que muestra las funciones incluidas con su oferta:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/c6209461_31116794875163.png" alt="Kajabi_-__admin_themes_2159353685_settings_edit.jpg" />

<Tip>
  **Consejo:** [usen el editor de texto](../../marketing/email-campaigns/can-i-make-the-text-box-larger-when-editing) para agregar fácilmente su contenido de texto a su bloque de funciones.
</Tip>

### Ícono de lista y color del ícono

Personalicen la apariencia de la lista que describe las funciones cambiando el ícono a:

* Viñeta
* Check
* Signo más
* Estrella

y seleccionando un color para el ícono.

Al hacer clic en **List icon color** se abrirá la paleta de colores de su sitio.

Si prefieren usar un color personalizado, hagan clic en la rueda de color y luego ingresen su código de color RGB o usen los deslizadores para elegir su color.

* La **barra vertical** les permite seleccionar el tono.
* El **cuadro** les permite ajustar la saturación y el brillo de su color.
* La **barra horizontal** les permite seleccionar la transparencia de su color.

***

## Configuración del bloque

Para ajustar la apariencia del bloque, configuren la configuración de su bloque personalizando:

* Llamado a la acción
* [Fondo](/es/articles/website/pages/customizing-block-background-settings)
* [Diseño de escritorio y móvil](/es/articles/website/pages/customizing-block-layout-settings)
* [Animaciones](/es/articles/website/pages/customizing-block-animations)
* [Revelación por tiempo](/es/articles/website/pages/customizing-time-reveal-settings)

### Llamado a la acción

Agreguen y personalicen la acción y apariencia de un botón de llamado a la acción.

El botón de llamado a la acción (CTA) se puede usar para:

* Llevar a un visitante a una landing page personalizada
* Generar una venta llevando al Checkout
* Animar a su audiencia a descargar un archivo
* Llevar a cualquier página del sitio web con un enlace URL
* Abrir un popup de suscripción en dos pasos
* Funcionar como un enlace de anclaje que lleva a una sección de la página

Aprendan más sobre cómo personalizar la [configuración del bloque de llamado a la acción](/es/articles/website/pages/how-to-add-a-call-to-action-block-to-your-website-page-and-landing-page#customizing-your-call-to-action-block).