Conclusiones clave
- Una tabla de precios de Elementor necesita dos juegos de cartas, uno con precios mensuales y otro con precios anuales, y un control que muestre un juego a la vez.
- El complemento gratuito Elementor puede hacerlo con el widget Nested Tabs: una pestaña por período de facturación, una fila de tarjetas de precios dentro de cada pestaña, sin complemento.
- El widget Alternar contenido en Master Addons Pro le da al cambio el aspecto que la gente espera, una píldora con etiquetas Mensual y Anual, y carga cada conjunto desde una plantilla de sección guardada.
- El widget de la tabla de precios de complementos maestros tiene un precio por tarjeta y no tiene un interruptor de facturación propio, por lo que cada ruta en esta página lo empareja con un segundo widget.
- Las plantillas guardadas de un contenedor Elementor se almacenan como tipo de contenedor, y la lista de secciones Alternar contenido solo muestra plantillas de tipo de sección, así que guarde la fila de precios como sección.
- Muestre los precios anuales por mes con una nota “anual facturada” para que los dos estados alternos comparen me gusta con me gusta.
Un interruptor de tabla de precios de Elementor es un interruptor encima de los planes que cambia cada tarjeta entre precios mensuales y anuales. Elementor no tiene ningún widget que haga esto por sí solo, y la mayoría de las tablas de precios de complementos tienen un precio único por tarjeta, por lo que el interruptor siempre se construye a partir de dos partes: dos juegos de tarjetas y algo que muestra un juego a la vez.
Esta guía crea tres formas de alternar en los mismos tres planes. La ruta 1 utiliza el widget gratuito Elementor Nested Tabs. La ruta 2 utiliza el widget Alternar contenido de Complementos maestros con dos plantillas de sección guardadas, que es la versión que parece un interruptor de facturación real. La ruta 3 cubre widgets que se envían con un conmutador incorporado y lo que se renuncia por conveniencia.
Tabla de contenidos
Cómo funciona una modificación de precios en Elementor
Una palanca de precios consta de dos filas de precios completas y un control que oculta una de ellas. Cuando un visitante hace clic en Anual, la fila mensual se oculta y se muestra la fila anual. Nada se recalcula. Es por eso que las tarjetas mensuales y anuales se pueden crear con cualquier widget de precios, incluidos los que tienen un único campo de precio.
El control es la parte que cambia entre rutas. Las pestañas anidadas te dan botones de pestaña. Alternar contenido le brinda un interruptor de píldora con un indicador deslizante. Un widget con un interruptor incorporado le brinda su propio control y su propio diseño de tarjeta. Las tarjetas de abajo permanecen iguales en las dos primeras rutas, así que elija las tarjetas primero y el control en segundo lugar.
Se cumple una regla para cada ruta: mostrar el precio anual como una cifra mensual con una nota de que se factura anualmente. “$39 / mes, facturado anualmente” junto a “$49 / mes” permite al lector ver el ahorro sin hacer aritmética. Un total anual junto a un precio mensual parece más caro incluso cuando es más barato.
Paso 1: cree las tarjetas mensuales y anuales
Primero construye la fila mensual, luego duplícala y cambia los precios. En Elementor, agregue un contenedor con tres contenedores secundarios uno al lado del otro y suelte uno Widget de tabla de precios en cada uno. Establezca el nombre, el subtítulo, el precio y el período del plan en la pestaña Contenido. Proporcione la tabla de resaltado de la tarjeta del medio y una cinta para que la fila tenga un plan predeterminado.
Ahora haga clic derecho en el contenedor principal y elija Duplicar. En la copia, abra cada tarjeta y cambie el precio. Para la facturación anual, active el interruptor de Venta, ingrese el precio mensual como Precio original y el precio anual por mes como Precio, y establezca el período en “/mes, facturado anualmente”. La cifra mensual tachada hace la venta.
Ahora tienes dos filas en la página. Las rutas 1 y 2 deciden cómo se muestran una a la vez.
Ruta 1: Pestañas anidadas (Elementor libre)
El widget Nested Tabs en el complemento gratuito Elementor coloca un contenedor dentro de cada pestaña, por lo que una fila de precios completa cabe en un panel de pestañas. Necesita la función Flexbox Container, que está activada de forma predeterminada en las instalaciones actuales de Elementor.
- Arrastra el Pestañas widget (el anidado, con el icono del contenedor) en la página de arriba donde debe ubicarse el precio.
- En la pestaña Contenido, cambie el nombre de la pestaña #1 a Mensual y la pestaña #2 a Anualmente. Elimine la tercera pestaña.
- Arrastre el contenedor de precios mensual al panel de pestañas Mensual y el contenedor anual al panel Anual. Utilice Navigator (el panel de capas) si el objetivo de caída es difícil de alcanzar.
- En la pestaña Estilo, establezca la alineación del título de la pestaña en el centro y le dé a la pestaña activa el color de su acento.
El resultado funciona y no cuesta nada. Lo que no parece es un interruptor de facturación. Las pestañas se leen como navegación, por lo que algunos visitantes no saben que existen los precios anuales. Puedes diseñar los títulos de las dos pestañas en forma de píldora con radio de borde y colores de fondo, lo que se acerca. En los teléfonos, Nested Tabs se convierte en un acordeón debajo del punto de interrupción que estableces, así que comprueba que el panel Mensual sea el que esté abierto de forma predeterminada.
Ruta 2: alternar contenido con dos plantillas de sección
El widget Alternar contenido muestra uno de varios contenidos detrás de un cambio de píldora, y cada pieza puede ser una plantilla de Elementor guardada. Dos filas de precios guardadas más este widget son un interruptor mensual y anual que se parece a los de las páginas de precios de SaaS. Alternar contenido es parte de Complementos maestros Pro.
Guarde cada fila como plantilla de sección
- Haga clic derecho en el identificador del contenedor de precios mensual y elija Guardar como plantilla.
- Nómbralo “Precio mensual” y ahorra. Haga lo mismo con el contenedor anual que “Precio anual”.
- Abierto Plantillas > Plantillas guardadas en el administrador de WordPress y verifique la columna Tipo.
Elementor guarda un contenedor como Contenedor escriba y la lista de secciones del widget Alternar contenido solo muestra plantillas del Sección escriba, por eso el paso 3 verifica la columna. Si sus dos plantillas dicen Contenedor, el menú desplegable “Elegir sección” no mostrará nada. La solución es crear la fila dentro de una sección heredada (Elementador > Configuración > Funciones, o agregar una sección del Navegador) antes de guardarla o elegirla Página como tipo de plantilla en el widget y guarde las filas como plantillas de página. Ambas rutas funcionan; la Sección uno mantiene los valores predeterminados del widget.
Agregue el widget Alternar contenido
- Arrastrar Alternar contenido del grupo Master Addons a la página a la que pertenece el precio. Elimine los dos contenedores de precios originales, ya que las plantillas ahora los contienen.
- En el Elementos repetidor, abre el primer elemento. Establezca la etiqueta en Mensual, Escribe a Plantilla, tipo de plantilla a Seccióny elija “Precios mensuales” en la sección Elegir.
- Abra el segundo elemento, configure la etiqueta en Anualmente y elija “Precios anuales”.
- Bajo Alternar configuración, deje el índice activo en 1 para que se muestre primero el mes y configure el color activo en su acento.
Obtenga una vista previa de la página y haga clic anualmente. La fila mensual se desliza hacia afuera y la fila anual se desliza hacia adentro, con el indicador de píldora moviéndose. La pestaña Estilo controla el tamaño de la píldora, los colores de las etiquetas y el espacio entre el interruptor y el contenido.
El widget no pone en cola la propia hoja de estilo de la plantilla guardada, por lo que si una tarjeta parece sin estilo en el front-end, configure sus colores en los controles del widget en lugar de en la configuración de la página de la plantilla, o borre la caché de Elementor de Elementor > Herramientas. Si edita un plan más tarde, edite la plantilla guardada en Plantillas > Plantillas guardadas, no la página; la página solo hace referencia a ella.
Ruta 3: un widget de precios con un conmutador incorporado
Algunos complementos envían un widget de precios con un conmutador de facturación dentro, por lo que ingresa un precio mensual y un precio anual por tarjeta y el widget realiza el cambio. HT Mega tiene un widget de tabla de precios Flip Switcher que funciona de esta manera. La mayoría de los demás, incluidos Essential Addons, Premium Addons, PowerPack y The Plus Addons, hacen lo que hace Route 2: un widget de alternancia o conmutador separado (Pro en cada uno de esos complementos) que incluye dos conjuntos de tarjetas. La comparación de widgets de la tabla de precios enumera qué planifica cada widget de alternancia.
El widget de la tabla de precios de complementos maestros tiene un campo de precio por tarjeta y no tiene un conmutador incorporado, por lo que esta guía lo combina con el contenido de alternancia. La compensación con un conmutador incorporado es el diseño: está limitado a los diseños de tarjetas de ese widget y su estilo de cambio. Con dos juegos de tarjetas, todos los controles del widget de la tabla de precios permanecen disponibles, incluidos los cinco diseños, la cinta y la información sobre herramientas de funciones, y puede cambiar el conmutador sin reconstruir las tarjetas.
Si desea cambiar dentro de un widget, verifique tres cosas antes de comprometerse: si el precio anual del widget puede mostrar la cifra mensual tachada, si el texto de la etiqueta del cambio es editable y cómo se apilan las tarjetas en un teléfono.
Secciones de precios de alternancia ya preparadas
El Biblioteca de plantillas de complementos maestros tiene secciones de precios con el interruptor ya conectado. “Tarjetas de precios de cambio de facturación” utiliza contenido de alternancia con dos filas de precios, y “Tabs de precios de alternancia de facturación” hace lo mismo con pestañas, incluida una opción de tres años. Importe uno desde Plantillas > Plantillas de complementos maestros en el editor, luego intercambie los nombres, precios y características del plan. La publicación de plantillas de tabla de precios tiene más secciones como estas, con la configuración detrás de cada una.
Ambas secciones están creadas con widgets Master Addons Pro, por lo que necesitan el complemento Pro activo para importar.
Qué ruta elegir
| Si tu | Usar | Por qué |
|---|---|---|
| Ejecute Elementor gratis y quiera que se haga hoy | Ruta 1, Pestañas Anidadas | No hay complemento y las tarjetas de precios pueden ser cualquier widget. |
| Quiere un interruptor que parezca un interruptor de facturación | Ruta 2, Alternar contenido | Interruptor de pastilla, indicador deslizante, plantillas que puedes reutilizar en otras páginas. |
| Tener tres períodos de facturación o más | Ruta 2 o Ruta 1 | Ambos aceptan cualquier número de artículos; un interruptor incorporado suele tardar dos. |
| Quiere la menor cantidad de widgets en la página | Ruta 3, interruptor incorporado | Un widget por tarjeta, a costa de elegir el diseño. |
¿Quieres el interruptor sin construirlo dos veces? El Alternar widget de contenido muestra cualquier plantilla guardada detrás de una píldora mensual y anual, por lo que Tabla de precios las tarjetas conservan los cinco diseños, la cinta y la información sobre herramientas.
Preguntas frecuentes
¿elementor tiene un widget de alternancia de precios?
El widget de tabla de precios de No. Elementor Pro tiene un precio por tarjeta y no tiene interruptor de facturación. El widget Nested Tabs del complemento gratuito puede mostrar dos filas de precios como pestañas Mensual y Anual, que es la opción integrada más cercana.
¿puede la tabla de precios de complementos maestros cambiar entre mensual y anual por sí sola?
No. Cada tarjeta de la Tabla de Precios tiene un precio, un precio original de ventas y un período. Cree una fila mensual y una fila anual, guárdelas como plantilla de sección y muéstrelas a través del widget Alternar contenido de Master Addons Pro.
¿por qué falta mi plantilla guardada en el menú desplegable Alternar contenido?
Elementor guarda un contenedor como tipo de plantilla de contenedor y el menú desplegable enumera únicamente las plantillas de tipo de sección. Guarde la fila de una sección heredada o establezca el tipo de plantilla en la página del widget y guarde las filas como plantillas de página.
¿Debería el precio anual mostrar el monto total o mensual?
Muestre el monto mensual con una nota “anual facturada” y use el interruptor de Venta para calcular el precio mensual. Luego, el lector compara lo similar con lo similar y ve el ahorro en la tarjeta en lugar de calcularlo.
¿una modificación de precios perjudica al SEO?
No. Ambas filas están en la página HTML y la fila oculta está oculta con CSS, por lo que los motores de búsqueda leen todos los precios. Mantenga los nombres y precios de los planes como texto en lugar de imágenes.
Pensamientos finales
Un cambio mensual y anual en una tabla de precios de Elementor consta de dos filas de precios y un control. Nested Tabs le brinda el control de forma gratuita y se lee como pestañas. Alternar contenido, en Master Addons Pro, le brinda un interruptor de píldora y carga cada fila desde una plantilla de sección guardada, con el único inconveniente de que las plantillas deben ser del tipo de sección. Un widget con el conmutador integrado ahorra un paso y le cuesta elegir el diseño.
Comience con las cartas del Página del widget de la tabla de precios, que tiene un interruptor en vivo construido exactamente de esta manera, luego agregue el interruptor que se ajuste a su plan.
Lectura relacionada
