Una tarjeta de precio presenta una oferta mostrando lo que incluye su producto y ofreciendo a sus visitantes un botón de llamado a la acción para comprar. Agreguen una a una página creada con Website Builder o Kajabi Pages, o coloquen varias en una misma sección para comparar planes de precio y paquetes.
Esta guía también explica cómo agregar un precio tachado para promocionar un descuento y cómo agregar opciones de precio a páginas creadas con la plantilla heredada de Premier.
Nota: esta guía cubre el editor de páginas más reciente de Website Builder y Kajabi Pages. Si su página usa una plantilla heredada de Premier, vayan a Agregar opciones de precio a una página con Premier.
Agregar un bloque de tarjeta de precio
Desde el Dashboard, abran la pestaña Website.
Seleccionen Website Pages o Landing Pages.
Abran el editor de páginas de su página. Aprendan cómo abrir el editor de páginas.
Hagan clic en la sección que quieren editar o creen una nueva sección.
En la barra lateral, hagan clic en Add block.
Seleccionen Pricing Card en la lista. El nuevo bloque de tarjeta de precio aparece al final de la sección.
Hagan clic en Save para guardar sus cambios.
Cómo personalizar su bloque de tarjeta de precio
En un bloque de tarjeta de precio, personalicen:
Imagen
Atributo alt de la imagen
Nombre
Precio
Leyenda del precio
Texto
Ícono de lista
Configuración del bloque de tarjeta de precio
Imagen
Elijan la imagen que aparece en la tarjeta de precio y si se muestra o no.
Atributo alt de la imagen
Agreguen un atributo alt a la imagen para SEO y activen o desactiven si la imagen se muestra.
Nombre
Configuren el texto y el color del nombre de su opción de precio
Precio
Configuren el texto y el color que se usan para mostrar el precio de la opción de precio.
Leyenda del precio
Configuren el texto y el color de la leyenda justo debajo del precio.
Texto
Agreguen el mensaje que enumera las funciones incluidas con su oferta.
Consejo: Usen el editor de texto para agregar contenido de texto a su bloque de tarjeta de precio.
Ícono de lista y color del ícono
Cambien el ícono que marca cada función de la lista por uno de estos:
Viñeta
Check
Signo más
Estrella
Luego elijan un color para el ícono. Hagan clic en List icon color para abrir la paleta de colores de su sitio. Para usar un color personalizado, hagan clic en la rueda de color y luego ingresen su código de color RGB o usen los deslizadores:
Usen la barra vertical para seleccionar el tono.
Usen el cuadro para ajustar la saturación y el brillo.
Usen la barra horizontal para configurar la transparencia.
Configurar el bloque de tarjeta de precio
Para ajustar la apariencia del bloque, configuren sus ajustes de bloque:
Llamado a la acción
Agregar un llamado a la acción a una tarjeta de precio
Agreguen y personalicen la acción y la apariencia de un botón de llamado a la acción (CTA). Usen el botón de CTA para:
Llevar a un visitante a una landing page personalizada
Generar una venta llevando a una página de 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 a una sección de la página
Agregar un precio tachado a una tarjeta de precio
Un precio tachado anuncia una tarifa más baja o un descuento por tiempo limitado. Atrae la atención hacia la oferta y muestra a sus visitantes cuánto ahorran.
Primero, agreguen un bloque de tarjeta de precio a su página. Luego agreguen el código de tachado:
Hagan clic en la Pricing Card que crearon.
En el campo Price, ingresen este código:
<strike>ORIGINAL PRICE HERE</strike>Reemplacen
ORIGINAL PRICE HEREcon el precio que quieren tachar. Usen el precio original de la oferta, no el precio con descuento.Después de la etiqueta
</strike>, ingresen el precio con descuento para mostrarlo en la tarjeta.Hagan clic en Save para guardar sus cambios.
Agregar opciones de precio a una página con Premier
Si su página usa la plantilla heredada de Premier, agreguen una sección Pricing Options en lugar de un bloque de tarjeta de precio. La sección muestra sus productos, servicios y opciones de precio en un solo lugar.
Nota: las plantillas heredadas de Premier pueden estar desactualizadas. Si su página usa Kajabi Pages, sigan los pasos de Agregar un bloque de tarjeta de precio.
Agregar una sección de opciones de precio en Premier
Desde el Dashboard, abran la pestaña Website.
Seleccionen Website Pages o Landing Pages.
Seleccionen la página que quieren personalizar o creen una nueva página.
Hagan clic en Customize para abrir el editor de plantillas.
En la barra lateral, hagan clic en + Add Section.
Seleccionen Pricing Options.
Hagan clic en Add. La nueva sección aparece al final de la página.
Hagan clic en Save para guardar sus cambios.
Personalizar la sección de opciones de precio en Premier
Título y subtítulo: personalicen el mensaje que se muestra arriba de sus opciones de precio.
Apariencia de la sección: cambien el color de fondo y de texto, seleccionen la alineación del texto y cambien el espaciado de la sección.
Agregar opción de precio: desplácense hasta el final del editor de la barra lateral y seleccionen Add Pricing Option para agregar más tarjetas de opciones de precio.
Personalizar cada opción de precio en Premier
Editen lo siguiente en cada bloque de opción de precio:
Título
Precio
Frecuencia
Contenido de texto (normalmente las funciones incluidas con esa opción de precio)
Destacar la opción de precio más popular en Premier
Seleccionen su opción de precio Most Popular para que se destaque ante sus clientes.
Agregar un llamado a la acción a una opción de precio en Premier
Incluyan un botón de llamado a la acción en cada opción de precio para que sus clientes puedan:
Go to a Landing Page
Go to a Checkout Page
Download a File
Go to a URL
Open two step optin popup
Go to a section on the page
Usen el llamado a la acción para conectar una opción de precio a una página de ventas, una página de checkout de terceros u otro destino.
Nota: cuando usen la acción Go to a URL, ingresen una URL completa (por ejemplo, https://kajabi.com/).
Para abrir la página de checkout de la oferta en una nueva ventana o pestaña, seleccionen Open In New Window.
Personalicen la apariencia del llamado a la acción con:
CTA Style
CTA Size
Button Width
Button Color
Button Text Color
Mostrar el llamado a la acción de una opción de precio con Time Reveal en Premier
Time Reveal muestra el botón de llamado a la acción (CTA) una cantidad de tiempo determinada (Offset) después de que ocurre un evento (Event). Para configurarlo:
Seleccionen un evento (Event).
Ingresen el valor de Offset.
Seleccionen el Offset Time Period: segundos, minutos, horas o días.
Configurar los colores de las opciones de precio en Premier
Seleccionen colores para cambiar la apariencia general del bloque:
Background Color
Text Color
Accent Color
Popular Color
Cada color reemplaza el color predeterminado definido por el color principal (Primary Color) de su esquema de colores de la página.









