Lista de itens

O que é o elemento Lista de Itens no GemPages?

O elemento Lista de Itens permite apresentar informações em formato de lista, com cada item começando com um ícone. Você pode escolher ícones da biblioteca de ícones do GemPages para manter a consistência visual ou, se preferir ícones ou imagens personalizados, usar o Elemento de lista avançada ao invés.

Este elemento é ideal para:

• Destacando características do produto
• Listando benefícios ou pontos de serviço
• Apresentando processos passo a passo
• Criação de conteúdo compacto e digitalizável

Como adicionar o elemento Lista de Itens à sua página

Para adicionar o elemento Lista de itens à sua página, siga as etapas abaixo:

Passo 1:   De você Painel GemPages, selecione a página que deseja editar e abra-a no Editor.

Passo 2:  No Editor, vá para a seção Lista de conteúdo na barra lateral esquerda ou pesquise por “Lista de itens” na barra de pesquisa.

Passo 3: Arraste e solte o elemento Lista de Itens no local desejado na página.

Configurar as definições do elemento do item

Quando o elemento estiver na sua página, clique nele. A barra lateral esquerda exibirá duas abas principais: Configurações e Avançado:

A guia Configurações

1. Gerenciamento de itens

Esta seção permite adicionar, remover ou reordenar itens da lista:

• Adicionar um item: Passe o mouse sobre um item existente e clique no ícone Duplicar para criar uma cópia exata.
• Remover um item: Clique no ícone Lixeira no item que deseja excluir e confirme.
• Reordenar itensPasse o cursor sobre o item que deseja mover. Clique e mantenha o botão do mouse pressionado., Em seguida arraste para cima ou para baixo Para alterar sua posição na lista, solte o botão do mouse quando o item estiver na ordem desejada.

2. Ícone

• Tipo de ícone: Tipo de ícones de cada item na lista de itens. Existem 2 opções de tipo de ícone:

Ícones correspondentes: todos os ícones na lista de itens serão iguais.

Ícones diferentes: Cada item na Lista de itens tem um ícone individual.

• Fonte do ícone: Selecione o ícone de exibição

Se o tipo de ícone = Ícones correspondentes: Todos os ícones na lista de itens serão iguais.

Se tipo de ícone = Ícones diferentes: Cada item na Lista de itens tem um ícone individual.

O usuário escolhe manualmente cada ícone para cada item.

• Tamanho do ícone: Insira o tamanho preferido para o íconeO tamanho padrão do ícone é 16px.

• Cor do ícone: Escolha a cor do seu ícone na paleta ou insira o código hexadecimal da cor na caixa.

• Posição: Posição do ícone em relação ao texto em cada item da lista. Há 2 opções de posicionamento: Alinhar no topo, Alinhar no centro.

• Acolchoamento: Ajuste o espaço dentro do contêiner do ícone. Isso controla a proximidade do ícone em relação às bordas do contêiner. Aumente o preenchimento para obter mais espaço ao redor do ícone; diminua para um ajuste mais justo.

• Contexto: Adicione um fundo atrás do ícone.

Cor: Selecione uma cor de fundo sólida ou gradiente.

Imagem: Carregue uma imagem para aparecer atrás do ícone.

• Fronteira: Adicione uma borda ao redor do contêiner do ícone. Você pode definir:

Estilo de borda (sólido, tracejado, pontilhado)

Espessura da borda (em pixels)

Cor da borda

• Corner: Ajuste a redondeza dos cantos do contêiner do ícone definindo um raio de borda.

3. Estilo de texto

Neste ponto, você tem a capacidade de editar a tipografia do texto. Aqui estão as opções disponíveis:

• Estilos: Selecione o estilo desejado entre as opções predefinidas, que incluem 6 estilos de título e 3 estilos de parágrafo.
• fonte: Escolha a fonte que deseja usar para o texto. Se quiser usar uma fonte que não esteja listada, você pode consultar a orientação fornecida em como adicionar uma fonte personalizada no Editor ver 7.
• Dimensões:: Ajuste o tamanho da fonte especificando um valor em pixels.
• Cor: Modifique a cor do texto conforme sua preferência.

Clique no botão “Mostrar mais” para revelar mais opções de personalização:

• Peso da fonte: Escolha a espessura de fonte desejada no menu suspenso fornecido.
• Altura da linha: Ajuste a altura do texto especificando um valor percentual.
• Espaçamento entre Letras: Modifique o espaçamento entre as letras inserindo um valor em pixels.
• Transformação de Texto: Transforme o texto de uma das seguintes maneiras: Nenhuma transformação aplicada, Maiúsculas, Minúsculas, Capitalizar.

4. Espaçamento de itens

Ajuste o espaçamento vertical entre os itens da lista usando o controle deslizante.

Padrão: 12px.

5. Estilo do item

Espaço entre ícones e texto – controla o espaço horizontal entre o ícone e o texto.

Padrão: 8px.

6. Fundo

• Cor: Clique no seletor de cores para escolher um fundo de cor sólida ou gradiente.
  
• Imagem: Carregue uma imagem de fundo do seu dispositivo. O tamanho recomendado depende do layout do seu design.

7. Tamanho

• Largura: Insira um valor numérico (px) ou escolha:

Ajustar conteúdo: adapta a largura ao tamanho do conteúdo.

Completo: estende-se até a largura total do contêiner.

• Acolchoamento: Ajuste o espaçamento interno entre o conteúdo e a borda do elemento.
• Arranjo: Alinhe todo o elemento à esquerda, ao centro ou à direita.

8. Forma

• Fronteira: Adicione uma borda, escolha o estilo (sólido, tracejado, pontilhado), defina a espessura e a cor.
• Corner: Arredonde os cantos definindo um valor de raio (por exemplo, 5px para arredondamento leve, 50px para arredondamento total).
  
• Shadow: Adicione efeitos de sombra para profundidade; ajuste o desfoque, a dispersão e a cor.

9. Alinhar

• Se largura = 100%, o alinhamento é fixo e não pode ser alterado.
  
• Caso contrário, o alinhamento padrão é Esquerda, mas você pode alternar para Centro ou Direita, conforme necessário.

A guia Avançado

Para personalização avançada, acesse a aba Avançado. Aqui você pode:

• Adicione CSS personalizado para um estilo único.
• Controle a visibilidade por tipo de dispositivo.
• Aplique animações e efeitos de interação.

Para obter instruções detalhadas, consulte nosso Configurações avançadas artigo.