O bloco de Acordeão permite adicionar seções de texto expansíveis e recolhíveis às suas páginas do SeedProd. Este bloco ajuda a organizar grandes quantidades de conteúdo em um formato compacto e amigável, que os visitantes podem explorar no seu próprio ritmo.
Os blocos de Acordeão são perfeitos para FAQs, listas de recursos, especificações de produtos, termos e condições, ou qualquer conteúdo onde você queira apresentar informações claramente sem sobrecarregar os visitantes com longos textos. 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 de Acordeão às Suas Páginas
Siga estas etapas para adicionar um bloco de Acordeão à sua página do SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Acordeão na seção desejada da sua página.
O bloco de Acordeão aparece no painel de Blocos e pode ser arrastado para qualquer seção ou coluna da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionado, clique no bloco de Acordeão para abrir suas configurações. Na aba 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 de acordeão adicionais ao seu bloco. Você pode adicionar quantos itens precisar 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 este valor para mais espaço ou diminua-o para um layout mais compacto.
Personalização de Ícones:
- Alinhamento do Ícone: Escolha onde o ícone de expandir/recolher aparece em relação ao título do acordeão (geralmente alinhamento à esquerda ou à direita).
- Ícone Fechado: Selecione qual ícone é exibido quando uma seção do acordeão está recolhida. Isso ajuda os usuários a identificar seções que podem expandir.
- Cor do Ícone Fechado: Escolha a cor do ícone quando o acordeão estiver em seu estado recolhido.
- Ícone Aberto: Selecione qual ícone é exibido quando uma seção do acordeão está expandida, fornecendo feedback visual sobre o estado da seção.
- Cor do Ícone Aberto: Escolha a cor do ícone quando o acordeão estiver em seu estado expandido.
A aba Conteúdo oferece opções para gerenciar itens do acordeão, ajustar a tipografia, controlar o espaçamento e personalizar os ícones de expandir/recolher.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Acordeão:
Estilos:
- Tipografia: Ajuste a família da fonte, peso, estilo e outras propriedades de texto para o conteúdo do acordeão.
- Cor do Texto: Define 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 os títulos/cabeçalhos do acordeão
- Cor do Cabeçalho: Escolha a cor dos cabeçalhos do acordeão quando eles estiverem no estado fechado
- Cor do Cabeçalho Aberto: Defina uma cor diferente para os cabeçalhos quando suas seções estiverem expandidas, fornecendo feedback visual claro
- Cor de Fundo: Adicione uma cor de fundo às suas seções de 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 texto do seu acordeão para 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 de acordeão (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o acordeão e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno dentro das suas seções de acordeão (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo e as bordas do acordeão
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de acordeão. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por 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 no Desktop: Oculte o bloco de acordeão em telas de desktop
- Ocultar no Tablet: Oculte o bloco de acordeão em dispositivos tablet
- Ocultar no Celular: Oculte o bloco de 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 entra na visualização. Isso adiciona interesse visual e chama a atenção para o seu conteúdo
A aba Avançado oferece extensas opções de estilo, incluindo tipografia, cores, espaçamento e efeitos visuais para combinar com sua marca.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Acordeão e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Acordeão à sua página! Este bloco versátil ajuda você a apresentar grandes quantidades de informações em um formato limpo e amigável que incentiva o engajamento sem sobrecarregar os visitantes. Experimente diferentes cores de cabeçalho, estilos de ícone e opções de espaçamento para criar um acordeão que combine com sua marca e atenda ao seu público.