Los compradores de hoy en día evalúan las opciones en cuestión de segundos: algunos examinan los precios, otros comparan las características y muchos debaten entre planes mensuales o anuales. En este entorno de toma de decisiones en fracciones de segundo, el diseño de su tabla de precios se convierte en el factor decisivo para las conversiones.
Si tiene un negocio basado en servicios o suscripciones, su tabla de precios tiene que hacer algo más que enumerar opciones para convertir a los visitantes en clientes de pago. Debe guiar la atención, facilitar las comparaciones y hacer que el mejor plan parezca la opción obvia.
Una tabla de precios bien diseñada con un conmutador mensual/anual convierte una tabla de precios estándar en algo mucho más dinámico y centrado en el usuario. No se limita a mostrar opciones, sino que guía activamente la mirada, enfatiza el ahorro y elimina la fricción de la comparación.
En esta guía, aprenderá a crear una alternancia limpia de precios mensuales y anuales en WordPress utilizando un formato de tabla que se ve muy bien en cualquier dispositivo.
Precios mensuales/anuales
Básico |
Pro |
Enterprise |
|---|---|---|
Para particulares |
Para nuevas empresas |
Para las grandes empresas |
$99/mes |
$199/mes |
$299/mes |
|
|
|
Básico |
Pro |
Enterprise |
|---|---|---|
Para particulares |
Para nuevas empresas |
Para las grandes empresas |
$990/año |
$1990/año |
$2990/año |
|
|
|
Cómo añadir un Toggle de Precios Mensuales/Anuales en WordPress
Ahora que ya sabes cómo un conmutador de precios ayuda a simplificar las comparaciones y a resaltar el valor, vamos a ver los pasos para crear uno utilizando el plugin Tableberg.
Paso 1: Instalar y activar Tableberg
Dirígete a tu panel de WordPress, ve a Plugins → Añadir nuevo, busca Tableberg y haz clic en Instalar ahora, seguido de Activar. Una vez activado, encontrarás dos nuevos bloques en el editor: Tableberg y Toggle for Tableberg.
Paso 2: Añadir el Toggle para el bloque Tableberg
Abre el post o página donde quieras colocar tu tabla de precios. Haz clic en el icono más, busca Toggle para Tableberg e inserta el bloque. Empieza con tres pestañas por defecto. Pasa el ratón por encima de cualquier pestaña para eliminarla, o haz clic en el signo más para añadir más. Para esta configuración, mantén sólo dos pestañas: una para "Mensual" y otra para "Anual".
Paso 3: Configurar las pestañas
Con el bloque seleccionado, utilice el panel de configuración de la derecha para ajustar las opciones Generales y de Estilo.
En la pestaña General, cambie el nombre de cada pestaña, elija cuál está activa por defecto y alinee las pestañas según sea necesario.
En Estilo, puedes ajustar los colores de las pestañas activas e inactivas, establecer el espaciado bajo el conmutador y ajustar el radio del borde para redondear las esquinas si quieres un aspecto más suave.
Paso 4: Añadir tablas dentro de cada pestaña
Haga clic en la primera pestaña y cree la tabla. Esto contendrá su tabla de precios mensual. Repita lo mismo en la segunda pestaña y añada su versión anual. La estructura de ambas tablas debe seguir siendo la misma, cambiando únicamente el precio y las etiquetas relacionadas.
Paso 5: Personalizar las tablas
Añada nombres de planes, etiquetas de audiencia, precios, características y botones de llamada a la acción dentro de cada columna. Utilice bloques de párrafos, listas y bloques de botones dentro de las celdas de la tabla.
A continuación, abre la configuración general para establecer el encabezado y el pie de página, y ajusta funciones como el encabezado adhesivo, la clasificación y la búsqueda si es necesario. Por último, utiliza la pestaña de estilo para ajustar el espaciado, los colores de fondo, los bordes y la alineación para conseguir un aspecto limpio y coherente en ambas tablas.
Paso 6: Guardar, previsualizar y publicar
No olvides guardar primero tu trabajo. A continuación, utiliza la opción de vista previa para comprobar cómo se ve tu conmutación tanto en escritorio como en móvil. Asegúrate de que el cambio de pestaña es suave y de que cada versión de la tabla es clara. Una vez que estés satisfecho, pulsa Publicar.
Reflexiones finales
Un conmutador de precios mensual/anual no es sólo un truco de diseño. Es una forma práctica de presentar opciones de facturación flexibles sin sobrecargar el diseño. Con Tableberg, no necesita plugins adicionales ni código personalizado para hacerlo bien. Puede crear una tabla de precios responsiva y bien estructurada que ayude a los visitantes a comparar planes con claridad y elegir el que más les convenga.
Tómese el tiempo necesario para configurar su alternancia con cuidado, y terminará con una página más limpia y una experiencia de toma de decisiones más fluida para sus usuarios.
