Se quiser imaginar um cenário em que os usuários possam alternar entre diferentes estados ou opções, um botão de alternância é a solução perfeita. Esses botões oferecem aos usuários acesso rápido às opções sem ocupar muito espaço na página. Por exemplo, eles são perfeitos para alternar entre preços mensais e anuais, visualizações detalhadas e resumidas ou preferências de exibição, como modos claro e escuro.
Embora o WordPress não ofereça suporte nativo a botões de alternância, o bloco Tabbed Content do Ultimate Blocks facilita a replicação de sua funcionalidade. O plug-in é versátil e, ao contrário de muitas outras opções, oferece um amplo conjunto de blocos que permite transformar simples guias em estados alternáveis com apenas alguns ajustes.
Este guia é apresentado para mostrar como utilizar esse plug-in para obter um efeito de botão de alternância elegante e fácil de usar. Vamos começar.
Etapa 1: Instalar o plug-in Ultimate Blocks
Basta começar fazendo login no painel do WordPress e, em seguida, navegar até Plugins > Adicionar novo. Na barra de pesquisa, digite "Blocos definitivose, quando ele aparecer, clique em Instalar. Após a instalação, ativar o plug-in.
Etapa 2: Adicionar o bloco de conteúdo com guias
Quando o Ultimate Blocks estiver ativo, decida onde adicionar o botão de alternância. Você pode abrir uma nova página ou publicação ou continuar com uma já existente.
No editor do WordPress, digite /conteúdo da aba ou clique no botão + ícone para abrir a biblioteca de blocos. Se estiver usando o método do ícone +, digite "conteúdo com guias" na barra de pesquisa para localizar o Bloco de conteúdo com guias e insira-o em sua página ou publicação.
Depois de adicionar o bloco ao editor, esta é a interface que você terá no editor.
Neste ponto, o bloco ainda não se assemelha a um botão de alternância. O que precisamos agora é de alguns ajustes nas configurações do bloco para aproximá-lo de uma configuração que imite um botão de alternância que permita aos usuários alternar entre as seções de conteúdo visíveis.
Etapa 3: Personalizar e configurar o bloco de conteúdo com guias
Com o bloco selecionado, vamos para a seção configurações à direita. Selecione o Comprimidos nas configurações para fazer com que cada guia se pareça com um botão em vez de uma guia.
Em seguida, precisamos ajustar o bloco alinhamento para o centro para que ele se pareça mais com um botão de alternância.
Agora, para criar um estado de alternância, precisamos ter pelo menos duas guias. Basta clicar na guia + sinal ao lado da primeira guia para adicionar outra guia. Se quiser ter mais guias, siga o mesmo procedimento.
Depois de fazer isso, temos guias separadas com as quais trabalhar. O que precisamos agora é transformar essas guias em botões de alternância com a ajuda das configurações de cores.
Mas primeiro, renomear as guias com rótulos diferentes para representar diferentes estados de alternância e, em seguida, vá para configurações de estilo na barra lateral direita. A partir daí, use o botão Configurações de cores para adicionar cores contrastantes a cada guia e tornar a guia ativa mais distinta.
Neste ponto, seu botão de alternância está pronto. Tudo o que resta agora é adicionar seu conteúdo. Clique dentro de cada guia para adicionar conteúdo específico. Você pode incluir texto, imagens, vídeos ou quaisquer blocos que atendam às suas necessidades. Basta clicar no + sinal e adicione o bloco relacionado ao seu conteúdo preferido.
Depois disso, adicione conteúdo relacionado a cada guia. Aqui, criamos um exemplo para uma seção de preços usando blocos de parágrafo, título e lista em ambas as guias. É possível especificar a cor de cada bloco na seção de cores e, se achar que é necessário mais destaque para essas guias, altere o fundo do conteúdo de todo o bloco.
Etapa 4: Visualizar e publicar
Use o Prévia para testar como as guias funcionam como um botão de alternância. Verifique se cada guia abre a seção de conteúdo correta. Quando estiver satisfeito com a aparência e a funcionalidade, clique em Publicar ou atualizar se for uma postagem existente. O efeito do botão de alternância agora está ativo e pronto para oferecer aos seus usuários uma maneira fácil de alternar entre as seções de conteúdo.
Conclusão
Seguindo essas etapas, você poderá transformar as guias padrão em um botão de alternância totalmente funcional. Essa configuração aprimorará o layout de seu conteúdo e o tornará acessível e fácil de navegar. Seus visitantes agora podem alternar entre opções instantaneamente, seja explorando preços diferentes, visualizando detalhes adicionais ou escolhendo suas preferências de exibição. Essa pequena adição traz clareza e flexibilidade ao seu site e permite que os usuários explorem o conteúdo de acordo com seus próprios termos, mantendo a página limpa e organizada.
