Principais conclusões
- Uma alternância de preços Elementor é construída a partir de duas partes: dois conjuntos de tabelas de preços, uma mensal e outra anual, e um widget de switch que mostra um conjunto por vez.
- O widget Tabela de Preços do Elementor Pro não tem troca mensal e anual, portanto, a alternância vem de um widget de alternância de conteúdo ou de tabelas de preços colocadas dentro do widget Tabs.
- O widget Master Addons Toggle Content carrega um modelo salvo em cada opção, usando o controle Tipo definido como Modelo e um Tipo de Modelo de Seção, Página ou Widget.
- Nos sites Elementor que usam contêineres, salve cada conjunto de tabelas de preços como um modelo de página, porque a lista Seção no Toggle Content mostra apenas modelos salvos com o tipo Seção.
- A configuração Índice Ativo no Toggle Content decide qual período de faturamento os visitantes veem primeiro, com 1 para a primeira opção e 2 para a segunda.
Para adicionar uma alternância de preços do Elementor, crie seus planos mensais e seus planos anuais como dois modelos salvos e, em seguida, carregue ambos em um widget de alternância de conteúdo Os visitantes clicam em Mensal ou Anual e os preços são trocados. A página permanece com uma tela de altura e ninguém precisa ler seis colunas de preços ao mesmo tempo.
Este tutorial usa a Tabela de Preços e Alternar conteúdo widgets de Master Addons, e termina com uma rota sem complementos através do widget Tabs Tudo foi testado no Elementor 4.3.
Índice
O que você precisa antes de começar
Você precisa do Elementor, um widget de tabela de preços e um widget que troca o conteúdo O Elementor Pro tem um widget de Tabela de Preços, mas nem o Elementor nem o Elementor Pro têm o switch.
- Tabelas de preços. Este guia usa o Widget de tabela de preços da Master Addons. Tabela de Preços da Elementor Pro ou contêineres simples com cabeçalhos também funcionam.
- O interruptor. Este é o Toggle Content, que faz parte do Complementos mestres Pro.
- Seus preços. Decida primeiro o desconto anual. Dois meses de folga, que é cerca de 17%, é uma escolha comum.
Como adicionar um preço alternar no Elementor
Toda a construção leva cinco etapas: fazer os planos mensais, salvá-los, fazer os planos anuais, salvá-los e, em seguida, conectar ambos à alternância.
Passo 1: Construa os planos mensais
Crie uma nova página, ou abra um rascunho em branco, e edite-o com o Elementor Adicione um contêiner com três colunas e arraste um widget Tabela de Preços para cada um Preencha o nome do plano, o preço, o texto de cobrança e a lista de recursos.
Construa um plano totalmente, depois duplique-o duas vezes e altere os detalhes Isso mantém as linhas de recursos alinhadas Ative Destacar Mesa? e a fita para o plano que você quer que as pessoas escolham.
Passo 2: Salve os planos mensais como modelo
Clique na seta ao lado do botão Publicar e escolha Gravar como Modelo. Nomeie-o Planos de Preços Mensais e salve-o.
Salvar desta forma cria um modelo de Página. Isso importa, porque Alternar Conteúdo lista modelos por tipo Sua lista de Seção mostra apenas modelos que foram salvos com o tipo Seção Em um site que usa contêineres, clicar com o botão direito em um contêiner e salvá-lo cria um modelo de Contêiner, e esse não aparece na lista de Seção Um modelo de Página sempre mostra em Página.
Etapa 3: Construa e salve os planos anuais
Mantenha-se no mesmo rascunho Altere cada preço para a taxa anual e altere o texto de faturamento para Faturado anualmente Em seguida, use Salvar como modelo novamente e nomeie este um Planos de preços anuais.
Agora você tem dois modelos com o mesmo layout e números diferentes Você pode excluir a página de rascunho.
Passo 4: Adicionar Alternar Conteúdo e conectar os modelos
Abra sua página de preços reais no Elementor Pesquise no painel de widgets para Alternar conteúdo e arraste-o para onde os planos devem aparecer Se você ainda não tem uma página de preços, comece a partir de um destes Modelos de páginas de preços do elementor.
- No Elementos listar, clique no primeiro item e altere o seu Etiqueta para Mensal.
- Definir Tipo para Modelo.
- Definir Tipo de modelo para Página.
- Em Escolher página, escolha Planos de Preços Mensais.
- Clique no segundo item, rotule-o como Anual e escolha Planos de Preços Anuais da mesma maneira.
Atualize a página e abra-a no front-end Clique em Anualmente e as três tabelas mudam para os preços anuais.
Passo 5: Defina a opção padrão e estilize o switch
Aberto Alternar configurações na guia Conteúdo. Índice Ativo escolhe a opção que mostra quando a página carrega, 1 para Mensal e 2 para Anual. Posição coloca o interruptor antes ou depois das mesas e Velocidade do indicador define a rapidez com que o destaque desliza, 0,3 segundos por padrão.
Em seguida, vá para a guia Estilo. O Alternador a seção tem formato de interruptor (Rodado ou Quadrado), cor de fundo, alinhamento, Zoom para tamanho e Largura. As seções Indicador e Etiquetas abaixo definem a cor de destaque e as cores do rótulo para os estados normal e ativo.
Precisa das mesas primeiro? O Widget de tabela de preços Elementor a página mostra seus cinco layouts, fitas, preços de venda e dicas de ferramentas de recursos.
Tutorial vídeo
Este vídeo mostra o widget Alternar conteúdo sendo adicionado e configurado no editor Elementor.
Uma alternância de preços sem um complemento
Você pode construir uma mudança de preços com a própria Elementor Widget de guias, porque cada guia aceita qualquer widget dentro dele Os visitantes vêem dois títulos de guias onde um complemento mostra um switch deslizante, e os preços trocam da mesma maneira.
- Arraste o Guias widget na página e exclua a terceira guia.
- Renomeie as duas guias Mensalmente e Anualmente.
- Clique na guia Mensal e crie suas colunas de preços dentro de sua área de conteúdo.
- Duplique esse contêiner na guia Anual e altere os preços.
- Na guia Estilo, centralize os títulos das guias e rode seus cantos para que sejam lidos como um interruptor.
O trade-off é a manutenção Ambos os conjuntos de tabelas vivem na própria página, então o editor fica longo, e você não pode reutilizar os mesmos conjuntos em outra página da maneira que você pode com modelos.
| Alterne Conteúdo com modelos | Widget de guias | |
|---|---|---|
| Parece | Um interruptor deslizante com um indicador | Dois títulos de tabulação |
| Onde moram as mesas | Em modelos salvos | Dentro das guias da página |
| Reutilizar em outras páginas | Sim, escolha os mesmos modelos | Copie e cole o widget |
| Mais de duas opções | Sim, adicione itens | Sim, adicione guias |
| Necessidades | Complementos mestres Pro | Somente elementor |
Cinco coisas que fazem funcionar uma alternância de preços
Uma alternância de preços só ajuda se os visitantes a entenderem em um segundo Esses cinco hábitos cobrem a maior parte disso.
- Diga a economia em palavras Coloque “Faturado anualmente, dois meses de folga do” abaixo do preço. Uma mudança por si só não diz às pessoas por que o ano é melhor.
- Mantenha o layout idêntico Mesmos planos, mesma ordem, mesmas linhas de recursos em ambos os conjuntos Somente os números devem se mover quando o interruptor virar.
- Escolha o padrão de propósito Defina o Índice Ativo para o período de faturamento que você deseja que a maioria das pessoas compre.
- Verifique em um telefone Na seção de estilo Etiquetas, Empilhar ligado pode empilhar as etiquetas no celular se elas não caberem em uma linha.
- O switch não salva uma escolha Toda visita começa na opção padrão, então aponte cada botão no link de checkout para seu próprio período de faturamento.
Para obter conselhos sobre layout e cópia das próprias tabelas, consulte nosso Dicas da tabela de preços do elementor. Se seus planos diferirem mais por recursos do que por preço, a tabela comparação sob a alternância ajuda as pessoas a verificar os detalhes.
Perguntas frequentes
O widget Elementor Price Table tem uma alternância mensal e anual?
No. O widget Tabela de preços no Elementor Pro mostra um preço por tabela e não tem switch de faturamento Para alternar entre preços mensais e anuais, coloque dois conjuntos de tabelas dentro do widget Tabs ou carregue-os em um widget de alternância de conteúdo de um addon.
Posso adicionar um preço alternar no Elementor sem um plugin?
Sim. Use o widget Tabs, nomeie as guias Mensal e Anual e construa um conjunto de colunas de preços dentro de cada guia Ele mostra títulos de guias onde um complemento mostra um switch deslizante e os visitantes ainda veem um conjunto de preços por vez.
Por que meu modelo salvo está faltando na lista Alternar conteúdo?
Alternar Conteúdo lista modelos por tipo Um contêiner salvo por conta própria é armazenado como um modelo de Contêiner, que a lista Seção não mostra Salve o layout com Salvar como modelo na seta Publicar, que cria um modelo de página, e defina Tipo de modelo para página.
A alternância de preços pode ter três opções, como mensal, anual e vitalícia?
Sim. Clique em Adicionar item na lista Elementos de Alternar conteúdo e conecte um terceiro modelo Com três ou mais opções, os visitantes clicam no rótulo desejado e clicar no rótulo ativo passa para o próximo.
O Google vê os dois conjuntos de preços?
Sim. Alternar conteúdo imprime todas as opções na página HTML e mostra uma de cada vez, para que os preços mensais e anuais estejam na fonte. Faça da versão que mais lhe interessa a opção padrão.
Pensamentos finais
Uma alternância de preços do Elementor precisa de dois modelos salvos e um switch. Construa os planos mensais, salve-os como um modelo de página, repita anualmente e carregue ambos no Toggle Content e defina o Active Index.
O Alternar página do widget Conteúdo tem uma demonstração de switch de cobrança ao vivo para clicar antes de construir o seu próprio.
Leitura relacionada
