Como adicionar uma alternância mensal e anual a uma tabela de preços de elementadores

Principais conclusões

• Uma alternância de tabela de preços Elementor precisa de dois conjuntos de cartões, um com preços mensais e outro com preços anuais, e um controle que mostre um conjunto de cada vez.
• O plugin Elementor gratuito pode fazer isso com o widget Tabs aninhados: uma guia por período de faturamento, uma linha de cartões de preços dentro de cada guia, sem complemento.
• O widget Alternar conteúdo no Master Addons Pro oferece ao switch a aparência que as pessoas esperam, um comprimido com rótulos mensais e anuais e carrega cada conjunto a partir de um modelo de seção salvo.
• O widget Master Addons Pricing Table contém um preço por cartão e não possui switch de cobrança próprio, portanto, cada rota nesta página o combina com um segundo widget.
• Os modelos salvos de um contêiner Elementor são armazenados como o tipo Container, e a lista da seção Alternar conteúdo mostra apenas modelos de tipo de seção, portanto, salve a linha de preços como uma seção.
• Mostre os preços anuais por mês com uma nota de” anual para que os dois estados alternados se comparem como iguais.

Uma alternância de tabela de preços Elementor é um interruptor acima dos planos que inverte cada cartão entre os preços mensais e anuais Elementor não tem widget que faz isso por conta própria, e a maioria das tabelas de preços addon detém um único preço por cartão, então a alternância é sempre construída a partir de duas partes: dois conjuntos de cartões e algo que mostra um conjunto de cada vez.

Este guia constrói o alternar de três maneiras nos mesmos três planos A Rota 1 usa o widget gratuito Elementor Nested Tabs A Rota 2 usa o widget Alternar Conteúdo de Adições Mestres com dois modelos de seção salvos, que é a versão que se parece com um verdadeiro switch de faturamento A Rota 3 cobre widgets que são fornecidos com um switch integrado e o que você desiste por conveniência.

Como funciona uma alternância de preços no Elementor

Uma alternância de preços são duas linhas de preços completas e um controle que oculta uma delas Quando um visitante clica Anualmente, a linha mensal fica oculta e a linha anual é mostrada Nada recalcula É por isso que os cartões mensais e anuais podem ser construídos com qualquer widget de preços, incluindo aqueles com um único campo de preços.

O controle é a parte que muda entre as rotas Tabs aninhadas dá-lhe botões de tabulação Toggle Content dá-lhe um interruptor de pílula com um indicador deslizante Um widget com um interruptor embutido dá-lhe o seu próprio controle e seu próprio design de cartão Os cartões embaixo ficar o mesmo nas duas primeiras rotas, então escolha os cartões primeiro e o controle segundo.

Uma regra vale para cada rota: mostre o preço anual como um valor por mês com uma nota de que é cobrado anualmente. “$39 /mês, faturado anualmente” próximo a “$49 /mês” permite ao leitor ver a economia sem fazer aritmética. Um total anual próximo a um preço mensal parece mais caro mesmo quando é mais barato.

Passo 1: construa os cartões mensais e anuais

Construa a linha mensal primeiro, depois duplique-a e altere os preços No Elementor, adicione um contêiner com três contêineres infantis lado a lado e solte um Widget de tabela de preços em cada. defina o nome do plano, legenda, preço e período na guia Conteúdo. Dê a tabela de destaque do cartão do meio e uma faixa de opções para que a linha tenha um plano padrão.

Agora clique com o botão direito do mouse no contêiner pai e escolha Duplicar. Na cópia, abra cada cartão e altere o preço. Para faturamento anual, ligue o switch de Venda, insira o preço mensal como Preço Original e o preço anual por mês como Preço e defina o período para “/mês, faturado anualmente”. O valor mensal riscado faz a venda.

Agora você tem duas linhas na página As rotas 1 e 2 decidem como elas são mostradas uma de cada vez.

Rota 1: Guias Aninhadas (Elementor Livre)

O widget Tabs aninhados no plugin Elementor gratuito coloca um contêiner dentro de cada guia, de modo que toda uma linha de preços cabe em um painel de guias Ele precisa do recurso Flexbox Container, que está ativado por padrão nas instalações atuais do Elementor.

1. Arraste o Guias widget (o aninhado, com o ícone do contêiner) na página acima onde o preço deve ficar.
2. Na guia Conteúdo, renomeie a guia no 1 para Mensal e a guia no 2 para Anual. Exclua a terceira guia.
3. Arraste o contêiner de preços mensais para o painel de guias mensais e o contêiner anual para o painel Anual. Use o Navegador (o painel de camadas) se for difícil atingir o alvo de queda.
4. Na guia Estilo, defina o alinhamento do título da guia como central e dê à guia ativa sua cor de destaque.

O resultado funciona, e não custa nada O que não parece é um interruptor de faturamento Tabs leia como navegação, então alguns visitantes perdem que os preços anuais existem Você pode estilizar os dois títulos de tabulação em uma forma de pílula com raio de borda e cores de fundo, que se aproxima Em telefones, o Nested Tabs se transforma em um acordeão abaixo do ponto de interrupção definido por você, então verifique se o painel Mensal é o aberto por padrão.

Rota 2: Alternar conteúdo com dois modelos de seção

O widget Alternar conteúdo mostra uma das várias partes de conteúdo por trás de um interruptor de pílula, e cada peça pode ser um modelo Elementor salvo Duas linhas de preços salvos mais este widget é uma alternância mensal e anual que se parece com as das páginas de preços SaaS. Toggle Content faz parte Complementos mestres Pro.

Salve cada linha como um modelo de seção

1. Clique com o botão direito do mouse na alça do contêiner de preços mensais e escolha Gravar como Modelo.
2. Diga o nome de “Pricing monthly” e salve. Faça o mesmo para o contêiner anual que “Pricing annual”.
3. Aberto Modelos > Modelos salvos no administrador do WordPress e verifique a coluna Tipo.

Elementor salva um contêiner como o Recipiente digite, e a lista de seções do widget Alternar conteúdo mostra apenas modelos do Seção digite, e é por isso que a etapa 3 verifica a coluna Se seus dois modelos dizem Container, o dropdown “Choose section” não mostrará nada A correção é construir a linha dentro de uma seção legada (Elementor > Configurações > Recursos, ou adicionar uma seção do Navigator) antes de salvar, ou escolher Página como o tipo de modelo no widget e salvar as linhas como modelos de página em vez disso Ambas as rotas funcionam; a Seção um mantém os padrões do widget.

Adicionar o widget Alternar Conteúdo

1. Arrastar Alternar conteúdo do grupo Master Addons para a página onde pertence o preço Exclua os dois contêineres de preços originais, já que os modelos agora os contêm.
2. No Elementos repetidor, abra o primeiro item Defina o Rótulo para Mensal, digite para Modelo, tipo de modelo para Seçãoe escolha “Pricing monthl” na seção Escolha.
3. Abra o segundo item, defina o rótulo como Anual e escolha “Pricing annual”.
4. Sob Alternar configurações, deixe o Índice Ativo em 1, então o Mensal aparece primeiro e defina a cor ativa para o seu sotaque.

Visualize a página e clique em Anualmente. A linha mensal desliza para fora e a linha anual desliza para dentro, com o indicador de comprimidos se movendo. A guia Estilo controla o tamanho do comprimido, as cores do rótulo e o espaço entre o interruptor e o conteúdo.

O widget não enfileira a própria folha de estilo do modelo salvo, portanto, se um cartão parecer sem estilo no front-end, defina suas cores nos controles do widget em vez das configurações da página do modelo ou limpe o cache Elementor do Elementor > Ferramentas Se você editar um plano mais tarde, edite o modelo salvo em Modelos > Modelos salvos, não na página; a página apenas faz referência a ele.

Rota 3: um widget de preços com um switch integrado

Alguns addons enviam um widget de preços com um switch de cobrança já dentro dele, então você insere um preço mensal e um preço anual por cartão e o widget compra o toggle HT Mega tem um widget Flip Switcher Pricing Table que funciona dessa maneira A maioria dos outros, incluindo Addons Essenciais, Addons Premium, PowerPack e The Plus Addons, faz o que o Route 2 faz: um widget alternador ou switcher separado (Pro em cada um desses plugins) envolvendo dois conjuntos de cartões A tabela de preços listas de comparação de widgets que planejam cada widget alternador fica.

O widget Master Addons Pricing Table tem um campo de preço por cartão e nenhum switch embutido, e é por isso que este guia o emparelha com o Toggle Content A troca com um switch embutido é design: você está limitado aos layouts de cartão desse widget e seu estilo de switch Com dois conjuntos de cartões, cada controle no widget Pricing Table permanece disponível, incluindo os cinco layouts, a fita e as dicas de ferramentas de recursos, e você pode alterar o switch sem reconstruir os cartões.

Se você quiser alternar dentro de um widget, verifique três coisas antes de confirmar: se o preço anual do widget pode mostrar o valor mensal riscado, se o texto do rótulo do switch é editável e como os cartões são empilhados em um telefone.

Seções de preços de alternância prontas

O Biblioteca de modelos de complementos mestres tem seções de preços com o botão já com fio. “Billing Switch Pricing Cards” usa Toggle Content com duas linhas de preços, e “Billing Toggle Pricing Tabs” faz o mesmo com guias, incluindo uma opção de três anos Importar um de Modelos > Master Addons Modelos no editor, em seguida, trocar os nomes dos planos, preços e recursos O post de modelos de tabela de preços tem mais seções como essas, com as configurações por trás de cada um.

Ambas as seções são construídas com widgets Master Addons Pro, portanto, precisam do plugin Pro ativo para importar.

Qual rota escolher

Quer o interruptor sem construí-lo duas vezes? O Alternar widget Conteúdo mostra qualquer modelo salvo por trás de um comprimido mensal e anual, então o Tabela Preços as cartas mantêm todos os cinco layouts, a fita e as dicas de ferramentas.

Perguntas frequentes

Pensamentos finais

Uma alternância mensal e anual em uma tabela de preços do Elementor é de duas linhas de preços e um controle As guias aninhadas oferecem o controle gratuitamente e são lidas como guias O conteúdo alternado, no Master Addons Pro, oferece um interruptor de pílula e carrega cada linha de um modelo de seção salvo, com a única captura de que os modelos devem ser do tipo Seção. Um widget com o switch integrado economiza uma etapa e custa a escolha do layout.

Comece com os cartões no Página do widget da tabela de preços, que tem um alternador ao vivo construído exatamente desta forma, em seguida, adicione o interruptor que se encaixa no seu plano.

Leitura relacionada

• Design da tabela de preços: 10 dicas com exemplos
• Alternar widget Conteúdo
• Alternar documentação de conteúdo
• Preços Tabela documentação widget
• Como criar guias no Elementor