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.
El bloque Contenido por pestañas se añadirá al editor al instante.
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.
Puede ver que el diseño de la tabla está listo.
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.
# 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.
# Añadir botones CTA
Por último, comience a añadir botones CTA a las columnas utilizando la función Bloque de botones.
Los botones CTA están listos 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.
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.
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.
