Cómo crear una tabla de precios de WordPress con Toggle

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 WordPress con alternar. Vamos a empezar.

Cree bonitas mesas
Con el editor de bloques

Cómo crear una tabla de precios de WordPress con Toggle

Antes de sumergirte en el tutorial, debes tener TableBerg y Bloques definitivos instalados en su sitio. Con TableBerg, puede crear una tabla de precios, y Ultimate Blocks le permitirá añadir la función de alternar a la tabla.

Una vez que tengas los plugins instalados en tu sitio, entra en el proceso de tutorial.

Paso 01: Añadir el bloque de contenido con pestañas

Una vez instalado y activado el plugin Ultimate Blocks, obtendrá el icono Contenido por pestañas en la biblioteca de bloques. Busca y añade el bloque al editor.

Añadir el bloque de contenido en fichas

El bloque Contenido por pestañas se añadirá al editor al instante.

Bloque con pestañas añadido al editor

Paso 02: Añadir el bloque TableBerg dentro del bloque Tabbed Content

El bloque Contenido por pestañas le permitirá añadir otros bloques dentro de él. Haga clic en el botón Botón más (+). Busca el bloque TableBerg y añádelo.

Paso 03: Crear una tabla de precios en la primera pestaña

Defina el número de filas y columnas de su tabla. Seleccionamos 3*3 porque queremos crear una tabla de tres columnas.

Defina filas y columnas para su tabla

Puede ver que el diseño de la tabla está listo.

La tabla Layout está lista

Paso 04: Añadir contenido a la tabla

El bloque TableBerg le permite añadir varios tipos de contenido a sus celdas. Puede añadir textos, listas, imágenes, botones CTA y mucho más.

# Añadir títulos de columnas

En primer lugar, tenemos que añadir títulos a las columnas de la tabla. Vamos a crear una tabla de precios para un plugin imaginario aquí. Por lo tanto, nuestro contenido será en consecuencia.

Puede ver que hemos añadido tres títulos, los hemos alineado en el centro y hemos aumentado su tamaño.

# Añadir planes de precios

A continuación, añadimos los planes de precios a las columnas. Los hemos coloreado utilizando la opción Resaltar de la barra de herramientas de Gutenberg.

Añadir planes de precios

# Lista Características del producto

Ahora es el momento de enumerar las características de cada plan. TableBerg le permite añadir el Bloque de lista a la tabla. Busca y añade el bloque Lista a la tabla.

Puede ver que hemos enumerado todas las características de cada plan en todas las columnas.

Mostrar las características del producto

# Añadir botones CTA

Por último, comience a añadir botones CTA a las columnas utilizando la función Bloque de botones.

Añadir botones CTA

Los botones CTA están listos en la tabla de precios.

Botones CTA en la tabla de precios

Así, su mesa está lista. Puedes personalizarla y darle el estilo que quieras. Espero que puedas hacerlo solo.

Paso 05: Crear una nueva tabla en otra pestaña

Cree una nueva pestaña pulsando el botón icono más (+). No olvides cambiar el nombre de las pestañas según tus preferencias.

Crear una nueva pestaña con el bloque Contenido en pestañas

Cree una nueva tabla en esta pestaña de la misma forma que hemos descrito anteriormente. Hemos alineado centralmente los títulos de las pestañas para una mejor visualización.

Crear una nueva tabla en una nueva pestaña

Su tabla de precios con la función de alternar está lista. Vista previa de la tabla en una nueva pestaña para ver si todo funciona bien.

Conclusión

La creación de tablas de precios con la función de alternancia es ahora una inteligencia seguida por casi todos los sitios web de clase estándar. La mayoría de los sitios web las crean utilizando page builders y tipos de soluciones similares, que a menudo hacen que la página sea pesada.

Sin embargo, como TableBerg y Ultimate Blocks son dos plugins basados en bloques, nunca harán que las páginas de precios sean pesadas. Incluso puede probarlos en sus sitios de ensayo o de acogida local. Disfrutará de una velocidad rápida y ligera.

Háganos llegar su opinión en el cuadro de comentarios que encontrará más abajo. Además, no dudes en preguntarnos si tienes alguna duda.



El equipo de Tableberg

La oferta anticipada ya está disponible
Este es el texto por defecto para la barra de notificaciones