Cómo Añadir una Tabla de Precios a Carrd.co

Carrd no incluye un elemento de tabla de precios de serie. Si quieres mostrar planes de suscripción con un toggle mensual/anual, necesitas incrustar código personalizado o usar un widget de terceros.

Este tutorial cubre el plugin de tabla de precios de CarrdMe (5 $), que te da una tabla de precios responsive de tres columnas con un toggle de ciclo de facturación. También menciono dos alternativas gratuitas al final por si quieres comparar opciones.

Necesitarás un plan Pro Standard (19 $/año) o superior. Es el plan de Carrd más bajo que soporta el elemento Embed para código personalizado.

¿Qué es Carrd.co?

Carrd.co es una plataforma para construir sitios web responsive de una sola página. Es popular para perfiles personales, landing pages y sitios de negocios sencillos por su bajo coste y facilidad de uso. Los planes empiezan gratis; el plan Pro Standard a 19 $/año desbloquea dominios personalizados, formularios y embeds de código.

Más tutoriales de Carrd:

• Añadir un sticky header a Carrd
• Añadir aviso de cookies a Carrd
• Reseña de Carrd.co
• Cómo añadir FAQs tipo acordeón a Carrd.co
• Cómo añadir un dominio personalizado a Carrd.co
• Navbar responsive para móvil en Carrd.co
• Botón volver arriba en Carrd

La lista completa de plugins, temas y tutoriales de Carrd está en carrdme.com.

Cómo añadir la tabla de precios a Carrd

1. Descarga el código de la tabla de precios

Ve a la tabla de precios de CarrdMe y descarga el plugin. Cuesta 5 $ e incluye un único bloque de código HTML/CSS/JS. Puedes usarlo en sitios Carrd ilimitados.

2. Personaliza los colores

El código usa custom properties de CSS para el color de acento principal. Busca este bloque cerca del inicio de la sección <style>:

:root {
  --priceb-col-gr: linear-gradient(
    135deg,
    rgba(163, 168, 240, 1) 0%,
    rgba(105, 111, 221, 1) 100%
  );
}

Este degradado se aplica a los botones, al interruptor del toggle y al resaltado de la tarjeta destacada. Reemplaza los valores de color para que encajen con tu marca. Puedes usar una herramienta como CSS Gradient para generar un degradado nuevo.

3. Personaliza la fuente

La fuente por defecto se hereda de la página. Para usar una fuente específica, cambia esta línea en la sección <style>:

font-family: inherit;

Reemplaza inherit con tu stack de fuentes preferido, p. ej. 'Inter', sans-serif.

4. Edita los nombres de los planes y los precios

Necesitas actualizar dos lugares: el HTML visible y la lógica del toggle en JavaScript.

HTML, los valores de precio visibles:

<li id="basic" class="price bottom-bar">&dollar;199.99</li>

Esto muestra el precio por defecto (anual), porque el toggle empieza en “Annually”. Mantenlo igual al valor annual del JavaScript de abajo, que intercambia estos valores cuando el visitante alterna entre mensual y anual.

JavaScript, el objeto de datos de precios:

const prices = {
  basic: { monthly: "$19.99", annual: "$199.99" },
  professional: { monthly: "$24.99", annual: "$249.99" },
  master: { monthly: "$39.99", annual: "$399.99" },
};

Cambia los nombres de los planes (si los renombras) y pon tus precios reales. Las claves (basic, professional, master) deben coincidir con los atributos id de los elementos <li> correspondientes en el HTML.

5. Edita las listas de características

Cada tarjeta de plan tiene una lista de características. Reemplaza los ítems <li> por los tuyos:

<li class="bottom-bar">1 TB Storage</li>
<li class="bottom-bar">5 Users Allowed</li>
<li class="bottom-bar">Send up to 10 GB</li>
<li class="bottom-bar">Unlimited</li>

Añade o quita ítems según necesites. La clase bottom-bar añade un borde entre filas, así que mantenla en cada ítem para un estilo consistente.

6. Actualiza los botones de llamada a la acción

Cada tarjeta tiene un botón que enlaza a tu página de checkout o registro. Reemplaza la URL y el texto de la etiqueta:

<li>
  <a href="https://your-checkout-url.com"><div class="btn">Get Started</div></a>
</li>

7. Añade el embed a Carrd

En el editor de Carrd:

1. Añade un elemento Container en la sección donde quieres la tabla de precios.
2. Dentro de ese container, añade un elemento Embed.
3. Pon Type a Code y Style a Inline, para que la tabla se renderice donde está situado el Embed.
4. Pega el código completo (HTML, CSS y JavaScript) en el campo Code.
5. Ajusta la alineación y el espaciado del container según necesites.

8. Publica y prueba

Guarda tu sitio Carrd y publica. La tabla de precios solo se renderiza en el sitio en vivo. El editor de Carrd no ejecuta JavaScript incrustado.

Comprueba estas cosas:

• ¿El toggle mensual/anual cambia los precios correctamente?
• ¿Las tres columnas se muestran con el ancho correcto?
• En móvil, ¿la tabla se apila verticalmente y sigue siendo legible?
• ¿Los botones enlazan a las URL correctas?

Solución de problemas

La tabla de precios no aparece: Asegúrate de estar en Pro Standard o superior. Los planes gratis y Pro Lite no soportan el elemento Embed. Confirma también que el Style del Embed está puesto a Inline. Con Hidden, Carrd mueve el código a los bordes del head o body de la página en vez de a tu container, así que la tabla acaba fuera de tu layout o no se ve en absoluto.

El toggle no cambia los precios: Comprueba que las claves del objeto JavaScript (basic, professional, master) coinciden exactamente con los atributos id de los elementos <li> del HTML. Una errata en cualquiera de los dos lugares rompe el toggle. El input del toggle también usa el genérico id="checkbox" y el script declara const checkbox y const prices, así que si otro embed en la misma página usa el mismo ID o los mismos nombres de variable, renómbralos en este embed (también el for="checkbox" de la etiqueta del toggle).

La tabla se ve rota en móvil: El código por defecto es responsive, pero si tu container de Carrd es demasiado estrecho, las columnas pueden solaparse. Prueba a ensanchar el container o añade un override con media query para pantallas más pequeñas.

Los colores no se actualizan: Asegúrate de estar editando las variables CSS en :root, no en otro lugar del bloque de estilos. Las DevTools del navegador (F12) pueden ayudarte a verificar qué estilos se están aplicando realmente.

Alternativas gratuitas

Si el plugin de CarrdMe de 5 $ no es lo que necesitas, hay dos opciones gratuitas:

Jason’s Plugins for Carrd: plugins.carrd.co ofrece una tabla de precios gratuita con efectos hover. Descárgala como plantilla, ábrela en Carrd y copia el código del elemento Embed en tu propio sitio. Requiere Pro Standard.

Common Ninja: commoninja.com/widgets/pricing-tables/carrd te da un editor visual para construir una tabla de precios y luego genera un código de embed que pegas en Carrd. El nivel gratuito incluye branding de Common Ninja; los planes de pago empiezan en unos pocos dólares al mes para quitarlo. Esta opción funciona bien si quieres un editor drag-and-drop en vez de editar código.

El plugin de CarrdMe usado en este tutorial es un buen punto medio: es barato (5 $, pago único), no tiene branding, te da acceso completo al código y el toggle mensual/anual viene integrado.