Principais conclusões
- Esses 10 exemplos de alternância de conteúdo para o Elementor são demonstrações ao vivo construídas com o widget Master Addons Toggle Content, e cada uma alterna entre duas versões da mesma seção.
- Uma alternância de conteúdo funciona melhor quando ambas as opções compartilham um layout e apenas os detalhes mudam, como preços mensais e anuais ou medições métricas e imperiais.
- O preço é o exemplo mais comum de alternância de conteúdo, e duas das dez demonstrações são switches de faturamento, uma rotulada como Mensal e Anual e outra rotulada como Faturada Mensal e Faturada Anualmente.
- As alternâncias de conteúdo também se adequam ao conteúdo sem preços, incluindo tabelas de especificações, resultados trimestrais, menus de almoço e jantar e mensagens escritas para dois públicos.
- Cada opção no widget Alternar conteúdo contém texto do editor ou um modelo de seção, página ou widget salvo, portanto, qualquer layout do elementor pode ficar atrás do switch.
Os exemplos de alternância de conteúdo para Elementor que funcionam melhor mostram o mesmo tipo de conteúdo em ambos os lados do switch Os planos permanecem os mesmos e o preço muda A tabela permanece a mesma e as unidades mudam Abaixo estão dez demos ao vivo que seguem essa regra, com o que cada um muda e quando usar o padrão.
Todos os dez foram construídos com Alternar conteúdo, o widget de alternância de conteúdo no Master Addons Pro. Clique em qualquer link de demonstração para tentar a troca sozinho.
Índice
O que faz um bom conteúdo alternar
Vale a pena usar uma alternância de conteúdo quando um visitante precisa de uma das duas versões e nunca de uma só vez Se as pessoas quiserem ler os dois lados juntos, coloque-os lado a lado.
| Padrão | Opção esquerda | Opção certa | Exemplo abaixo |
|---|---|---|---|
| Período de cobrança | Mensal | Anual | 1, 2 |
| Unidades | Métrica | Imperial | 4 |
| Escopo de dados | Operações próprias | Cadeia de suprimentos | 5 |
| Audiência | Como uma equipe | Por conta própria | 7 |
| Período de tempo | Q3 | Q4 | 6 |
| Processo | Feito sob encomenda | Em estoque | 8 |
| Categoria | Residencial | Cívico | 9 |
| Hora do dia | Almoço | Jantar | 10 |
| Plano escopo | solteiro | Ilimitado | 3 |
Exemplos de alternância de preços
O preço é onde a maioria das pessoas encontra pela primeira vez uma alternância de conteúdo Dois períodos de faturamento compartilham os mesmos planos, portanto, um switch reduz pela metade o número de cartões na página.
1. cartões de preços de interruptores de cobrança
Um switch Mensal e Anual fica acima dos cartões Starter, Team e Scale No Anual, cada cartão mostra a taxa mensal mais baixa e uma linha com o total anual e a economia O plano do meio carrega um rótulo Mais Escolhido em ambos os lados.
Use-o para: SaaS e preços de assinatura. Abra a demonstração do Billing Switch.
2. alternar conteúdo com preços
Este usa os rótulos Faturado Mensalmente e Faturado Anualmente acima dos planos Pessoal e de Startup Cada opção contém um conjunto completo de tabelas de preços, portanto toda a linha muda com um clique.
Use-o para: páginas preços construído a partir de Widgets de tabela de preços. Abra a demonstração de preços.
3. alternar conteúdo arredondado
Um interruptor arredondado se move entre um plano Único e um plano Ilimitado, cada um com seu próprio título e descrição Os dois lados diferem por escopo, portanto, o interruptor não está vinculado a um período de faturamento.
Use-o para: planos que diferem por escopo, como único e ilimitado. Abra a demo Rounded.
Exemplos de alternância de tabelas e dados
As tabelas são o segundo ajuste natural As linhas e colunas ficam paradas e os números mudam, para que os visitantes mantenham seu lugar quando acionam o interruptor.
Tabela de especificações do interruptor de unidade 4
Uma mesa de geometria de bicicleta alterna entre Métrica e Imperial. Alcance, pilha e as outras medidas são listadas para três tamanhos de quadro, com uma coluna de tolerância Os compradores em diferentes países cada um obtém números que podem ler.
Use-o para: especificações do produto, tabelas de tamanhos e receitas. Abra a demonstração do Unit Switch.
Tabela de referência de comutação de dados 5
Um relatório de emissões alterna entre Operações próprias e cadeia de suprimentos Cada lado lista as fontes, sua participação na linha de base e a tonelagem Duas tabelas que preencheriam uma tela cada agora compartilham uma.
Use-o para: relatórios, benchmarks e números antes e depois. Abra a demonstração do Data Switch. Se os dados nunca mudarem com um clique, uma planície widget mesa é mais simples.
6. métricas de troca trimestral Bento
Uma grade bento de resultados alterna entre Q3 e Q4. receita, crescimento e as notas sob cada figura mudam todas juntas, Lê-se como um painel e ocupa o espaço de um.
Use-o para: atualizações para investidores, relatórios anuais e estatísticas mensais. Abra a demonstração do Quarter Switch.
Quer todos os dez em um só lugar? O Alternar página do widget Conteúdo tem um visualizador que carrega cada demonstração, além das configurações completas do widget.
Exemplos de alternância de público e categoria
O último grupo muda a mensagem Cada lado é escrito para um leitor diferente ou cobre uma categoria diferente.
Painel de recursos do interruptor de público 7
Uma página de curso alterna entre Como uma equipe e Por conta própria Cada lado tem seu próprio título, ponto de prova e lista de recursos Os visitantes escolhem a versão que os descreve e pulam o resto.
Use-o para: produtos vendidos tanto para empresas quanto para particulares. Abra a demonstração do Audience Switch.
Linha do tempo da etapa da rota do pedido 8
Uma lista de passos numerados alterna entre Feito sob encomenda e Em estoque Os passos e a espera diferem em cada rota, e o layout permanece o mesmo Ele responde “o que acontece depois que EU ordeno?” para ambos os tipos de comprador.
Use-o para: envio, integração e qualquer processo com dois caminhos. Abra a demonstração da Rota de Pedidos. Para uma única sequência datada, o Widget de linha do tempo é o melhor ajuste.
Cartão de sobreposição de switch de projeto 9
Um estúdio de arquitetura troca um grande cartão de projeto entre Residencial e Cívico Cada lado tem sua própria foto, localização, ano e resumo Dois estudos de caso se encaixam onde normalmente se iria.
Use-o para: portfólios com duas linhas de trabalho. Abra a demonstração do Project Switch.
10. Lista de menus de comutação de serviço
Um menu de restaurante alterna entre Almoço e Jantar As horas de serviço sentam-se sob o interruptor, e os pratos e preços mudam com ele Os hóspedes vêem o menu para a refeição que estão planejando.
Use-o para: restaurantes, salões e qualquer negócio com duas listas de serviços. Abra a demonstração do Service Switch.
Como construir um desses exemplos
Cada exemplo é um widget Alternar conteúdo com dois itens Construa a primeira versão da sua seção, copie-a, altere os detalhes e coloque uma versão em cada item.
- Arrastar Alternar conteúdo na página e nomeie os dois itens do Elementos lista.
- Para conteúdo curto, saia Tipo no Conteúdo e escreva no editor.
- Para um layout completo, defina Tipo para Template e escolha um modelo salvo para cada item.
- Definir Índice Ativo em Alternar configurações para escolher a opção que aparece primeiro.
- Estile o interruptor nas seções Alternador, Indicador e Etiquetas da guia Estilo.
A versão de preços tem algumas etapas extras, que abordamos como adicionar um preço mensal e anual alternar no Elementor. A lista completa de configurações está no Alternar documentação de conteúdo.
Perguntas frequentes
O que é uma alternância de conteúdo no Elementor?
Um content toggle é um widget com um switch e dois ou mais rótulos Clicar em um rótulo mostra o conteúdo dessa opção e oculta os outros Elementor não inclui um, portanto, vem de um addon como Master Addons Pro, onde o widget é chamado Toggle Content.
O que posso colocar dentro de uma alternância de conteúdo?
No Toggle Content, cada opção contém texto do editor integrado ou um modelo Elementor salvo. Como um modelo pode conter quaisquer widgets, a opção pode ser uma tabela de preços, uma tabela de dados, um formulário, uma galeria de imagens ou uma seção inteira.
Uma alternância de conteúdo pode ter três opções?
Sim. clique em Adicionar item na lista Elementos para adicionar uma terceira ou quarta opção. Um switch lê melhor com dois ou três rótulos. Para mais do que isso, as guias geralmente são mais fáceis de serem digitalizadas pelos visitantes.
Essas demonstrações de alternância de conteúdo estão disponíveis como modelos?
As demonstrações são mostradas no visualizador de modelos na página do widget Alternar conteúdo, onde você pode abrir cada uma. Elas foram construídas com o widget Alternar conteúdo, que faz parte do Master Addons Pro.
Pensamentos finais
Os dez exemplos de alternância de conteúdo acima cobrem três trabalhos: alternar um preço, alternar um conjunto de números e alternar uma mensagem Em cada um, o layout mantém-se imóvel e apenas os detalhes se movem, de modo que o interruptor é fácil de seguir.
Experimente-os no Alternar página do widget Conteúdo, então construa o seu próprio com duas versões de uma seção que você já possui.
Leitura relacionada
