Cómo crear una tabla de precios de Elementor para planes de suscripción

¿Está buscando una manera de crear una tabla de precios de Elementor para su sitio web de membresía?

Si desea crear una tabla de precios elegante para su sitio web de membresía, Elementor es una excelente opción. Con los consejos de esta publicación, podrá controlar completamente el diseño y el contenido de su tabla de precios para crear algo como esto:

Si ha creado su sitio web de membresía con suscripciones de miembros pagas, las suscripciones de miembros pagas también ofrecen una integración dedicada con el widget Elementor de la tabla de precios que está disponible en Elementor Pro.

O bien, también puede usar complementos de tabla de precios de Elementor de terceros. Si bien ese no es el enfoque principal de esta publicación, también le mostraremos rápidamente cómo configurarlo si no tiene acceso a Elementor Pro.

¿Listo para comenzar?

En esta guía, aprenderá cómo crear una tabla de precios de Elementor e integrarla con sus planes de membresía para crear un flujo de compra/registro fluido.

Cómo crear una tabla de precios de Elementor para su sitio web de membresía

Sin más introducción, entremos directamente en nuestro tutorial paso a paso sobre cómo usar Elementor para crear una tabla de precios para un sitio web de membresía.

Para crear una tabla de precios de Elementor para su sitio web de membresía, deberá asegurarse de haber instalado algunos complementos:

1. Elementor : la versión gratuita principal en WordPress.org.
2. Elementor Pro : si no tiene acceso a Elementor Pro, compartiremos un método gratuito alternativo en la siguiente sección. Sin embargo, nos centramos principalmente en el widget Elementor de la tabla de precios en Elementor Pro porque las suscripciones de miembros pagadas ofrecen una integración dedicada con la función de contenido dinámico de Elementor Pro para vincular fácilmente sus planes de suscripción.
3. Suscripciones pagas de miembros : el método en esta publicación funciona tanto con la versión gratuita en WordPress.org como con la versión premium.

1. Configure sus planes de suscripción (si aún no lo ha hecho)

Antes de configurar su tabla de precios de Elementor, primero querrá asegurarse de haber configurado Suscripciones de miembros pagas y configurado sus planes de suscripción. Es decir, los planes que desea mostrar en su tabla de precios.

Cuando configure la tabla de precios, podrá crear una columna para cada plan que ofrezca, incluidos los planes gratuitos y de pago.

Si ya ha creado sus planes, no dude en pasar a la siguiente sección.

Si aún no tiene ningún plan de suscripción, primero querrá instalar el complemento Suscripciones de miembros pagas ( puede usar la versión gratuita o la versión premium ) y completar el asistente de configuración breve.

Luego, puede crear su primer plan de suscripción yendo a Suscripciones pagas de miembros → Planes de suscripción → Agregar nuevo .

Asigne un nombre a su plan de membresía y luego complete los detalles de precios.

Repita según sea necesario para crear tantos planes como desee mostrar en su tabla de precios. También puede vincular planes en una relación jerárquica para que los usuarios puedan actualizar o degradar fácilmente en una ruta definida.

Mantenemos esto breve porque estamos enfocados en crear tablas de precios en esta publicación. Pero si desea instrucciones más detalladas para configurar su sitio de membresía, puede consultar nuestra guía completa sobre cómo crear un sitio de membresía de Elementor.

2. Agregue el widget de tabla de precios en Elementor

A continuación, abra el editor de Elementor para la publicación o página donde desea agregar su tabla de precios.

Luego, agregue el widget Elementor de tabla de precios donde desea que aparezca su tabla de precios. Este widget está disponible a través de Elementor Pro, por lo que aparecerá en la sección de widgets Pro .

Cuando agrega el widget de la tabla de precios, solo mostrará una columna de la tabla de precios al principio.

Para crear columnas adicionales, haga clic derecho en la columna existente:

Asegúrese de hacer clic derecho en el icono marcado en la captura de pantalla anterior. Si hace clic con el botón derecho en el widget, se creará una nueva tabla de precios debajo de la existente en lugar de al lado. Eso no es un problema, pero deberá mover manualmente ese widget al lado del otro si lo hace.

Luego, seleccione Duplicar en el menú desplegable.

Debería ver aparecer otra columna junto a la original.

Para configurar columnas adicionales en la tabla de precios, simplemente repita el mismo paso tantas veces como sea necesario.

Nota : puede que le resulte más fácil configurar el estilo de su tabla de precios antes de duplicar las columnas. Alternativamente, también puede usar la función copiar/pegar estilos para copiar estilos entre diferentes columnas de la tabla de precios.

3. Configure el diseño y el contenido de su tabla de precios

Una vez que haya agregado el widget, puede usar la barra lateral de configuración de Elementor para controlar el contenido y el diseño de su tabla de precios.

Puede agregar contenido usando las diferentes secciones en la pestaña Contenido . Por ejemplo, aquí es donde puedes controlar el título, las listas de funciones, los precios, el texto del botón CTA, etc.

Una vez que haya configurado el contenido, puede pasar a la pestaña Estilo para configurar el diseño de cada tabla de precios.

Recomendamos usar un color de acento para llamar la atención sobre su plan más popular. También puede usar la función de cinta integrada para llamar aún más la atención, como la cinta "Popular" en el plan Silver en nuestras capturas de pantalla.

También puede explorar la pestaña Avanzado para acceder a configuraciones adicionales si lo desea, pero normalmente no necesita cambiar nada allí.

4. Vincule su tabla de precios a sus planes de membresía

Una vez que esté satisfecho con el contenido y el diseño de su tabla de precios, el siguiente paso es vincular los botones de CTA de la tabla de precios a sus planes de suscripción en Suscripciones pagas de miembros.

Para hacer esto, abra la configuración de uno de sus widgets de tabla de precios y vaya a la configuración de pie de página en la pestaña Contenido .

Busque la sección Enlace y haga clic en el icono Etiquetas dinámicas junto a ella.

Debería ver aparecer un menú desplegable. Seleccione la opción URL del plan de suscripción en el encabezado Planes de suscripción .

Luego, haga clic en el icono de llave inglesa junto al texto de la URL del plan de suscripción para expandir el panel de configuración.

Use el menú desplegable Plan de suscripción para elegir el plan de membresía específico que desea vincular a esta tabla de precios.

¡Eso es todo! Repita los mismos pasos para todas las demás columnas de su tabla de precios, asegurándose de vincular cada columna al plan correcto.

5. Pruebe su tabla de precios de Elementor

Para finalizar, recomendamos probar su tabla de precios de Elementor para asegurarse de que se comporta como espera.

Por ejemplo, si un usuario hace clic en Comprar plata en el Plan Plata...

…debería llevarlos directamente a la página de registro/pago con el Plan Plata preseleccionado.

Si desea dar a los usuarios la opción de cambiar sus planes en la página de registro, puede deshabilitar la opción Plan único en la configuración de Elementor cuando se vincula al plan de suscripción.

Cuando deshabilite esta opción, las Suscripciones de miembros pagadas aún preseleccionarán el plan elegido en la página de registro. Sin embargo, los usuarios pueden cambiar manualmente el plan si lo desean.

Cómo crear una tabla de precios para Elementor con complementos

Si no tiene acceso a Elementor Pro, también puede usar una plantilla de tabla de precios de Elementor de terceros o un complemento.

Hay toneladas de complementos complementarios de Elementor de calidad, incluidos muchos que lo ayudarán a agregar una tabla de precios.

El único inconveniente es que deberá vincular manualmente sus planes de membresía en lugar de poder vincularlos dinámicamente como lo permite Elementor Pro con su función Etiquetas dinámicas .

Sin embargo, no se preocupe, todavía no es demasiado complicado configurar esto.

No profundizaremos tanto aquí, pero aquí hay una guía rápida sobre cómo puede hacer esto...

1. Instale un complemento de Elementor de tabla de precios gratuito

Si bien la versión gratuita de Elementor no tiene su propio widget de tabla de precios, puede encontrar muchos complementos gratuitos que sí lo tienen.

Aquí hay algunas opciones para comenzar ...

• Complementos de ElementsKit Elementor
• Complementos esenciales para Elementor
• Complementos Premium para Elementor
• Complementos de Royal Elementor

Puede encontrar mucho más buscando "Tabla de precios de Elementor" en WordPress.org.

Usaremos ElementsKit para este ejemplo, pero la idea básica será la misma para cualquier complemento. Entonces, si prefiere las opciones de diseño/estilo de un complemento diferente, puede usar ese en su lugar.

2. Crea tu tabla de precios

A continuación, utilice el widget Elementor de la tabla de precios en el complemento elegido para crear el contenido y el diseño de su tabla de precios.

Este es el aspecto que podría tener con el widget Tabla de precios de ElementsKit:

3. Vincular manualmente la tabla de precios a los planes de suscripción

Si no tiene Elementor Pro, no puede acceder a la función Etiquetas dinámicas para vincular automáticamente sus planes de suscripción.

Sin embargo, aún puede vincular manualmente las CTA de su tabla de precios al plan de suscripción correspondiente.

Aquí se explica cómo crear manualmente un enlace directo...

Primero, necesita encontrar el ID de su plan de suscripción:

1. Vaya a Suscripciones pagadas de miembros → Planes de suscripción y edite el plan de suscripción para el que desea encontrar el ID.
2. Mire la URL de la página de edición del plan de suscripción.
3. Busque el número después de post=[número] en la URL. Este es el ID de su plan de suscripción.

Por ejemplo, si la URL de la pantalla de edición es así:

https://yoursite.com/wp-admin/post.php?post=24481&action=edit

Entonces el ID del plan de membresía es 24481 .

Luego, agregue el ID del plan a esta estructura de URL (asegúrese de reemplazar también el nombre de dominio de ejemplo con su nombre de dominio real).

https://yoursite.com/register/?subscription_plan=[ID_NUMBER]

Por ejemplo, si el ID del plan de membresía es 24481, la URL correcta sería la siguiente:

https://yoursite.com/register/?subscription_plan=24481

Una vez que tenga el enlace directo a su plan de suscripción, inserte manualmente ese enlace en el botón de cualquier widget de tabla de precios que esté usando:

Repita el proceso para otros planes de suscripción.

Cree su tabla de precios de Elementor hoy

Eso concluye nuestra guía sobre cómo usar Elementor Pro y las suscripciones de miembros pagas para crear una tabla de precios para su sitio web de membresía.

O, si está de acuerdo con la inserción manual de enlaces, también puede usar un complemento Elementor de tabla de precios de terceros con la versión gratuita de Elementor.

Lo mejor de las suscripciones de membresía paga es que se integra con Elementor en más formas que solo tablas de precios.

También puede usar sus planes de membresía para restringir el acceso a ciertas secciones, columnas y widgets de Elementor ( así como otro contenido en su sitio ), personalizar sus páginas de registro e inicio de sesión, y más.

Tenemos una guía completa sobre cómo crear un sitio web de membresía de Elementor con suscripciones de miembros pagas.

Si está listo para comenzar, instale las suscripciones de pago para miembros hoy.

Suscripciones de miembros pagadas Pro

Las suscripciones de miembros pagadas le permiten crear una tabla de precios de Elementor para mostrar sus planes de suscripción

Obtener el complemento

O descarga la versión GRATIS