O bloco Lista permite criar listas baseadas em ícones para destacar recursos, benefícios ou qualquer conjunto de itens em sua página. Cada item da lista combina um ícone personalizável com rich text, oferecendo controle total sobre como seu conteúdo é apresentado.
Quer você esteja apresentando recursos de produtos, resumindo pontos-chave ou criando uma lista comparativa, o bloco Lista facilita a criação de listas visualmente atraentes que combinam com a sua marca — sem necessidade de programação.
Adicionando o bloco Lista às suas páginas
Siga estas etapas para adicionar um bloco Lista à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Lista na seção desejada da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionar, clique no bloco Lista para abrir suas configurações. Na guia Conteúdo, crie os itens da sua lista e configure a aparência geral.
Lista:
- Itens: cada item da lista tem um ícone e um campo de texto. Clique em um item para expandir suas configurações e editar o texto (usando o editor de rich text para negrito, itálico, links e muito mais) e escolha um ícone usando o seletor de ícones. Você pode arrastar itens para reordená-los, duplicar um item ou excluí-lo.
- Adicionar novo item: Clique neste botão para adicionar outro item à sua lista.
- Cor do ícone: defina a cor aplicada a todos os ícones da lista.
- Tamanho da fonte: controle o tamanho do texto para todos os itens da lista, de 10 px a 72 px.
- Espaço entre: Ajuste o espaçamento entre os itens da lista. Suporta valores por dispositivo para desktop, tablet e celular.
- Alinhamento: defina o alinhamento horizontal da lista — Esquerda, Centro ou Direita. Suporta alinhamento por dispositivo.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco Lista.
Estilos:
- Layout da lista: escolha entre Vertical (itens empilhados uns sobre os outros) ou Horizontal (itens exibidos em uma linha lado a lado).
- Tipografia: personalize a família de fontes, a espessura, o tamanho, a altura da linha, o espaçamento entre letras e a transformação do texto da sua lista.
- Cor do texto: defina a cor do texto do item da lista.
- Sombra do texto: adicione uma sombra ao texto da sua lista. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande ou 2X Grande.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco Lista (superior, direito, inferior, esquerdo).
- Preenchimento: ajuste o espaçamento interno do seu bloco Lista (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Lista, 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 da lista. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculta o bloco Lista nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco Lista em dispositivos tablet.
- Ocultar no celular: oculte o bloco Lista em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha um efeito de animação que seja reproduzido quando o bloco Lista for exibido, como Saltar, Aparecer gradualmente, Ampliar, Girar e muitos outros.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Lista e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Lista à sua página! O bloco Lista é uma maneira versátil de apresentar recursos, benefícios ou qualquer conjunto de pontos em um formato visualmente atraente. Experimente diferentes ícones, layouts, cores e tipografias para criar uma lista que se adapte perfeitamente à sua página.