O Bloco de 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 texto rico, dando a você controle total sobre como seu conteúdo é apresentado.
Se você está exibindo recursos de produtos, resumindo pontos importantes ou criando uma lista de comparação, o Bloco de Lista facilita a criação de listas visualmente envolventes que combinam com sua marca — sem nenhum código.
Adicionando o Bloco de Lista às suas Páginas
Siga estas etapas para adicionar um Bloco de Lista à sua página SeedProd:
Etapa 1: Adicionar 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
Uma vez adicionado, clique no bloco Lista para abrir suas configurações. Na aba Conteúdo, crie seus itens de 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 texto rico para negrito, itálico, links e mais) e escolher 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 10px a 72px.
- 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 aba Avançado, você pode personalizar a aparência visual do seu Bloco de Lista.
Estilos:
- Layout da Lista: Escolha entre Vertical (itens empilhados um sobre o outro) ou Horizontal (itens exibidos em uma linha lado a lado).
- Tipografia: Personalize a família da fonte, peso, tamanho, altura da linha, espaçamento entre letras e transformação de texto para o texto da sua lista.
- Cor do Texto: Defina a cor do texto dos itens da lista.
- Sombra do Texto: Adicione uma sombra ao texto da sua lista. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extra Grande ou Dupla Extra Grande.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu Bloco de Lista (Superior, Direita, Inferior, Esquerda).
- Preenchimento: Ajuste o espaçamento interno dentro do seu Bloco de Lista (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu Bloco de Lista, 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 da lista. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar na área de trabalho: Oculte o bloco de Lista em telas de área de trabalho.
- Ocultar no tablet: Oculte o bloco de Lista em dispositivos tablet.
- Ocultar no celular: Oculte o bloco de 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 de Lista rolar para a visualização, como Bounce, Fade In, Zoom In, Rotate In e muitos outros.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Lista e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Lista à sua página! O bloco de 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 tipografia para criar uma lista que se encaixe perfeitamente na sua página.