O bloco Acordeão permite adicionar seções de texto expansíveis e recolhíveis às suas páginas SeedProd. Este bloco ajuda a organizar grandes quantidades de conteúdo em um formato compacto e fácil de usar, que os visitantes podem explorar no seu próprio ritmo.
Os blocos em acordeão são perfeitos para perguntas frequentes, listas de recursos, especificações de produtos, termos e condições ou qualquer conteúdo em que você deseja apresentar informações de forma clara, sem sobrecarregar os visitantes com grandes blocos de texto. Ao permitir que os usuários cliquem para revelar apenas as informações de que precisam, você cria uma experiência de página mais limpa e envolvente.
Adicionando o bloco Acordeão às suas páginas
Siga estas etapas para adicionar um bloco Acordeão à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Acordeão na seção desejada da sua página.
O bloco Acordeão aparece no painel Blocos e pode ser arrastado para qualquer seção ou coluna da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Acordeão para abrir suas configurações. Na guia Conteúdo, você pode gerenciar seus itens de acordeão e personalizar sua aparência.
Itens do acordeão:
- Acordeão 1, Acordeão 2, etc.: Clique em cada item do acordeão para editar seu título e conteúdo. Cada item representa uma seção recolhível que os usuários podem expandir ou recolher.
- Adicionar novo item: clique neste botão para adicionar seções adicionais de acordeão ao seu bloco. Você pode adicionar quantos itens forem necessários para organizar seu conteúdo de forma eficaz.
Tipografia e espaçamento:
- Tamanho da fonte: ajuste o tamanho do texto dentro do conteúdo do seu acordeão para corresponder às suas preferências de design.
- Espaço entre: controle o espaçamento vertical entre os itens do acordeão (o padrão é 24 pixels). Aumente esse valor para obter mais espaço ou diminua-o para obter um layout mais compacto.
Personalização de ícones:
- Alinhamento do ícone: escolha onde o ícone de expandir/colapsar aparece em relação ao título do acordeão (normalmente alinhamento à esquerda ou à direita)
- Ícone fechado: selecione qual ícone será exibido quando uma seção do acordeão estiver recolhida. Isso ajuda os usuários a identificar as seções que podem ser expandidas.
- Cor do ícone fechado: escolha a cor do ícone quando o acordeão estiver em seu estado recolhido.
- Ícone aberto: selecione qual ícone será exibido quando uma seção do acordeão for expandida, fornecendo feedback visual sobre o estado da seção.
- Cor do ícone aberto: escolha a cor do ícone quando o acordeão estiver expandido.
A guia Conteúdo oferece opções para gerenciar itens do acordeão, ajustar a tipografia, controlar o espaçamento e personalizar os ícones de expandir/colapsar.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco Acordeão:
Estilos:
- Tipografia: ajuste a família de fontes, a espessura, o estilo e outras propriedades do texto para o conteúdo em acordeão.
- Cor do texto: defina a cor do texto dentro das seções de conteúdo do acordeão.
- Tipografia do cabeçalho: controle as propriedades da fonte especificamente para títulos/cabeçalhos em acordeão.
- Cor do cabeçalho: escolha a cor dos cabeçalhos do acordeão quando estiverem fechados.
- Cor do cabeçalho aberto: defina uma cor diferente para os cabeçalhos quando suas seções estiverem expandidas, proporcionando um feedback visual claro.
- Cor de fundo: adicione uma cor de fundo às suas seções em acordeão para uma melhor separação visual.
- Cor do divisor: escolha a cor das linhas que separam os itens do acordeão
- Sombra do texto: adicione efeitos de sombra ao seu texto em acordeão para dar profundidade e legibilidade
- Sombra: aplique efeitos de sombra a todo o bloco de acordeão ou a itens individuais
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco sanfonado (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o sanfonado e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno nas seções do acordeão (superior, direito, inferior, esquerdo). Isso cria um espaço entre o conteúdo e as bordas do acordeão.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de acordeão. 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 acordeão. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, aria-label|Seção de perguntas frequentes)
Visibilidade do dispositivo:
- Ocultar na área de trabalho: Oculte o bloco de acordeão nas telas da área de trabalho
- Ocultar no tablet: Oculte o bloco acordeão em dispositivos tablet.
- Ocultar no celular: Oculte o bloco acordeão 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 acordeão é exibido. Isso adiciona interesse visual e chama a atenção para o seu conteúdo.
A guia Avançado oferece opções abrangentes de estilo, incluindo tipografia, cores, espaçamento e efeitos visuais para combinar com a sua marca.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Acordeão e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Acordeão à sua página! Esse bloco versátil ajuda a apresentar grandes quantidades de informações em um formato limpo e fácil de usar, que incentiva o engajamento sem sobrecarregar os visitantes. Experimente diferentes cores de cabeçalho, estilos de ícones e opções de espaçamento para criar um acordeão que combine com sua marca e atenda ao seu público.