Conclusiones clave
- Un interruptor de precios de Elementor se construye a partir de dos partes: dos conjuntos de tablas de precios, una mensual y otra anual, y un widget de cambio que muestra un conjunto a la vez.
- El widget de tabla de precios de Elementor Pro no tiene cambios mensuales ni anuales, por lo que el cambio proviene de un widget de cambio de contenido o de tablas de precios colocadas dentro del widget Tabs.
- El widget Master Addons Toggle Content carga una plantilla guardada en cada opción, usando el control Tipo establecido en Plantilla y un Tipo de plantilla de Sección, Página o Widget.
- En los sitios Elementor que utilizan contenedores, guarde cada conjunto de tablas de precios como plantilla de página, porque la lista de secciones en Alternar contenido solo muestra las plantillas guardadas con el tipo de sección.
- La configuración del Índice Activo en Alternar contenido decide qué período de facturación ven los visitantes primero, con 1 para la primera opción y 2 para la segunda.
Para agregar un cambio de precios de Elementor, cree sus planes mensuales y anuales como dos plantillas guardadas, luego cargue ambos en un widget de cambio de contenido. Los visitantes hacen clic en Mensual o Anual y los precios se intercambian en su lugar. La página mantiene una pantalla alta y nadie tiene que leer seis columnas de precios a la vez.
Este tutorial utiliza la tabla de precios y Alternar contenido widgets de complementos maestros y termina con una ruta sin complementos a través del widget Tabs. Todo fue probado en Elementor 4.3.
Tabla de contenidos
Lo que necesitas antes de empezar
Necesita Elementor, un widget de tabla de precios y un widget que cambia el contenido. Elementor Pro tiene un widget de tabla de precios, pero ni Elementor ni Elementor Pro tienen el conmutador.
- Tablas de precios. Esta guía utiliza el Widget de tabla de precios de complementos maestros. La tabla de precios de Elementor Pro o los contenedores simples con encabezados también funcionan.
- El interruptor. Esto es Alternar contenido, del cual forma parte Complementos maestros Pro.
- Tus precios. Decide primero el descuento anual. Dos meses de descuento, que es aproximadamente el 17 por ciento, es una opción común.
Cómo agregar un cambio de precios en Elementor
Toda la construcción toma cinco pasos: hacer los planes mensuales, guardarlos, hacer los planes anuales, guardarlos y luego conectar ambos al interruptor.
Paso 1: cree los planes mensuales
Cree una nueva página o abra un borrador en blanco y edítelo con Elementor. Agregue un contenedor con tres columnas y arrastre un widget de tabla de precios a cada una. Complete el nombre del plan, el precio, el texto de facturación y la lista de funciones.
Cree un plan completamente, luego duplíquelo dos veces y cambie los detalles. Eso mantiene alineadas las filas de funciones. Encender ¿mesa destacada? y la cinta del plan que quieres que la gente elija.
Paso 2: Guarde los planes mensuales como plantilla
Haga clic en la flecha al lado del botón Publicar y elija Guardar como plantilla. Nómbralo Planes de Precios Mensuales y guárdalo.
Guardar de esta manera crea una plantilla de página. Eso importa, porque Alternar contenido enumera plantillas por tipo. Su lista de secciones solo muestra plantillas que se guardaron con el tipo de sección. En un sitio que utiliza contenedores, al hacer clic derecho en un contenedor y guardarlo se crea una plantilla de contenedor, y esa no aparece en la lista de secciones. Una plantilla de página siempre se muestra en Página.
Paso 3: construye y guarda los planes anuales
Manténgase en el mismo borrador. Cambie cada precio a la tarifa anual y cambie el texto de facturación a Facturado anualmente. Luego use Guardar como plantilla nuevamente y nombre este Plan de precios anuales.
Ahora tienes dos plantillas con el mismo diseño y números diferentes. Puedes eliminar la página del borrador.
Paso 4: agregue contenido de alternancia y conecte las plantillas
Abra su página de precios reales en Elementor. Busque en el panel de widgets Alternar contenido y arrástrelo hasta donde deberían aparecer los planes. Si aún no tiene una página de precios, comience desde una de estas Plantillas de páginas de precios de Elementor.
- En el Elementos lista, haga clic en el primer elemento y cámbielo Etiqueta a Mensual.
- Conjunto Tipo a Plantilla.
- Conjunto Tipo de plantilla a Página.
- En Elija página, elija Planes de precios mensuales.
- Haga clic en el segundo artículo, etiquételo anualmente y elija Planes de precios anuales de la misma manera.
Actualice la página y ábrala en la interfaz. Haga clic anualmente y las tres tablas cambiarán a los precios anuales.
Paso 5: establezca la opción predeterminada y diseñe el interruptor
Abierto Alternar configuración en la pestaña Contenido. Índice activo elige la opción que muestra cuándo se carga la página, 1 para Mensual y 2 para Anual. Posición pone el interruptor antes o después de las mesas, y Velocidad del indicador establece la rapidez con la que se desliza el resaltado, 0,3 segundos de forma predeterminada.
Luego vaya a la pestaña Estilo. El Alternador la sección tiene la forma del interruptor (Ronda o Cuadrada), color de fondo, alineación, Zoom para tamaño y Ancho. Las secciones de Indicadores y Etiquetas debajo establecen el color resaltado y los colores de las etiquetas para los estados normal y activo.
¿Necesitas las mesas primero? El Widget de tabla de precios de Elementor page muestra sus cinco diseños, cintas, precios de venta y información sobre herramientas.
Videotutorial
Este video muestra el widget Alternar contenido que se agrega y configura en el editor Elementor.
Un cambio de precio sin complemento
Puede crear un cambio de precios con el propio Elementor Widget de pestañas, porque cada pestaña acepta cualquier widget que contenga. Los visitantes ven títulos de dos pestañas donde un complemento muestra un interruptor deslizante y los precios se intercambian de la misma manera.
- Arrastra el Pestañas vaya a la página y elimine la tercera pestaña.
- Cambie el nombre de las dos pestañas Mensual y Anual.
- Haga clic en la pestaña Mensual y cree sus columnas de precios dentro de su área de contenido.
- Duplica ese contenedor en la pestaña Anual y cambia los precios.
- En la pestaña Estilo, centre los títulos de las pestañas y redondee sus esquinas para que se lean como un interruptor.
La compensación es el mantenimiento. Ambos conjuntos de tablas viven en la página misma, por lo que el editor se alarga y no puedes reutilizar los mismos conjuntos en otra página como puedes hacerlo con las plantillas.
| Alternar contenido con plantillas | Widget de pestañas | |
|---|---|---|
| Parece | Un interruptor deslizante con indicador | Títulos de dos pestañas |
| Donde viven las mesas | En plantillas guardadas | Dentro de las pestañas de la página |
| Reutilizar en otras páginas | Sí, elige las mismas plantillas | Copie y pegue el widget |
| Más de dos opciones | Sí, agrega elementos | Sí, agrega pestañas |
| Necesidades | Complementos maestros Pro | Sólo elemental |
Cinco cosas que hacen que una alternancia de precios funcione
Un cambio de precio sólo ayuda si los visitantes lo entienden en un segundo. Estos cinco hábitos cubren la mayor parte de eso.
- Di el ahorro con palabras. Ponga “Facturado anualmente, dos meses de descanso” bajo el precio. Un cambio por sí solo no le dice a la gente por qué anualmente es mejor.
- Mantenga el diseño idéntico. Mismos planos, mismo orden, mismas filas de funciones en ambos conjuntos. Sólo los números deben moverse cuando se activa el interruptor.
- Elija el valor predeterminado a propósito. Establezca el índice activo en el período de facturación que desea que compre la mayoría de las personas.
- Compruébalo en un teléfono. En la sección Estilo de etiquetas, Apilar puede apilar las etiquetas en el móvil si no caben seguidas.
- El cambio no guarda una opción. Cada visita comienza con la opción predeterminada, así que apunte cada botón al enlace de pago para su propio período de facturación.
Para obtener consejos sobre diseño y copia de las tablas, consulte nuestro Consejos para la tabla de precios de Elementor. Si sus planes difieren más por características que por precio, a tabla comparativa debajo del interruptor ayuda a las personas a verificar los detalles.
Preguntas frecuentes
¿el widget de la tabla de precios de Elementor tiene un cambio mensual y anual?
No. El widget de tabla de precios en Elementor Pro muestra un precio por tabla y no tiene cambio de facturación. Para alternar entre precios mensuales y anuales, coloque dos conjuntos de tablas dentro del widget Tabs o cárgalas en un widget de alternancia de contenido desde un complemento.
¿puedo agregar un cambio de precio en Elementor sin un complemento?
Sí. Utilice el widget Tabs, nombre las pestañas Mensual y Anual y cree un conjunto de columnas de precios dentro de cada pestaña. Muestra títulos de pestañas donde un complemento muestra un interruptor deslizante y los visitantes todavía ven un conjunto de precios a la vez.
¿por qué falta mi plantilla guardada en la lista Alternar contenido?
Alternar plantillas de listas de contenido por tipo. Un contenedor guardado por sí solo se almacena como una plantilla de contenedor, que la lista de secciones no muestra. Guarde el diseño con Guardar como plantilla desde la flecha Publicar, que crea una plantilla de página, y establezca el tipo de plantilla en la página.
¿puede la opción de precios tener tres opciones, como mensual, anual y de por vida?
Sí. Haga clic en Agregar elemento en la lista Elementos de Alternar contenido y conecte una tercera plantilla. Con tres o más opciones, los visitantes hacen clic en la etiqueta que desean y al hacer clic en la etiqueta activa pasan a la siguiente.
¿Google ve ambos conjuntos de precios?
Sí. Alternar contenido imprime todas las opciones en la página HTML y muestra una a la vez, por lo que tanto los precios mensuales como los anuales están en la fuente. Haga que la versión que más le interese sea la opción predeterminada.
Pensamientos finales
Una palanca de precios de Elementor necesita dos plantillas guardadas y un cambio. Cree los planes mensuales, guárdelos como plantilla de página, repita para cada año, luego cargue ambos en Alternar contenido y establezca el índice activo.
El Alternar página de widget de contenido tiene una demostración de cambio de facturación en vivo en la que hacer clic antes de crear la suya propia.
Lectura relacionada
