O Bloco de Alternância de Conteúdo permite exibir duas seções de texto diferentes com um interruptor interativo. Este bloco oferece uma maneira conveniente e eficaz de apresentar várias informações em seu site, permitindo que os usuários alternem facilmente entre diferentes áreas de conteúdo de texto.
Com o Bloco de Alternância de Conteúdo, você pode criar exibições de comparação, mostrar planos de preços alternativos, apresentar cenários de 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 de Alternância de Conteúdo à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Alternância de Conteúdo na seção desejada da sua página.
Localize o bloco de Alternância de 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
Após adicionar, clique no bloco de Alternância de Conteúdo para abrir suas configurações. Na aba 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: Insira o texto do título que aparecerá acima da primeira área de conteúdo. Este rótulo ajuda os usuários a entenderem o que 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 de modelo na primeira área de alternância.
- Conteúdo 1: Adicione seu conteúdo de texto que aparecerá quando a alternância estiver definida para a primeira posição.
Área de Conteúdo 2:
- Título 2: Insira o texto do título que aparecerá acima da segunda área de conteúdo. Este rótulo descreve a opção de conteúdo alternativa.
- Conteúdo da Seção: Escolha se deseja exibir conteúdo de texto personalizado, conteúdo existente do seu site ou partes de modelo na segunda área de alternância.
- Conteúdo 2: Adicione seu conteúdo de texto que aparecerá quando a alternância for movida para a segunda posição.
Configure os títulos e o conteúdo de texto para ambas as áreas de alternância na aba Conteúdo.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Alternância de Conteúdo:
Título / Conteúdo:
- Tipografia do Cabeçalho 1: Personalize a família da fonte, tamanho, peso, altura da linha e espaçamento entre letras para o primeiro título. Clique em Editar para acessar controles detalhados de tipografia.
- Tipografia do Cabeçalho 2: Personalize a família da fonte, tamanho, peso, altura da linha e espaçamento entre letras para o segundo título. Clique em Editar para acessar controles detalhados de tipografia.
- Tipografia do Conteúdo 1: Personalize as configurações de tipografia para a primeira área de conteúdo de texto. Clique em Editar para acessar controles detalhados de tipografia.
- Tipografia do Conteúdo 2: Personalize as configurações de tipografia para a segunda área de conteúdo de texto. Clique em Editar para acessar 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
- Cor do Conteúdo 1: Defina a cor do texto da primeira área de conteúdo
- Cor do Conteúdo 2: Defina a cor do texto da segunda área de conteúdo
- Cor de Fundo: Defina a cor de fundo de todo o bloco de Alternância de Conteúdo
Alternador:
- Estilo do Alternador: Escolha o estilo visual para o seu interruptor de alternância. 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 Alternador: Selecione o tamanho do seu interruptor de alternância. As opções incluem Grande, Médio, Pequeno e Mini para atender às necessidades do seu design
- Primeira Cor de Fundo: Defina a cor de fundo da primeira posição de alternância (quando a Área de Conteúdo 1 estiver ativa)
- Segunda Cor de Fundo: Defina a cor de fundo da segunda posição de alternância (quando a Área de Conteúdo 2 estiver ativa)
- Cor do Alternador: Defina a cor do próprio elemento do interruptor de alternância
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Alternância de Conteúdo (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o alternador e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno do seu bloco de Alternância de Conteúdo (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo de texto e as bordas do bloco
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Alternância de Conteúdo. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de 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 alternador. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-section|comparison)
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Alternância de Conteúdo em telas de desktop
- Ocultar no Tablet: Oculte o bloco de Alternância de Conteúdo em dispositivos tablet
- Ocultar no Celular: Oculte o bloco de Alternância de 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 a Alternância de Conteúdo rola para a visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitos outros. Isso ajuda a chamar a atenção para seu alternador interativo e cria interesse visual
Personalize a tipografia, as cores, a aparência do interruptor de alternância e o espaçamento na guia Avançado.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Alternância de Conteúdo e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Alternância de Conteúdo à sua página! O bloco de Alternância de Conteúdo aprimora o engajamento 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 de alternância, 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.