Ir al contenido principal

Agregar tarjetas de precio a una página

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

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

  1. Desde el Dashboard, abran la pestaña Website.

  2. Seleccionen Website Pages o Landing Pages.

  3. Abran el editor de páginas de su página. Aprendan cómo abrir el editor de páginas.

  4. Hagan clic en la sección que quieren editar o creen una nueva sección.

  5. En la barra lateral, hagan clic en Add block.

  6. Seleccionen Pricing Card en la lista. El nuevo bloque de tarjeta de precio aparece al final de la sección.

  7. 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.

Kajabi_-__admin_themes_2159353685_settings_edit.jpg

Atributo alt de la imagen

Agreguen un atributo alt a la imagen para SEO y activen o desactiven si la imagen se muestra.

Window_and_Kajabi_-__admin_themes_2159353685_settings_edit.jpg

Nombre

Configuren el texto y el color del nombre de su opción de precio

Window_and_Kajabi_-__admin_themes_2159353685_settings_edit.jpg

Precio

Configuren el texto y el color que se usan para mostrar el precio de la opción de precio.

Window_and_Kajabi_-__admin_themes_2159353685_settings_edit.jpg

Leyenda del precio

Configuren el texto y el color de la leyenda justo debajo del precio.

Kajabi_-__admin_themes_2159353685_settings_edit.jpg

Texto

Agreguen el mensaje que enumera las funciones incluidas con su oferta.

Kajabi_-__admin_themes_2159353685_settings_edit.jpg

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:

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.

Offer_Striekthrough.png

Primero, agreguen un bloque de tarjeta de precio a su página. Luego agreguen el código de tachado:

  1. Hagan clic en la Pricing Card que crearon.

  2. En el campo Price, ingresen este código: <strike>ORIGINAL PRICE HERE</strike>

  3. Reemplacen ORIGINAL PRICE HERE con el precio que quieren tachar. Usen el precio original de la oferta, no el precio con descuento.

  4. Después de la etiqueta </strike>, ingresen el precio con descuento para mostrarlo en la tarjeta.

  5. 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

  1. Desde el Dashboard, abran la pestaña Website.

  2. Seleccionen Website Pages o Landing Pages.

  3. Seleccionen la página que quieren personalizar o creen una nueva página.

  4. Hagan clic en Customize para abrir el editor de plantillas.

  5. En la barra lateral, hagan clic en + Add Section.

  6. Seleccionen Pricing Options.

  7. Hagan clic en Add. La nueva sección aparece al final de la página.

  8. 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.

632D30F0-6693-4733-AE37-21D2EC61969A.png

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:

  1. Seleccionen un evento (Event).

  2. Ingresen el valor de Offset.

  3. 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.

¿Ha quedado contestada tu pregunta?