Diseñar una sección de compra efectiva es el paso definitivo para convertir visitantes en compradores. Cuando ofreces dos versiones de un mismo producto con precios distintos y un peso visual estratégico, guías la atención del usuario hacia la opción que más te interesa vender. A continuación se explica paso a paso cómo construir esta sección usando contenedores, listas con estilos personalizados y botones enlazados a tu plataforma de venta.
¿Cómo se estructura un contenedor a dos columnas para mostrar precios?
El punto de partida es crear un nuevo contenedor desde la opción "añadir elemento" [0:25]. Por defecto, este contenedor hereda los estilos de la sección anterior, así que lo primero es asignarle un estilo propio. En este caso, se utiliza un estilo previamente creado llamado "dos precios" [0:46].
Para que funcione correctamente, hay que cambiar el tipo de contenedor a columnas y dejarlo con dos columnas. Cada columna representará una versión del producto:
- La columna principal tendrá mayor peso visual y mostrará el producto a un precio más accesible.
- La columna alternativa presentará una versión premium a un precio superior, pero con menos protagonismo visual.
Esta técnica de jerarquía visual es clave para dirigir la mirada del usuario hacia la opción que prefieres que elija [5:41].
¿Qué elementos necesita cada columna de precio?
Dentro de cada columna se colocan cuatro elementos [1:28]:
- Texto descriptivo: un título breve del producto con estilo prehead.
- Texto de precio: la cifra destacada con un estilo dedicado.
- Elemento de lista: las características o beneficios incluidos.
- Botón de compra: el llamado a la acción que enlaza directamente al producto.
Para la primera columna, el texto descriptivo dice "los mejores libros" y el precio se fija en 5 dólares [2:15]. El botón lleva el texto "descarga inmediata" y su URL apunta directamente al producto en Gumroad, copiada desde la pestaña share de esa plataforma [3:30].
¿Cómo configurar el elemento de lista con bullets personalizados?
El elemento de lista tiene tres pestañas dentro de su configuración de apariencia [2:40]:
- Pestaña de lista: permite elegir entre estilo bullet o estilo numérico. El estilo bullet ofrece distintas gráficas: círculos, cuadrados o checks.
- Gráfica de check: al seleccionar esta opción, cada ítem aparece acompañado de un icono de verificación cuyo color se puede personalizar para mantener coherencia con la paleta del sitio [3:05].
- Pestaña de texto: controla la tipografía y el estilo de cada ítem individual de la lista.
Un detalle importante es configurar el espaciado simple para evitar que se generen márgenes innecesarios entre los ítems [3:20].
¿Cómo crear la columna alternativa con menos peso visual?
Para la segunda columna se duplican los elementos de la primera [4:18]. La diferencia radica en los estilos aplicados:
- El texto descriptivo pasa de prehead a prehead alt, que cambia el color a uno menos llamativo [4:50].
- El precio cambia a precio alternativo, también con un color más discreto, y la cifra sube a 10 dólares [5:05].
- Los bullets de la lista cambian de morado a negro mediante el estilo alternativo de lista [5:50].
- El botón adopta un estilo alternativo que reemplaza el fondo sólido por un contorno o línea, eliminando el color de fondo [6:00].
Esta versión premium incluye un valor adicional que justifica el precio mayor: acceso a una comunidad exclusiva de lectores [5:20]. Al tener dos características en lugar de tres, se añade texto adicional como "invitación a comunidad exclusiva de lectores ávidos de conocimiento" para equilibrar visualmente ambas columnas [6:40].
¿Por qué funciona la estrategia de dos precios con jerarquía visual?
Cuando ambas columnas están completas, el resultado es una sección donde el ojo se dirige automáticamente a la columna principal gracias a su mayor peso visual: colores más intensos, botón sólido y tipografía destacada. La columna alternativa existe como opción complementaria, pero no compite por la atención.
Esta técnica de diseño con intención permite ofrecer opciones sin generar parálisis de decisión. El usuario percibe claramente cuál es la opción recomendada mientras mantiene la libertad de elegir la versión premium si lo desea.
Ahora es tu turno de crear tu propia sección de compra a dos columnas. Experimenta con los estilos alternativos y comparte cómo has equilibrado el peso visual entre ambas opciones.
