Crear una tabla de precios es imprescindible si quiere vender sus productos y servicios a través de su sitio web. Pero para mostrar varios planes de precios que los clientes puedan comparar fácilmente sin salir de la página, debes añadir la función de alternar a la tabla.
La función de alternancia permite a los usuarios navegar o cambiar entre diferentes conjuntos de opciones de precios, creando una interfaz interactiva. Por ejemplo, los usuarios pueden alternar entre planes de suscripción mensuales, anuales y vitalicios.
En esta entrada del blog, le mostraremos una guía paso a paso sobre cómo crear una tabla de precios de WordPress con una palanca utilizando Tableberg. Vamos a empezar.
Paso 1: Instalar y activar Tableberg
En primer lugar, instale y active el Tableberg en su sitio de WordPress. Si aún no lo has instalado, obtén el plugin aquí.
Una vez instalado y activado, estará listo para empezar a crear su tabla de precios.
Nota: Aunque el Tableberg tiene un versión gratuitala función de alternar sólo está disponible en la versión Pro.
Paso 2: Añadir el Toggle para el bloque Tableberg
Tableberg Pro incluye un potente Conmutador para Tableberg que permite organizar tablas en pestañas sin esfuerzo.
Para añadir este bloque:
- Abra el editor de WordPress y haga clic en el botón + botón para añadir un nuevo bloque.
- Buscar Conmutador para Tableberg y selecciónelo.
- El bloque de alternancia se añadirá a su editor.
Paso 3: Crear una tabla de precios en la primera pestaña
Dentro de la Conmutador para Tableberg puede crear una tabla desde cero o elegir una tabla pre-construida. Por el bien de este tutorial, estamos eligiendo un pre-construido.
- Dentro de la Conmutador para Tableberg bloque, puede
- Haga clic en el botón + botón dentro de la pestaña y busque Tableberg bloque.
- Defina el número de filas y columnas de su tabla de precios (por ejemplo, 3×3 para tres planes).
- El diseño de la tabla se generará al instante.
Paso 4: Añadir/editar contenido a la tabla
Ahora, es el momento de añadir o editar el contenido de su tabla de precios.
# Añadir títulos de columnas
- Haga clic en la primera fila e introduzca los nombres de los planes de precios (por ejemplo, Básico, Estándar, Premium).
- Alinéelos en el centro y aumente el tamaño de letra para que sean más visibles.
# Añadir planes de precios
- En la segunda fila, introduzca el precio de cada plan.
- Utiliza el Opción de resaltado para diferenciar los precios.
# Lista Características del producto
- Cada columna debe incluir una lista de características del plan correspondiente.
- Tableberg le permite insertar un Bloque de lista directamente dentro de la mesa.
# Añadir botones CTA
- Utiliza el Bloque de botones dentro de Tableberg para crear botones de llamada a la acción (por ejemplo, "Comprar ahora" o "Empezar").
- Personalice el texto, el color y el estilo del botón.
Paso 5: Añadir otra tabla de precios a una nueva pestaña
Haga clic en el botón Ficha 2 en el bloque Alternar para Tableberg para añadir una nueva tabla en otra pestaña. A continuación, repite los mismos pasos anteriores para crear otra tabla de precios para la nueva pestaña.
Una vez que haya completado estos pasos, su tabla de precios con función de alternancia estará lista. Previsualice su tabla para comprobar que todo funciona correctamente.
Paso 6: Personalizar el Toggle para el bloque Tableberg
Para que su tabla de precios resulte más atractiva visualmente y esté en consonancia con su marca, puede personalizar los botones Conmutador para Tableberg bloque:
Cambiar el nombre de los Toggles: Haga clic en cada pestaña y cambie su etiqueta para que coincida con sus planes de precios, como Mensual, Anual o Vitalicio.
Cambiar la alineación de las pestañas: En el panel de configuración de bloques, elija alinear las pestañas a la izquierda, al centro o a la derecha según sus preferencias de diseño.
Estilizar las pestañas: En la pestaña Estilos, personalice el color de fondo, el color del texto y el borde de los toggles para que sean visualmente coherentes con el diseño de su sitio.
Estas sencillas personalizaciones pueden mejorar enormemente la experiencia del usuario y garantizar que la tabla de precios se integre a la perfección con el aspecto general del sitio web.
Conclusión
Crear tablas de precios con una función de alternancia es esencial para una experiencia de usuario fluida. Con Tableberg Pro's Toggle para Tableberg ahora puede crear tablas de precios interactivas directamente en WordPress sin necesidad de plugins adicionales.
Pruébalo y danos tu opinión en los comentarios.
