O bloco Alternar conteúdo permite exibir duas seções de texto diferentes com um botão interativo. Esse bloco oferece uma maneira prática e eficaz de apresentar vários conjuntos de informações em seu site, permitindo que os usuários alternem facilmente entre diferentes áreas de conteúdo de texto.
Com o bloco Alternar conteúdo, você pode criar exibições comparativas, mostrar planos de preços alternativos, apresentar cenários antes e depois ou fornecer qualquer tipo de conteúdo de texto alternável. Isso cria uma experiência de navegação organizada, maximizando o valor do espaço da sua página.
Adicionando o bloco de alternância de conteúdo às suas páginas
Siga estas etapas para adicionar um bloco Content Toggle à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Alternar conteúdo na seção desejada da sua página.
Localize o bloco Alternar conteúdo no painel de blocos e arraste-o para o local desejado na página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Alternar conteúdo para abrir suas configurações. Na guia Conteúdo, você pode configurar as duas áreas de conteúdo de texto entre as quais os usuários alternarão.
Área de conteúdo 1:
- Título 1: Digite o texto do título que aparecerá acima da primeira área de conteúdo. Esse rótulo ajuda os usuários a entenderem qual conteúdo estão visualizando.
- Conteúdo da seção: escolha se deseja exibir conteúdo de texto personalizado, conteúdo existente do seu site ou partes do modelo na primeira área de alternância.
- Conteúdo 1: Adicione o conteúdo de texto que aparecerá quando o botão estiver na primeira posição.
Área de conteúdo 2:
- Título 2: Digite o texto do título que aparecerá acima da segunda área de conteúdo. Esse rótulo descreve a opção de conteúdo alternativo.
- Conteúdo da seção: escolha se deseja exibir conteúdo de texto personalizado, conteúdo existente do seu site ou partes do modelo na segunda área de alternância.
- Conteúdo 2: Adicione o conteúdo de texto que aparecerá quando o botão for alternado para a segunda posição.
Configure os títulos e o conteúdo de texto para ambas as áreas de alternância na guia Conteúdo.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco Alternar conteúdo:
Título / Conteúdo:
- Cabeçalho 1 Tipografia: personalize a família de fontes, tamanho, espessura, altura da linha e espaçamento entre letras para o primeiro título. Clique em Editar para acessar os controles detalhados de tipografia.
- Cabeçalho 2 Tipografia: personalize a família de fontes, tamanho, espessura, altura da linha e espaçamento entre letras para o segundo título. Clique em Editar para acessar os controles detalhados de tipografia.
- Conteúdo 1 Tipografia: personalize as configurações de tipografia para a primeira área de conteúdo de texto. Clique em Editar para acessar os controles detalhados de tipografia.
- Conteúdo 2 Tipografia: personalize as configurações de tipografia para a segunda área de conteúdo de texto. Clique em Editar para acessar os controles detalhados de tipografia.
- Cor do título 1: defina a cor do texto do primeiro título para combinar com o design da sua página.
- Cor do título 2: defina a cor do texto do segundo título para combinar com o design da sua página.
- Conteúdo 1 Cor: defina a cor do texto para a primeira área de conteúdo
- Cor do conteúdo 2: defina a cor do texto para a segunda área de conteúdo
- Cor de fundo: defina a cor de fundo para todo o bloco Alternar conteúdo.
Switcher:
- Estilo do interruptor: escolha o estilo visual do seu interruptor. As opções incluem Redondo (interruptor circular), Quadrado (interruptor retangular) e Caixa de rótulo (interruptor baseado em texto com estilo de caixa).
- Tamanho do interruptor: Selecione o tamanho do seu interruptor. As opções incluem Grande, Médio, Pequeno e Mini para atender às suas necessidades de design.
- Primeira cor de fundo: defina a cor de fundo para a primeira posição do botão (quando a Área de conteúdo 1 estiver ativa)
- Segunda cor de fundo: defina a cor de fundo para a segunda posição do botão (quando a Área de conteúdo 2 estiver ativa)
- Cor do seletor: defina a cor do próprio elemento do seletor
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco Alternar conteúdo (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o botão alternar e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno do seu bloco Alternar conteúdo (superior, direito, inferior, esquerdo). Isso cria um espaço entre o conteúdo do texto e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco Content Toggle. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação JavaScript.
- Classe personalizada: adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos personalizados: adicione quaisquer atributos HTML ao elemento wrapper do botão de alternância. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-section|comparison)
Visibilidade do dispositivo:
- Ocultar na área de trabalho: Oculte o bloco Alternar conteúdo nas telas da área de trabalho
- Ocultar no tablet: Oculte o bloco Alternar conteúdo em dispositivos tablet
- Ocultar no celular: Ocultar o bloco Alternar conteúdo em dispositivos móveis
Efeitos de animação:
- Animação de entrada: escolha entre vários efeitos de animação que são reproduzidos quando o botão de alternância de conteúdo é exibido. As opções incluem saltar, aparecer gradualmente, ampliar, girar e muito mais. Isso ajuda a chamar a atenção para o seu botão de alternância interativo e cria interesse visual.
Personalize a tipografia, as cores, a aparência do botão de alternância e o espaçamento na guia Avançado.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Alternar conteúdo e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Content Toggle à sua página! O bloco Content Toggle aumenta o envolvimento do usuário, fornecendo uma maneira interativa de apresentar opções alternativas de conteúdo de texto sem sobrecarregar sua página. Experimente diferentes estilos, cores e combinações de conteúdo para criar uma comparação eficaz ou exibição de informações que atenda ao seu público.